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に画像が表示されるようになります。