【SWELL】カスタム投稿のタクソノミーターム名を投稿一覧アーカイブページのサムネイル画像上に表示するカスタマイズ

SWELLマニアの、かんた（@swell_mania）です。

WordPressテーマ「SWELL」のカスタマイズテクニックを紹介します。

コーポレートサイト制作などで、カスタム投稿を作成しコンテンツを運用することってありますよね？

標準投稿の一覧に表示されるサムネイル画像の上にカテゴリーラベルは表示されますが、カスタム投稿のアーカイブページには表示されません。

SWELLの設定オプションにはタクソノミーのラベルを表示する機能はありません。

カスタム投稿のアーカイブページにもタクソノミーで分類したタームを表示したい場合には、テンプレートレベルでの独自カスタマイズが必要です。

デモサイト

デモサイト上にカスタム投稿を設定し、アーカイブページのアイキャッチ画像上にもターム名を表示するカスタマイズを実装しました。

【カスタム投稿のアーカイブページ】

※デモサイトのURL：https://webrent.xsrv.jp/demo/swell57/archives/product

【タームのアーカイブページ】

※デモサイトのURL：https://webrent.xsrv.jp/demo/swell57/archives/genre/camera

標準投稿（post）のアーカイブページには、投稿のカテゴリーがそのまま表示される仕様です↓

・投稿一覧のURL：https://webrent.xsrv.jp/demo/swell57/post_all
・カテゴリーアーカイブのURL：https://webrent.xsrv.jp/demo/swell57/archives/category/uncategorized

デモサイトの構成

デモサイトのカスタム投稿の構成についてです。

【テーマ】

SWELL：2.6.4.2

※記事執筆時に利用可能な最新バージョンです。

【カスタム投稿＆カスタムタクソノミー】

カスタム投稿とカスタムタクソノミーはCustom Post Type UIプラグインで設定しました。

【カスタム投稿】

デモサイトのカスタム投稿の設定画面です。

・カスタム投稿名： 製品
・カスタム投稿スラッグ：product

【カスタムタクソノミー】

デモサイトのタクソノミーの設定画面です。

・タクソノミー名： ジャンル
・タクソノミースラッグ： genre
・ターム：カメラ、スマホ、PC

アーカイブページに表示されるラベルは、「ターム」です。