Tarokenlog

Contact

【WordPress】Advanced Custom Fieldを使ってターム毎に画像を設定して表示する方法＋おまけ

カスタム投稿と組み合わせるとより便利なプラグイン「Advanced Custom Field」を使って、カスタム投稿のカスタムタクソノミーのタームに画像を設定して、それを表示する方法をご紹介します。

手順

  • カスタム投稿・タクソノミーの設定
  • Advanced Custom Fieldの設定
  • ターム毎に設定した画像を取得

最後に一緒に使うと便利なプラグインも紹介しています〜

後々ごちゃごちゃになることもあるので、色々設定を始める前に、どういう構造にしたいのか紙などに書いた方がいいです。

例１：

商品(タクソノミー)
　ー商品カテゴリ１(ターム)
　ー商品カテゴリ２(ターム)
　ー商品カテゴリ３(ターム)

例２：

商品カテゴリ大１(タクソノミー)
　ー商品カテゴリ小１ー１(ターム)
　ー商品カテゴリ小１ー２(ターム)
　ー商品カテゴリ小１ー３(ターム)

商品カテゴリ大２(タクソノミー)
　ー商品カテゴリ小２ー１(ターム)
　ー商品カテゴリ小２ー２(ターム)
　ー商品カテゴリ小２ー３(ターム)

みたいな感じ


カスタム投稿・タクソノミーの設定

今回は例１の場合で作っていきます。
作り方はWordPressでカスタム投稿の作り方でも紹介しています。

カスタム投稿の設定

以下は一例なので必要に応じてlabel名などを変更してください。
今回は商品にしました

// カスタム投稿設定
function create_post_type() {
  $productlist = [
    'title',
    'editor',
    'thumbnail',
  ];
  register_post_type( 'items',
    array(
      'label' => '商品',
      'public' => true,
      'has_archive' => true, 
      'supports' => $productlist 
    )
  );
}
add_action( 'init', 'create_post_type' );

タクソノミーの設定

今回は商品のカテゴリ(ターム)を設定できるようにする感じにします。
これも必要に応じて、label名や文言を変更してください。

// タクソノミー設定
register_taxonomy(
  'itemscat',
  'items',
  array(
    'label' => '商品カテゴリ',
    'labels' => array(
      'all_items' => '商品カテゴリ一覧',
      'add_new_item' => '新規カテゴリを追加'
    ),
    'hierarchical' => true
  )
);

こんな感じで管理画面に表示されます。

Advanced Custom Fieldの設定

Advanced Custom Fieldの設定をします。
＊インストール済みの前提なのでインストールして有効化しておいてください〜

名前を入れて「フィールドを追加」をクリック

以下のような感じでわかりやすく入力します。
フィールドタイプはもちろん画像です

この辺はお好みで設定
＊返り値はIDで設定(後ほど画像のサイズを変更できるため)

位置ルールで「Taxonomy Term」を選択。

先ほどfunctions.phpで設定した「label名(商品カテゴリ)」を選択

以上で設定完了

管理画面の「商品」→「商品カテゴリ」にいくと、こんな感じで画像を追加する欄ができています。

これでそれぞれの商品カテゴリ(ターム)毎に画像を設定できます。

ターム毎に設定した画像を取得

以下のコードでターム毎に設定した画像を取得・ループできます。
＊index.php、front.php、page.phpでカスタムタクソノミーに登録したタームの一覧を表示する時

<?php
    $taxonomy_name = 'itemscat'; //表示したいtaxonomynameを設定
        $taxonomys = get_terms($taxonomy_name);
            if(!is_wp_error($taxonomys) && count($taxonomys)):
                foreach($taxonomys as $taxonomy):
                    $term_id = esc_html($taxonomy->term_id);
                    $term_idsp = "itemscat_".$term_id; //タクソノミー名とアンダーバー
                    $photo = get_field('photo',$term_idsp);
                    $photosp = wp_get_attachment_image_src($photo, 'full');
                    ?>
                    <img src="<?php echo $photosp[0]; ?>" alt="<?php echo esc_html($taxonomy->name); ?>" > 
<?php
    endforeach;
    endif;
?>

＊画像のサイズはfullになっていますので、必要に応じてお好みのサイズに変更してください。

おまけ

商品カテゴリ名(ターム名)を表示したい時

<?php echo esc_html($taxonomy->name); ?>

商品(ターム)の説明を表示したい時


赤枠内に商品説明を入力しておく

<?php echo esc_html($taxonomy->description); ?>

以上で表示できます。

商品を表示する順番を変えたい時は「Category Order and Taxonomy Terms Order」が便利

「Category Order and Taxonomy Terms Order」を検索してインストール

有効化すると管理画面の設定の欄に出てきます。

ここでは権限などを設定できますが、とりあえずノータッチで大丈夫です。

有効化すると管理画面の投稿の欄に「Taxonomy Order」と表示されるようになります。

順番の入れ替えはクリック＆ドラッグのみでできます。

以上です〜

使いこなしたら色々できそうですが、やりすぎるとカオスになるACF(Advanced Custom Field)ww

気をつけて使いましょう〜(僕も気をつけないと、、、ww)

ACFについてはKOTORIさんの記事がとても参考になります(^^)/

確かに、KOTORIさんが言うように、カテゴリーにカスタムフィールドを追加するためだけにACFを導入するのはちょっとめんどいというか本当にスマートではないですねwww

何か別の方法も探ってみますかな、、、

では〜

参考：カスタムタクソノミーに画像のカスタムフィールドを追加する方法[WordPress]


Posted

in

,

Tags:

,