管理画面の投稿一覧ページにアイキャッチ画像の列を追加したい時、ちょっとググればすぐに同じ様なコードがたくさん出てきます。
何も考えずにそのコードをコピペで使い回していると、
カスタム投稿一覧で「アイキャッチ画像」というカラムは無事に追加されるのに、内容の画像だけ表示されない
というような現象にぶち当たってしまいまして、かなり謎だったのですがやっと解決しました。
同様の状況に陥る人がいるかもしれないので、対処法をメモしておきます。
なにがいけなかったのか
落ち着いて、今までコピペだけしていたコードを見直します。
検索するとすぐに出てくるコード
//投稿一覧画面でサムネイル表示
function add_posts_columns_thumbnail($columns) {
$columns['thumbnail'] = 'アイキャッチ画像';
return $columns;
}
function add_posts_columns_thumbnail_row($column_name, $post_id) {
if ( 'thumbnail' == $column_name ) {
$thumb = get_the_post_thumbnail($post_id, array(100,100), 'thumbnail');
echo ( $thumb ) ? $thumb : '－';
}
}
add_filter( 'manage_posts_columns', 'add_posts_columns_thumbnail' );
add_action( 'manage_posts_custom_column', 'add_posts_columns_thumbnail_row', 10, 2 );最後の２行に注目。
add_filter( 'manage_posts_columns', 'add_posts_columns_thumbnail' );
add_action( 'manage_posts_custom_column', 'add_posts_columns_thumbnail_row', 10, 2 );フィルターフックとアクションフックがされていますね。
アイキャッチ画像のための列を追加しますよ、というフィルターフックと、その列に画像を表示させるよ、というアクションフック。
今回陥った、「アイキャッチ画像」というテーブルは追加されるのに画像が表示されないという現象から考えると、2つ目のアクションフックだけ反応していないことが推測されます。
「manage_posts_custom_column カスタム投稿」 とかで調べてみると答えを発見できました。
パパッと調べるだけでは冒頭のコードだけを記載しているサイトが多く、それでOKだと思ってましたが、投稿タイプによってフック先が違うみたいです。
各投稿タイプでのフック先
列を追加する一つ目のフックについては、
- 投稿ページでは : manage_posts_columns
- 固定ページでは : manage_pages_columns
- 特定のカスタム投稿では : manage_${post_type}_posts_columns
画像を表示する2つ目のフックについては、
- 投稿ページでは : manage_posts_custom_column
- 固定ページでは : manage_pages_custom_column
- 特定カスタム投稿では : manage_${post_type}_posts_custom_column
という風に、投稿タイプによって対応するフック先が変わってきます。
一番ややこしいのが、カスタム投稿のフック先
基本的には、1つ目のフックも2つ目のフックも、投稿ページ用の'manage_posts_columns'と'manage_posts_custom_column'がカスタム投稿タイプにも適用されます。
しかし！
カスタム投稿タイプの設定で、階層構造の設定が有効になっている場合（'hierarchical' => trueの時）、
2つ目のフック、'manage_posts_custom_column'だけ効かなくなり、代わりに固定ページ用の'manage_pages_custom_column'が有効になるのです！
なんてこった。笑
このせいで、1つ目のフックだけ有効になって、2つ目のフックだけがなぜか適用されないという謎現象が起きるのでした。
投稿一覧ページにアイキャッチ画像を表示するコード自作版
コピペで使っていたコードはよく見ると中身も微妙だったので、汎用性のあるコードとして自作しました。
/**
* 各投稿一覧ページにアイキャッチ画像用の列を追加
*/
add_filter( 'manage_posts_columns', 'add_custom_post_columns'); //投稿 & カスタム投稿
add_filter( 'manage_pages_columns', 'add_custom_post_columns' ); //固定ページ
if ( !function_exists( 'add_custom_post_columns' ) ) {
function add_custom_post_columns( $columns ) {
global $post_type;
if( in_array( $post_type, array('post', 'page', 'my_custom_pt') ) ) {
$columns['thumbnail'] = $post_type.'アイキャッチ画像'; //カラム表示名
}
return $columns;
}
}
/**
* サムネイル画像を表示
*/
add_action( 'manage_posts_custom_column', 'output_custom_post_columns', 10, 2 ); //投稿 & カスタム投稿(階層構造が無効)
add_action( 'manage_pages_custom_column', 'output_custom_post_columns', 10, 2 ); //固定ページ & カスタム投稿(階層構造が有効)
if ( !function_exists( 'output_custom_post_columns' ) ) {
function output_custom_post_columns( $column_name, $post_id ) {
if ( 'thumbnail' === $column_name ) {
$thumb_id = get_post_thumbnail_id( $post_id );
if ( $thumb_id ) {
$thumb_img = wp_get_attachment_image_src( $thumb_id, 'medium' ); //サイズはご自由に
echo '<img src="',$thumb_img[0],'" width="160px">';
} else {
echo 'アイキャッチ画像が設定されていません';
}
}
}
}サムネイル画像の列を追加させたいときなどはこれをコピペし、フック先を考えなくていいように全ての投稿タイプで有効になるように組んでいます。
列を追加させたい投稿タイプを、以下のように関数の中で判定しています。
in_array( $post_type, array('post', 'page', 'my_custom_pt')詳しくは以下をご覧ください。
