【WordPress】管理画面の投稿一覧にアイキャッチ画像を表示する方法
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
WordPress管理画面の投稿一覧には「タイトル」「投稿者」「公開日」などの情報が表示されています。不要な項目は「表示オプション」にてチェックを外すことで非表示にすることが可能です。
しかし、デフォルトの設定では「アイキャッチ画像」は表示されておらず、また表示非表示の設定をすることが出来ません。
記事数が多ければ多いほど該当する記事を探すのに手間取ってしまいますが「アイキャッチ画像」を一覧画面に表示しておくことで、どの記事が何なのかをより視覚的に見つけ出すことが出来るようになります。
そこで今回の記事ではWordPress管理画面の投稿一覧に「アイキャッチ画像」を表示する方法を各種解説していきたいと思います。
この記事の目次を表示
まずは見比べてみよう
下の画像が「アイキャッチ画像」の無い状態のWordPress管理画面の投稿一覧
これに「アイキャッチ画像」を追加してあげることで下の画像のような管理画面となります。
このようにやはり「アイキャッチ画像」があることでどの記事がどの記事なのか視覚的に判別しやすくなりますね。
それでは早速、WordPress管理画面の投稿一覧に「アイキャッチ画像」を表示する方法を解説していきます。
関数を作成する方法
WordPress管理画面の投稿一覧に「アイキャッチ画像」を表示する方法は様々ありますが、まず始めにご紹介するのがfunctions.phpに関数を作成する方法です。
投稿の場合
まずはじめに「投稿」の場合を解説します。
まず大前提として、有効化されているテーマフォルダ内のfunctions.phpに以下の関数が書かれているものとします。
WordPressはインストールした時点では「投稿」の「アイキャッチ画像」は指定することが出来ません。以下をfunctions.phpに書くことで「アイキャッチ画像」を設定出来るようになります。
// アイキャッチ画像を利用できるようにする
add_theme_support('post-thumbnails');
列を追加する関数を作成
// WordPress管理画面の投稿一覧のテーブルヘッダーに新しい列を追加
function add_featured_image_column_to_posts($columns) {
$columns['featured_image'] = __('Featured Image');
return $columns;
}
add_filter('manage_posts_columns', 'add_featured_image_column_to_posts');
この関数はWordPress管理画面の投稿一覧のテーブルヘッダーに新しい列を追加するプログラムになっています。
WordPressでは、一覧表の列は連想配列で管理されており、この関数はその配列に新しい要素を追加することで新しい列を定義します。
既存の列の配列にfeatured_imageというキーと表示名Featured Imageを持つ新しい要素を追加しています。
そしてこの新しい配列を返すことで、新しい列を一覧表に追加することが出来ます。
アイキャッチ画像を表示する関数を作成
// 各投稿記事にアイキャッチ画像を表示する
function show_featured_image_column_in_posts($column_name, $post_id) {
if ('featured_image' === $column_name) {
$post_featured_image = get_the_post_thumbnail($post_id, 'thumbnail');
if ($post_featured_image) {
echo $post_featured_image;
}
}
}
add_action('manage_posts_custom_column', 'show_featured_image_column_in_posts', 10, 2);
この関数は作成した新しい列に「アイキャッチ画像」を表示するプログラムになっています。
WordPressは、一覧表の各行を表示する際に、各列に対応するデータを出力するためにこのタイプの関数を呼び出します。
$column_nameが「featured_image」の時、処理を行い、その投稿に「アイキャッチ画像」が登録されていれば、画像を表示します。
関数全体のコード
WordPress管理画面の投稿一覧に「アイキャッチ画像」を表示するための関数は以下になります。
以下コピペするだけで実装可能です。
function add_featured_image_column_to_posts($columns) {
$columns['featured_image'] = __('Featured Image');
return $columns;
}
add_filter('manage_posts_columns', 'add_featured_image_column_to_posts');
function show_featured_image_column_in_posts($column_name, $post_id) {
if ('featured_image' === $column_name) {
$post_featured_image = get_the_post_thumbnail($post_id, 'thumbnail');
if ($post_featured_image) {
echo $post_featured_image;
}
}
}
add_action('manage_posts_custom_column', 'show_featured_image_column_in_posts', 10, 2);
カスタム投稿の場合
続いて「カスタム投稿」の場合を解説していきたいと思います。先ほどの関数は「投稿」専用になっています。
列を追加する関数を作成
// WordPress管理画面のカスタム投稿タイプ一覧：●●●のテーブルヘッダーに新しい列を追加
function add_featured_image_column_to_custom_posts($columns) {
$columns['featured_image'] = __('Featured Image');
return $columns;
}
add_filter('manage_●●●_posts_columns', 'add_featured_image_column_to_custom_posts');
こちらの関数、●●●の部分を除いて、先ほどの「投稿」の者と同じです。
この●●●の部分に実際の「カスタム投稿タイプスラッグ名」を指定してあげることで、WordPress管理画の各カスタム投稿タイプ一覧のテーブルヘッダーに新しい列を追加することが出来ます。
例えば「works」という名前のスラッグ名だった場合は
add_filter('manage_works_posts_columns', 'add_featured_image_column_to_custom_posts');
と指定します。
アイキャッチ画像を表示する関数を作成
// 各投稿記事にアイキャッチ画像を表示する
function show_featured_image_column_in_custom_posts($column_name, $post_id) {
if ('featured_image' === $column_name) {
$post_featured_image = get_the_post_thumbnail($post_id, 'thumbnail');
if ($post_featured_image) {
echo $post_featured_image;
}
}
}
add_action('manage_●●●_posts_custom_column', 'show_featured_image_column_in_custom_posts', 10, 2);
この関数も先ほどの関数同様●●●の部分に実際の「カスタム投稿タイプスラッグ名」を指定することでその投稿に登録されている「アイキャッチ画像」があれば表示します。
例えば「works」という名前のスラッグ名だった場合は
add_action('manage_works_posts_custom_column', 'show_featured_image_column_in_custom_posts', 10, 2);
と指定します。
関数全体のコード
WordPress管理画面のカスタム投稿一覧に「アイキャッチ画像」を表示するための関数は以下になります。
以下、●●●の部分を実際の「カスタム投稿タイプスラッグ名」に置き換えてコピペするだけで実装可能です。
function add_featured_image_column_to_custom_posts($columns) {
$columns['featured_image'] = __('Featured Image');
return $columns;
}
add_filter('manage_●●●_posts_columns', 'add_featured_image_column_to_custom_posts');
function show_featured_image_column_in_custom_posts($column_name, $post_id) {
if ('featured_image' === $column_name) {
$post_featured_image = get_the_post_thumbnail($post_id, 'thumbnail');
if ($post_featured_image) {
echo $post_featured_image;
}
}
}
add_action('manage_●●●_posts_custom_column', 'show_featured_image_column_in_custom_posts', 10, 2);
全てのカスタム投稿を指定する場合
functions.phpに関数を作成する方法の最後に、全てのカスタム投稿に対応する関数を作成する方法を解説します。
列を追加する関数を作成
// WordPress管理画面の投稿一のテーブルヘッダーに新しい列を追加
function add_featured_image_column($columns) {
$columns['featured_image'] = __('Featured Image');
return $columns;
}
この部分は前回までの同様、列を追加する関数です。
全てのカスタム投稿を指定する場合は、カスタム投稿を指定するフィルターフックは最後に指定する為、この部分では省いておきます。
アイキャッチ画像を表示する関数を作成
// 各投稿記事にアイキャッチ画像を表示する
function display_featured_image_column($column, $post_id) {
if ('featured_image' === $column) {
$post_featured_image = get_the_post_thumbnail($post_id, 'thumbnail');
if ($post_featured_image) {
echo $post_featured_image;
}
}
}
この部分も前回までの同様、その投稿に登録されている「アイキャッチ画像」があれば表示する関数です。
こちらも同様にフィルターフックは最後に指定する為、この部分では省いておきます。
フィルターフックをfoeach処理させる
全てのカスタム投稿に対して一括で「アイキャッチ画像」を追加する場合、以下のような指定でフィルターフックを作成します。
// 全ての公開カスタム投稿タイプを取得し、画像列を追加
add_action('admin_init', function() {
$custom_post_types = get_post_types(['public' => true, '_builtin' => false]);
foreach ($custom_post_types as $custom_post_type) {
add_filter("manage_${custom_post_type}_posts_columns", 'add_featured_image_column');
add_action("manage_${custom_post_type}_posts_custom_column", 'display_featured_image_column', 10, 2);
}
});
先ほどは「カスタム投稿タイプスラッグ名」の部分を●●●とし、個別に指定する必要がありましたが、この指定方法であれば、
get_post_types(['public' => true, '_builtin' => false]);
この関数は全ての「カスタム投稿タイプ」を取得することが出来、そして、foreachによるループ処理によって●●●だった部分に自動で「カスタム投稿タイプスラッグ名」を追加することが出来ます。
関数全体のコード
全ての「カスタム投稿タイプ」をまとめて指定する場合の関数全体のコードは以下になります。
こちら特に改編の必要はなく、コピペしてfunctions.phpに貼り付けるだけで実装可能です。
function add_featured_image_column($columns) {
$columns['featured_image'] = __('Featured Image');
return $columns;
}
function display_featured_image_column($column, $post_id) {
if ('featured_image' === $column) {
$post_featured_image = get_the_post_thumbnail($post_id, 'thumbnail');
if ($post_featured_image) {
echo $post_featured_image;
}
}
}
add_action('admin_init', function() {
$custom_post_types = get_post_types(['public' => true, '_builtin' => false]);
foreach ($custom_post_types as $custom_post_type) {
add_filter("manage_${custom_post_type}_posts_columns", 'add_featured_image_column');
add_action("manage_${custom_post_type}_posts_custom_column", 'display_featured_image_column', 10, 2);
}
});
プラグインを使用する方法
続いてプラグインを使用して管理画面の投稿一覧にアイキャッチ画像を表示する方法をいくつか解説します。
functions.phpを直接編集するのは怖いなという方や管理画面から全て管理したいという方はプラグインの使用をお勧めします。
Admin Columns
まず始めにご紹介するのが「Admin Columns」というプラグインです。
このプラグインはアイキャッチ画像以外にも様々な項目を管理画面の一覧に表示、削除することの出来る便利なプラグインです。
プラグインを追加
「プラグイン」→「新規追加」と進み、右上にある入力欄に「Admin Columns」と入力することで表示される画像のプラグインが今回解説するプラグインです。このプラグインを「今すぐインストール」→「有効」にします。
プラグインの設定
「Admin Columns」を有効化すると「設定」の項目のひとつとして画像赤枠①「Admin Columns」が追加されます。
「Admin Columns」に移動すると以下のような画面が表示されるので、画像赤枠②、左上のセレクトボックスから管理画面の項目を変更したいメニューを選択します。
今回は投稿一覧の項目を変更するので「投稿」を選びます。「投稿」も「カスタム投稿」の場合も使い方は同じです。
画像赤枠③の「＋列を追加」をクリックすることで下の画像のような詳細な設定項目が表示されます。
このプラグインでは様々な設定が可能ですが、今回は管理画面の投稿一覧に「アイキャッチ画像」を表示させるための最低限の設定のみ行いたいと思います。
「タイプ」の選択で「アイキャッチ画像」を選択することで画像のような項目が表示されます。
設定するのは画像赤枠④の部分、画像上では全てになりますが、選択する内容により入力フィールドが増えたりしますので、状況に応じて使い分ける必要があります。
| タイプ | アイキャッチ画像 |
| ラベル | アイキャッチ画像（任意のテキストでOK） |
| 幅 | 自動 |
| 画像サイズ | サムネイル（150×150） |
このように設定して画像赤枠⑤の更新ボタンを押して設定を保存します。
実際の管理画面
上の画像のように管理画面の投稿一覧にアイキャッチ画像を表示させることが出来ました。
Quick Featured Images
続いてご紹介するプラグインが「Quick Featured Images」。
このプラグインは先ほどの「Admin Columns」とは異なり、アイキャッチ画像に特化したプラグインとなっており、管理画面の投稿一覧にアイキャッチを表示するだけであればプラグインを有効化するだけでOKです。
なお、こちらのプラグインは各設定画面が英語になっています。
プラグインを追加
「プラグイン」→「新規追加」と進み、右上にある入力欄に「Quick Featured Images」と入力することで表示される画像のプラグインが今回解説するプラグインです。このプラグインを「今すぐインストール」→「有効」にします。
プラグインの設定
先ほどもお伝えした通り、このプラグインはインストールして有効化するだけで今回の記事でやりたいことは実現可能です。
ただしインストールしただけでアイキャッチが表示されるのは「投稿」のみになっていて、「カスタム投稿」の場合は少し設定が必要になります。
「Quick Featured Images」の設定は管理画面のサイドバーに画像赤枠①のように「アイキャッチ画像」という項目が作られ、ここで各種設定が可能です。
「カスタム投稿」の一覧画面にアイキャッチ画像を表示する場合、「アイキャッチ画像」→「設定」と進み、画像赤枠②
・投稿
・固定ページ
・●●●（カスタム投稿のラベル名）
「投稿」と「固定ページ」はプラグインインストールと同時にチェックが入りますが「カスタム投稿」の各項目にはチャックが入っていません。「アイキャッチ画像」を表示したい「カスタム投稿」に個別にチェックをすることで一覧画面に「アイキャッチ画像」を表示させることが出来ます
実際の管理画面
上の画像のように管理画面の投稿一覧にアイキャッチ画像を表示させることが出来ました。
このプラグインの場合、一覧画面から画像を変更したり編集したり、削除したりすることが出来るようになります。
まとめ
今回の記事ではWordPress管理画面の投稿一覧に「アイキャッチ画像」を表示する方法を色々なパターンで解説してきました。
始めにもお伝えしました通り、「アイキャッチ画像」を表示しておくだけで、探している記事をより視覚的に見つけ出すことが出来るようになります。
ちょっとした手間・工夫できっとサイト運営が楽になると思います。
是非、WordPress管理画面の投稿一覧に「アイキャッチ画像」を表示させることを検討してみてはいかがでしょう。
