WordPress管理画面の投稿記事一覧にアイキャッチを表示するカスタマイズ方法

今回は、Wordpress管理画面の投稿一覧にアイキャッチを表示して、視覚的に記事を管理し易くするカスタマイズ方法の紹介です。

今回のカスタマイズを行うと、以下のように、投稿一覧の右側にサムネイルが表示されるようになります。

今回のカスタマイズをすることで、以前どのような記事を書いていたかを、文字ではなくイメージでつかめるようになるのではないかと思います。

投稿一覧にアイキャッチを表示する方法

投稿一覧に、アイキャッチを表示するには、functions.phpに、以下のようにコピペして多少編集するだけです。

//投稿記事一覧にアイキャッチ画像を表示
function customize_admin_manage_posts_columns($columns) {
    $columns['thumbnail'] = __('Thumbnail');
    return $columns;
}
function customize_admin_add_column($column_name, $post_id) {
    if ( 'thumbnail' == $column_name) {
        //テーマで設定されているサムネイルを利用する場合
        $thum = get_the_post_thumbnail($post_id, 'thumb100', array( 'style'=>'width:75px;height:auto;' ));
        //Wordpressで設定されているサムネイル（小）を利用する場合
        //$thum = get_the_post_thumbnail($post_id, 'small', array( 'style'=>'width:75px;height:auto;' ));
    }
    if ( isset($thum) && $thum ) {
        echo $thum;
    }
}
//アイキャッチ画像の列の幅をCSSで調整
function customize_admin_css_list() {
    echo '<style TYPE="text/css">.column-thumbnail{width:80px;}</style>';
}
//カラムの挿入
add_filter( 'manage_posts_columns', 'customize_admin_manage_posts_columns' );
//サムネイルの挿入
add_action( 'manage_posts_custom_column', 'customize_admin_add_column', 10, 2 );
//投稿一覧のカラムの幅のスタイル調整
add_action('admin_print_styles', 'customize_admin_css_list', 21);

//投稿記事一覧にアイキャッチ画像を表示

function customize_admin_manage_posts_columns($columns) {

$columns['thumbnail'] = __('Thumbnail');

return $columns;

}

function customize_admin_add_column($column_name, $post_id) {

if ( 'thumbnail' == $column_name) {

//テーマで設定されているサムネイルを利用する場合

$thum = get_the_post_thumbnail($post_id, 'thumb100', array( 'style'=>'width:75px;height:auto;' ));

//Wordpressで設定されているサムネイル（小）を利用する場合

//$thum = get_the_post_thumbnail($post_id, 'small', array( 'style'=>'width:75px;height:auto;' ));

}

if ( isset($thum) && $thum ) {

echo $thum;

}

//アイキャッチ画像の列の幅をCSSで調整

function customize_admin_css_list() {

echo '<style TYPE="text/css">.column-thumbnail{width:80px;}</style>';

}

//カラムの挿入

add_filter( 'manage_posts_columns', 'customize_admin_manage_posts_columns' );

//サムネイルの挿入

add_action( 'manage_posts_custom_column', 'customize_admin_add_column', 10, 2 );

//投稿一覧のカラムの幅のスタイル調整

add_action('admin_print_styles', 'customize_admin_css_list', 21);

ハイライト部分がポイントとなる行です。

9行目、11行目

9行目は、サムネイル画像の呼び出しです。

$thum = get_the_post_thumbnail($post_id, 'thumb100', array( 'style'=>'width:75px;height:auto;' ));

1	$thum = get_the_post_thumbnail($post_id, 'thumb100', array( 'style'=>'width:75px;height:auto;' ));

テーマ側で設定されているサムネイル名を呼び出しています。

僕の使用している、テーマは以下のような「’thumb100’」という、100×100のサムネイルが設定されているので、それを使用しました。

add_image_size('thumb100',100,100,true);

1	add_image_size('thumb100',100,100,true);

テーマのサムネイル名がわからない場合は、コメントアウトしてある部分を利用してもOKだと思います。

$thum = get_the_post_thumbnail($post_id, 'small', array( 'style'=>'width:75px;height:auto;' ));

1	$thum = get_the_post_thumbnail($post_id, 'small', array( 'style'=>'width:75px;height:auto;' ));

こちらは、Wordpressであらかじめ設定されている「サムネイル（小）」のサムネイルを利用しています。

サムネイルの大きさを変更する場合

今回の方法では、サムネイルの幅をスタイルシートで75pxに変更してあります。

サムネイルの大きさや、カラムの幅を変更するには、以下の部分のwidthなどを変更してみてください。

$thum = get_the_post_thumbnail($post_id, 'thumb100', array( 'style'=>'width:75px;height:auto;' ));
//Wordpressで設定されているサムネイル（小）を利用する場合
//$thum = get_the_post_thumbnail($post_id, 'small', array( 'style'=>'width:75px;height:auto;' ));

$thum = get_the_post_thumbnail($post_id, 'thumb100', array( 'style'=>'width:75px;height:auto;' ));

//Wordpressで設定されているサムネイル（小）を利用する場合

//$thum = get_the_post_thumbnail($post_id, 'small', array( 'style'=>'width:75px;height:auto;' ));

カラム幅はCSSで以下のように調整します。

//アイキャッチ画像の列の幅をCSSで調整
function customize_admin_css_list() {
    echo '<style TYPE="text/css">.column-thumbnail{width:80px;}</style>';
}

//アイキャッチ画像の列の幅をCSSで調整

function customize_admin_css_list() {

echo '<style TYPE="text/css">.column-thumbnail{width:80px;}</style>';

}

今回のコードは、以下のページを参考にさせていただき、サムネイル呼び出しや、カラム幅などのコードをいろいろと変更してみました。

参考ダッシュボードの使い勝手を向上させるカスタマイズTIPS 10｜ウェビメモ

動作確認

このようにすることで、管理画面の投稿一覧に以下のように表示されます。

アイキャッチが設定されていない場合は、以下のように何も表示されません。

まとめ

投稿一覧に、サムネイルが表示されるだけで、思っていた以上に使いやすくなりました。

というのも、サムネイルを、パッと見るだけで、タイトルを読む必要がなく、どんな記事だったかが、すぐに思い出せるからです。

僕は、ブックマークに登録されているサイトなども、サイト名ではなくファビコンなどで覚えていたりするので、イメージで管理できると、いろいろとはかどります。

ですので僕のように「タイトルよりアイキャッチを見た方が記事を思い出せる」なんて方には、お勧めのカスタマイズ方法です。

同時に読まれている記事