Wordpressの投稿（固定）一覧にアイキャッチを表示する

アイキャッチ画像を記事に設定しておくと、TOPページでタイトルと一緒に表示したり、ヘッダー画像として利用したりととても便利です。
投稿の内容に沿った画像が表示されているだけでも閲覧数伸びそうですね。

さて、そのアイキャッチ、実は標準のWordpress（以下WP）では機能としても有効になっていません。
なので、有効にした上で、一覧画面で設定しているかどうか確認できるようにしていきます。

以下で説明しているコードは、投稿一覧、固定ページ一覧、カスタム投稿一覧までアイキャッチを表示出来るようにしています。

コード

コードだけ欲しいって方はこちらからどうぞ
functions.phpに追加してください。
下記コードでは、カスタム投稿は「blog」です。

functions.php

//アイキャッチON
add_theme_support('post-thumbnails');

//アイキャッチ画像表示---------------------------
//各投稿一覧ページにアイキャッチ画像用の列を追加
add_filter( 'manage_posts_columns', 'add_custom_post_columns');    //投稿 & カスタム投稿
add_filter( 'manage_pages_columns', 'add_custom_post_columns' );   //固定ページ
if ( !function_exists( 'add_custom_post_columns' ) ) {
    function add_custom_post_columns( $columns ) {
        global $post_type;
        if( in_array( $post_type, array('post', 'page', 'blog') ) ) { //列を追加するタイプをここで指定
            $columns['thumbnail'] = 'アイキャッチ画像';    //カラム表示名
        }
        return $columns;
    }
}
//サムネイル画像を表示
add_action( 'manage_posts_custom_column', 'output_custom_post_columns', 10, 2 );  //投稿 & カスタム投稿(階層構造が無効)
add_action( 'manage_pages_custom_column', 'output_custom_post_columns', 10, 2 );  //固定ページ & カスタム投稿(階層構造が有効)
if ( !function_exists( 'output_custom_post_columns' ) ) {
    function output_custom_post_columns( $column_name, $post_id ) {
        if ( 'thumbnail' === $column_name ) {
            $thumb_id  = get_post_thumbnail_id( $post_id );
            if ( $thumb_id ) {
                $thumb_img = wp_get_attachment_image_src( $thumb_id, 'medium' );  //サイズはご自由に
                echo '<img src="',$thumb_img[0],'" width="160px">';
            } else {
                echo 'アイキャッチ画像が<br>設定されていません';
            }
        }
    }
}

はじめに

functions.phpにコードを追加していきますので、必ず本番環境ではなく、ローカル環境もしくはテスト環境で作業を行ってください。
デバックモードをONにするのも忘れずに。

wp-config.php

define( 'WP_DEBUG', true );

コード解説

前述した様に、アイキャッチは標準でWPをインストールしている場合は有効になっていません。

アイキャッチ画像の有効化

まずは、functions.phpに下記コードを追加してください。

functions.php

//アイキャッチON
add_theme_support('post-thumbnails');

適当に投稿画面か固定ページを開いて、画面右側の下の方に「アイキャッチ画像」と追加されていれば成功です。
表示されていない場合、一旦WPをログアウトしてみたり、ブラウザをリロード等試してみてください。
また、表示されないよくあることだと、このコードの上のコードで?>となっていたり、正しくコードをコピーしていなかったり（末尾の;抜け等）と初歩的なミスが考えられますので、焦らず順番に確認してみてください。

アイキャッチ画像を一覧に表示する

アイキャッチ画像を表示するための列を追加する

各投稿一覧ページにアイキャッチ画像用の列を追加するコードを追加します。

functions.php

add_filter( 'manage_posts_columns', 'add_custom_post_columns');

このコードは投稿一覧とカスタム投稿一覧にアイキャッチを表示するための列を追加するコードです。

functions.php

add_filter( 'manage_pages_columns', 'add_custom_post_columns' );

こちらは固定ページ一覧にアイキャッチを表示するための列を追加するコードです。
投稿・カスタム投稿一覧はmanage_posts_columns、固定ページ一覧はmanage_pages_columnsという箇所が違います。

functions.php

if ( !function_exists( 'add_custom_post_columns' ) ) {
    function add_custom_post_columns( $columns ) {
        global $post_type;
        if( in_array( $post_type, array('post', 'page', 'blog') ) ) {
            $columns['thumbnail'] = 'アイキャッチ画像';
        }
        return $columns;
    }
}

4行目のif( in_array( で'post', 'page', 'blog'を指定します。
カスタム投稿がblog以外にある場合は,で区切って''で囲んで追加していきます。
'post'は投稿、'page'は固定ページのことです。
5行目の $columns['thumbnail'] =で一覧のタイトル部分に表示する文言を指定します。
ここではアイキャッチ画像としています。

ここまでで、投稿一覧、固定ページ一覧、カスタム投稿一覧で「アイキャッチ画像」という列が表示されているかと思います。

アイキャッチ画像を表示する

functions.php

add_action( 'manage_posts_custom_column', 'output_custom_post_columns', 10, 2 );
add_action( 'manage_pages_custom_column', 'output_custom_post_columns', 10, 2 );

この2行でアウトプット＝見えるようにします。

functions.php

if ( !function_exists( 'output_custom_post_columns' ) ) {
    function output_custom_post_columns( $column_name, $post_id ) {
        if ( 'thumbnail' === $column_name ) {
            $thumb_id  = get_post_thumbnail_id( $post_id );

アイキャッチ画像はget_post_thumbnail_id( $post_id );で取得します。

functions.php

            if ( $thumb_id ) {
                $thumb_img = wp_get_attachment_image_src( $thumb_id, 'medium' );
                echo '<img src="',$thumb_img[0],'" width="160px">';

get_post_thumbnail_id( $post_id );で取得したアイキャッチ画像の情報がある場合はifの中で大きさを指定して表示します。
ここではwidth="160px"としていますが、お好みのサイズを指定してください。
ただwidth="100%"としてしまうと、画像の大きさによっては一覧自体が見難くなってしまうので、アイキャッチ画像があるかないかが確認できる程度の大きさでいいような気がします。

functions.php

            } else {
                echo 'アイキャッチ画像が<br>設定されていません';
            }
        }
    }
}

あとは、条件分岐elseでアイキャッチが設定されていなかった場合に表示する文言を入れます。
NoImages等の画像を表示した場合は

echo '<img src="' .get_template_directory_uri(). '/images/noimages.jpg" width="160px" alt="アイキャッチ画像が設定されていません">';

と指定します。
NoImagesの画像はテーマファイルのimagesフォルダに格納していることとしています。
横幅はアイキャッチ画像と同じwidth="160px"としています。

動作確認

現状ですと、投稿一覧。固定ページ一覧、カスタム投稿一覧の右側に「アイキャッチ画像」という列が追加され、アイキャッチが設定されていないので「アイキャッチ画像が設定されていません」という文言が表示されているかと思います。（画像を指定した方は、NoImagesの画像が表示）
あとはひとつずつアイキャッチを設定して、表示されているか確認してください。

うまく表示されない場合、コードのコピーが間違えていたり、余計な余白や.と,の打ち間違え等があります。
デバックモードをONにしていれば、英語のエラーメッセージが表示されていますので、焦らず、翻訳してエラーの問題を順を追って解決していきましょう。

まとめ

これを機会にアイキャッチをTOPページやアーカイブページ等、各ページのヘッダー等に設定しましょう。
ヘッダーにアイキャッチを設定するには、以下の記事を参考にどうぞ。

毎度、WPで15年ほどWebサイトを制作していますが、独学の為、解釈が違ったり記述が間違えていたりという部分あるかと思います。その場合は、ぜひコメントで教えていただけると幸いです。