ブログモジュールとDivi 5のループビルダーの使用

ブログモジュールは、Diviに標準搭載されているフィードジェネレーターで、すぐにご利用いただけます。タイトル、画像、抜粋、メタデータの表示・非表示を切り替える機能により、投稿を素早くリスト表示することが可能です。

Divi 5の新機能であるループビルダーは、異なるアプローチを採用しています。任意のモジュールを使用してアイテムをデザインし、そこに動的なコンテンツを流し込むことができます。どちらのツールもループコンテンツを表示できますが、それぞれ異なるシナリオで威力を発揮します。どちらをいつ使うべきかを理解しておくことで、作業時間を短縮し、ストレスを軽減することができます。それでは、2つのツールを詳しく比較してみましょう。

カスタム投稿タイプ（CPT）：商品やコースなどのカスタムコンテンツタイプです。通常の投稿と同様に動作しますが、独自のフィールドを持つことができます。 カスタムフィールド：投稿、ページ、またはCPTに追加するフィールドです。例えば、料理メニューの場合、価格、評価、グルテン・アレルギー情報、辛さレベルなどが含まれます。 繰り返しフィールド:個々の投稿内のアイテムのリストを保存するフィールドです。カスタムコンテンツに適したサブリストとしてご活用いただけます。 フィールドプラグイン: ACFが一般的に選択されますが、Pods、 Meta Box、 ACPT、 Toolsetも機能します。

詳細がわかりにくい場合は、この用語集を参照していただきながら、分かりやすく説明していきます。

ブログモジュールでシンプルな投稿と投稿タイプフィードを表示する

ブログモジュールは、一般的なブログのパターンに合わせて構築されています。一般的な要素を想定し、表示内容を切り替えることができるため、セットアップが迅速で、意思決定もシンプルです。

WordPressでブログ投稿がどのように機能するかを考えてみましょう。すべての投稿には、ブログコンテンツとして認識される共通の要素があります。これらの共通の特徴には、次のようなものがあります。

投稿タイトル 注目の画像 投稿内容 URLスラッグ 著者 カテゴリー その他

ブログモジュールは、従来の投稿を念頭に置いて設計されています。タイトルは投稿の内容を示し、注目画像は視覚的な魅力を高めます。抜粋はコンテンツのプレビューを提供し、メタデータは誰がいつ書いたかを示します。

Diviのブログモジュールは、これらの要素と自動的に同期します。ページにドロップして、表示するものを選択するだけで、カスタムクエリを一切必要とせずにフィードが表示されます（ただし、表示内容を制限したい場合は、組み込みのクエリツールをご利用いただけます）。

トグル方式なら、変更も簡単です。著者名を非表示にして日付だけ残したり、画像を表示したり、抜粋をスキップしたりできます。小さな変更ですぐに成果が得られます。

カスタム投稿タイプ：制限はあるものの機能的

ブログモジュールでは、通常の投稿を表示し、カスタム投稿タイプを適切に登録することができます。

ブログモジュールは、CPTが標準の投稿フィールドをミラーリングしている場合は問題なく動作します。ただし、真のカスタムデータが必要な場合は制限が課せられます。そのため、チームメンバーCPTは、シンプルさを保つ場合に有効です。

名前はタイトルにマッピングされます。 ヘッドショット/アバターは注目の画像にマッピングされます。 バイオはコンテンツにマッピングされます。

ブログモジュールはこのような状況を簡単に処理します。

カスタムフィールド

デフォルトの投稿で共有されないフィールドには制限が表示されます。

ブログモジュールはWordPressのデフォルトのブログ投稿にある標準フィールド向けに構築されているため、ソーシャルリンク、認定資格、経験年数はブログモジュールには表示されません。これらのカスタムフィールドを切り替えるスイッチはありません。

カスタムレイアウト

レイアウト制御にも若干の制約があります。モジュールは要素を固定構造内に固定順序で配置します。カスタムCSSを使用しない限り、タイトルと画像の順序を変更することはできません。各ブログカードのレイアウトはフレックスボックスまたはブロックで管理できますが、子アイテム（カード）には、子フレックスボックスを制御するためのサイズ設定（画面に合わせて縮小、画面に合わせて拡大など）がありません。

ブログモジュールは、標準的なカードレイアウトに最適で、高速に使用できます。クリエイティブなデザインにこだわりたい方は、よりカスタマイズされた機能を求めるかもしれません

ループビルダーを使用したカスタム投稿タイプとカスタムフィールドの活用

Diviのループビルダーは、動的なコンテンツを表示するための新たなアプローチを提供します。あらかじめ決められた要素を持つ単一のモジュールの制約の中で作業するのではなく、ループビルダーを使用すると、個々のDiviモジュールを思い描いた通りに配置してコンテンツ表示を構築できます。

ループビルダーを使用するには、より多くの検討と準備が必要ですが、ブログモジュールのように制限されることはありません。ブログモジュールでは、既存の制約内で作業し、事前に設定されたオプションを最大限に活用します。ループビルダーでは、空白のキャンバスから始めて、Diviモジュールを自由に組み合わせて、必要なものを正確に構築できます。

ループビルダーの仕組み

ループビルダーは単一のモジュールではありません。選択したモジュールを収めたコンテナです。コンテナを「ループ」に設定すると、一致する結果ごとに繰り返し実行されます。コンテナ内には、画像、見出し、テキスト、ボタンの各モジュールを配置できます。

各モジュールのコンテンツを適切なトークンにバインドします。DiviのUIはこれを非常にシンプルに実現します。画像は注目画像を指し示し、見出しはタイトルを指し示します。ボタンは投稿のURLにリンクします。

このモジュール式のアプローチにより、構造とスペースを自由にコントロールできます。タイトルの上または横に画像を配置したり、2つのカスタムフィールドに2つのテキストブロックを追加したりすることも可能です。これにより、モジュールであらかじめ設定されたカードではなく、必要なカードを作成できます。

カスタム投稿タイプとカスタムフィールドの実例

いくつかの具体的なシナリオで、これを説明してみましょう。パターンはそのままに、フィールドを入れ替えます。前回の例で使用したカードデザインを使用し、カスタム投稿タイプとカスタムフィールドを使ってどのようにカスタマイズできるかを見てみましょう。

まず、標準的なブログ投稿用のカスタムループを作成します。Stand Postsの投稿タイプを使用し、タイトル、カテゴリー、公開日、フィーチャー画像などの標準フィールドを設定します。それぞれをデザイン内の対応するモジュールにマッピングします。これらのモジュールは標準的な投稿フィールドを使用しますが、独自のレイアウトで配置されています。

シンプルな不動産物件情報でも同様のことが可能です。同じカードレイアウトを使用して、カスタム投稿タイプのコンテンツに、物件名に割り当てられた見出し、寝室、バスルーム、物件の説明に割り当てられたテキストモジュール、そして物件情報URLにバインドされたボタンを配置できます。

最終結果はブログカードに似ていますが、ループビルダーの機能を使用して、カスタムフィールドとカスタム投稿タイプからコンテンツを割り当てます。

CPTについてお話ししましたが、どのように作成するのでしょうか？Advanced Custom Fields（ACF）が最適な選択肢です。Pods、Meta Box、ACPT、ToolsetもLoop Builderが読み取れるフィールドを作成します。予算、経験、そしてスタックに合ったものをご使用ください。

不動産ウェブサイトの方へ：IDXから物件情報をWordPressにCPTとして取り込む専用プラグインの使用をお勧めします。そうすれば、最新のデータが得られ、手作業も最小限で済みます（毎朝手動で物件情報を入力したいと思う方はいらっしゃらないでしょう）。

カスタムレイアウト用のFlexbox

Flexboxはループビルダーと自然に組み合わせることができます。2つのレベルで使用することで、カスタムCSSなしでクリーンでレスポンシブな構造を構築できます。

まず、外側のループコンテナのスタイルを設定します。ループの親コンテナを選択します。「フレックスレイアウト」をオンにします。方向を「行」に設定します。複数のフレックス行が必要な場合は、「折り返し」を有効にします。アイテム間の間隔を制御するには、「ギャップ」を設定します。次に、「サイズ設定」オプションを使用して、ループが配置される子コンテナのサイズを調整します。コンテナのフレックスコントロールと子のフレックスコントロールの間にループ要素を配置することで、レスポンシブで魅力的なレイアウトを作成できます。

次に、カード内部のレイアウトのスタイルを設定します。ループアイテム内のルートコンテナ（例えば、列モジュールやグループモジュール）を選択します。レイアウトオプションで、複数の要素を並べて表示したい場合は、「フレックス方向」を「行」に設定します。画像モジュールの幅をコンテナ内のスペースの約半分に設定します。残りのスペースはテキストエリア（この場合は、様々なモジュールが入ったグループコンテナ）で埋めます（グループモジュールのサイズ設定オプションの「拡大して埋める」を選択します）。

様々なコンテナやモジュールを自由に配置できます。あらかじめ設定されたレイアウトに縛られることはありません。ここでは、タイトルを左のグループに配置し、右のグループをフレックスカラムに設定しています。これにより、微妙ながらもユニークなレイアウトの変化が得られます。可能性は無限大です。

プロジェクトに適したツールの選択

これは、単純な機能ではなく、最適なものを見つけることです。要件を満たす最速のパスを選びましょう。ニーズが変わったらツールを切り替えましょう。ブログモジュールで十分な場合もありますが、うまくいかない場合はループビルダーで強力なピボットが可能です。

ブログモジュールが最適な場合

コンテンツが標準的な投稿パターンに沿っている場合は、ブログモジュールが最適です。タイトル、アイキャッチ画像、抜粋、基本的なメタ情報が最適で、基本的なニュースサイト、企業の最新情報、シンプルなポートフォリオなどが適しています。訪問者は従来のレイアウトを期待しており、最小限の設定で信頼性の高いソリューションを求める場合もあるでしょう。

ブログモジュールを使えば、数分で動作するフィードを配信できます。可動部品が少ないということは、不具合（または混乱）が発生する可能性も低くなります。

「ループ」の概念がまだよくわからない非技術系ユーザーでも、ブログモジュールは大いに活用できるでしょう。これは素晴らしいツールなので、ぜひご活用ください。

ループビルダーが必須になるとき

投稿にないフィールドが必要な場合、またはカード構造が既存のパターンと一致しない場合は、ループビルダーを使用してください。eコマース、不動産、教育業界は、より高度なカスタマイズが必要な典型的な業界です。それぞれの業界では、カスタムフィールドに格納される詳細情報が必要です。扱うコンテンツ数やコンテンツの種類が増えるほど、レイアウトにはより柔軟な設定が求められる傾向があります。

コンテンツ間の関係が複雑になる場合は、ループビルダーを使用してください。1つのビューに複数の投稿タイプを混在させたり、リピーターのコンテンツを表示したりする必要がある場合があります。

Divi 5で独自のブログモジュールレイアウトを構築する

Diviのブログモジュールは、標準フィードを配信する最も速い方法です。ループビルダーを使用すると、カスタムカード、カスタムフィールド、リピーターを利用できます。ループビルダーはカスタマイズ可能で、思い描いたレイアウトやデザインに正確に仕上げることができますが、ブログモジュールにはいくつかの制限があります。

この選択の最大の利点は、両方をツールキットに入れておき、作業内容に応じて使い分けられることです。DIVI５は完成に近づき、これまで以上にパワフル（かつ安定）になっています。まだ使ったことがない方は、ぜひ次のウェブサイトで試してみてください。パブリックベータ版のリリースも間近に迫っており、既存のDiviウェブサイトの移行テストの承認も間近に迫っています。

Divi 5をダウンロードDivi 5について詳しく