[WordPress] サイト名とキャッチフレーズを非表示にする [stinger]



WordPress のテーマ「stinger」で、オリジナルのヘッダー画像を設定し、標準で表示されているサイト名とキャッチフレーズを表示しないようにする方法を解説します。

多くのサイトがそうしているように、オリジナルヘッダー画像にトップページへのリンクを設定します。ただし、 PC ページのみにこの変更を施して、モバイルページの場合はそのままサイト名とキャッチフレーズが文字で表示されるようにしたいと思います。

ヘッダー部分未編集 → ヘッダー部分編集後


オリジナルヘッダー画像を設定し、その画像にトップページのリンクを設定する

ヘッダー画像の変更とハイパーリンクの設定方法は stinger 公式サイトで紹介されています。

STINGER の基本カスタム > トップ画像を変更する

ヘッダー画像設定後

オリジナルヘッダー画像を設定するとこうなります。

サイト名とキャッチフレーズを非表示にする

header.php を編集します。

<div id=”container”>
<div id=”header”>
<div id=”header-in”>
<div id=”h-l”>
<p class=”sitename”><a href=”<?php echo home_url(); ?>/”>
<?php bloginfo(‘name’); ?>
</a></p>
<?php if (is_home()) { ?>
<h1 class=”descr”>
<?php bloginfo(‘description’); ?>
</h1>
<?php } else { ?>
<p class=”descr”>
<?php bloginfo(‘description’); ?>
</p>
<?php } ?>
</div>
<!– /#h-l –>
</div>
<!– /#header-in –>
</div>
<!– /#header –>

この部分を次のように変更します。

<div id=”container”>
<div id=”header”>
<div id=”header-in”>
<div id=”h-l”>
<?php if (is_mobile()) { ?>
<p class=”sitename”><a href=”<?php echo home_url(); ?>/”>
<?php bloginfo(‘name’); ?>
</a></p>
<h1 class=”descr”>
<?php bloginfo(‘description’); ?>
</h1>
<?php } ?>
</div>
<!– /#h-l –>
</div>
<!– /#header-in –>
</div>
<!– /#header –>

ブラウザ上面とヘッダー画像との間に隙間があるので無くします。変更後のソース4行目「<div id=”h-l”>」と13行目「</div>」を削除します。

以上で PC ページはオリジナルヘッダー画像が表示され、サイト名とキャッチフレーズが非表示になり、モバイルページでは今までどうりサイト名とキャッチフレーズが表示されるようになりました。





コメント

メールアドレスが公開されることはありません。