WordPress2018.03.30 Last update

Advanced Custom Fields で登録したタームのフィールド値を取得する方法

by Takumi Hirashima

WordPress のプラグイン Advanced custom field（以下 ACF）を使って、タームに登録したカスタムフィールドの値を取得して表示する方法を紹介します。
例えば、タームにキーカラーを設定して、色で分けられたカテゴリ一覧を表示したいときに便利な方法です。

基本的な取得方法
タームに登録された画像の表示方法
タームに登録したカスタムフィールド値（キーカラー）を表示する方法

基本的な取得方法

ACF でカスタムフィールドを作成。特定のカテゴリまたはタクソノミーを指定して、カテゴリやタームに固有の値を設定します。
次のコードを追加してフィールド値を取得します。

<?php get_field('タームフィールド名','タクソノミー名_'.$term_id); ?>

タームフィールド名はACFで指定したフィールド名です。
タクソノミー名（任意の名前）_ の最後の ‘_（アンダーバー）’ は必須なので消さないように気をつけましょう。

タームに登録された画像の表示方法

タームにカスタムフィールドで画像を登録できるようにした場合の表示方法を紹介します。
例えば、タームにカスタムフィールド名が画像の時に、次のコードをテンプレートのタームの値を取得できるループ無いなどに追加します。

<?php $image = get_field('タームフィールド名','タクソノミー名_'.$term_id); if( !empty($image) ): ?>

<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php else: ?>

<img src="<?php echo get_template_directory_uri(); ?>/img/pic_dammy.jpg" alt="">

<?php endif; ?>

画像を表示内容をカスタマイズしたい場合はAdvanced Custom Fields の取得と表示方法の画像の取得方法をご確認ください。

タームに登録したカスタムフィールド値（キーカラー）を表示する方法

前項を参考に、投稿に紐づくタームに設定したカラーピッカーのカスタムフィールド値の取得方法を紹介します。
例えば、タクソノミーのスラッグが information-category 、登録されたカスタムフィールドの値が #009933 の時に、アンカータグの背景色にその値を付与する場合は次のコードをテンプレートのループ内に追加します。

<?php // 投稿に紐づくタームを表示

$terms = wp_get_object_terms($post->ID, 'information-category'); // タクソノミーのタームを取得

if(!empty($terms)){

if(!is_wp_error($terms)){

echo '<ul>';

foreach($terms as $term){

$term_link = get_term_link($term->slug, $custom_post_cat); // タームアーカイブのリンクを取得

$term_name = $term->name; // ターム名の取得

$term_id = $term->term_id; // タームIDの取得

$term_color = get_field('キーカラー','information-category_'.$term_id); // カスタムフィールドの取得

echo '<li><a href="'.$term_link.'" style="background-color:'.$term_color.';">'.$term_name.'</a></li>'; // タームの表示

}

echo '</ul>';

}

}

?>

表示がうまくいかない場合は、タクソノミーのスラッグ（上記のサンプルコードでは二箇所）を変更しているかを確認。二箇所目の _ が残っていることを確認。ループ内にコードを設置しているかを確認してください。

まとめ

WordPress のプラグイン Advanced custom field（以下 ACF）を使って、タームに登録したカスタムフィールドの値を取得して表示する方法を紹介しました。
カテゴリやタームに登録したカスタムフィールドの値がが取得できれば表現の幅が広がると思います。取得に少し癖がありますが頑張ってチャレンジしてみてください。

基本的な取得方法

タームに登録された画像の表示方法

タームに登録したカスタムフィールド値（キーカラー）を表示する方法

まとめ

合わせて読みたい関連記事