ワードプレス歴およそ15年のフロントエンドエンジニアです。
関数作成からサイト構築まで、何でもご相談ください。
Categories web制作メモおよび独り言

ACF 柔軟コンテンツフィールドで1サイト作ってみる

by

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。
プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。
2023.06.25公開

*Advanced Custom Fields Pro のFlexible Content field(柔軟コンテンツ)は設定した中から選択してコンテンツを自由に追加できるフィールドです。これを個別ページ用のテーマファイルにコードを書くのではなく、専用の表示テンプレートをショートコードで読み込んで、任意の場所で使えるようにするという仕組みを作っています。
*テーマに追加するファイル(テーマ関数と表示用テンプレート)はまとめてプラグイン化することも可能です。
柔軟コンテンツフィールド関連

Advanced Custom Fields Pro のFlexible Content Field(柔軟コンテンツフィールド)で1サイトのコンテンツを賄える設定を考え中です。
今のところ、 こんな構成。

Advanced Custom Fields Proの設定インポートファイル(json)と表示用テンプレートが欲しい方はお問い合わせください。ニーズに合わせて作成します。Advanced Custom Fields Proをお持ちでない場合はインストールも対応します。

メイン画像

メイン画像は関数でアイキャッチへの自動登録が可能。テーマによっては個別ページにアイキャッチ表示があるものもあります。

見出しと段落


見出しは文字色と中央寄せの設定可。テキストエリアは改行と段落が有効な設定。画像の挿入などが必要な場合はフリーエディター(クラシックエディターと同等)を使用する想定。

画像ギャラリー


ギャラリーフィールドとPCではフレックス表示想定の列数。ギャラリーフィールドはキャプションの設定も可能。

リスト ul、ol、dl


ulとolはチェックボックスで分岐。リピーターで行を追加して作成。

グーグルマップ


APIキーを使用する場合はチェックボックスをチェックするとグーグルマップフィールドが表示されます。使用しない場合はテキストエリアにアイフレームのコードを入れてもらう想定。

バナー


リピーターでバナーを挿入します。列数が１の場合は中央寄せで、２つは中央寄せのフレックス、３つ以上は均等配置のフレックス表示にします。

トップの表示を固定ページで設定すればトップページの作成も可能。*色々フォーマットの付属しているテーマではなく、シンプルな無料テーマか自作テーマを使用する想定です。
表示用のテンプレートをショートコードで読み込む想定なので、投稿タイプ専用のテーマファイルにコードを入れる必要はなく、表示用テンプレートをテーマディレクトリに配置し、テンプレート読み込みの関数を追加するだけで、どの投稿タイプでも使用できますが、固定ページ用とブログ・コラム用などに分けたほうが使いやすいかもしれません。

その他のAdvanced Custom Fields に関する記事一覧

Related posts:

  1. カスタムフィールドプラグインの移行
  2. 予約カレンダーひとまず完成

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。
プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。
2023.06.25公開

nekotaiyo