STINGER6が公開され、さほど期間もあかない内に今度は7がリリースされました。てなわけで私もSTINGER7に移行し、それからまあまあの期間が経ちました。
思い返せばSTINGER5時代から色々とカスタマイズを続けてきましたが、今回はヘッダー画像関連をカスタマイズしたくなったのでしちゃいました。昔を懐かしむだけの老害にならぬよう抗ったというわけです（？）。
…さて、本題です。ブログのトップページ以外にも重要なページがある場合、そこにもヘッダー画像を表示したくなることがあると思います。STINGER7では、デフォルトで「ヘッダー画像をトップページのみに表示する」か、「全ページに表示する」かを選択できます。
…が！
今回は「ヘッダー画像をトップページと幾つかの固定ページに表示し、尚且つそれぞれのページでヘッダー画像を変える」ということをしたいと思います！
phpファイルをいじるので、カスタマイズに自信がない人はやめておきましょう。その通りにやれば問題はないはずですが、各自自己責任でお願いします！
ヘッダー画像をトップページと指定の固定ページのみに表示する方法
さて、早速解説していきます。解説されるのが嫌いな人はパソコンをぶち壊してしまいましょう。
STINGER管理メニューを開く
まずはダッシュボードからSTINGER管理メニューを開きます。
そして、設定から「下層ページにもヘッダー画像を表示する」にチェックを入れます。
「あれ？ これだと全ページに表示されちゃうじゃん」と思うかも知れませんが、こうしてください。
ヘッダー画像を”トップページといくつかの指定した固定ページのみ”に表示させるわけですが、stinger7の仕組み上、ここでは一旦全ページに表示させるようにしておきます。その方が多分楽です。
st-header-image.phpを編集
ここからはphpファイルをいじります。（phpってなに？ という人は危険なので今回は諦めましょう！！！）
まずはまた管理画面のダッシュボードから「外観」→「テーマの編集」をクリックします。
そして、「st-header-image.php」という名前のphpを編集・カスタマイズします。このファイルがheaderの画像表示の処理を担っているわけです。
stinger7ではヘッダー画像を複数選んでスライドなどで次々と表示する機能がありますが、今回は「ヘッダー画像は1つだけ」というのを想定して説明していきます。
それではまず、st-header-image.phpから以下のような記述を探してください。今回はここに手を加えます。
<?php else : // 通常のヘッダー画像 ?>
<div id="gazou-wide">
<?php if ( isset($GLOBALS['stdata35']) && $GLOBALS['stdata35'] === 'on' ) {
get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー
} ?>
<img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" >
<?php if ( trim($GLOBALS['stdata35']) === '' ) {
get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー
} ?>
</div>
<?php endif; ?>
上記の部分が、ヘッダー画像の表示処理を書いた部分なわけです。ここを、下記のように変更します。
今回は、トップページの他、固定ページAと固定ページBにヘッダー画像を表示すると仮定します。
<?php else : // 通常のヘッダー画像 ?>
<div id="gazou-wide">
<?php if ( isset($GLOBALS['stdata35']) && $GLOBALS['stdata35'] === 'on' ) {
get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー
} ?>
<?php if (is_home()) {?>
<img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" >
<?php } else if (is_page('【固定ページAのID】')) { ?>
<img src="【固定ページAのヘッダー画像にしたい画像のパス】" alt="" />
<?php } else if (is_page('【固定ページBのID】')) { ?>
<img src="【固定ページBのヘッダー画像にしたい画像のパス】" alt="" />
<?php } ?>
<?php if ( trim($GLOBALS['stdata35']) === '' ) {
get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー
} ?>
</div>
<?php endif; ?>
【固定ページAのID】のように書かれている場所には、実際に自分がヘッダー画像を表示したいと思っている固定ページのIDを入力します。
【固定ページAのヘッダー画像にしたい画像のパス】のように書かれている場所には、その固定ページにヘッダー画像として表示したい画像のパスを入力します。
固定ページのIDの調べ方
固定ページのIDは、IDを調べたい固定ページのタイトルにカーソルを少しの間当てておくと、画面の下部に表示されます。
下記画像でいうと、黄色く塗られた部分の4ケタの数字が固定ページのIDになります。（わかりやすくするために黄色く塗っただけで、実際には黄色くないよ）
つまり、この場合は「7847」が固定ページのIDということになります。
画像のパスの調べ方
画像のパスは、メディアライブラリからパスを調べたい画像を選択し、「URL」という項目を見ると表示されています。ここのURLをコピペしてください。
下記画像の位置です。
メディアライブラリはダッシュボードからいけます。
ヘッダー画像を設定する固定ページを増やす方法
もっと色んな固定ページに表示したいときは、
<?php } else if (is_page('【固定ページAのID】')) { ?>
<img src="【固定ページAのヘッダー画像にしたい画像のパス】" alt="" />
<?php } else if (is_page('【固定ページBのID】')) { ?>
<img src="【固定ページBのヘッダー画像にしたい画像のパス】" alt="" />
<?php } else if (is_page('【固定ページCのID】')) { ?>
<img src="【固定ページCのヘッダー画像にしたい画像のパス】" alt="" />
<?php } else if (is_page('【固定ページDのID】')) { ?>
<img src="【固定ページDのヘッダー画像にしたい画像のパス】" alt="" />
<?php } else if
という感じで、どんどん「else if」を増やしていけばOKです。面倒ですが、普通はそんなに大量の固定ページはないと思うので平気でしょう。
作業を少し楽にするには、「固定ページのアイキャッチ画像をヘッダー画像にする」…という方法もあるのですが、少し複雑になるので今回は触れません。
応用編
ちなみに、これの応用で、色々なページにヘッダー画像を表示することができます。
「if (is_page('【固定ページのID】'))」の部分を「if (is_single('【投稿ページのID】')) 」にすれば、特定の記事のみヘッダー画像を表示…なんてこともできます。
その他、特定カテゴリのみヘッダー画像を表示なんてことや、特定の日時の投稿のみヘッダー画像を表示なんてこともできるはずです。その辺は紹介するときりがないので、各々調べてやってみてください笑。条件文さえわかれば簡単なはずです。
トップページには複数のヘッダー画像、各固定ページには1つずつヘッダー画像を表示する方法
さて、今度はトップページは複数のヘッダー画像で、特定の固定ページには決まった１つのヘッダー画像を設定する方法を説明します。私は2016/4/17現在、これをやっています。
私の場合は、ブログ記事の他、無料BGM（音楽素材）配信、ムービー配信、無料小説配信を行っているため、各コンテンツのトップページにもそれぞれの顔となるヘッダー画像を表示したかったわけです。
こんな感じで各コンテンツごとにヘッダー画像を作成しています。
なので、トップページにはすべてのヘッダー画像を設定してスライドで表示していき、各コンテンツのトップページには各コンテンツに関連するヘッダー画像1枚を固定表示…という体裁をとりました。
その場合は、同じく「st-header-image.php」の、「<?php if ( $show_as_slides ) : // スライドショー ?>」から「<?php else : // 通常のヘッダー画像 ?>」までの部分を下記のようにカスタマイズします。さっきとやることはほとんど同じです。
<?php if ( $show_as_slides ) : // スライドショー ?>
<div id="gazou-wide">
<?php if ( isset($GLOBALS['stdata35']) && $GLOBALS['stdata35'] === 'on' ) {
get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー
} ?>
<?php if (is_home()) {?>
<div id="header-slides"<?php echo $dir; ?> data-slick='<?php echo json_encode( $options, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ); ?>'>
<?php foreach ($header_images as $header) : ?>
<div class="header-slides-slide">
<img src="<?php echo esc_url($header['url']); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" >
</div>
<?php endforeach; ?>
</div>
<?php } else if (is_page('【固定ページAのID】')) { ?>
<img src="【固定ページAのヘッダー画像にしたい画像のパス】" alt="" />
<?php } else if (is_page('【固定ページBのID】')) { ?>
<img src="【固定ページBのヘッダー画像にしたい画像のパス】" alt="" />
<?php } ?>
<?php if ( trim($GLOBALS['stdata35']) === '' ) {
get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー
} ?>
</div>
これで完成です。
トップページに複数のヘッダー画像、指定の固定ページには違う複数のヘッダー画像…ということをやる方法は残念ながらわかりませんが、あんまりその需要はないと思うのでまあいいでしょう。
まとめ
以上で、ヘッダー画像を自在に変更することができます。
ヘッダー画像はブログの顔でもありますから重要です。色々工夫していい感じのデザインにしていきましょう！ 多彩な顔面を持つのです。
◆併せて読みたい
