Tips

WordPressでアイキャッチ画像の設定と表示やカスタマイズする方法を解説【add_theme_support, the_post_thumbnail,add_image_size, register_sidebar_menu】

  • このエントリーをはてなブックマークに追加

「WordPressの投稿画面でアイキャッチの設定が表示されない時がある」
「WordPressの設定画面にあるアイキャッチ画像のサイズが適用されない時がある」
「カスタムサイズのアイキャッチ画像を設定したが反映されない画像がある」

本日はそんな方に向けてWordPressにおけるアイキャッチ画像の設定に関する操作方法を解説していきます。

WordPressの魅力の一つは柔軟性と拡張性に富んだテーマシステムです。

特にアイキャッチ画像は記事やページを引き立たせ、読者の目を引く重要な要素の一つです。

この記事ではWordPressでアイキャッチ画像を設定して表示する方法について詳しく解説します。

さらにadd_theme_supportthe_post_thumbnailadd_image_sizeといった関数を使用して、アイキャッチ画像のカスタマイズ方法にも焦点を当てます。

WordPressのパワーを最大限に活用し魅力的なコンテンツを提供するための手段を探求していきましょう。

また動画もあるので必要な方は以下よりご覧ください。

https://youtu.be/ivVlHkkf9mg

WordPressの投稿画面でアイキャッチ画像の設定を表示する

まずは投稿画面からアイキャッチ画像を設定できるようにします。

デフォルトではタイトル、カテゴリー、タグ、本文、日付、スラッグが設定できるようになっていて、アイキャッチ画像を含む他の機能は設定できないようになっています。

そのためfunctions.phpで以下のコードを追加します。

<?php
  function theme_setup(){
    add_theme_support('post-thumbnails');
  }
  add_action('after_setup_theme', 'theme_setup');
?>

add_theme_supportは自作テーマに追加で搭載する機能を引数に文字列として指定します。

アイキャッチ画像を有効化したいときは「post-thumbnails」を書きます。

それをadd_actionのafter_setup_themeというイベントで実行するようにするわけです。

ページをリロードすると投稿画面でアイキャッチ画像が設定できるようになっています。

WordPressでアイキャッチ画像を画面に表示する

続いて投稿画面にて設定したアイキャッチ画像をテンプレートファイルを通じて画面に表示します。

今回はsingle.phpを使って以下のように書いてみました。

<?php get_header();?>
    <main>
        <section class="section postbox single">
            <div class="postbox_inner inner">
                <div class="single_time">
                    <h3>yyyy/mm/dd</h3>
                </div>
                <div class="single_title">
                    <h2>long&Big Title</h2>
                </div>
                <div class="single_eyecatching">
                    <?php
                        if(has_post_thumbnail()):
                            the_post_thumbnail();
                        else:
                            echo '<img style="width: 150px; height: 150px;" src=' . get_stylesheet_directory_uri() . '/img/no_image.jpg />';
                        endif;
                    ?>
                </div>
            </div>
        </section>
    </main>
<?php get_footer();?>

the_post_thumbnailというテンプレート関数を実行すると投稿画面で設定したアイキャッチ画像が表示されます。

imgタグは自動で挿入するので書く必要はありません。

また記事によってアイキャッチ画像を設定していないものがあるはずです。

条件分岐でhas_post_thumbnailというテンプレート関数を使っていて、こちらはアイキャッチ画像が設定されていたらTrue、設定されていなかったらFalseを返します。

Trueの時にだけthe_post_thumbnailを実行するようにして、Falseの時(else文)はダミーテキストを表示するなどが一般的な使い方です。

またWordPressにアイキャッチ画像をアップロードすると自動的に「large, medium, thumbnail」という3種類の大きさにトリミングされて複製されます。

そのため大きさを変更したい時にはthe_post_thumbnailの引数に「large」などサイズ名を文字列で指定します。

<!-- 省略 -->
                <div class="single_eyecatching">
                    <?php
                        if(has_post_thumbnail()):
                            the_post_thumbnail('large');
                        else:
                            echo '<img style="width: 150px; height: 150px;" src=' . get_stylesheet_directory_uri() . '/img/no_image.jpg />';
                        endif;
                    ?>
                </div>
<!-- 省略 -->

一方でCSSファイルからアイキャッチ画像のサイズを変更したい場合はCSSファイルにてwidth,heightを指定すれば反映されます。

その際に特定のclass名をサムネイル画像を出力するimgタグに振りたい場合は以下のようにします。

<!-- 省略 -->
                <div class="single_eyecatching">
                    <?php
                        if(has_post_thumbnail()):
                 $attr = array(
                                'class' => 'img-item'
                            );
                            the_post_thumbnail('thumbnail', $attr);
                        else:
                            echo '<img style="width: 150px; height: 150px;" src=' . get_stylesheet_directory_uri() . '/img/no_image.jpg />';
                        endif;
                    ?>
                </div>
<!-- 省略 -->

the_post_thumbnailの第一引数は先ほどのサイズ名なのですがデフォルト値のthumbnailを書いておき、第二引数にはclassに設定する文字列を入れます。

上記のコードだと変数attrというものに「img-item」を代入しておき、the_post_thumbnailの第二引数に入れました。

ちなみに何もclass名を設定していなくても自動でclass=”wp-post-image”というclass名が付与されるようになっています。

そのためwp-post-imageにCSSでサイズ指定しても良いでしょう。

上記のコードだとデフォルト値とオリジナルの値を入れたので、結果的にはclass=”wp-post-image img-item”というclass名になります。

WordPressのアイキャッチ画像をカスタムアイキャッチ画像にする

アイキャッチ画像の設定においてカスタムアイキャッチ画像というものがあります。

先ほど画像をアップロードすると自動で「large, medium, thumbnail」の3種類にトリミングされて複製されると言いました。

こちらは何に相当するかというと管理画面の設定→メディアに表示される3種類のサイズです。

3種類の大きさの厳密なサイズはこちらから確認、変更することができます。

作っているサイトによっては3種類だけではサイズの選択肢が少ない場合があり、そんな時にはカスタムアイキャッチ画像を設定することでサイズの種類を4つ以上に増やすことが可能です。

まずはfunctions.phpにて以下のように書きます。

<?php
  function theme_setup(){
    add_theme_support('post-thumbnails');

    add_image_size("custom-thumbnail-one", 1000, 300, true);
    add_image_size("custom-thumbnail-two", 400, 400, true);
  }
  add_action('after_setup_theme', 'theme_setup');
?>

add_theme_sizeというテンプレート関数はカスタムアイキャッチ画像を設定することができて、第一引数にサイズの名前、第二引数に横幅、第三引数に縦幅、第四引数にトリミングを有効にすることを意味するtrueを入れます。

上記コードではcustom-thumbnail-oneとcustom-thumbnail-twoの2種類を追加しています。

つまり「large, medium, thumbnail, custom-thumbnail-one, custom-thumbnail-two」の5種類のサイズが設定できるようになったわけです。

あとはsingle.phpなど使用するテンプレートファイル上でthe_post_thumbnailの引数を指定するだけです。

<!-- 省略 -->
                <div class="single_eyecatching">
                    <?php
                        if(has_post_thumbnail()):
                            the_post_thumbnail(custom-thumbnail-two);
                        else:
                            echo '<img style="width: 150px; height: 150px;" src=' . get_stylesheet_directory_uri() . '/img/no_image.jpg />';
                        endif;
                    ?>
                </div>
<!-- 省略 -->

上記コードではcustom-thumbnail-twoを入れましたので、横幅400pxで縦幅400pxのサイズになります。

元の画像素材の縦横比率もあるのでデザインと相談しながらサイズは決めましょう。

WordPressでウィジェットを有効化する方法

サムネイルと同じくウィジェットについてもWordPressで有効化する作業が最初に必要になります。

ウィジェットとはサイドバーなど共通パーツでメニューや外部サイトへのリンクなどを表示する機能で、管理画面の中でマウスクリックやドラッグ&ドロップで直感的に操作できるのが特徴です。

ウィジェットを有効化するにはfunctions.phpにコードを書きます。

<?php

  function add_widgets(){
    register_sidebar([
      "name" => "サイドバー",
      "description" => "サイドバーウィジェット",
      "id" => "sidebar",
      "before_widget" => "<div>",
      "after_widget" => "</div>",
      "before_title" => "<h3>",
      "after_title" => "</h3>"
    ]);
  }
  add_action("widgets_init", "add_widgets");
?>

管理画面のメニューの中から「外観」に「ウィジェット」というサブメニューが追加されます。

こちらのメニューをクリックするとウィジェットの編集画面が表示され、投稿や固定ページと同じようなブロックエディタの編集画面になっていることがわかります。

今回の記事を作成するにこちらの本を参考にしました。

大変わかりやすい本なので良ければどうぞ。

  • このエントリーをはてなブックマークに追加