Smart Custom Fieldsでカテゴリに登録した画像を表示する方法

WordPress | 2017.07.31

カテゴリ毎に画像を設定して、その画像を出力する処理を実装する機会があり、その時に使用した「Smart Custom Fields」でカテゴリ毎の画像を出力する方法をまとめておきたいと思います。

カテゴリリストを表示

前提としては、「Smart Custom Fields」を使用して、タイプが「画像」のカスタムフィールドをカテゴリに設定していることが前提です。
以下は一覧など、カテゴリリストを表示する場合の方法です。
ポイントは、「SCF::get_term_meta」で値を取得する部分です。ここでカスタムフィールドとして設定している画像オブジェクト情報を取得します。
その後は画像のURLを取得してHTMLに設定しています。

<?php 
// カテゴリー一覧を取得
$tax_alls = get_terms( "category" );

if ( count($tax_alls) > 0 ) :

   // カテゴリー一覧分ループを実施
   foreach ( $tax_alls as $tax ) :

     // カテゴリに設定されたカスタムフィールド情報を取得します。
     $cat_img = SCF::get_term_meta( $tax->term_id, 'category', 'cat_img' );
     // 画像のURLを取得します。
     $img_url = wp_get_attachment_image_src($cat_img, 'large');

     if($img_url):
     ?>

       <img src="<?php echo $img_url[0] ?>" alt="<?php echo $tax->name; ?>">

     <?php
     endif;
   endforeach;
endif;
?>

<?php

// カテゴリー一覧を取得

$tax_alls = get_terms( "category" );

if ( count($tax_alls) > 0 ) :

// カテゴリー一覧分ループを実施

foreach ( $tax_alls as $tax ) :

// カテゴリに設定されたカスタムフィールド情報を取得します。

$cat_img = SCF::get_term_meta( $tax->term_id, 'category', 'cat_img' );

// 画像のURLを取得します。

$img_url = wp_get_attachment_image_src($cat_img, 'large');

if($img_url):

<?php

endif;

endforeach;

endif;

カテゴリページで表示

カテゴリリストと違う部分としては、「get_category」を使用して表示しているページのカテゴリ情報を取得している部分です。
カテゴリ情報から「term_id」を取得している部分以降は同じです。

<?php
// 現在表示しているカテゴリ情報を取得
$cat_data = get_category( $cat );
if($cat_data):

  // カテゴリに設定されたカスタムフィールド情報を取得します。
  $cat_img = SCF::get_term_meta( $cat_data->term_id, 'category', 'cat_img' );
  // 画像のURLを取得します。
  $img_url = wp_get_attachment_image_src($cat_img, 'large');

  if($img_url):
  ?>

    <img src="<?php echo $img_url[0] ?>" alt="<?php echo $cat_data->name; ?>">

  <?php
  endif;

endif;
?>

<?php

// 現在表示しているカテゴリ情報を取得

$cat_data = get_category( $cat );

if($cat_data):

// カテゴリに設定されたカスタムフィールド情報を取得します。

$cat_img = SCF::get_term_meta( $cat_data->term_id, 'category', 'cat_img' );

// 画像のURLを取得します。

$img_url = wp_get_attachment_image_src($cat_img, 'large');

if($img_url):

<?php

endif;