WordPress個別サポート

カテゴリーごとの投稿を一覧表示するカテゴリーページには、タイトルと投稿一覧は表示されますが、「カテゴリー画像」は表示されないのが一般的です。

そこで、カテゴリーごとに異なる「カテゴリー画像」(アイキャッチ画像)を追加する方法を紹介します。

通常は表示されないカテゴリーのアイキャッチ画像

通常は表示されないカテゴリーのアイキャッチ画像

いくつかの方法がありますが、カテゴリーに「アイキャッチ画像」というフィールドを追加する方法で進めます。

カテゴリー追加時にアイキャッチ画像を登録できれば便利

カテゴリー追加時にアイキャッチ画像を登録できれば便利

この方法であれば、アイキャッチ画像の他に「カテゴリーキャッチフレーズ」「カテゴリーの英語表記」など、カテゴリーに結びつけたい項目を後で追加したいときにも便利です。

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

カテゴリーのカスタムフィールド「アイキャッチ画像」の追加

まずは、カテゴリーにオリジナルのフィールド(カスタムフィールド)を追加するために、「プラグイン」‐「新規追加」メニューからAdvanced Custom Fieldsプラグインをインストール、有効化します。

Advanced Custom Fieldsプラグインのインストール

Advanced Custom Fieldsプラグインのインストール

インストールの完了後、「カスタムフィールド」‐「カスタムフィールド」メニューを開きます。

「カスタムフィールド」メニューを開く

「カスタムフィールド」メニューを開く

「カテゴリー」に追加するカスタムフィールドグループを作成するためフィールドグループの「新規追加」をクリックします。

カスタムフィールドグループの作成

カスタムフィールドグループの作成

追加するフィールドグループの名前(1)を入力します。ここではカテゴリーのためのフィールドグループなので「カテゴリーのカスタムフィールド」としましたが、自由な名前で大丈夫です。

フィールドグループ名を入力

フィールドグループ名を入力

続いて、「フィールドを追加」(2)をクリックします。

次のようなカスタムフィールド設定画面が開きます。主な項目を順を追って説明します。

フィールド名・フィールドタイプの設定

フィールド名・フィールドタイプの設定

フィールドラベル(1)は「カテゴリー」メニューに表示される名前です。日本語で入力します。

フィールド名(2)はシステムで管理するカスタムフィールド名です。アルファベット、ハイフン、アンダーバーで入力します。テンプレートにアイキャッチ画像を表示するときに使います。後で変更できないと思って、ここで決定してください。

フィールドラベルは後からでも自由に変更できますが、フィールド名を後で変更すると面倒なことになります。注意してください。

フィールドタイプ(3)は「画像」を選択します(「Wysiwygエディタ」も画像項目に使うことができますが)。

画面を下にスクロールします。「フィールド記入のヒント」から「条件判定」までは初期設定のままでも大丈夫です。

「必須入力」などの設定

「必須入力」などの設定

「返り値」は自由に設定できますが、後で記述するPHPスクリプトと連動させる必要があります。ここでは「画像オブジェクト」という前提で進めます。

「フィールドを閉じる」(1)をクリックすると設定画面が閉じます。新たなカスタムフィールドを追加する場合は「フィールドを追加」(2)をクリックします。

これで、このカスタムフィールドの作成は完了ですが、重要なのは次の項目です。

すぐ下の「位置」(カスタムフィールド群を表示する位置)の「ルール」で、「このカスタムフィールドグループはカテゴリーメニューに表示する」を表現します。

それには、「Taxonomy Term」「等しい」「カテゴリー」を選択します。これにより、上記のカスタムフィールド(アイキャッチ画像)が「カテゴリー」メニューのみで表示されるようになります。

カスタムフィールド群を「カテゴリー」メニューで表示する

カスタムフィールド群を「カテゴリー」メニューで表示する

設定の完了後、画面を上にスクロールして「公開」ボタンをクリックします。これでカテゴリーにアイキャッチ画像が追加されます。

カテゴリーごとに別々のアイキャッチ画像を設定する

「カテゴリー」メニューを開くと「アイキャッチ画像」が選べるようになっています。

001

さっそくカテゴリーの追加時にアイキャッチ画像を選択してみましょう。

カテゴリーにアイキャッチ画像が追加される

追加したカテゴリーの編集画面にもアイキャッチ画像が表示されていれば、ここまではうまくいっています。

カテゴリーに登録されたアイキャッチ画像を確認

カテゴリーに登録されたアイキャッチ画像を確認

カテゴリーページのカスタマイズ

カテゴリーにアイキャッチ画像を追加しても、それが自動で表示されるわけではありません。カテゴリーページのテンプレートをカスタマイズしてアイキャッチ画像を表示する必要があります。

まずは、現在のカテゴリーページを表示確認してみましょう。メニューから追加したアイキャッチ画像は表示されません。

登録済みのアイキャッチ画像が表示されない

登録済みのアイキャッチ画像が表示されない

続いてカテゴリーページのテンプレートを修正します。アイキャッチ画像を表示する位置は自由ですが、ここではタイトルの下あたりに表示してみます。

どのテンプレートがカテゴリーページなのかはテーマによって異なります。ファイルが存在すればcategory.php、archive.php、index.phpの順で使われる仕組みになっています。探してみてください。

BizVektorの例ではarchive.phpです。「Archive title」「Archive description」が終わる43行目あたりから編集します。

archive.phpを編集する

archive.phpを編集する

使っているテンプレートがarchive.phpで大丈夫なのか不安な方は「テスト」や「あああああああああああ」などと入力してカテゴリーページを表示してみましょう。編集中のページがカテゴリーページに使われているか判断できます。
このテンプレートを使用中なのか確認する

このテンプレートを使用中なのか確認する

このテンプレートが確かにカテゴリーページで使われている

このテンプレートが確かにカテゴリーページで使われている

テスト表示した文字を消して、代わりに次のコードを入力します(もう一度確認ですがカテゴリーページはcategory.phpまたはarchive.phpまたはindex.phpです)。

<?php
// カテゴリーのアイキャッチ画像を表示する
$image = get_field('category-image', 'category_' . $cat);
echo wp_get_attachment_image($image['id'], 'large');
?>

「category-image」はカスタムフィールドのフィールド名です。上記の名前と違う場合があります。自分で付けた名前に変更してください。

$catには現在のカテゴリーIDが格納されています(いわゆる「グローバル変数」)。カテゴリー関連のコード作成に役立ちます。

ここまでの作業に問題がなければ、次のようにカテゴリーページにアイキャッチ画像が表示されます。タイトルの下あたりです。

カテゴリーのアイキャッチ画像

カテゴリーのアイキャッチ画像

カテゴリーごとに「カテゴリー」メニューで追加した画像アイキャッチ画像が表示されます。アイキャッチ画像が登録されていないカテゴリーは、今まで通り何も表示されません。

うまくいかない場合は以下をチェックしてください。

  • このコードはAdvanced Custom Fieldsプラグインでカスタムフィールドを作成することが前提になっています。
  • Advanced Custom Fieldsプラグインのカスタムフィールド設定画面の「返り値」は「画像オブジェクト」にしています。

おまけ:テキスト項目のカスタムフィールドを作成する

この記事では「カテゴリー」メニューに画像を追加する方法を紹介しましたが、テキスト項目も追加したいことがあると思いますので、テキスト項目を追加してテンプレートに表示する方法も紹介します。

英語のカテゴリー名を追加する例で説明します。

ここまでの記事を読んでカテゴリーのアイキャッチ画像は追加済みという前提で進めます。

まずは、「カスタムフィールド」‐「カスタムフィールド」メニューでフィールドグループの編集画面を開きます。

フィールドグループの編集画面を開く

フィールドグループの編集画面を開く

「フィールドを追加」をクリックします。

新たなフィールドを追加

新たなフィールドを追加

フィールドラベル、フィールド名、フィールドタイプを設定します。

追加するカスタムフィールドの設定

追加するカスタムフィールドの設定

ここでは次のように設定しましたが用途に応じて自由に設定してください。

  • フィールドラベル --- カテゴリー名(英語)
  • フィールド名 --- category-english
  • フィールドタイプ --- テキスト

画面を下にスクロールして、「位置」の「ルール」が「Taxonomy Term」「等しい」「カテゴリー」に設定済みということを選択します。

カスタムフィールドの表示ルールを確認

カスタムフィールドの表示ルールを確認

確認後、画面を上にスクロールして「更新」ボタンをクリックします。これで設定完了です。フィールドグループに「カテゴリー名(英語)」が追加されます。

カテゴリー名(英語)が追加される

カテゴリー名(英語)が追加される

「カテゴリー名(英語)」の入力

「カテゴリー」メニューを開いて、各カテゴリーの英語名を入力します。

カテゴリー名(英語)を入力

カテゴリー名(英語)を入力

完了後、「更新」ボタンをクリックします。

先頭の大文字はCSSでも制御できますが、ここでは大文字で入力しておきます。

カテゴリーページのテンプレートを修正

カテゴリーページのテンプレート(category.php、archive.php、index.phpのいずれか)を開いて、次のコードを入力します。

<?php the_field('category-english', 'category_' . $cat); ?>

「category-english」は自分で設定したカスタムフィールド名に変更してください。入力する位置は自由です。ここではカテゴリー名の下あたりに表示しましたが、ご自由に試行錯誤してレイアウト調整してください。

カテゴリーページにカスタムフィールドを表示

カテゴリーページにカスタムフィールドを表示

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート