Divi 5のループビルダーを使用したカスタムブログ投稿ループを作成する方法

あなたのブランドは静的なレイアウトによって制約されるべきではないので、Divi 5が開発を続けているため、完全な柔軟性を提供することを目指しています。 Divi 5の新しいループビルダーは、その方向への素晴らしい一歩です。アイテムを一度設計し、動的グリッドまたはリストにループすることができます。

このチュートリアルでは、カスタムブログ投稿ループを設定する方法を紹介します。リストを設計し、動的フィールドを接続し、クエリを設定し、クリーングリッドまたはリストのレイアウトを改良します。それに到達しましょう！

Divi 5のループビルダーとは何ですか

Divi 5のループビルダーを使用すると、必要な数のDiviモジュールを使用してVisual Builderに単一の「カード」レイアウトを設計し、Diviが表示することを選択したアイテムごとにループします。

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

列にループ要素を有効にし、クエリ（プロジェクト、用語、ユーザーなどの投稿、カスタム投稿タイプ）、およびタイトル、特集画像、カテゴリ、カスタムフィールド、ボタンなどの動的フィールドをマップします。要素を並べ替え、間隔を制御し、すべてがグローバルスタイルを継承できるようにすることができます。

結果は、追加のプラグインやカスタムコードを必要とせずにシステムに一致する応答性の高い再利用可能なリストです。

ループビルダーの仕組み

コンテンツタブを開き、ループを有効にすることにより、任意のセクション、行、列、またはモジュールのループモードをオンにすることができます。

その時点から、Diviは設定に一致する各投稿の要素を自動的に繰り返します。

これが実際のコントロールが登場する場所です。ループ設定では、次のことができます。

• クエリタイプ：カテゴリ、タグ、カスタムフィールド、またはその他のメタデータによるフィルタリング、基本的な投稿クエリまたはメタクエリのいずれかを選択します。
• 投稿タイプ：ブログ投稿から製品、カスタム投稿タイプまで、表示するコンテンツの種類を選択します。
• 特定の用語を持つ投稿のみを含めます。特定のカテゴリ、タグ、またはその他の分類規約に一致する投稿のみを表示します。
• 特定の用語で投稿を除外します。選択したカテゴリ、タグ、または用語に一致する投稿を削除します。
• 特定の投稿のみを含めます。含める個々の投稿を選択します。
• 具体的な投稿を除外します。ループで不要な個々の投稿を非表示にします。
• メタクエリ：カスタムフィールド条件を追加して、表示されるものを制御します。
• 注文：結果が日付、タイトル、メニューの注文、またはカスタムフィールド値でソートされているかどうかを選択します。
• 注文：昇順または降順の結果を表示します。
• ページごとの投稿：ページネーションの前に表示される投稿の数を決定します。
• ポストオフセット：最初から特定の数の投稿をスキップします。注目のセクションで複製を避けるのに便利です。
• 粘着性の投稿を無視する：粘着性の投稿が優先されるか、通常の投稿のように扱われるかを選択します。

クエリを定義すると、Diviは各ポストカードを適切なコンテンツで自動的に埋めながら、レイアウトとスタイリングを同一に保ちます。あなたはカードの見た目に完全に焦点を合わせ、Diviは人口と繰り返しを処理します。 1つのパネルからすべてが制御されているため、いくつかの設定で、手動編集なしでブログのリストを更新するために必要です。

Divi 5のループビルダーに関するすべてを学びます

Divi 5を使用してカスタムブログ投稿ループを作成します

ループビルダーを使用したカスタムブログ投稿ループの構築には、2つの部分があります。まず、ポストカードレイアウトを設計し、コンテンツが表示され、どのように見えるかを正確に選択します。次に、そのデザインをループ内に配置すると、Diviが表示するすべての投稿に対して自動的に繰り返されます。

カードレイアウトから始めて、ループをセットアップして、段階的に進みます。

始める前に

ブログモジュールからループビルダーに移動し、すでにブログリストページを持っている場合は、スキップしてループレイアウトを作成できます。そうでない場合は、クイックセットアップがあります。

1.ブログページを追加します

WordPressダッシュボードから、ページに移動して>新しい追加、「ブログ」に名前を付けて公開します。

このページは、投稿のメインハブになります。

2. WordPress設定でブログページを設定します

設定>読み取りで、静的ページを選択します。ホームページを自宅に割り当て、新しいブログページを投稿します。

これは、別のホームページとブログリストページを使用する場合にのみ必要です。

3.テーマビルダーテンプレートを作成します

次に、ブログリストページの新しいテンプレートを作成します。すでに持っている場合は、それをカスタマイズできます。最新のDivi 5バージョンを使用してループビルダーにアクセスしていることを確認してください。

Divi> Theme Builderで、 [新しいテンプレートの追加]> [新しいテンプレートの作成]をクリックします。

ブログページに割り当て、 [作成]テンプレートの作成をクリックします。

ブログ投稿リストページを設計するには、 [カスタムボディの追加]> [カスタムボディの構築]をクリックします。

これで、Diviビルダーに入り、ループレイアウトの構築を開始します。

1.レイアウトをインポートします

レイアウトから始めると、時間を節約でき、最初から一貫したデザインを維持するのに役立ちます。このチュートリアルでは、ブランドにマーケティングエージェンシーのブログページレイアウトを使用しています。

同じものを選択したり、仕事をするのに適したベースを提供するレイアウトをインポートしたりできます。テンプレートに入ったら、すべてをゼロから構築するのではなく、ニーズに適応できる既製の構造ができます。

2。1つのブログ郵便カードを設計します

これは、ループビルダーの柔軟性が実際に生まれる場所です。ブログモジュールの固定レイアウトにロックされる代わりに、ポストカードに何が起こるか、どのように配置されているかを正確に決定します。

テンプレートに新しいセクションを追加します。事前に設計された構造から選択するか、1列のオプションを使用して独自の構造を作成できます。

この例では、 3列の行構造セクションを選択しましょう。

最初の列で、郵便局を作成します。モジュールグループを使用して、すべての要素を保持します。

次に、注目画像の画像モジュール、投稿タイトルの見出しモジュール、抜粋用のテキストモジュールを追加します。また、メタ情報と読み取りボタンを追加して、訪問者が完全な投稿にクリックできるようにします。

基本的な構造が存在したら、カードのデザインをカスタマイズしてブランドに合ってください。色、フォント、間隔、およびそれを自分のものにするユニークな視覚的な詳細を微調整します。

3.行のラッピングを有効にします

さまざまな画面サイズにわたってカードがきれいに表示されるようにするには、フレックスラッピングを有効にする必要があります。メイン行を選択し、 [デザイン]タブを開きます。

レイアウトに移動します。レイアウトスタイルが屈曲するように設定されていることを確認してください。

レイアウトラップを有効にして、必要に応じてカードが新しいラインに移動できるようにし、デザインに最適なラッピングアライメントを選択します。

4。ループをオンにします

これで、それをすべて自動にするステップがあります。カードの列を選択します。

次に、 [コンテンツ]タブの下のループオプションをオンにします。ループが有効になると、Diviはクエリ設定を満たす各投稿のカード設計を繰り返します。

このレイアウトのために、私は次のように設定しました：

• 投稿タイプ：投稿
• ページごとの投稿： 10
• 注文：日付
• 注文：下降（最新）
• ポストオフセット： 0（最新から開始するすべてを表示）
• 粘着性の投稿を無視する：はい

これらの小さな調整により、グリッドが必要な順序で必要な投稿を正確に表示するようにします。これらの値をいつでも変更して、レイアウトをさまざまなニーズに適応させることができます。

5.動的コンテンツを追加します

ループを実現するための最後のステップは、カード内の各モジュールをライブポストデータに接続することです。これが、静的カードを自動化された、常にデートのリストに変えるものです。例えば：

• 画像モジュールをポストの注目画像にリンクします。
• 見出しモジュールを投稿タイトルにリンクします。
• テキストモジュールを投稿の抜粋にリンクします。
• [詳細]ボタンをPost URLに接続します。

ループがループすると、Diviはループ内の各投稿の正しいデータにプレースホルダーコンテンツを置き換えます。

注目の画像を設定するには、画像モジュールを開き、画像オプションの上にホバリングし、動的コンテンツアイコンをクリックします。選択した画像を選択すると、関連するすべての画像が即座に入力されます。

これを投稿タイトル、公開された日付、抜粋、および表示する他のフィールドについては、これを繰り返します。

モジュールの動的コンテンツアイコンをクリックすると、ループ固有のオプションの全範囲が表示されます。タイトルや画像に限定されません。また、公開日、変更された日付、著者名、コメントカウント、カテゴリ、タグ、さらにはカスタムフィールドを表示することもできます。

これは、ポストカードが最小限であるか、必要に応じて詳細になる可能性があることを意味します。クリーンで画像重視のグリッド、コンテンツが豊富なレイアウト、またはニッチなカスタムポストタイプフィールドを強調します。一度設計し、Diviはループ全体で正確かつ一貫性を保ちます。

6.テンプレートとプレビューを保存します

すべてが正しく見えるようになったら、最終的な調整を行い、Diviビルダーとテーマビルダーの両方の変更を保存します。

ページをプレビューして、ループが動作しているのを確認します。これが完成したブログリストページです：

ブログモジュールには制限があり、ループビルダーはありませんでした

ブログモジュールは正常に動作していたので、なぜループビルダーを押しているのですか？ 「ファイン」は固定されていたからです。ブログモジュールはあなたをそのテンプレートにロックしましたが、ループビルダーは空白のキャンバスを提供します。レイアウト、順序、スタイル、およびDiviループを自動的に選択します。

それが本当の変化です。あなたは他の誰かのテンプレートを調整しているのではなく、あなた自身のデザインをデザインしています。それをもう一度実践し、典型的なブログモジュール構造とは異なるレイアウトを設計しましょう。

まず、1列の行とセクションを追加します。サイジングを調整し、行のフレックスラッピングとフレックスラッピングが有効になっていることを確認してください。

この行にはブログカードが含まれます。次に、列内に別のネストされた列を追加してカード構造を作成します。左側に画像と右側にポストのメタデータがあります。

あなたの構造を正確に設計し、あなたが望むように、ブログモジュールシーケンスに従う必要はありません。今のところ、左の列を空にしたままにします。列の背景画像として注目画像を追加します。

ブログリストカードをカスタマイズします。

また、デザイン>レイアウト>垂直ギャップオプションの右列でモジュールグループの垂直ギャップを変更することもできます。

次に、ループオプションを有効にします。親行から最初の列を選択します。

繰り返しますが、動的なコンテンツをループします。画像から始めて、左の列の背景オプションに移動すると、残りは同じになります。

これはあなたのリストスタイルのブログループです。これで、これをグリッドに変換する場合は、列の幅を変更するだけです。フレックスラッピングが行に有効になっているため、サイズが変更されると、カードは独自にラップします。

これにより、画像が大きくなりすぎると、抜粋を削除し、行の列構造を変更し、水平ギャップをゼロに調整できます。

そして、それと同じようにあなたのグリッドも準備ができています。

この例は、ループビルダーが可能にするものを垣間見るだけです。本当のポイントは、あなたがもう一握りのプリセットレイアウトに限定されないということです。ポストカードのすべての部分は、アレンジ、スタイル、再考するためのあなたのものであり、Diviはそれを自動的に繰り返すことを処理します。その柔軟性は、シンプルなブログリストをあなたのサイトに向けて設計されたものに変えるものです。

ページネーションモジュールを使用します

ループクエリのページごとの投稿を制限すると、読者が残りを見る方法が必要になる可能性があります。グリッドの下にページネーションモジュールを追加し、ターゲットループを有効にした要素に設定します。完全なウォークスルーについては、Divi 5のループビルダーとページネーションモジュールを一緒に使用する方法をご覧ください。チュートリアルをお読みください。

ブログテンプレートをダウンロードします

ブログテンプレート内のグリッドを試したい場合は、以下のこのチュートリアルで使用されたテンプレートをダウンロードしてください。これらをインポートするには、Diviテーマビルダーに移動します。右隅のインポート/エクスポートアイコンを使用してこれらをインポートできます。

ファイルをダウンロードします

無料でダウンロードしてください

Divi Newsletterに参加してください。究極のDiviランディングページレイアウトパックのコピーに加えて、他の驚くべき無料のDiviリソース、ヒント、トリックを大量にメールで送信します。フォローすると、すぐにDiviマスターになります。既にサブスクライブされている場合は、以下のメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

サブスクライブに成功しました。メールアドレスを確認してサブスクリプションを確認し、無料の毎週のDiviレイアウトパックにアクセスしてください！

カスタムブログ投稿ループを今すぐDivi 5に作成します

Divi 5のループビルダーの前に、真にカスタムブログ投稿ループを作成することは、多くの場合、リジッドテンプレートでレスリングするか、小さな変更ごとにカスタムコードを作成することを意味していました。今、それは最初から最後まで視覚的なプロセスです。カードを一度設計し、モジュールをリンクしてポストデータにリンクし、Diviに残りを処理させます。

ブログモジュールの制限を回避している場合、ループビルダーはあなたが待ち望んでいたアップグレードです。次のプロジェクトで試してみて、あなたが望むように見えるブログ（または製品、イベント、またはリスト）を作成するのがどれだけ簡単かを確認してください！