とっちゃん@nyanco! です。
今回はWordPressテーマ「Cocoon（コクーン）」のエントリーカードのテンプレートファイルにカスタムフィールドで追加した項目を表示できるようにカスタマイズしてみたよというお話です。
テンプレートファイルのカスタムなんて難しそう…と思うかもですが、PHPはなんとなくしか分からないという筆者レベルでもできたので難易度は低めですにゃ〜
万が一ミスっても子テーマでやればノーダメージですにゃ〜
ちなみに「エントリーカード」とはTOPページやカテゴリー一覧ページなどで自サイト内の記事一覧を表示するカード（カセット/ブロック）のことです。似たものとして「ブログカード」というのもありますが、こちらは参考記事などの内部・外部リンク用の別モノとなります。
今回のカスタマイズ箇所
▼今回カスタマイズしたい箇所は以下の赤枠部分です。
TOPページなどで表示される一覧表示用のエントリーカードですね。
ちなみにCocoonはWordPress管理画面メニュー「Cocoon 設定」の「インデックス」から以下のような項目は簡単にカスタムはできるようになっています。
- 枠線の表示
- スニペット（本文抜粋）
- 投稿日・更新日
- 投稿者名
- コメント数
また、CSSでも見た目などの調整は可能ですが、今回のようにカスタムフィールドで追加したコンテンツを追加表示させるには「テンプレートファイル」を直接カスタムする必要があります。
本記事の前提
・WordPressテーマは「Cocoon」
・子テーマ作成済み
Cocoonのエントリーカードをカスタマイズする手順
Step1. テンプレートファイルを子テーマにコピー
まずエントリーカードのテンプレートファイルがどこにあるのかですが、親テーマの以下の階層となります。
wp-content > themes > cocoon-master > tmp
上記ディレクトリにある「entry-card.php」がブログカードのテンプレートファイルとなるので、子テーマフォルダに同じディレクトリを作成してコピーしておきます。
くれぐれも親テーマ（cocoon-master）内のファイルを編集してはダメですにゃ～
テーマをアップデートすると元に戻っちゃいますにゃ～
Step2. テンプレートファイルを確認
テンプレートファイルをカスタマイズしていきますが、基本あるものは触らず間に必要なものを追加していくというスタイルでいくと良いかと。
▼記事タイトルの出力【<?php the_title() ?>】が43行目で記述されているので、その辺りを基準に追加していくと分かりやすいかと思います。
Step3. 任意のカスタムフィールドを追加
▼今回は例として、記事タイトルの下に「英語タイトル」を追加していきます。
▼続いてカスタムフィールドを追加していきますが、今回は「Secure Custom Fields」というプラグインで以下のカスタムフィールドを新規作成しました。
- フィールドタイプ：テキスト
- フィールドラベル：英語タイトル ※任意でOK
- フィールド名：english ※テンプレートファイルで呼び出す際に必要
ちなみに「Secure Custom Fields」は、これまでのカスタムフィールド追加の定番プラグイン「Advanced Custom Fields」からフォーク（分岐）したプラグインとのことです。WordPress管理画面からインストールできるプラグインとしては、現在はこちらが主流となっています。
Step4. テンプレートファイルに追記する
▼カスタムフィールドを追加したら、テンプレートファイルに以下のように追記します。
<!----------- add ------------>
<br><span style="font-size:0.9rem;color:#aaa;"><?php echo get_post_meta($post->ID, 'english', true);?></span>
<!----------- /add ------------>
上記コードは横着してhtmlに直接CSSを記述してますが、CSSファイルに記述してもOKですにゃ〜（むしろCSS推奨ですにゃ〜）
▼記述する場所は以下のように記事タイトルの出力【<?php the_title() ?>】のすぐ下にしました（分かりやすいように改行とコメントアウトも入れてます）。追記できたらテンプレートファイルを保存しておきます。
▼続いて、各「投稿」の編集画面に先ほど追加したカスタムフィールドが下の方に追加されているので、任意のテキストを入力して保存します。
以上で作業は完了です！
▼webページをリロードして、このように記事タイトルの下に英語タイトルが追記されたらOKです！
再読み込みしても強制リロードしても反映されない！そんな時は以下のキャッシュが悪さしている場合が多いです。
・ブラウザキャッシュ：【対策】ブラウザの設定からキャッシュを削除する
・「WP Super Cache」や「WP Fastest Cache」などのキャッシュ系WordPressプラグイン：【対策】プラグインを停止するかプラグインからキャッシュを削除
・サーバーキャッシュ：【対策】レンタルサーバーのキャッシュ機能をオフにする（ロリポップなら「LiteSpeed Cache」または「ロリポップ！アクセラレータ」、エックスサーバーなら「Xアクセラレータ」など）
もちろんシンプルな記述ミスや親テーマのファイルを編集してた！などの可能性もあるので要注意です。
こんな感じでエントリーカードを自分好みにカスタマイズできますにゃ〜
▼最終的に音楽再生ボタンやらカテゴリ・タグなどを追加してこんな感じに仕上がりました。
自分用メモ
最後に本カスタマイズ時に苦戦したポイントを覚え書きがてらメモして終わります。
テンプレートファイル「entry-card.php」にaタグを追加するとなぜかレイアウトが崩れる
→ 色々試行錯誤したものの、Cocoonテーマの仕様ということで自分に言い聞かせて諦めました…（そんな仕様ではなかったらゴメンナサイ）
「テキストエリア」カスタムフィールドに入力したhtmlタグがコードのまま出力されてしまう
→ このhtmlタグがレンダリングされない事象は、CocoonというよりWordPressのセキュリティ上の仕様のよう。仕方がないので投稿記事ごとに異なる部分だけカスタムフィールドの「テキスト」または「URL」などで追加し、その前後のタグをテンプレートに記述するという手法で解決（以下のような感じ）。
<source src="<?php echo get_post_meta($post->ID, 'url-1', true);?>" type="audio/mpeg">おわりに
本記事がどなたかの参考になれば幸いです。
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント