• メニュー
  • メニュー

【カスタマイズ】WordPress 投稿一覧にアイキャッチ画像を表示する方法

Wordpressの投稿一覧画面にアイキャッチ(サムネイル)画像を表示させる方法をご紹介します。

WordPressの投稿一覧画面にアイキャッチ(サムネイル)画像を表示させる方法をご紹介します。アイキャッチの投稿忘れ防止、またどんなアイキャッチを設定したか把握するのにも大変便利です。

アイキャッチはとても重要な画像なので、漏れをなくすためにも管理画面のカスタマイズはおすすめです


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

WordPress 投稿一覧にアイキャッチ画像

アイキャッチ(サムネイル)を管理画面の投稿一覧に表示させるためには、functions.phpに以下のコードを記述する必要があります。

function custom_columns( $columns ) {
    $columns = array_merge( $columns, array( 'featured_image' => 'Image'));
    return $columns;
}
add_filter('manage_posts_columns' , 'custom_columns');

function custom_columns_data( $column, $post_id ) {
    switch ( $column ) {
    case 'featured_image':
        the_post_thumbnail( 'thumbnail' );
        break;
    }
}
add_action( 'manage_posts_custom_column' , 'custom_columns_data', 10, 2 );

add_action('admin_head', 'column_width');
function column_width() {
  echo '<style type="text/css">
        .column-title { text-align: left; width:250px !important; overflow:hidden }
        .column-author { text-align: left; width:80px !important; overflow:hidden }       
        .column-categories { text-align: left; width:80px !important; overflow:hidden }        
        .column-tags { text-align: left; width:70px !important; overflow:hidden }    
        .column-featured_image {
                 text-align: left;
                 width:160px !important;
          overflow:hidden
        }
	</style>';
}

functions.phpは「外観」→「テーマエディター」から編集することができます。

※functions.phpは半角スペースが全角スペースになるだけでもエラーを吐き出してしまって、正常にWordpressが表示されなくなってしまうので、少し中級者向けになります。コピペしたときに確実に空白の部分まで半角になっているか確認しましょう。

そのままアイキャッチ(サムネイル)を表示させると150×150の画像が表示されます。すると、いろいろな項目がある場合、他の項目が非常に窮屈になり、特にタイトルが異常に縦長になってしまう可能性があります。

上のコードはすでにタイトル、著者、カテゴリーなどの幅を調整したコードになっています。もしも気になる場合は、以下のwidth(数字)を変更してください。

.column-title { text-align: left; width:250px !important; overflow:hidden }
.column-author { text-align: left; width:80px !important; overflow:hidden }       
.column-categories { text-align: left; width:80px !important; overflow:hidden }        
.column-tags { text-align: left; width:70px !important; overflow:hidden }  

まとめ:

wordpressの管理画面はすべてのページで、項目を減らしたり、増やしたり自由に変更することができます。少し難しいかと思いますが、定型文で決まっていますので、ぜひ挑戦してみてください。

もしもダメだったら戻せばよいだけです。今の状態をコピーして別名保存しておけば大丈夫です。

関連記事 ⇒【知っとくと便利】wordpressの投稿一覧で表示件数や項目を変更する方法

toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です