0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

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

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

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

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

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

image.jpg

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

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

カスタムフィールドで設定した画像を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.phppage.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に画像が表示されるようになります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?