Advanced Custom Fieldsでカテゴリにカスタムフィールドを追加し表示する方法

公開日: : 最終更新日:2015/01/27 wordpress

カテゴリーやタグ、カスタムタクソノミーのアーカイブで、カテゴリ毎に独自のテキストや画像などを表示させたいときなどに、カテゴリページにカスタムフィールドを作成する方法を解説していきます。

function.phpに直接、記入していく方法もありますが、今回は、『wordpressでカスタムフィールドを使うならこれで決まりでしょ!』という位の、便利なプラグイン『Advanced Custom Fields』を使用します。

Advanced Custom Fieldsは、アドオンで機能を追加することもでき、非常に便利なプラグインなので、wordpressで色々やりたいな。という方はインストールをおすすめします。 Advanced Custom Fields

Advanced Custom Fieldsでカテゴリにカスタムフィールドを追加する。

Advanced Custom Fieldsのインストールや基本的な使い方は省略します。
インストールや基本的な使い方なんかはこちらの記事などがお役に立つかと思います。

でははじめます。

使用プラグイン:Advanced Custom Fields 4.3.0

任意のカスタムフィールドを作成

Screenshot_3

作りたいカスタムフィールドを作成します。

今回はテキストフィールドを作成します。

ちなみにフィールドタイプに画像を選択すれば、画像のアップロードもできるようになります。

カスタムフィールドの追加場所を決めます

Advanced Custom Fieldsのカスタムフィールド作成画面で、作成したカスタムフィールドをどこに追加するか設定します。

設定は、上記画像の通り、『Taxonomy Term』『等しい』『カテゴリ』を選択します。

タグに作りたい場合は、『カテゴリー』を『タグ』にすればOKですし、カスタムタクソノミーの場合も同様に『カテゴリー』を、任意のタクソノミーに設定すればOKです。

カテゴリ編集画面を確認

Screenshot_4 上記画像が、カテゴリ編集画面です。

いつもの項目に追加して、先ほど作成したカスタムフィールド「カテゴリに表示するテキストだ」が追加されていますね。
ちなみに、フィールドタイプに画像を選んだ場合は、以下のような感じになります。 Screenshot_5

テンプレートに作成したカスタムフィールを表示する

私はここで結構、苦労しました。

通常、Advanced Custom Fieldsで投稿や固定ページ等に作成したカスタムフィールドを表示させるには、

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

で表示できますが、カテゴリアーカイブの場合、どうもこれだと無理っぽい。

色々、調べた結果、以下のコードで表示できました。

カテゴリーに作成したカスタムフィールドを表示する

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

カスタムタクソノミーに追加したカスタムフィールドを表示する

カスタムタクソノミーの場合は上記コードではうまくいかなかったので、もう少し工夫がいりました。

<?php
$term_slug = get_query_var('カスタムタクソノミーの名前');
$term_ID = get_term_by('slug',$term_slug,カスタムタクソノミーの名前)->term_id;
$任意の変数名1 = ('カスタムタクソノミーの名前_'.$term_ID.'_カスタムフィールドのフィールド名');
echo get_option($任意の変数名1);
?>

一応、少し解説すると、

1行目のget_query_var関数で、カスタムタクソノミーの名前から、(そのカスタムタクソノミーの)スラッグを$term_slug変数に入れています。
2行目のget_term_by関数で、タームIDを$term_ID変数に入れています。
3行目では、$term_ID変数を元に、データベースのテーブルの中で、作成したカスタムフィールドの名前を(手動で)作成しています。
で、4行目で、get_option関数で、3行目で作成したテーブル名を元に、無理矢理、カスタムタクソノミーの値を抜き出したというわけです。

もっとスマートなやり方があるのかもしれませんが、とりあえずこれで今のところ、問題なく動いております。

2015/1/27追記

コメント欄にてぴよさんにもっと楽な方法を教えていただきました。
SQLデータベースから直接引っ張ってくるようなことをしなくても、以下のコードでカスタムタクソノミーに追加したカスタムフィールドを表示することが可能です。
ぴよさんありがとうございました!

<?php
$term_slug = get_query_var('カスタムタクソノミーの名前');
$term_ID = get_term_by('slug',$term_slug,カスタムタクソノミーの名前)->term_id;
$hoge = the_field(
'カスタムタクソノミーに追加したカスタムフィールドの名前',
'カスタムタクソノミーの名前_'.$term_ID); ?>

さいごに

カテゴリーやタグ、カスタムタクソノミーに設定したカスタムフィールドをどこでも表示できるようになると、かなり使い勝手がよくなります。

カテゴリー毎にタイトルを設定することもできますし、カテゴリ毎に違う画像を表示させたり、metaタグでindexやnoindexをカテゴリ毎に設定できるようにもできます。

Advanced Custom Fieldsを使えば、そんなに難しくなくできますので、ぜひやってみてください。

もっと、楽でスマートな方法やコードがあるよ~っていう方はぜひコメント欄で教えていただけるとうれしいです♪

関連記事

【WordPressプラグイン】画像アップロード時に自動で透かしを入れられる『Easy Watermark』で画像の不正利用を防ごう!

サイトやブログに画像をアップする際に、著作権フリーの無料素材画像などならともかく、自分で撮影した

記事を読む

投稿記事内でスマホ用とPC用で出力するコンテンツを条件分岐させる方法

前回は、テーブル表示をPC・スマホ両方に対応させるレスポンシブ化する方法をご紹介しましたが、今回も引

記事を読む

host2

サーバー移転時にDNSの浸透を待たずに新旧サーバーに自在にアクセスする方法

今回は、独自ドメインでwebサイトを運用している方向けのTIPSです。 サーバーの引越時などに、新サ

記事を読む

facebook-76531_640

【WordPress】Stinger3にFacebookのOGP設定をしたよ。

当ブログもたまにツイッターでシェアしてくれたり、フェイスブックでいいね!してくれたりする記事があ

記事を読む

【WordPress】記事ごとにアドセンスの表示・非表示を設定し、代替広告を表示するカスタマイズ

先日、ブロガーの桃音さんにアドセンスの警告が来たということで話題になっていました。  

記事を読む

スクリーンショット 2014-11-16 12.07

【WordPress】「下書きを保存しています…」と表示されたまま投稿画面で記事の保存ができなくなる。

先日、いつも通りこのブログを更新しようと記事を書いていたところ、WordPressの投稿画面で、

記事を読む

【WordPress】iframeを使わずにはてなのブログカード風に外部リンクをデザインするショートコード

先日、WordPressで自分のブログ内のほかの記事に内部リンクを貼る場合に、はてなブログなんかでよ

記事を読む

hatenaoshirase03

自分のWordPressブログにはてブが付いたらChromeにお知らせしてもらう方法

いまさらですが、はてなブックマークを使い始めました。(はてなブックマークを使い始めたので、登録~

記事を読む

education-614155_640

【WordPress】内部リンクをはてなのブログカード風のサムネイル付きリンクにデザインするショートコード

はてなブログで使われているブログカードみたいなデザインで、WordPressで内部リンクを貼るこ

記事を読む

093

複数のカテゴリ(ターム)に属する投稿を抽出してアーカイブに表示する方法

たとえば、全国の飲食店を紹介するサイトをWordPressで構築するとします。 そのときに、カ

記事を読む

Comment

  1. ぴよ より:

    楽な方法がありましたので、ご連絡しました。

    $term_id まで撮れたら
    $hoge = the_field(
    ‘カスタムタクソノミーに追加したカスタムフィールドの名前’,
    ‘カスタムタクソノミーの名前_’.$term_id
    );

    で、取れました。

    • fukudon より:

      ありがとうございます!!
      教えていただいた通りにやってみたら出来ました!
      たしかにこちらの方法の方が全然スマートですね!
      助かります。うれしいです(o^^o)
      ありがとうございました!記事も修正しておきますね~。

Message

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

CAPTCHA


第一滝本館外観
登別温泉の第一滝本館にて日帰り入浴 ※1,500坪の敷地に35の湯船の大浴場!

北海道旅行5日目に札幌駅前のトヨタレンタカーでプリウスをレンタルして日

ドゥーブルプレート
小樽の洋菓子店「LeTAO(ルタオ)」で極上スイーツ「ドゥーブルプレート」をいただきました。

札幌から少し足を延ばして小樽まで。 小樽のレトロでかわいい町をぶ

「すすきの」で北海道料理をリーズナブルに味わえる海鮮居酒屋『海さくら』

登別温泉に日帰りで行った次の日はお昼までゆっくり寝て、ランチにラマイの

スープカレー(ポーク)
RAMAI(ラマイ)札幌中央店で食べた初スープカレーが美味すぎた!

札幌発祥の道産子のソウルフード『スープカレー』を食べてきましたよ。

すすきの「禅」で海鮮しゃぶしゃぶと北海道の地酒を堪能

札幌・すすきのの狸小路あたりにあるしゃぶしゃぶ・すき焼き専門店「禅」で

→もっと見る

PAGE TOP ↑