前回、投稿時にアイキャッチ画像を自動設定する方法を紹介しました。
今回は管理画面の投稿一覧にアイキャッチ画像の項目を追加する方法を紹介したいと思います。
既に同機能を有するプラグインや、プラグインなしの方法を紹介する記事もあることにはあるのですが、スマホ時にアイキャッチ画像が表示されなかったり、表示されても表示が崩れたりしたのと、アイキャッチ画像の未設定でのフィルター機能が欲しかったので、自作することとしました。
仕様
- アイキャッチ画像の項目は、先頭（左端）に追加する。
- スマホでもアイキャッチ画像の項目を表示（ドロップダウンではなく常に表示）する。
- アイキャッチ画像の未設定フィルターを追加する。
スクリーンショット
PC の場合
スマホの場合
アイキャッチ画像の項目の追加
まずは、アイキャッチ画像の項目だけを追加してみます。
functions.php に下記コードを追加します。
// アイキャッチ画像項目を追加します。
function my_manage_columns( $columns ) {
if ( ! is_array( $columns ) ) {
$columns = array();
}
$new_columns = array();
foreach ( $columns as $key => $value ) {
if ( $key == 'title' ) {
$new_columns['featured-image'] = '画像';
}
$new_columns[$key] = $value;
}
return $new_columns;
}
add_filter( "manage_posts_columns", 'my_manage_columns' ); // 投稿一覧
add_filter( "manage_pages_columns", 'my_manage_columns' ); // 固定ページ一覧
// アイキャッチ画像項目を出力します。
function my_manage_custom_column( $column, $post_id ) {
if ( $column == 'featured-image' ) {
if ( has_post_thumbnail( $post_id ) ) {
echo get_the_post_thumbnail( $post_id, 'thumbnail' );
} else {
echo '<div class="featured-image-none"></div>';
}
}
}
add_action( "manage_posts_custom_column", 'my_manage_custom_column', 10, 2 ); // 投稿一覧
add_action( "manage_pages_custom_column", 'my_manage_custom_column', 10, 2 ); // 固定ページ一覧
// アイキャッチ画像項目のスタイルを出力します。
function my_admin_head_edit() {
$style = <<<STYLE
.fixed .column-featured-image {
width: 60px;
}
.featured-image img,
.featured-image div {
width: 48px;
height: 48px;
}
.featured-image-none {
border: #cccccc dashed 1px;
}
.wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-featured-image::before {
content: "";
}
.wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-featured-image {
display: table-cell !important;
}
.wp-list-table tr:not(.inline-edit-row):not(.no-items) td.hidden {
display: none !important;
}
STYLE;
echo '<style type="text/css" id="my-featured-image-column-css">' . "\n";
echo $style;
echo "</style>\n";
}
add_action( 'admin_head-edit.php', 'my_admin_head_edit', 100 );
上記コードでは、投稿一覧および固定ページ一覧の両方が対象です。固定ページ一覧を対象外にするには、17 行目と 31 行目の行をコメントアウト（または削除）してください。
アイキャッチ画像の未設定フィルターを追加
次に、アイキャッチ画像の未設定フィルターを追加します。
functions.php に下記コードを追加します。
// 投稿一覧にアイキャッチ画像フィルター選択項目を追加します。
function my_restrict_manage_posts_featured_image( $post_type ) {
if (
$post_type == 'post' // 投稿一覧
|| $post_type == 'page' // 固定ページ一覧
) {
$filter = isset( $_GET['featured_image_filter'] ) ? $_GET['featured_image_filter'] : '';
echo '<select name="featured_image_filter" id="featured_image_filter">';
echo '<option value="all" ' . selected( 'all', $filter ) . '>アイキャッチ画像</option>';
echo '<option value="notset" ' . selected( 'notset', $filter ) . '>未設定</option>';
echo '</select>' . "\n";
}
}
add_action( 'restrict_manage_posts', 'my_restrict_manage_posts_featured_image' );
// 投稿一覧のクエリ―にアイキャッチ画像の条件を設定します。
function my_parse_query_featured_image( $query ) {
global $pagenow;
if ( is_admin() && $pagenow == 'edit.php' && isset( $_GET['featured_image_filter'] ) && $_GET['featured_image_filter'] != 'all' ) {
$query->query_vars['meta_key'] = '_thumbnail_id';
$query->query_vars['meta_compare'] = 'NOT EXISTS';
$query->query_vars['meta_value'] = '';
}
}
add_filter( 'parse_query', 'my_parse_query_featured_image' );
固定ページ一覧を対象外にするには、5 行目の行をコメントアウト（または削除）してください。
おまけ
WordPress 日本語版では「アイキャッチ画像」と表記しますが、英語版での表記は「Featured Image」です。直訳すると「注目画像」でしょうか。
個人的には無理して訳さず「フィーチャー画像」でいいかなと思いますが。いろいろ議論された結果なのであろうと思いますので「アイキャッチ画像」のまま変更しないで貫いてもらいたいとも思います。
ちなみに、WordPress コアのコードでは the_post_thumbnail のように thumbnail（サムネイル）だったりします。まっ、これだと意味合い的に合わない感じですね。
コーディングする際に変数や関数の命名に悩むんですよね・・・。
最後に
アイキャッチ画像が未設定の投稿を探すのって意外と大変なんですよね。functions.php に僅か数十行のコードを追加するだけなので、是非利用してみてください。
また、この機能を追加した XO Featured Image Tools プラグイン（バージョン 0.3.0 より）も公開しているので、プラグインで簡単に実装したい方はこちらをどうぞ。