【Coccon】カテゴリー系のアーカイブページにカスタムフィールドを表示してみた
本記事は、WordPressテーマ「Cocoon」のカテゴリーページに投稿にひもづいたカスタムフィールドを表示する作業メモです。
不動産サイトやアフィリエイトブログなんかだと定番の構成。
カテゴリーページなどの記事が一覧で表示されるアーカイブページに必要そうな情報をカスタムフィールドで表示するという仕組みです。
子テーマ化するのが面倒なので、CocoonのPHPテンプレートファイルを直接編集しない方法でカスタマイズを実装してみました。
サンプルサイト
今回のカスタマイズを実装したサンプルサイトです↓
サンプルサイトの構成
【バージョン】
WordPress：6.2.1
Cocoon：2.6.0.3
Advanced Custom Fieldsプラグイン：6.1.6
WordPress、テーマともに記事執筆時に利用可能な最新バージョンです。
【表示設定】
下記画像の通り、トップページと投稿一覧ページに固定ページを指定↓
【カスタムフィールドの設定】
無料プラグインのAdvanced Custom Fieldsを利用。プラグインの管理ページから次の画像の通り、カスタムフィールドを２つ作成↓
重さ：weight
価格：fee
「重さ」「価格」の値をアーカイブページのタイトル直下に出力しています↓
【Cocoon設定：インデックス】
下記画像の通り、カードタイプで「縦型カード2列」を選択しています↓
カスタマイズの概要
対象のPHPテンプレートを直接編集しないカスタマイズです。
テンプレートを編集してしまうと、Cocoonのテーマアップデート時に面倒なことが多いので直接テンプレートに手を加えることはしません。
カスタムフィールドの表示にはフックを使います。
以下、どちらでも対応可能です。
Code Snippetsなどのコード管理系プラグインを利用する
子テーマのfunctions.phpにコードを追加する
子テーマを作るのが面倒なので、サンプルサイトではCode Snippetsプラグインを使っています。
更新履歴
2023年6月 記事公開
ここから先は
¥ 6,980
この記事が気に入ったらチップで応援してみませんか？