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行目から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行に固定ページで記入した文章が入ります。
そこを目安に出力するための文章を打ち込んでいきましょう。本文の上に回り込ませたり、はさみこんだりなども自由に設定できるようになるので便利です。
作成したカスタムフィールドの表示
Advanced Custom Fieldsをインストールすると、カスタムフィールド欄が左に表示されます。
フィールドグループの新規作成で名称をきめたら、「フィールドグループを追加」をクリックして項目を登録していきます。
登録が終わりましたら、「位置」で作成した固定ページのテンプレート指定します。「このフィールドグループを表示する条件」とありますので「ページテンプレート」「等しい」「作成した固定ページの表示名」と選択することにより、目的のページテンプレートを使用したときにのみカスタムフィールドが表示されます。
シンプルなテキスト表示
とてもシンプルな表示方法、念のためif文を使ってフィールドに情報があれば表示となる。
コンテンツの表示非表示
チェックボックスのフィールドを使用してチェックが入っていれば表示、入っていなければ非表示となるコンテンツ
まとめ
記事本文にあたるthe_contentの前後はこのような形になりました。今回は記事本文を使わない予定ですのでheaderと「記事本文の表示」の間にのちのわかりやすさのためにコメントを置いてから、差し込みをしました。
</header>
<div class="entry-content cf<?php echo get_additional_entry_content_classes(); ?>" itemprop="mainEntityOfPage">
<?php //記事本文の表示
the_content(); ?>
</div>
<?php //マルチページ用のページャーリンク
get_template_part('tmp/pager-page-links'); ?>
差し込んである文は、Advanced Custom Fieldsの画像アップロードを使用してlogo_imgのフィールド名でアップした画像がもしあれば、SHOP LOGOの見出しと共にフルサイズで表示をするという指示を出しています。
</header>
<?php /* 差し込み文ここから */ ?>
<?php if( $logo_img ) {
echo '<div class="section"><h2>SHOP LOGO</h2><p>' ,
wp_get_attachment_image( $logo_img, $size )
, '</p></div><!-- SHOP LOGO -->' ;
} ?>
<?php /* 差し込み文ここまで */ ?>
<div class="entry-content cf<?php echo get_additional_entry_content_classes(); ?>" itemprop="mainEntityOfPage">
<?php //記事本文の表示
the_content(); ?>
</div>
<?php //マルチページ用のページャーリンク
get_template_part('tmp/pager-page-links'); ?>
