WordPress管理画面の投稿一覧にアイキャッチ画像を表示させる

2017-12-14 @niketcha

管理画面の投稿一覧にアイキャッチ画像を表示させたら便利だなと思ったので、その方法を調べてみました。

Sponsored Link

アイキャッチ画像の表示方法

function.phpに追記する

下記のコードをfunction.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, 'thumbnail', 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);

サムネイルの画像サイズを指定する

ポイントはget_the_post_thumbnail()の2つ目の引数です。どのサイズのサムネイルを利用するかをここで指定します。

この例では「thumbnail」サイズ(デフォルトの設定では150px x 150px)を指定しています。

get_the_post_thumbnail()について詳しくはこちら

ここまでできたら管理画面を確認してみてください。カラムが追加されています。

新しいサイズのサムネイルを作りたいとき

add_image_size()関数を使えば新しいサイズのサムネイルを定義できます。add_image_size()関数では4つの引数を指定します。

例:add_image_size( ‘thumb80’, 80, 80, true );

  1. $name
  2. (必須)サムネイルの名前です。任意の名前を付けてください。
  3. $width
  4. (オプション)サムネイルの幅(ピクセル値)です。
  5. $height
  6. (オプション)サムネイルの高さ(ピクセル値)です。
  7. $crop
  8. (オプション)画像の切り抜きをするかどうかです。false:初期値。指定した大きさにリサイズされます。true:指定した大きさで切り抜かれます。

ただしadd_image_size()関数が有効なのは関数を追加した後にアップロードしたアイキャッチ画像です。追加前にアップロードしたアイキャッチ画像については、別途作り直す必要があります。

regenerate-thumbnailsなど、サムネイル再作成プラグインを利用すると便利です。

こちらの記事の中でサムネイルの再作成について触れているので、よければ読んでみてください。

参考にしたサイト:寝ログ

-ウェブサイト構築, word press

コメントを残す

お名前もメールも入力は任意です。お気軽に指摘や質問などしていただけると嬉しいです。

Gravatarに登録すると、お好きな画像をアバターに設定できます。

Copyright© ニケッチャニッキ , 2017-2018 All Rights Reserved.