ヘッダー画像をページごとに変更したい【WordPress】

考える人
サイト制作者

ヘッダー画像をページごとに変更したいんだけど、これどうやってやるの?

この方法について解説します。

今回の記事は、少しだけプログラミングの知識が必要になります。
とはいえ調べれば簡単に変更できるかと思いますので頑張ってください。

それでは早速やっていきましょう!

ヘッダー画像をページによって変える方法

まずは簡単にヘッダー画像をページによって変える方法を説明します。

  1. 条件分岐で画像を変えたいページを指定する
  2. 1で指定したページが表示されたときの画像を決める

以上、①②のコードを繰り返し記述するだけです。

しかしこの説明だけだとわからないので、例としてコードを記載しておきます。

下記コードをfunctions.phpに記述します。

function get_header_image()
{
    global $post; // グローバル宣言をして、関数内でもグローバル変数「$post」から投稿IDを取得できるようにする

    if (is_page()) : // 固定ページが表示されている場合
        return get_the_post_thumbnail($post->ID, 'large'); // アイキャッチ画像をラージサイズで表示
    elseif (is_category('news') || is_singular('post')) : // それ以外で、もしカテゴリー名「news」のアーカイブが表示されているか、または通常の投稿ページが表示されている場合
        return '<img src="' . get_template_directory_uri() . '/img/hoge.jpg"/>'; // hoge.jpg を出力
    else : // それ以外は
        return '<img src="' . get_template_directory_uri() . '/img/fuga.jpg"/>'; // fuga.jpg を出力
    endif;
}

上記のコードを解説します。基本的にはコメントアウトに書いてある通りです。

  1. global $post でグローバル宣言をして、関数内でもグローバル変数「$post」から投稿IDを取得できるようにする
  2. もし固定ページが表示されている場合、アイキャッチ画像をラージサイズで表示
  3. それ以外で、もしカテゴリー名「news」のアーカイブが表示されているか、または通常の投稿ページが表示されている場合はhoge.jpg を出力
  4. それ以外は fuga.jpg を出力

あとは先程の関数で画像を表示させたいところに<?php get_header_image() ; ?>と記述するだけです。これでヘッダー画像をページによって変更することができました。

このコードを実際に使用する場合は、条件分岐するページを自身のサイトに置き換えてコードを直す必要があります。if文でページごとの条件分岐は下記サイトを参照してください。
Codex 条件分岐タグ

以上です。お疲れさまでした(^O^)/

この記事を書いた人

けいた

高校卒業してから15年間勤めた会社を退職→脱サラしてWeb制作。
現在はWordPressサイト構築とShopifyストア構築をメインに、副業で物販をやっています。