最近携わっている案件で必要になったのですが、カテゴリ一覧やタグ一覧などのページで、そのカテゴリやタグを表す画像なんかを登録したいという要望がありました。

357_01

wordpressでは、カテゴリやタグに設定できるのは、「名前」「スラッグ」「説明」(カテゴリは「親」も)のみで、カテゴリやタグ自体に画像を登録することは基本的に出来ません。しかし、調べてみるとプラグインを使えばそれが可能になるという事がわかりました。プラグインとその方法をご紹介します。

使うプラグインは「Advanced Custom Fields(ACF)」です

357_02

まず使うプラグインは「Advanced Custom Fields(ACF)」です。このプラグインは、元々wordpressのカスタムフィールドを使いやすくしたり拡張できるプラグインなのですが、こちらを活用することにより、カテゴリやタグにもカスタムフィールドの様に画像を初め様々なデータを登録することが可能になります。

Advanced Custom Fields自体の使い方は、このプラグインは非常に多機能な為、全て紹介するのは難しいので、カテゴリ・タグに画像を登録するという点に絞ってご紹介します。

まずは「Advanced Custom Fields(ACF)」をインストール

管理画面の「プラグイン」から、「新規追加」を選択し、キーワード検索から「Advanced Custom Fields」と入力し、インストールします。インストール後はプラグインを有効化してください。

357_03

357_04

プラグインを有効化すると、管理画面の右メニュー内に「カスタムフィールド」という項目が追加されていますので、そこからカスタムフィールドの追加と設定をしてきます。

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

357_05

フィールドグループ横にある「新規追加」をクリックして、カスタムフィールドを作っていきます。

357_06

「フィールドを追加」をクリックし、カスタムフィールドを作ります。

なお、上部にある「ここにタイトルを入力」と書いてある箇所から「フィールドグループ名」が設定できます。「フィールドグループ」とは、カスタムフィールドを管理しやすくするためのカテゴリ名みたいなもので、wordpress管理画面上でしか表示されないものなので、自分の分かりやすい名前を付けておけば良いと思います。

357_07

カスタムフィールドを作ります。必須項目は「フィールドラベル」「フィールド名」「フィールドタイプ」の3つです。「フィールド名」は半角英数しか使えません。出力する時に使うので分かりやすい名前にしておきましょう。「フィールドタイプ」は様々なものがありますが、今回は画像を登録したいので「画像」を選択します。

357_08

画像を選択すると、「返り値」や「プレビューサイズ」などの項目が表示されます。「返り値」の項目は「画像ID」にしておくと出力時にサイズがテンプレート側から柔軟に指定できるので、オススメです。

上記で設定したカスタムフィールドをカテゴリーやタグに設定する

357_09

そして、上記で設定したカスタムフィールドをカテゴリやタグに設定するには「ルール」から「Taxonomy Term」を選びます。

357_10

そして、カテゴリ・タグ両方に設定したい場合は「全て」を選択。どちらかだけに設定したい場合、セレクトボックスからカテゴリーもしくはタグを選択します。

357_11

全ての設定が終わったら「公開」を押して設定を反映させます。

カテゴリ・タグに画像を設定する

357_12

設定が終わった後、カテゴリもしくはタグ設定に戻ると先程追加したカスタムフィールド「カテゴリ画像」が追加されています。もちろん既存カテゴリにも同様にカスタムフィールドが追加されています。

設定した画像を表示します

テンプレートに以下のコードを書いていきます。

カテゴリに設定した画像を表示したい場合

<?php
$categories = get_categories();

foreach ($categories as $category) {
  $cat_id = $category->cat_ID; // カテゴリのIDを取得
  $post_id = 'category_'. $cat_id; // カテゴリIDを付けて、category_1 の様な形にする 
  $cat_imgid = get_field('cat_img', $post_id); // cat_imgはフィールド名を入力 

  $cat_img = wp_get_attachment_image_src($cat_imgid, 'full')[0];
  
  echo '<img src="'. $cat_img .'">'; 
}
?>

Advanced Custom Fields(ACF)独自の関数「get_field()」を使って、カスタムフィールドの情報を引っ張ってきます。get_field関数は、第一引数にフィールド名(今回の場合「cat_img」になります)を指定し、第二引数でカテゴリやタグなどの指定が出来ます。

$post_id = false; // current post
$post_id = 1; // post ID = 1
$post_id = "user_2"; // user ID = 2
$post_id = "category_3"; // category term ID = 3
$post_id = "event_4"; // event (custom taxonomy) term ID = 4
$post_id = "option"; // options page
$post_id = "options"; // same as above

公式サイトによると、上記のような例が紹介されています。今回はカテゴリに登録した画像を表示したいので「category_1」の様な形にして$post_idを設定します。

タグに設定した画像を表示したい場合

タグもカテゴリと同じようなコードで表示することが出来ます。

<?php
$terms = get_terms('post_tag');

foreach ($terms as $term) {
  $term_id = $term->term_id; // タグのIDを取得
  $post_id = 'post_tag_'. $term_id; // タグIDを付けて、post_tag_1 の様な形にする 
  $term_imgid = get_field('tag_img', $post_id); // tag_imgはフィールド名を入力 

  $tag_img = wp_get_attachment_image_src($term_imgid, 'full')[0];
  
  echo '<img src="'. $tag_img .'">'; 
}
?>

タグの注意点としては、get_field()の第二引数に$post_idを指定しますが、wordpressの「タグ」は「post_tag」という名前で扱われています。その為、$post_idは「post_tag_1」の様な形にする必要がありますので、注意が必要です。

Advanced Custom Fields(ACF)を使えば柔軟に拡張できる

Advanced Custom Fields(ACF)を使えば、カテゴリやタグに画像を登録できることが出来ました。また、画像以外にもテキストエリアやデイトピッカー(カレンダーから日付を選択するもの)などもあり、使い方次第で何でも出来そうな気がしますね。もっと使いこなせるように試行錯誤していこうと思います。