【WordPress】固定ページでスラッグ毎にヘッダー画像を切り替える方法

皆様ごきげんいかがでしょうか？フリーランスのWeb制作者、i-nob(@inobapen)です。

珍しく間を置かずにネタを投稿します。

WordPressで、各固定ページに違ったヘッダー画像を設置したい時に使えるコードの紹介でした。

【今回編集するファイル】

◎固定ページ表示用のテンプレートファイル（page.phpなど）

◎CSSファイル（style.cssなど）

1:テンプレートファイルのコーディング

一例ですが、以下のように書いていきます。

<?php
  global $wp_query;
  $post_obj = $wp_query->get_queried_object();
  $slug = $post_obj->post_name;
get_header(); ?>

<div class="sub-top-img <?php echo esc_attr( $slug ); ?>">
<?php the_cntent(); ?>

<?php get_footer(); ?>

$wp_queryを利用してget_queried_objectからページに関連する情報をオブジェクトとして取得し、そこからさらにpost_nameでスラッグを取得します。

固定ページ以外にも投稿で利用できる方法で、ループ外でもスラッグなどの情報を取得できます。

画像を設置したい箇所にsub-top-imgという固定クラスと、スラッグ名で可変するクラスを属性用のエスケープを通して出力します。

※今回は可変クラスが【slug】だったと仮定します

テンプレートファイルの仕込みはこんな感じでOK。

2:CSSのコーディング

次に、CSSに以下のような記述を追記します。

.sub-top-img {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100vw;
	height: 30vw;
	max-height: 350px;
}

.slug {
	background: url(./img/sub-top.jpg);
}

固定クラスのsub-top-imgにはヘッダー画像の共通の装飾設定を書いておきます。

高さ指定やbackground関連のサイズ、ポジション、リピートあたりがあると良さそうでしょうか。

下の可変クラスには画像のURLだけ書いておく…みたいな感じです。

可変クラスの記述だけを増やして対応完了ですね。

これで、固定ページのスラッグ毎にヘッダー画像が切り替わっているはずです。

3:使えるケース

サブページの少ないケースにはこの方法で十分かと思いますが、もしページ数が多いならimgタグで設置してsrcをスラッグ名で可変にする→画像のファイル名をスラッグと紐付けて命名しておいて、可変で出力できるようにする…などの対応があるかもしれません。

以上、参考になれば幸いです。