Advanced Custom Fields でカテゴリーにアイコンを設置

カテゴリー : WordPress

投 稿 日 :

更 新 日 :

この記事は書いてから 約5年 経過しています。

※1年以上経過しているので情報が古い可能性があります。

タ  グ  : | | |

Advanced Custom Fields でカテゴリーにアイコンを設置

WordPress には カスタムフィールド なるものが実装されています。

知ってはいましたが「何だか難しそう・・・」と見て見ぬフリをしていた私ですが

使ってみると「おぉ!こりゃ便利だ!」と驚き

もしかして、自分は WordPress 中級者の仲間入りしたんじゃない?という錯覚にオチいったりします。

で、カスタムフィールドはそのまま使うよりプラグインを入れて使いやすくし、カテゴリーにアイコン付けたりしてみます。

以前にカテゴリーにアイコンを設置するプラグインの記事を書きました。

カテゴリー毎に個別のアイコンを紐付けるプラグイン Category Image(s)

今回は色々な用途に応用できるようにする為にもカスタムフィールドを使います。

カスタムフィールドって?

まずはカスタムフィールドを知らないといけませんが、全てを知る必要はありません。

下記サイト様に分かりやすく書いてあります。

カスタムフィールドについて たなブログ WordPress入門講座

要は「タイトル」「本文」など以外に、自分で決めた項目を設置できる、ということ。

例えば「点数」とか「国名」とかを設置し、それに「点数」なら「98点」とか「国名」なら「フランス」とかを入力し、記事にそのデータを保存しといて利用するって感じ。

タイトルにも記しましたが Advanced Custom Fields というプラグインを使用します。

今回は「カテゴリーにアイコン設置」するので、カテゴリーにもカスタムフィールドを使用できるようにし、そのカスタムフィールドに画像も登録しやすいようにする為。

公式で Advanced Custom Fields で検索すると出てきます。

下記に日本語で解説してくれてる有難いサイト様が

→ Advanced Custom Fields | WordPress 編

ホント助かります。

【追記】
閉鎖されたようです。分かり易いサイトだったので残念です。

Advanced Custom Fields の設定

有効化すると管理画面に カスタムフィールド なる項目が出ます。

Advanced Custom Fields 設定

まずグループを作り、そのグループの中に個別のフィールドを作っていく感じ。

Advanced Custom Fields フィールド作成

フィールドラベル は自分で分かりやすい名前をつける。

フィールド名 はアルファベットで。出力する時に使います判別しやすい名前で。

フィールドタイプ は今回アイコンを設置するという目的だから「画像」で。

返り値 は「画像 URL」にしました。

続いて、このフィールドをどこで入力するか、を決めるのが「位置」。

Advanced Custom Fields 位置

「分類(追加/編集)」「等しい」「全て」とする。

「全て」を「カテゴリー」だけにしても良いのだけど、今後タグにもアイコン設置したーいなんて場合を考えて「全て」にしてあります。

これで Advanced Custom Fields の設定はOK

カテゴリーの画像を設定

カテゴリーのとこに先ほど作ったフィールドが表示されてます。

Advanced Custom Fields カテゴリー

ここで表示したいアイコンを選択して更新

Advanced Custom Fields アイコン設置

全てのカテゴリーに設定すれば完了

全部に設定しなくても大丈夫ですけど。

サイドバーにカテゴリーのリストとアイコンを表示

サイドバーのカテゴリーリストに先ほど設定したアイコンを表示します。

ウィジェットでもPHPが使える事が条件となりますので Exec-PHP や PHP Text Widget などのプラグインを導入しておいて下さい。
(ちなみに私はExec-PHP。PHP Text Widgetは使ったことないです)

まず、ウィジェットの「テキスト」をサイドバー持っていき、下記コードを貼れば完成!

※cat_tag_img は 自分で決めたフィールド名に変えて下さいね。
※アイコンの大きさは width=”24″ の数字を変更してください。
※カテゴリーの階層(親とか子とか)には対応してません。というか誰か対応方法を教えて!
※カテゴリーの階層は「親と子」まで対応にコードを変更しました。孫は無理でした。誰か教えて!
※2013年3月2日 追記:前のコードだと子カテゴリーが無い時に<ul></ul>と無駄なものが表示されてしまったので修正しました。下記コードは修正済みです。

カテゴリーにアイコン設置完了

表示する順序を変えるには

カテゴリーの並び順を変更するプラグインを使います。

有名なプラグインは My Category Order ですが、これでは反映されません。

似た名前のプラグインですが Category Order というプラグインを使って下さい。

category Order なら反映されました。

その他の使い方

Advanced Custom Fields を使えば、今回の事を応用し、各カテゴリーページごとに設定した画像やテキストを表示する事が出来るようになります。

テーマのcategory.phpをイジって、カテゴリーやタグの説明なんかを先頭に表示し、その後にそのカテゴリーに属した記事一覧を表示するなんてことも。

普通にブログ的に WordPress を使用するなら必要ないのですが、一歩進んだ使い方を求めるならカスタムフィールドは必要かなー、と思いました。

コメントを残す

メールアドレスが公開されることはありません。

*