WordPressでカテゴリー一覧ページごとに、アイキャッチを変える方法

やっほう!おもしろハンターのテツヤマモト(@okapo192)です。

Web制作の仕事で、カテゴリーの一覧ページごとに各記事のアイキャッチ画像を変える…という処理が必要になったのですが、

この辺りアイデアをシェアしている方が少ない方かと思いましたので、簡単にシェアしていこうと思います。

スポンサーリンク

やりたいこと

今回発生したケースはグルメ系のウェブサイトになります。

例えば、餃子をサイドメニューとして扱うラーメン店があったとします。

4

このラーメン店を「ラーメン」のカテゴリーと、「餃子」のカテゴリーに所属させます。

その際、「餃子」のカテゴリー一覧ページでは餃子を、「ラーメン」のカテゴリー一覧ページにはラーメンをアイキャッチ画像に表示させたいです。

使ったプラグイン

こちらはプラグイン「Advanced Custom Fields」を使って解決しました。

手順①:画像とカテゴリ選択タブのカスタムフィールド を用意

Advanced Custom Fieldにて、「画像」と「タクソノミー 」のフィールドを追加します。

 

▼画像のフィールドはフィールド名を「sub-photo」、画像URLを返り値としました。

スクリーンショット 2018 05 15 15 12 11

▼タクソノミー のフィールドはフィールド名を「store」、返り値をタームID、フィールドタイプ(下)をセレクトボックスとしました。

スクリーンショット 2018 05 15 15 11 44

手順②:該当PHPファイルにコードを追加

category.php,taxonomy.php,archive.phpなど、該当のソースファイルのアイキャッチ画像表示部分に、以下コードを追加しました。

「カスタムフィールド で選択したカテゴリー(ターム)IDと、現在のカテゴリー(ターム)IDが等しい場合は、アイキャッチ画像の変わりに、カスタムフィールド にアップロードした画像を表示する」という処理を加えています。

手順③:新規記事追加時にカスタムフィールド にて設定

あとは新規記事を追加する際に、サブのアイキャッチ画像と、その画像を表示したいカテゴリーを選択します。

スクリーンショット 2018 05 15 15 12 25

スポンサーリンク

結果

こちらでラーメンのカテゴリー一覧ページではラーメンの画像。

餃子の一覧ページでは餃子の画像を表示できます。

 

▼メインの「アイキャッチ画像」として設定したラーメンの画像は、最新記事の欄やラーメンカテゴリー一覧ページで通常通り表示されます。

スクリーンショット 2018 05 15 14 54 49

▼餃子のカテゴリー一覧ページでは、餃子の写真が表示されます。餃子が食べられるお店を探したいのに、ラーメンが出てきた!ってことが無くなります。

スクリーンショット 2018 05 15 15 17 11

 

もしラーメンと餃子と焼き鳥を置いている店…みたいになったら、カスタムフィールド 増やしてソースコードを軽くいじんないとダメです。

需要があるようなら追記します笑

ABOUT

海外ノマド系フリーランス, ブロガー, WEBエンジニア, 24歳。フットワーク軽く生きたくて、新卒でフリーに。その後、海外35カ国を旅しながらノマドワーク。現在は1ヶ月ごとに拠点を変えつつ、旅生活を継続中です。勉強が大好きで年に3回語学留学をします。 

>>詳しいプロフィールはこちら!