とっちゃん@nyanco! です。
今回はWordPressの高機能無料テーマ「Cocoon（コクーン）」の個別投稿記事にカスタムフィールドを追加表示させるカスタマイズの覚書というおはなしです。
なかなか苦戦したので自分用備忘録ですにゃ～
Cocoonの個別投稿にカスタムフィールドを追加する方法
Step.0 事前準備
- Cocoonの親テーマ・子テーマともにインストール →テーマはCocoon公式サイトからダウンロード
- プラグイン「Advanced Custom Fields」をインストールし任意のカスタムフィールドを作成
Step1. 必要なファイルをコピー
Cocoon親テーマフォルダ（cocoon-master）から以下のテンプレートファイルを子テーマの同じディレクトリにコピーします。
- tmp/content.php
tmp/…は「tmp」というフォルダの中を表してますにゃ～
子テーマにも「tmp」フォルダを作成、もしくは「tmp」まるごとコピーでもOKですにゃ～
Step2. content.phpをカスタマイズ
Cocoonでは投稿記事の出力をしているのはsingle.phpではなくcontent.phpなので、Step1. でコピーした子テーマの「content.php」を開いて編集していきます。
▼「content.php」の中は以下のようにhtmlとphpで記述され日本語でコメントまでついているので、投稿画面と見比べるとどの部分の記述なのかが分かりやすくなってます。
▼今回は例として記事タイトル前に「pre-title」というカスタムフィールドが表示されるよう以下のようにカスタマイズしました。
【簡単に解説】
・38行目のh1タグのの前にspanタグを追加 ※行数はテーマのバージョンによって異なる可能性アリ
・spanタグ内にカスタムフィールド「pre-title」を出力する<?php the_field(‘pre-title’); ?>を記述
Step3. 記事を作成して確認
▼新規ダミー記事を作成し、試しにカスタムフィールドに【完全無料！】と入力して記事を公開します。
▼このように記事タイトル前にカスタムフィールドが追加表示されたのを確認できればOKです！
【おまけ】カテゴリーごとに自動でテンプレートファイルを切り替えたい場合
最後にオマケとして、カテゴリーごとに自動でテンプレートファイルを切り替えたい場合の簡単な解説をします。
単純に個別投稿をカスタムするだけなら「content.php」のみのコピーでOKでしたが、カテゴリーで切り替える場合は以下の3つのテンプレートファイルを子テーマの同じディレクトリにコピーする必要があります。
- single.php
- tmp/single-contents.php
- tmp/content.php
コピーしたら以下の要領でそれぞれのファイルをリネームします。
【例】カテゴリーのスラッグが【news】だった場合
- single-category-news.php
- tmp/single-contents-news.php
- tmp/content-news.php
ファイル名の末尾に「-」とカテゴリーのスラッグを追加するイメージですにゃ～
（single.phpはその前に「-category」も必要ですにゃ～）
続いて各テンプレートファイルを開いて以下のように修正します。
▼single-category-news.php
▼single-contents-news.php
「content-news.php」はお好みでカスタマイズ！
要は「single-category-news.php」から「single-contents-news.php」を呼び出し、さらに「single-contents-news.php」から「content-news.php」を呼び出して投稿のメインコンテンツが出力されているという構成となっています。
ややこしいですが、WordPressテーマは大体こんな感じで構成されてますにゃ～
最後にカテゴリーごとに個別投稿のテンプレートファイルが自動切換えされてるのが確認できればOKです！
おわりに
本記事がどなたかの参考になれば幸いです。
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント