2020/08/01 23:07

[Wordpress]ACFで設定した画像を管理画面の投稿一覧にサムネ表示させる方法

本ブログでもたびたび紹介する便利なWordpressプラグインのACF。

そのACFで設定した画像を管理画面の一覧にサムネとして表示したい場合の記述方法を紹介します。

下記は「sample_img」というフィールド名で画像を設定する場合の一例。

※出力設定は画像URLにしましょう

【functions.php】


<?php
// ACFのアイキャッチ画像項目を追加
function my_manage_columns( $columns ) {
  if ( ! is_array( $columns ) ) {
    $columns = array();
  }
  $new_columns = array();
  foreach ( $columns as $key => $value ) {
    if ( $key == 'title' ) {
      $new_columns['sample_img'] = '画像';
    }
    $new_columns[$key] = $value;
  }
  return $new_columns;
}
add_filter( "manage_posts_columns", 'my_manage_columns' );
アイキャッチ画像項目を出力
function my_manage_custom_column( $column ) {
  if ( $column == 'sample_img' ) {
    if ( get_field($column) ) {
      echo "<img src='". get_field($column). "' style='width: 100px;' alt=''>";
    } else {
      echo "";
    }
  }
}
add_action( "manage_posts_custom_column", 'my_manage_custom_column', 10, 2 );
 
// 上記用のスタイルを出力
function my_admin_head_edit() {
  $style = <<<STYLE
  .sample_img {
    width: 100px !important;
  }
  @media screen and (max-width: 782px) {
    .column-sample_img {
      display: none !important;
    }
  }
STYLE;
  echo '<style type="text/css">' . "\n";
  echo $style;
  echo "</style>\n";
}
add_action( 'admin_head-edit.php', 'my_admin_head_edit', 100 );