カスタム投稿と組み合わせるとより便利なプラグイン「Advanced Custom Field」を使って、カスタム投稿のカスタムタクソノミーのタームに画像を設定して、それを表示する方法をご紹介します。
手順
- カスタム投稿・タクソノミーの設定
- Advanced Custom Fieldの設定
- ターム毎に設定した画像を取得
最後に一緒に使うと便利なプラグインも紹介しています〜
後々ごちゃごちゃになることもあるので、色々設定を始める前に、どういう構造にしたいのか紙などに書いた方がいいです。
例1:
商品(タクソノミー) ー商品カテゴリ1(ターム) ー商品カテゴリ2(ターム) ー商品カテゴリ3(ターム)
例2:
商品カテゴリ大1(タクソノミー) ー商品カテゴリ小1ー1(ターム) ー商品カテゴリ小1ー2(ターム) ー商品カテゴリ小1ー3(ターム) 商品カテゴリ大2(タクソノミー) ー商品カテゴリ小2ー1(ターム) ー商品カテゴリ小2ー2(ターム) ー商品カテゴリ小2ー3(ターム)
みたいな感じ
カスタム投稿・タクソノミーの設定
今回は例1の場合で作っていきます。
作り方は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]