ブログモジュールvs Divi 5のループビルダーを使用します

ブログモジュールは、箱から出して動作するDiviの組み込みフィードジェネレーターです。タイトル、画像、抜粋、メタデータのトグルを使用して投稿をリストするための迅速な方法を提供します。

Divi 5の新しいループビルダーは、別のアプローチを取ります。任意のモジュールを使用してアイテムを設計し、動的コンテンツにフィードします。どちらのツールもループされたコンテンツを表示しますが、それぞれが異なるシナリオで輝いています。時間を節約し、フラストレーションを防ぐ時期を知る。 2つを比較しましょう。

YouTubeチャンネルを購読してください

ミニ用語集

これは、ループビルダーの概念に慣れていない初心者向けの短い用語のセットです。

• カスタムポストタイプ（CPT）：製品やコースなどのカスタムコンテンツタイプ。それは投稿のように動作しますが、独自の独自のフィールドを持つことができます。
• カスタムフィールド：投稿、ページ、またはCPTに追加するフィールド。フードメニューの例には、価格、評価、グルテン/アレルギー宣言、辛さのレベルが含まれます。
• リピーターフィールド：個々の投稿内にアイテムのリストを保存するフィールド。カスタムコンテンツに有効なサブリストについて考えてください。
• フィールドプラグイン： ACFは一般的なピックですが、ポッド、メタボックス、 ACPT 、およびツールセットも機能します。

いくつかの詳細に迷子になった場合は、この用語集を参照してください。しかし、途中で物事を簡単にします。

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

ブログモジュールは、認識可能なブログパターン用に構築されています。それは一般的な要素を想定しており、ショーを切り替えて、セットアップを迅速に保ち、決定をシンプルに保ちます。

WordPressでのブログ投稿がどのように機能するかを考えてください。すべての投稿では、ブログコンテンツとして認識できる特定の共通要素を共有しています。これらの共有特性は次のとおりです。

1. 1. 投稿タイトル
   2. 特集画像
   3. コンテンツを投稿します
   4. URLスラッグ
   5. 著者
   6. カテゴリ
   7. もっと

ブログモジュールは、従来の投稿を念頭に置いて設計されています。タイトルは、投稿がカバーするものを教えてくれます。注目の画像は視覚的な抽選を追加します。抜粋はコンテンツをプレビューします。メタデータは、誰がそれを書いたのかを言っています。

Diviのブログモジュールは、これらの要素に自動的に同期します。ページにドロップして、表示するものを選択します。フィードは、カスタムクエリ作業なしでまったく表示されません（表示されているものを制限したい場合を除き、その場合はクエリツールが組み込まれています）。

トグルアプローチにより、変化が痛みがなくなります。著者を隠すことはできますが、日付を保持したり、画像を見せたり、抜粋をスキップしたりできます。小さな決定は迅速な結果をもたらします。

カスタム投稿タイプ：限られているが機能的

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

CPTが標準のポストフィールドをミラーリングする場合、ブログモジュールは正常に動作します。真のカスタムデータが必要なときに制限されます。したがって、チームメンバーのCPTは、物事が単純に保たれたときに働きます。

• 名前はタイトルにマップします。
• 注目の画像へのヘッドショット/アバターマップ。
• コンテンツへのバイオマップ。

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

カスタムフィールド

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

ソーシャルリンク、認定、または長年の経験は、デフォルトのWordPressブログ投稿にある標準フィールド用に構築されたため、ブログモジュールには表示されません。モジュールには、これらのカスタムフィールドのトグルがありません。

カスタムレイアウト

レイアウト制御もわずかに制約されています。モジュールは、固定構造内の要素を固定順序で詰め込みます。カスタムCSSを使用しない限り、タイトルと画像を並べ替えることはできません。 FlexBoxまたはブロックを介して各ブログカードのレイアウトを管理できますが、チャイルドアイテム（カード）には、Child FlexBoxコントロールのサイジング設定がありません（Shrink to FitまたはGrow To Fillなど）。

ブログモジュールは、標準のカードレイアウトに使用するのに優れていて速いです。少し創造的なバグを手に入れたら、もっと慣習を探していることに気付くかもしれません。

ループビルダーを使用したカスタムポストタイプ +カスタムフィールド

Diviのループビルダーは、動的なコンテンツを表示するための別のアプローチを提供します。 Loop Builderを使用すると、所定の要素を備えた単一のモジュールの制約内で作業する代わりに、想定通りに配置された個々のDIVIモジュールからコンテンツディスプレイを作成できます。

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

ループビルダーの仕組み

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

これらのモジュールのそれぞれのコンテンツを正しいトークンにバインドします。 DiviのUIはこれを非常にシンプルにします。画像は、特集画像を指します。見出しはタイトルを指します。ボタンはPost URLにリンクします。

このモジュラーアプローチにより、構造と間隔の制御が得られます。上またはタイトルのそばに画像を配置できます。 2つのカスタムフィールドに2つのテキストブロックを追加することもできます。これにより、モジュールを介して事前に構成されたカードではなく、必要なカードを構築できます。

カスタム投稿タイプとカスタムフィールドを使用した例

このコンクリートをいくつかの簡単なシナリオで作りましょう。パターンを保持し、フィールドを交換します。前の例からカードのデザインを使用して、カスタムポストタイプとカスタムフィールドを使用してどのように調整できるかを見てみましょう。

まず、標準のブログ投稿のカスタムループを構築します。タイトル、カテゴリ、公開日、機能画像の標準フィールドを使用して、スタンドポスト「投稿タイプ」を使用します。それぞれを設計のそれぞれのモジュールにマッピングします。これらは標準のポストフィールドを使用しますが、一意のレイアウトで配置されています。

いくつかの単純な不動産リストについても同様のことができます。同じカードレイアウトを使用して、プロパティタイトルに割り当てられた見出し、ベッドルーム、バスルーム、プロパティの説明に割り当てられたテキストモジュール、およびプロパティリストURLにバインドされたボタンを使用して、カスタム投稿タイプのコンテンツを入力できます。

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

CPTSのこのすべての話、どのようにしてそれらを作りますか？ここでは、高度なカスタムフィールド（ACF）が選択肢です。ポッド、メタボックス、ACPT、およびツールセットは、ループビルダーが読み取ることができるフィールドも作成します。予算、経験、スタックに合ったものを使用してください。

不動産ウェブサイトのメモ：IDXからリストをCPTとしてWordPressに引き込む専用のプラグインを使用することをお勧めします。そうすれば、新鮮なデータと最小限のマニュアル作業があります（毎朝誰も手動でプロパティを入力したくありません）。

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

FlexBoxは、ループビルダーと自然にペアを組みます。カスタムCSSなしでは、クリーンで応答性の高い構造に2つのレベルで使用できます。

まず、外側のループコンテナをスタイルします。ループ親コンテナを選択します。フレックスレイアウトをオンにします。方向を列に設定します。複数のフレックスローが必要な場合は、ラップを有効にします。ギャップを設定して、アイテム間の間隔を制御します。次に、サイジングオプションを使用してループが座っている子供コンテナのサイジングを調整します。コンテナフレックスコントロールとチャイルドフレックスコントロールの間に、ループされた要素のためのレスポンシブで魅力的なレイアウトを作成できます。

第二に、内側のカードレイアウトをスタイルします。ループアイテム内のルートコンテナ（たとえば、列またはグループモジュール）を選択します。レイアウトオプションでは、いくつかの要素が並んで必要な場合は、フレックス方向をrowに設定します。画像モジュールの幅を設定して、コンテナ内のスペースの約半分を占有します。テキスト領域（この場合、さまざまなモジュールが内部にあるグループコンテナ）を残り（グループモジュールのサイジングオプションに充填するために成長）します。

さまざまなコンテナやモジュールを手配することができます。事前に設定されたレイアウトにロックされていません。ここでは、タイトルを左のグループに配置し、右のグループをFlex Columnに設定します。これにより、微妙でありながらユニークなレイアウトの変更が得られます。本当に可能性が不足していません。

プロジェクトに適したツールを選択します

これは、生の機能に関するものではなく、適切なフィット感を見つけることについてです。要件を満たす最速のパスを選択します。必要性が変更されたときにツールを切り替えます。ブログモジュールがトリックを行うこともありますが、そうでない場合はループビルダーに強いピボットがあります。

ブログモジュールが理想的な場合

コンテンツが標準の投稿パターンに従っている場合、ブログモジュールに到達します。タイトル、特集画像、抜粋、および基本的なメタは、そのスイートスポットです。基本的なニュースサイト、会社の更新、およびシンプルなポートフォリオの資格があります。訪問者は従来のレイアウトを期待しており、セットアップを最小限に抑えた信頼できるソリューションが必要になる場合があります。

ブログモジュールを使用すると、作業フィードを数分で出荷できます。また、可動部品が少ないことは、物事を壊す（または混乱する）チャンスが少ないことを意味します。

「ループ」の概念にまだ失われる可能性のある非技術的なユーザーは、ブログモジュールに依然として大きく依存しています。それは素晴らしいツールであり、絶対に使用する必要があります。

ループビルダーが不可欠になったとき

投稿がないフィールドが必要な場合、またはカード構造がストックパターンと一致しない場合、ループビルダーを使用します。 eコマース、不動産、教育は、より多くのカスタマイズを必要とする傾向がある典型的な産業です。それぞれがカスタムフィールドに住む詳細が必要です。より多くのコンテンツまたはより多くの種類のコンテンツを使用している場合、レイアウトはより柔軟性が必要になる傾向があります。

コンテンツ関係が複雑になったら、ループビルダーを使用します。投稿タイプを1つのビューに組み合わせて、リピーターからコンテンツを表示する必要がある場合があります。

Divi 5を使用して独自のブログモジュールレイアウトを作成します

Diviのブログモジュールは、標準フィードを出荷する最速の方法です。ループビルダーは、カスタムカード、カスタムフィールド、リピーターのロックを解除します。ループビルダーは、カスタマイズして、念頭に置いている正確なレイアウトとデザインに成形することもできますが、ブログモジュールにはいくつかの制限があります。

この決定の最大の利点は、ツールキットに両方を保持し、ジョブに基づいて選択できることです。 Divi 5は一緒になっており、これまで以上に強力な（そして安定して）。使用していない場合は、次のWebサイトでお試しください。パブリックベータ版はもうすぐです。つまり、既存のDIVIサイトは、既存のWebサイトの移行をテストするために到達することに近づいていることを意味します。

Divi 5の詳細については、Divi 5をダウンロードしてください