WEB制作者向け無料テーマ「Arkhe」をリリースしました

管理画面内の投稿一覧ページ・固定ページ一覧にアイキャッチ画像を表示させるコード

WordPressの管理画面内の投稿一覧ページや固定ページのテーブルに、アイキャッチ画像表示用の列を追加する方法です。

基本の流れは

  1. アイキャッチ画像を表示するための列をテーブル追加するコード
  2. その追加された列に表示する内容を決めるコード

の2種類をセットすることです。

前まではその辺の記事からコピペしてよくわからずに使ってたのですが、ちゃんと自分なりのコードに置き換えたのでメモしておきます。

目次

コード全体

/**
* 投稿一覧ページや固定ページ一覧ページにアイキャッチ画像用の列を追加する
*/
add_filter( 'manage_posts_columns', 'add_custom_columns_for_thumb'); //投稿 & カスタム投稿
add_filter( 'manage_pages_columns', 'add_custom_columns_for_thumb' ); //固定ページ
if ( ! function_exists( 'add_custom_columns_for_thumb' ) ) {
  function add_custom_columns_for_thumb( $columns ) {
    $columns['thumbnail'] = 'アイキャッチ画像'; //アイキャッチ画像用カラムのキー名と表示名を任意で設定
    return $columns;
  }
}


/**
* 表示内容を決める
*/
add_action( 'manage_posts_custom_column', 'output_custom_columns_for_thumb', 10, 2 ); //投稿 & カスタム投稿(階層構造が無効)
add_action( 'manage_pages_custom_column', 'output_custom_columns_for_thumb', 10, 2 ); //固定ページ & カスタム投稿(階層構造が有効)
if ( ! function_exists( 'output_custom_columns_for_thumb' ) ) {
  function output_custom_columns_for_thumb( $column_name, $post_id ) {
    if ( 'thumbnail' === $column_name ) {
      //上で決めたキー名'thumbnail'があれば
      $thumb_img = get_the_post_thumbnail( $post_id, 'thumbnail' );
      echo $thumb_img ?: 'アイキャッチ画像が設定されていません';
    }
  }
}

アイキャッチ画像をサムネイル表示させているoutput_custom_columns_for_thumb()ですが、以下のようにしてもいいでしょう。

出力内容の自由度を高めた版

function output_custom_columns_for_thumb( $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 'アイキャッチ画像が設定されていません';
    }
  }
}

特定の投稿タイプにだけ列を追加したい場合

投稿一覧ページへのフックは'manage_posts_columns'フィルターと'manage_posts_custom_column'アクションを使っていますが、これは通常の投稿と、カスタム投稿のどちらにも反映されるフックになります。

*後述の注意点をお読みください。

なので、上側の関数のadd_custom_columns_for_thumb()関数の中身を以下の様にして、列を追加する投稿タイプを指定することもできます。

投稿タイプを配列で指定することも可能

function add_custom_columns_for_thumb( $columns ) {
  global $post_type;
  if( in_array( $post_type, array('post', 'page', 'custom_post') ) {
    $columns['thumbnail'] = 'アイキャッチ画像';
  }
  return $columns;
}

もしくは、列を追加するのはどれか一つのカスタム投稿タイプだけでいい場合、

'manage_posts_columns'フィルターではなく'manage_${post_type}_posts_columns'フィルター使うといいでしょう。

注意点

コード内にもコメントしてありますが、

列を追加させる関数のフック先は、カスタム投稿も通常の投稿と同じ'manage_posts_columns'フィルターでOKです。

ただし、その追加された列の表示内容を決める関数のフック先のアクションは少し注意が必要で、

基本的には通常の投稿と同じく'manage_posts_custom_column'アクションにフックさせればいいのですが、階層構造が有効化されている場合のみ、'manage_pages_custom_column'アクションにフックさせる必要があります。

 

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次
WordPressテーマ SWELLWordPressテーマ SWELL