はじめに
WordPressで高度なカスタマイズを行う際、Advanced Custom Fields（ACF）プラグインは非常に役立ちます。特にFlexible Content機能は複数のコンテンツタイプを一つのフィールド内で自由に配置できるため、レスポンシブデザインや複雑なページ構造に対応することができます。
症状・背景
このテーマが必要になる主な場面:
- レスポンシブデザイン対応の複数カラムレイアウトを作成する場合
- 一覧ページに複数のコンテンツタイプを組み合わせて表示する場合
- カスタムポストタイプに動的に変化するフィールドセットを追加したい場合
- 静的なHTMLテンプレートと同じような柔軟性を持ったコンテンツ構造を作成したい場合
手順・設定方法
ステップ1: Flexible Contentフィールドを追加する
# ACFページに移動し、新しいフィールドグループを作成または開きます。
# フィールドリストからFlexible Contentを選択します。
# 任意のレコードキー名と表示名を入力して設定を保存します。ステップ2: キーレイアウトを追加
# 左側の「レイアウト」タブを開きます。
# 「新しいキーレイアウトを作成」ボタンをクリックし、キーレイアウト名を入力します。
# 必要なフィールドタイプを選択して配置します。例えば「テキスト」「画像」「ウィジェットエリア」などを追加できます。ステップ3: Flexible Contentを使用したカスタムテンプレートを作成
# テンプレートファイルにFlexible Contentのループを追加します。
<?php if( have_rows('your_flexible_field') ): ?>
<?php while ( have_rows('your_flexible_field') ) : the_row(); ?>
<?php // 各キーレイアウト名に基づいて表示を分岐させる ?>
<?php if(get_row_layout() == 'section_header'): ?>
<h2><?php the_sub_field('header_text'); ?></h2>
<?php elseif(get_row_layout() == 'image_block'): ?>
<img src="<?php the_sub_field('featured_image'); ?>" alt="">
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<p>Flexible Contentのデータがありません。</p>
<?php endif; ?>ステップ4: フロントエンドでの表示と編集機能をテスト
# 管理画面からFlexible Contentを使用したページを作成または編集します。
# カスタムテンプレートで設定したレイアウトを選択し、コンテンツを追加します。
# 保存してフロントエンドのURLを開き、表示が期待通りであることを確認します。注意事項
- <実践的な注意点1>: Flexible Contentは複雑な構造を持つため、初期設定には時間がかかることがあります。十分なテストと調整が必要です。
- <実践的な注意点2>: 各レイアウトで使用するフィールドの数量や種類を考慮し、ユーザーが混乱しないようわかりやすいラベルを付けることが重要です。
- <セキュリティ上の注意>: フィールドデータの入力制御は適切に行い、必要に応じてバリデーションルールを設定します。また、公開前にデータをバックアップしておきましょう。
- <パフォーマンス/運用上の注意>: Flexible Contentを使用する場合、ページ生成時に大量のデータが処理される可能性があります。適切なキャッシュ戦略やローカルストレージの活用を検討します。
まとめ
1. Flexibility: レスポンシブデザインや複雑なコンテンツ構造に対応可能です。
2. カスタマイズ性: 各ページに異なるレイアウトを適用することが可能。
3. 管理性: 管理者が自由にコンテンツを追加・編集できます。
4. 効率性: 一度の設定で複数のページやポストタイプで利用可能です。
関連記事: