WordPressのカスタムヘッダーに登録された画像はデフォルトで全ページ共通となっているので、表示するページのカテゴリー属性に応じて出し分けてみます。
使用環境
| WordPress | 5.2.2 |
|---|---|
| 親テーマ | Twenty Sixteen |
| 子テーマ | カスタマイズの対象となるテーマ |
1.管理画面からヘッダー画像を登録
ヘッダー画像を管理画面＞外観＞カスタマイズ＞ヘッダー画像 からカテゴリ用の画像を登録します。この時現在のヘッダー画像はそのままにしておきます。
2.ファイル側に画像出し分けの条件分岐タグを追加する
親テーマのheader.phpをカスタマイズの対象となる子テーマにコピーしてきます。Twenty Sixteenでは98行目辺りにヘッダー画像表示の記載がありました。
<div class="header-image"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div><!-- .header-image -->
上記コードを条件分岐タグのelse: 以降に配置します。今回はカテゴリーに属しているかどうかで判断するのでin_category()を使用します。
// 記事がニュースカテゴリに属している場合
<?php if (in_category('news')) :
// ニュースカテゴリ用のヘッダ画像を表示（true）
<?php else: ?>
// 現在のヘッダーとして設定してある画像を表示（false）
<?php endif; ?>
3.デフォルトのコードを修正する
デフォルトのコードを修正しtrue部分に当て込んでいきます。
まず、imgタグのsrc属性で使われている header_image() 関数は
外観＞カスタマイズ＞ヘッダー画像＞現在のヘッダー の画像URLを取得しています。
// 関数 header_image(); // 出力結果 http://サイトURL/wp/wp-content/uploads/2019/07/ファイル名.jpg
その他のアップロード済み画像（カテゴリA、カテゴリB）のURLは
管理画面＞メディアから取得します。
取得したURLは変数$image_urlとして代入しておきます。
// アップロード画像URLを変数に代入
$image_url = esc_url( get_bloginfo('url')) . '/wp-content/uploads/2019/08/keyimage_category_a.png';
<img src="<?php echo $image_url; ?>" ・・・
次に、imgタグのsrcset属性で使われているget_custom_header()関数の中身を確認します。
// 関数 get_custom_header(); // print_rでの出力結果 ( [url] => http://サイトURL/wp/wp-content/uploads/2019/08/ファイル名.jpg [thumbnail_url] => http://サイトURL/wp/wp-content/uploads/2019/08/ファイル名.jpg [width] => 1200 [height] => 306 [ video ] => [attachment_id] => 126 )
この中で attachment_id をカテゴリAヘッダー画像用に差し替えたいので、attachment_url_to_postid()関数を使って先述の$image_urlからIDを取得します。
// カスタムヘッダーに登録している画像のURLから添付IDを取得 $attachment_id = attachment_url_to_postid( $image_url ); <img ・・・ srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $attachment_id ) ); ?>"
imgタグの修正はこれで終わりにします、次にヘッダ画像のリンク先を変更します。
4.ヘッダ画像のリンクをカテゴリ一覧に変更する
デフォルトのままだとリンク先がトップページになっているので、カテゴリ一覧に遷移する様修正します。
// お知らせカテゴリーの ID を取得 $category_id = get_cat_ID( 'news' ); // カテゴリーIDから URL を取得 $category_link = get_category_link( $category_id ); ?> <a href="<?php echo esc_url( $category_link ); ?>" title="お知らせカテゴリ一覧">
5.修正後のソースコード
修正後のコードは下記の通りになりました。
<div class="header-image">
<?php if (in_category('news')) :
// カスタムヘッダーに登録している画像のURLから添付IDを取得
$image_url = esc_url( get_bloginfo('url')) . '/wp-content/uploads/2019/08/keyimage_category_a.png';
$attachment_id = attachment_url_to_postid( $image_url );
// 指定したカテゴリーの ID を取得
$category_id = get_cat_ID( 'news' );
// このカテゴリーの URL を取得
$category_link = get_category_link( $category_id ); ?>
<a href="<?php echo esc_url( $category_link ); ?>" title="お知らせ一覧">
<img src="<?php echo $image_url; ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
<?php else: ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
<?php endif; ?>
</div><!-- .header-image -->
他に良いやり方があればコメント頂けると嬉しいです。