wordpress

CocoonでAdvanced Custom Fields固定ページへの出力を実行

  • このエントリーをはてなブックマークに追加

wordpressでweb作成をする際に便利なカスタムフィールドを視覚的に使いやすくしてくれるプラグイン「Advanced Custom Fields」を勉強しています。

各項目の記入が終わり、作者「わいひら」さん提供の無料テーマ「Cocoon」で固定ページへの出力をするために調べた結果を備忘録としてこちらに残します。

今回の案件

  • Advanced Custom Fieldsを固定ページに出力をしたい
  • 使用するテーマはCocoon
  • 現在は子テーマ使用

作業するバージョンの確認

  • WordPress 4.9.8 (Cocoon Child テーマ)
  • Advanced Custom Fieldsバージョン 4.4.12
  • Cocoonバージョン: 1.1.2

出力をするうえで考えられる方法

  • 固定ページテンプレートで出力するページ用のオリジナルテンプレートを作成
  • 別途phpファイルを作成してショートカットで既存固定ページに挿入
  • スラッグの編集にて固定専用ページを作る

三点の方法を思いつきましたが、ページの数がこれから増えることを想定して記入時にテンプレートの選択のみで実現できるオリジナルテンプレートで実行します。

Cocoonを使用しているとすでにテンプレートを導入するための前段階、function.phpの編集による固定ページの属性への「テンプレート」選択がされていましたのでその部分は割愛。

固定ページテンプレートの作成

テキストエディターディタにより出力用の固定ページテンプレートの作成します。

「テンプレート」として認識してもらうために必要な文が下記。こちらを記入することにより「固定ページの属性」の「テンプレート」に、「固定ページの新規テンプレート1」が表示され選択できるようになります。こちらは引用にあるサイト様より抜粋せていただきました。

※管理画面の「固定ページ」からテンプレート選択をするためには、上記記述の1行目から5行目までのコメントが必要。各固定ページのページデザインをテンプレート選択で可能にする方法 | はじめてのWordPressまとめ

Cocoonでの導入

続いてCocoonでの固定ページを親テーマから「page.php」を確認すると、phpの呼び出し文を使用していました。

今回はてっとり早く表示をしたいので、呼び出し文を探して順番にコピーをしてひとつのphpファイルとします。こちらでは呼び出し文とおかれている行数を記しておきます。

page.php 18行目

順をおって見ていくと「page-contents.php」と「content.php」と進んでいくことができ、content.phpの中に本文呼び出し用のthe_contentが確認できました。表示させることが優先でしたので、新たに作ったテンプレートファイルに三個分のphp文をコピペして表示の確認。

page-contents.php 14行目

content.php 74行目

74行目から4行に固定ページで記入した文章が入ります。

そこを目安に出力するための文章を打ち込んでいきましょう。本文の上に回り込ませたり、はさみこんだりなども自由に設定できるようになるので便利です。

まとめ

記事本文にあたるthe_contentの前後はこのような形になりました。今回は記事本文を使わない予定ですのでheaderと「記事本文の表示」の間にのちのわかりやすさのためにコメントを置いてから、差し込みをしました。

差し込んである文は、Advanced Custom Fieldsの画像アップロードを使用してlogo_imgのフィールド名でアップした画像がもしあれば、SHOP LOGOの見出しと共にフルサイズで表示をするという指示を出しています。

スポンサーリンク

リンク

スカッとする話やDQN返し、修羅場まとめ話