WordPress

2021.03.17

ACFでカテゴリーにカスタムフィールドを紐づける方法【WordPress】

通常のカテゴリー設定画面には名前・スラッグ・親カテゴリー・説明を入れる欄があります。

ですが、個別のアイコン設定や説明文を2種類作りたいなどもっと入力欄を追加したい場面が出てくると思います。

そんな時はカスタムフィールド用のプラグインのAdvanced Custom Fields(以下ACF)を使うことで簡単に入力欄を増やすことができます!

カスタムフィールドの追加

ACFをインストールしたらフィールドグループを作成します。
グループ名はわかりやすいものを自由につけていただいて大丈夫です。

「フィールド」から追加したいフィールドを入れていきます。
今回は補足説明用のWysiwygエディタと、アイコン用の画像エリアを追加してみました。

「位置」でどのカテゴリーに設定するか選びます。
左側のセレクトボックスは「タクソノミー」にし、右側のセレクトボックスは該当するカテゴリー名にして、保存します。
(今回は「カテゴリー」)

カテゴリー設定画面に移動すると、カスタムフィールドが反映されています。

カスタムフィールドの出力

カテゴリーごとのフィールドの入力を終えたら呼び出しをします。

試しにカテゴリー別の記事一覧ページで表示してみます。

<?php
$cat_id = get_queried_object()->cat_ID;
$post_id = 'category_'.$cat_id; 
$catimg = get_field('catimg',$post_id);
?>
<h2><img src="<?php the_field('icon',$post_id); ?>" alt=""><?php single_cat_title(); ?></h2>
<div><?php the_field('editor',$post_id); ?></div>

補足説明のエディタのフィールド名(スラッグ)=editor
アイコンのフィールド名(スラッグ)=icon
としています。

前半でカテゴリーのIDを取得し、<?php the_field('〇〇〇',$post_id); ?>でカスタムフィールドを呼び出します。

まとめ

カテゴリーにカスタムフィールドを紐づけられるとお客様に対しても提案の幅がグッと広がります。
是非ご活用ください!

関連記事はこちら

0

関連記事

  • 2021.06.29

    簡単にWordpressでログインしてないと見れないサイトを作る方法

    WordPress

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.04.14

    【WordPress】管理画面のカスタム投稿記事一覧をカテゴリーで絞り込めるようにする

    WordPress

おすすめ記事

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!