WordPress のテーマ「stinger」で、オリジナルのヘッダー画像を設定し、標準で表示されているサイト名とキャッチフレーズを表示しないようにする方法を解説します。
多くのサイトがそうしているように、オリジナルヘッダー画像にトップページへのリンクを設定します。ただし、 PC ページのみにこの変更を施して、モバイルページの場合はそのままサイト名とキャッチフレーズが文字で表示されるようにしたいと思います。
→ 
オリジナルヘッダー画像を設定し、その画像にトップページのリンクを設定する
ヘッダー画像の変更とハイパーリンクの設定方法は 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=”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 –>
<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 ページはオリジナルヘッダー画像が表示され、サイト名とキャッチフレーズが非表示になり、モバイルページでは今までどうりサイト名とキャッチフレーズが表示されるようになりました。
