今回は、Wordpress管理画面の投稿一覧にアイキャッチを表示して、視覚的に記事を管理し易くするカスタマイズ方法の紹介です。
今回のカスタマイズを行うと、以下のように、投稿一覧の右側にサムネイルが表示されるようになります。
今回のカスタマイズをすることで、以前どのような記事を書いていたかを、文字ではなくイメージでつかめるようになるのではないかと思います。
投稿一覧にアイキャッチを表示する方法
投稿一覧に、アイキャッチを表示するには、functions.phpに、以下のようにコピペして多少編集するだけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//投稿記事一覧にアイキャッチ画像を表示 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行目は、サムネイル画像の呼び出しです。
|
1 |
$thum = get_the_post_thumbnail($post_id, 'thumb100', array( 'style'=>'width:75px;height:auto;' )); |
テーマ側で設定されているサムネイル名を呼び出しています。
僕の使用している、テーマは以下のような「’thumb100’」という、100×100のサムネイルが設定されているので、それを使用しました。
|
1 |
add_image_size('thumb100',100,100,true); |
テーマのサムネイル名がわからない場合は、コメントアウトしてある部分を利用してもOKだと思います。
|
1 |
$thum = get_the_post_thumbnail($post_id, 'small', array( 'style'=>'width:75px;height:auto;' )); |
こちらは、Wordpressであらかじめ設定されている「サムネイル（小）」のサムネイルを利用しています。
サムネイルの大きさを変更する場合
今回の方法では、サムネイルの幅をスタイルシートで75pxに変更してあります。
サムネイルの大きさや、カラムの幅を変更するには、以下の部分のwidthなどを変更してみてください。
|
1 2 3 |
$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で以下のように調整します。
|
1 2 3 4 |
//アイキャッチ画像の列の幅をCSSで調整 function customize_admin_css_list() { echo '<style TYPE="text/css">.column-thumbnail{width:80px;}</style>'; } |
今回のコードは、以下のページを参考にさせていただき、サムネイル呼び出しや、カラム幅などのコードをいろいろと変更してみました。
参考 ダッシュボードの使い勝手を向上させるカスタマイズTIPS 10｜ウェビメモ
動作確認
このようにすることで、管理画面の投稿一覧に以下のように表示されます。
アイキャッチが設定されていない場合は、以下のように何も表示されません。
まとめ
投稿一覧に、サムネイルが表示されるだけで、思っていた以上に使いやすくなりました。
というのも、サムネイルを、パッと見るだけで、タイトルを読む必要がなく、どんな記事だったかが、すぐに思い出せるからです。
僕は、ブックマークに登録されているサイトなども、サイト名ではなくファビコンなどで覚えていたりするので、イメージで管理できると、いろいろとはかどります。
ですので僕のように「タイトルよりアイキャッチを見た方が記事を思い出せる」なんて方には、お勧めのカスタマイズ方法です。
