» カスタムフィールドに投稿した画像を管理ページの一覧に表示してみる

カスタムフィールドに投稿した画像を管理ページの一覧に表示してみる

ワードプレスのカスタム投稿で”商品紹介”などをしていると、記事数が増えてくるにつれ、商品情報編集しようと目的の商品記事を探す際にタイトル(商品名?)だけでは探すのに一苦労!!と言う事が多々あります。

通常の記事一覧ページでは『記事タイトル』と『公開日』しかありませんが、「ここに商品画像があれば・・・」と感じたことは無いでしょうか。

そんな時はfunction.phpで、アクションフックとフィルターフックを使って管理ページをカスタマイズします。

    
<?php
//管理画面記事一覧のカスタマイズ カスタムフィールドに投稿した画像を表示
add_filter( 'manage_該当のカスタム投稿名_posts_columns', 'manage_custom_columns' );
function manage_custom_columns($columns) {
    $columns['カスタムフィールド名'] = '管理ページに表示するカラム名(任意のネーミング)';
    return $columns;
}
 
add_action( 'manage_該当のカスタム投稿名_posts_custom_column', 'add_custom_columns', 10, 2 );
function add_custom_columns($column_name, $post_id) {
    if( $column_name == 'カスタムフィールド名' ) {
        $img_url = get_field('カスタムフィールド名');
        echo "<img src='" . $img_url . "' alt='' width='100' />";
    }
}
 
?>
 
  

最後のechoに続く部分は、はきだすHTMLですのでimgタグでget_fieldで取得した画像URLを埋め込んでいるだけです。
(※ 当然ですが画像のカスタムフィールドを作るときに『画像URL』で指定してないと表示されません!)

ここでaltは、、まあいらないかもです。
withはカラムの横幅100%で良いのではないでしょうか。

ちなみにカスタムフィールドが画像でなくテキストなら下記で行けるはずですが、、

    
add_filter( 'manage_該当のカスタム投稿名_posts_columns', 'add_posts_columns' );
function add_posts_columns( $columns ) {
  $columns['カスタムフィールド名'] = '管理ページに表示するカラム名(任意のネーミング)';
  return $columns;
}
add_action( 'manage_該当のカスタム投稿名_posts_custom_column', 'add_custom_columns', 10, 2 );
function add_custom_columns( $column_name, $post_id ) {
  if ( $column_name == 'カスタムフィールド名' ) {
    $cf_name = get_post_meta( $post_id, 'カスタムフィールド名', true );
    echo ( $cf_name ) ? $cf_name : '-';
  }
 
  

これはググれば沢山出てきますね。

カスタムフィールドが画像の場合はあまり見かけなっかたので、自分が忘れないために残しておきます。

==========================================================
横浜・川崎でのホームページ制作、インターネット関連のご相談はお気軽ご連絡ください。

有限会社テクニカルプロデュース
神奈川県川崎市中原区新丸子町745
044-711-8100
メールでのお問合せはこちら>

ホームへ戻る

お気軽にお問合せください。
お客様のご要望をお聞きし、制作企画とお見積りのご提案いたしますのでご検討ください。
 044-711-8100