WordPressで各ページのh1に任意の画像を設定する方法

WordPressで各ページのh1に任意の画像を設定する方法を紹介します。

使用しているテーマとプラグイン

テーマ：Cocoon
プラグイン：Advanced Custom Fields

カスタムフィールドの設置

プラグイン『Advanced Custom Fields』をインストール＆有効化して、Field Typeをimageに設定します。
Field Labelに適当な名前を付けて保存します。

これで、各ページの編集ページの下部にカスタムフィールドが出現します。↓

画像を表示するための処理

カスタムフィールドで設定した画像をh1として表示させるには、functions.phpに以下のコードを追加します。

functions.php

function my_custom_eye_catch_logo(){
    if(is_page()){
        // カスタムフィールド『custom_eye_catch_logo』を取得
        $custom_eye_catch_logo=get_field('custom_eye_catch_logo');

        // もしページにカスタムフィールド『custom_eye_catch_logo』が設定されていれば、処理を実行する。
        if($custom_eye_catch_logo){
            // 『custom_eye_catch_logo』で入力した画像のurlとaltの値を変数に代入する。
            $image_url = esc_url($custom_eye_catch_logo['url']);
            $image_alt = esc_attr($custom_eye_catch_logo['alt']);
           
            // h1タグを画像とaltテキストに置き換える
            return '<img src="' . $image_url . '" alt="' . $image_alt . '" class="eye_catch_logo">'
        }
    }

    // 何も変更しない場合は元のタイトルを返す
    return $title;
}

そして、画像を出力したい箇所のテンプレートファイル（single.php や page.phpなど。Cocoonの場合はcontent.php）で、the_title() の代わりに、作成した関数 my_custom_eye_catch_logo()を直接呼び出します。

<?php
// 処理
<h1 class="entry-title"><?php do_action( 'my_custom_eye_catch_logo' ); ?></h1>
<?php
// 処理

これで、h1に画像が表示されるようになります。