WordPressカスタムヘッダの画像をカテゴリ別に出し分ける

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 -->

他に良いやり方があればコメント頂けると嬉しいです。

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA