Divi 5のループビルダーとページネーションモジュールの使用方法

これらの投稿の選択された限られたセットを表示している場合、ポストコンテンツの静的リストは問題ありません。ただし、多くの場合、ユーザーは元のループショーよりも多くのコンテンツにアクセスすることを望んでいます。最初にコンテンツのロードの量を決定し、読者にバッチ間を移動する明確な方法を提供したいと考えています。そこで、Divi 5のループビルダーとページネーションモジュールが完璧なペアになります。

この投稿では、それぞれの仕組みを説明し、それらを接続する方法を示します。最後に、適切なページネーションでループレイアウトを構築する方法がわかります。

Divi 5のループビルダーに会います

ループビルダーは、Divi 5の最大のアップグレードの1つです。古いブログモジュールが決してできない自由を与えます。すべての要素は「ループされた」容器になることができます。つまり、Diviは、クエリに一致する各投稿、製品、またはカスタム投稿タイプごとに自動的に繰り返されます。

事前に設計された投稿のリストにこだわる代わりに、1つの「テンプレート」アイテムをループとして設計します。 Diviは、各結果に対して、ループのクエリから動的なコンテンツを交換することを使用します。これは：

• 投稿データから引き抜かれたタイトル
• 特集画像
• カスタムフィールド
• フルポストまたは製品へのリンク

ブログ固有のデータだけでなく、任意のモジュールを使用してこのモジュールを表示できます。あなたの最新のコースリストを表示する派手な宣伝文字モジュールが欲しいですか？終わり。 WooCommerceアイテムのカスタム製品カードレイアウトが必要ですか？また完了しました。

デザインとコンテンツの構造を自分で構築しているため、柔軟です。 Diviは繰り返しを処理します。

ブログモジュールからループビルダーに切り替えるということは、標準テンプレートから完全にカスタマイズ可能なレイアウトシステムに移動することを意味します。私はそれで建物を本当に楽しんでいます、そして私はあなたもそうすることを知っています！

ページネーションモジュールに会います

ページネーションは、「結果をページに分割する」と言うのに豪華な方法です。すべてのアイテムを単一ページにダンプする代わりに、それらを小さなセットに分割します。それは役立ちます：

• ページの読み込み時間
• 読みやすさ
• スキャン可能性

Divi 5のページネーションモジュールはまさにそれを行いますが、スマートな統合があります。ブログの投稿だけに結び付けられていません。代わりに、ページ上に構築した任意のループに接続できます。

これは、カスタマイズできるラベルの2つのナビゲーション要素を追加することで機能します。現在のセットを過ぎて古いアイテムがある場合、「古い」（または選択したテキスト）がアクティブになります。新しいアイテムがある場合、「新しい」がアクティブになります。

ループ +ページネーションレイアウトの構築

完全なセットアップを実行しましょう。この例では、その下にページネーションを備えたカスタムループが必要です。ループを表示するフレックスレイアウトは次のとおりです。以下に完全に構​​築されたレイアウトをダウンロードできます。

カードは約50％の幅とフレックスグロウに設定されているため、ループカードがフレックス列にある場合、コンテナ内で完全に幅になります。

ステップ1：ループコンテナを作成します

ページにセクションを追加します。その中には、繰り返したいモジュールを追加します。これは、列またはグループ内の複数のモジュールの単一のモジュール（宣伝文字など）またはより複雑なレイアウトです。

コンテナを選択した状態で、設定を開き、ループオプションを有効にします。

データソースを選択してください。これは、ループが実行される「クエリ」です。

まず、クエリタイプを選択します。ウェブサイトの構成によっては、これらのオプションが表示される場合があります。

• 投稿タイプ（ブログ投稿や「プロジェクト」などのカスタム投稿タイプなど）
• 用語（カテゴリと分類法）
• ユーザー（著者のようなサイトユーザーのリストを返します）
• リピーターフィールド（ループ内でループを作成するためのプラグインによって作成されたカスタムフィールド）

次に、上記のクエリの種類に応じて、より具体的になる機会が得られます。 「ポストタイプ」を選択すると、次のような投稿タイプを使用できる場合があります。

• ブログ投稿
• プロジェクト
• 製品
• あなたがあなた自身のためにカスタムビルしたCPTは何でも

そこから、ループに表示されるべきものをさらに具体的に得ることができます。あなたはできる：

• 特定のカテゴリまたはタグのあるアイテムを含めます
• 特定のカテゴリまたはタグでアイテムを除外します
• 特定のアイテムを含める（ポストIDによる）
• 特定のアイテムを除外します（ポストIDで）
• 独自のメタクエリを作成します（カスタムフィールドデータに基づいてインクルージョン/除外の作成に役立ちます）
• 一致するクエリの順序を設定します（アルファベット順や下降など）
• ページあたりのアイテム値は、ループに表示される数を制御します
• サイクルの後半でループを起動する場合に備えて、オフセットをポストオフセット
• 粘着性の投稿を無視します

これが、この時点での例です。ループを作成し、ブログ投稿の種類に割り当てました。表示制限を3に設定します。

次に、動的ループコンテンツでハイパーリンクするさまざまなテキストフィールドとアイテムを割り当てる必要があります。

ステップ2：ループ内に動的コンテンツを追加します

次のタスクは、各ループのモジュールをクリックして、静的テキストまたは画像を動的なコンテンツフィールドに置き換えることです。例えば：

• テキストモジュールで、動的コンテンツピッカーから「タイトルを投稿する」を選択します
• 画像モジュールでは、「注目画像」を選択できます。
• ボタンモジュールで、リンクを「URLの投稿」に設定します
• ループコンテナ全体で、リンクを「URLの投稿」に設定します

これにより、Diviに、ループされたアイテムごとに適切なコンテンツを引くように指示されます。

覚えておいてください - ループ内のどんな結果も繰り返されます。ループ以外のコンテンツ（見出し、広告、CTAなど）を外側に保持します。動的データに接続されていないループにコンテンツがある場合、ループ内のすべてのアイテムがAS-IS（サンプルカードの右下にある「読み取り→」テキストなど）を表示します。

ステップ3：ページネーションモジュールを追加します

ループセクションの下に、新しい行を追加します。ページネーションモジュールを挿入します。モジュールの設定で、ターゲットフィールドを見つけます。それを使用して、ページ上のループのドロップダウンリストからループを選択します。これにより、ページネーションコントロールがその特定のループにリンクされます。プロのヒント：管理ラベルを使用する場合、適切なターゲットを選択する方が簡単です。これは相互作用にも当てはまります。

「以前」と「次」のラベルをカスタマイズします。 「古い投稿 /新しい投稿」、「バック /フォワード」、または「← /→」を最小限のスタイルで使用できます。

重要なのは、ページネーションモジュールが制御するループの外側に座る必要があることです。それは、それが正しいターゲットに割り当てられていることを確認します（同じページ/テンプレートに複数のループがある場合）。

ステップ4：相互作用をテストします

ページを保存してプレビューします。 [古い]をクリックして、次のループアイテムのセットに移動します。

ループのページを識別するクエリパラメーターでURLがどのように変化するかに注意してください。また、ループコンテンツのシャッフル/変更のみが、ヘッダー、フッター、サイドバーのみが同じままである必要があることに注意してください。

このループレイアウトを取得します

このレイアウトを分析し、自分のために物事がどのように構築されているかを見たいですか？ここからダウンロードしてください！

フォルダを解凍したら、Diviライブラリに移動してファイルをアップロードします。アップロードすると、作業中の任意のページにセクションを追加できます。

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

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

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

ダウンロード

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

よりダイナミックなDiviをお楽しみください

Divi 5のループビルダーとページネーションモジュールは、柔軟性が大きく前進しています。ループビルダーは、古いモジュールの剛性デザインから解放され、動的なコンテンツで独自の繰り返しレイアウトを構築できます。ページネーションモジュールは、それらをユーザーフレンドリーなチャンクに分割することにより、これらのレイアウトを高速で管理しやすくします。

ループビルダーとページネーションモジュールは、他の新しいDivi 5機能（Flexbox、Interactions、HSL Color Controls）と組み合わせて、これまでになく強力です。これらすべてで、いくつかの信じられないほどのページデザインを作成できます。

最初のPagined Loopを作成したら、ブログ、製品グリッド、ポートフォリオ、または整理する必要があるコンテンツタイプでアプローチを再利用するのがどれほど簡単かがわかります。