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

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

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

柔軟コンテンツフィールド関連

ACF 柔軟コンテンツフィールド、固定ページ用(2023.07.05作成)
ACF 柔軟コンテンツフィールド、ブログ・コラム用(2023.07.02作成)
ACF 柔軟コンテンツフィールドで1サイト作ってみる(2023.06.25作成)
Advanced Custom Fields Pro 柔軟コンテンツ(2023.06.18作成)

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 に関する記事一覧

Advanced Custom Fields に関する記事一覧ページへ