WordPressで記事に登録されているカスタムフィールドの画像を、管理画面の投稿一覧に表示する例を紹介します。

前回（【WordPress】【jQuery】レスポンシブ対応のスライダー・slickを投稿で使いたい）に引き続き、画像を登録するカスタムフィールドにはSmart Custom Fieldsを使います（変数なども前回の記事のものを使いまわしています）。

投稿やカスタム投稿の管理画面上の一覧には、記事のタイトルや公開日時が掲載されています。今回はそこにカラムを一列追加し、カスタムフィールドに登録されいてる画像をサムネイルとして出力します。

フィルターフックには、manage_posts_columns（カスタム投稿の場合はmanage_{$post_type}_posts_columns）とmanage_posts_custom_column（カスタム投稿の場合はmanage_{$post_type}_posts_custom）を使います。

サムネイル（画像）用のカラム（列）を追加

まずは管理画面の投稿一覧に、サムネイルを表示するためのカラム（列）を追加する処理をfunctions.phpに記述します。

functions.php

functions.phpの記述例です。今回はカスタム投稿の例です。

ここでmanage_{$post_type}_posts_columnsをフックとした関数を記述します。「product」の部分がカスタム投稿タイプになります。任意の名前に変更してください。

function add_product_column_thumdisp( $columns ) {
  $columns['thumbnail'] = __('Thumbnail');
  return $columns;
}
add_filter('manage_product_posts_columns', 'add_product_column_thumdisp');

カスタムフィールドの値を取得し、追加した列へ出力

カラムが追加できたら、各記事のカスタムフィールドの値を取得し、カラムへ表示させます。複数登録されている場合、最初の1枚だけが表示される仕組みです。

functions.php

こちらではmanage_{$post_type}_posts_customをフックとした関数を記述します。get_post_meta()関数やSCF::get()に使われているフィールド名は前回の記事を流用しています。任意の名前に変更してください。

サムネイル画像の出力には、wp_get_attachment_image()関数を使っています。第一引数にはアタッチメントIDを指定、第二引数の$sizeは表示させたい画像サイズを指定してください。（初期値： ‘thumbnail’）

function add_product_column_thum_id($column_name, $id) {
  if ( 'thumbnail' == $column_name ) {

    /* カスタムフィールドに値があるかチェック */
    $wp_slick_flg = get_post_meta( $id, 'wp_slick_img', true);

    /* カスタムフィールドに値がある場合、サムネイル表示処理を行う */
    if($wp_slick_flg) {

      /* 表示に使うスマートカスタムフィールドの値を取得 */
      $wp_slick_grp = SCF::get( 'wp_slick_grp' );

      /* スマートカスタムフィールドの画像タイプはアタッチメントIDが入っています。今回は最初の一枚を使います。 */
      $wp_slick_img_id = $wp_slick_grp[0]['wp_slick_img'];

      /* アタッチメントIDから代替テキストを取得 */
      $wp_slick_img_alt = get_post_meta( $wp_slick_img_id, '_wp_attachment_image_alt', true );

      /* アタッチメントIDから画像を取得し、代替テキストと一緒に出力用の変数へ代入 */
      $output_thumbnail = wp_get_attachment_image( $wp_slick_img_id, $size = array(90, 90), $icon = false, $attr = array('alt' => $wp_slick_img_alt) );

      echo $output_thumbnail;
    }
  }
}
add_action('manage_product_posts_custom_column', 'add_product_column_thum_id', 10, 2);