ヘッダー画像を固定ページごとにカスタマイズ

ヘッダー画像を、ページ毎にカスタマイズする方法。

通常、ヘッダー画像は、ワードプレス管理画面で設定した画像が、すべての固定ページ、投稿ページなどで表示されます。

今回の記事では、固定ページにアイキャッチ画像を設定した場合、そのアイキャッチ画像を、ヘッダー部分に表示する一つの方法をご説明しています。

（投稿ページでもこのような設定は可能ですが、修正するテンプレートファイルが多くなるので、今回の記事は、固定ページのみのの変更としました。）

カスタマイズ後のイメージ

オリジナルのヘッダー画像を、アイキャッチ画像に置き換え

オリジナルのヘッダー画像を、アイキャッチ画像に置き換え、かつ、フロントページのように、アイキャッチ画像を大きく表示

修正するテンプレートファイル

固定ページテンプレートのみを若干修正します。

修正ポイント

page.php の get_header 前に、下の構文を挿入して、ヘッダー部分に、アイキャッチ画像を表示

if (  '' !== get_the_post_thumbnail()   ) :
  add_filter('get_header_image_tag','my_get_header_image_tag');
    function my_get_header_image_tag(){
      echo get_the_post_thumbnail();
    }
endif;

次の構文を、上記の構文と合わせて、page.php の get_header 前に、挿入することにより、フロントページのように、固定ページに設定したアイキャッチ画像を大きく表示することができます。

add_filter('body_class','my_body_class');
function my_body_class($classes){
  $classes[] = 'twentyseventeen-front-page';
  return $classes;
}

（その下に続く記事のタイトルと、ヘッダー画像とのマージンが設定されていない為、別途スタイル調整の必要があります。）

カスタマイズ方法の説明

下は、フロントページのヘッダー画像表示部分のソースです。

<header id="masthead" class="site-header" role="banner"><!-- header.php -->

  <div class="custom-header"><!-- header-image.php -->
    <div class="custom-header-media"><!-- header-image.php -->
      <div id="wp-custom-header" class="wp-custom-header"><!-- get_custom_header_markup function at wp-includes/theme.php -->

        <img src="https://mtac.jp/wordpress/wp-content/uploads/sites/2/2017/01/books2000x1200.jpg" width="2000" height="1200" alt="私のワードプレス" srcset="https://mtac.jp/wordpress/wp-content/uploads/sites/2/2017/01/books2000x1200.jpg 2000w, https://mtac.jp/wordpress/wp-content/uploads/sites/2/2017/01/books2000x1200-300x180.jpg 300w, https://mtac.jp/wordpress/wp-content/uploads/sites/2/2017/01/books2000x1200-768x461.jpg 768w, https://mtac.jp/wordpress/wp-content/uploads/sites/2/2017/01/books2000x1200-1024x614.jpg 1024w" sizes="100vw" />

      </div><!-- get_custom_header_markup function at wp-includes/theme.php -->
    </div><!-- header-image.php -->

ヘッダー画像・サイトタイトルは、header.php 内から、/template-parts/header/header-image.php を呼び出して、表示させています。

ヘッダー画像の表示には、さらに、header-image.php から、 wp-includes/theme.php 内の、the_custom_header_markup -> get_custom_header_markup -> get_header_image_tag の順で、それぞれの関数を呼び出しています。そして、その get_header_image_tag へフィルターフックして、ヘッダー画像を置き換えています。

ご注意事項

• 当サイトでは、不具合なく動作していますが、他の条件下では、正しく動作しない可能性もありますので、ご自身の責任においてご利用ください。
• 不具合、記載内容間違い、もしくは、ご質問等は、お気軽にご連絡ください。

ダウンロードファイル

上記本文では、固定ページすべてがカスタマイズされてしまうため、ダウンロードファイルでは、テンプレートファイルを選択した固定ページのみが、このカスタマイズが適用されるようにしました。

上記本文のままでは、ヘッダー画像の下に、同じ画像の featured イメージが表示されてしまうため、style.css で、その featured イメージを消しています。

ダウンロードファイルをそのまま使用すると「フロントページのようにアイキャッチ画像を大きく表示」となります。通常の固定ページでのヘッダー画像を設定する場合は、テンプレートファイル page-head-img-modify.php 内の 14 ~ 22 行目を削除してください。