Advanced Custom Fieldsでカテゴリごとのヘッダ画像・テキストの追加おぼえがき

WordPressをいじってる中で、ちょこちょこ出てくるのが、カテゴリごとにヘッダのテキストや画像を追加したいという要望。
通常のヘッダはそのままで、カテゴリ毎にちょっとしたテキストを入れたい場合はテンプレートを複製して、category-1.phpとかカテゴリIDを付けて対応する場合もあるし、画像だけだったらcssで画像のidを取得して振分ける方法もあるのだけど、今回は複数のカテゴリがあって、更にテキストも入れたい。ループの下に更に別のテキストも入れたい。
そして、実際に運用するのがクライアントだということもあって、汎用性を考えてAdvanced Custom Fieldsで対応します。

http://www.advancedcustomfields.com/

Advanced Custom Fieldsは前にもちょこっと書いたけど、カスタムフィールドをセットごとに作ることができて、更にそれをどこに使うかの指定ができるスグレモノのプラグインで、ここしばらくはほとんどのクライアントで使用しています。
最近は日本語にも対応してま~便利。ここまでくれば有料になってもお金払っちゃいます。


で、更に今回はカテゴリごとに対応させたいので、こんなかんじに名前をつけて、セットを作成します。
で、「位置」→「ルール」でカスタムフィールドを表示させる場所を指定します。「分類(追加・編集)」「カテゴリー」を選択すればこのカスタムフィールドのセットが投稿のカテゴリの部分に表示されるようになります。
テキストはテキストエリアを選ぶとhtmlも使えるので便利。

次は実際にカテゴリで値を入力。
カテゴリーの編集画面を見ると、ちゃんと下にカスタムフィールドが表示されてます。
これができると、ちょっとカテゴリを追加した場合も簡単にテキストや画像がここで設定できるので、テンプレートをいちいちいじらなくてOK。

で、最後は各フィールドを実際にテンプレートで呼び出す準備。
category.phpか、archive.phpにを編集。
このプラグインで呼び出す場合は

<?php the_field('フィールド名'); ?>

で値を取得できるのだけど、ループ外で呼び出す場合は、カテゴリのIDを取得しないと表示されませんでした。
なので、

<?php
  $cat_id = get_queried_object()->cat_ID;
  $post_id = 'category_'.$cat_id; 
  ?>
  <?php the_field('フィールド名',$post_id); ?>

こんなかんじにすればバッチリと表示されました。

というか、この覚書はこの部分を取っておきたかっただけ、、

これで、不要なテンプレートを量産しなくてすみます。

2016.3.9 追記:
画像のパスなどをACFで指定している場合、画像がないときに「?」となってしまいます。
そんな場合は下記のようにその値が入っている場合のみ表示するようにすれば解決できます(^^)

<?php if( get_field('image') ): ?><img src="<?php the_field('image'); ?>"><?php endif; ?>

15 thoughts on “Advanced Custom Fieldsでカテゴリごとのヘッダ画像・テキストの追加おぼえがき

  1. mnb says

    検索から辿り着きました。実現したい内容に近いtipsで非常に有り難く思っています。その上で大変恐縮なのですが、これに条件分岐を加えることは可能でしょうか?
    実現したいのは海外アーティストの紹介ページでアーティスト毎をカテゴリ分けし、そのそれぞれのアーカイブ(category.php)のヘッダー部分(ループ外)にてカテゴリの「説明」や設定したカスタムフィールドの値を表示させようとしています。
    その際に、あるアーティストは「公式サイト」の他に「公式Twitter」や「facebookページ」があるのですが、他のアーティストはそれが無い場合もあり。あおれらのリンク先をアイコン付きで表示させたく。値がある時は表示/無い場合は非表示の動作をループ外で、それをcategory.phpでやりたいと考えています。if文を書いたり悪戦苦闘しているのですがどうしても実現出来ておりません。
    大変不躾ですがご教授頂けますと幸いです。どうぞ宜しくお願い致します。

  2. km says

    こんにちは。私は下記のようにしています。

    < ?php if( get_field('フィールド名') ): ?>
    表示したい中身、css< ?php the_field('フィールド名'); ?>
    < ?php endif;?>

    これで値が入っている場合のみcssやhtmlでアイコンなどを装飾したデータが表示されると思いますが、試してみて下さい。
    if文の中に表示したい中身が全部入るようにしないと不要な部分が表示されてしまいます。

  3. mnb says

    kmさま
    早速のお返事ありがとうございます。
    教えて頂いたコードをヒントにトライしたところ希望通りに表示されました!感激です!

    僭越ですが、今回の私のように検索によりこの有意義な記事に今後辿り着く方の為にも記述したコードを報告させてください。

    css記述

    ご教授頂いたコードに『,$post_id』を加えることで希望通りのコードを吐き出すことができました。
    この度は不躾な質問にご回答頂きありがとうございました!今後とも素敵な記事を心待ちにしております。

    mnb

  4. mnb says

    度々すみません…。コードを記述したつもりが直接入力したせいか表示されませんでした。『』が必要だったのでしょうか。もう一度書かせてください。

    css記述

    です。重ね重ね、ありがとうございました!

  5. km says

    わざわざコメントありがとうございました。
    コードは<pre></pre>でくくっていただくと表示されると思います!(<を半角に直してください!)
    ほとんど個人的な覚え書きばっかりですが、参考になったのでしたら幸いです!

  6. toggle says

    私も検索から辿り着きました。

    一つ質問させて下さい。

    cat_ID;
    $post_id = ‘category_’.$cat_id;
    ?>

    をsingle.phpで現在の記事が属する子カテゴリの情報を自動で持ってくる事できますでしょうか?

  7. maru says

    実現したいことズバリの方法でしたので、そのままarchive.phpを編集して上手く表示させることができたのですが、タグ一覧のタイトルが空欄になってしまいました。

    恐らくループ外でタグのIDを取得すれば良いのだと思っているのですがphpに疎く書き方がわかりません。恐縮ですが教えて頂けませんでしょうか。よろしくお願いします。

  8. km says

    toggleさま、maruさま、お返事出来ずごめんなさい。
    ちょっと仕事がたてこんでしまい、なかなか検証できていませんでした!
    maruさま、自己解決されたようで、良かったです!すみません。。

    また時間ができたらこのあたりの使い方をさらに検証したいと思います!

  9. takapyoro says

    初めまして、意外とカテゴリのループ外でカスタムフィールドで登録した画像を表示させるというソースが見つからずに、難儀しておりましたところ、該当記事を発見しました。

    おかげさまで、archive.phpに画像を表示させることが出来たのですが、最初のご質問の様に画像が登録されていない時は、何も表示しない分岐を仕込みたいのですが、下記のコードにしたところ、画像を登録しているカテゴリでも、画像が非表示になってしまいました。

    cat_ID; $post_id = ‘category_’.$cat_id; ?>

    <img src="”>

    どこが誤ってるのか、何卒ご助言いただけますと幸いです。

  10. takapyoro says

    すみません、半角の<>があると表示されません。
    もう一度だけ、試させて下さい。
    <?php $cat_id = get_queried_object()->cat_ID; $post_id = ‘category_’.$cat_id; ?>
    <?php if( get_field(‘cat-mainv’) ): ?>
    <img src=”<?php the_field(‘cat-mainv’,$post_id); ?>”>
    <?php endif;?>

    何度も申し訳ありません。上のコメントは削除してください。

    • maki says

      こんにちは。

      <?php if( get_field('cat-mainv') ): ?><img src="<?php the_field('cat-mainv'); ?>"><?php endif; ?>
      

      こちらで試してみて頂けますか??(*^^*)

      • takapyoro says

        一見の突然の質問にご丁寧にレスしていただき、誠にありがとうございました。

        ループ外での取得でしたので、

        <?php $cat_id = get_queried_object()->cat_ID; $post_id = 'category_'.$cat_id; ?>
        <?php if( get_field('cat-mainv',$post_id) ): ?><img src="<?php the_field('cat-mainv',$post_id); ?>"><?php endif; ?>

        とすることで、category.phpにて、登録した画像の表示と未登録の場合は非表示にすることが可能となりました。

        心から御礼申し上げます。

        • maki says

          あ、ループ外だったんですね。気付かずにすみません。
          解決して良かったです(^^)

Leave a Reply to mnb Cancel Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です