ブログの投稿、製品、カスタム投稿タイプなどの動的なコンテンツを完全にカスタムレイアウトに表示したいのですが、コードの行に触れてみませんか？ Beaver Builderのループモジュールにより、それが可能になります。

Beaver Themer 1.5およびBeaver Builder 2.9で導入されたThe Loopモジュールは、標準のBeaver Builderモジュールを使用して繰り返し可能なレイアウトを設計できる強力なツールです。ブログ、ポートフォリオ、イベントリスティング、またはWooCommerceショップを構築するかどうかにかかわらず、このモジュールは、そのコアにダイナミックコンテンツを備えた完全な設計コントロールを提供します。

このガイドでは、ループモジュールを使用して、サイトの設計、パフォーマンス、柔軟性を高める最新の動的なレイアウトを構築する方法を分類します。

ループモジュールとは何ですか？

ループモジュールは、クエリのコンテンツをループし、作成したレイアウトを使用して表示する柔軟なコンテナです。デフォルトのWordPressテンプレートに依存する代わりに、モジュール、フィールド接続、条件付きロジックを完了する独自のカスタムデザインを構築できます。

ループモジュールは、ブログ投稿やカスタム投稿タイプに限定されません。さまざまな動的コンテンツを処理できます。これを使用してカスタムレイアウトを作成し、サイトを強化できる強力な方法をいくつか紹介します。

• WooCommerceカテゴリまたはタグ- Taxonomiesクエリソースを使用して、個々の製品ページに関連する製品カテゴリまたはタグを表示します。
• カスタムコンテンツグリッド- チームメンバーやお客様の声などの動的コンテンツを表示します。「チームを満たす」やサービスリストなどのページにACFリピータークエリソースを使用します。
• 関連投稿- ACF関係クエリソースを備えた単一の投稿ページに関連するブログコンテンツを機能させ、エンゲージメントを高め、直帰率を下げるのに役立ちます。

ループ内の各アイテムは、カスタムデザインを使用し、投稿タイトル、特集画像、抜粋などの動的データを引き込みます。

ループモジュールの主要な機能

ループモジュールには、柔軟でコンテンツが豊富なページを構築するのに理想的な機能が搭載されています。

• 任意の投稿タイプ（標準またはカスタム）からの動的コンテンツをクエリ
• ループレイアウト内のビーバービルダーモジュールを使用します
• フィールドを動的に接続します（例、タイトル、注目画像、ポストメタ）
• グリッド、リスト、カルーセルなどの複数のレイアウトタイプから選択してください
• フィルターとページネーションを追加して、ユーザーエクスペリエンスを強化します

このカスタマイズと自動化の組み合わせにより、HTML、PHP、またはCSSを作成せずに高度なレイアウトを作成できます。

カスタムループを構築する方法

ループモジュールでカスタムコンテンツレイアウトを作成することはシンプルで柔軟で、コードは必要ありません。既製のレイアウトから始めたり、ゼロから独自のレ​​イアウトを構築したい場合でも、ループモジュールは動的コンテンツの表示方法を完全に制御できます。

ループモジュールプリセットレイアウトオプション

最初にループモジュールをページにドラッグすると、次のプリセットレイアウト（リスト、列、カテゴリ、および製品カテゴリ）から選択するように求められます。

プリセットレイアウトは、完全にカスタマイズできる事前にアレンジされたモジュールを提供することから、順調なスタートを切ることができます。ニーズに合わせてループ設定を調整し、既存のモジュールを再配置または削除し、新しいモジュールを追加してレイアウトを微調整します。これらの既製のデザインは、洗練された応答性の高いコンテンツディスプレイをより速く作成するのに役立ちます。

空白のレイアウトでゼロから構築します

完全にカスタムを作成することを好みますか？空白のレイアウトオプションを選択して、次の手順に従います。

1. ループモジュールをページに追加するか、ビーバービルダーエディターに投稿します。
   
2. 空のループコンテナから始めるには、空白のレイアウトを選択します。
   
3. ループ設定を構成して、ブログ投稿、WooCommerce製品、ACFリピーターフィールド、またはカスタムポストタイプなど、表示するコンテンツを定義します。
   
4. モジュールをループコンテナにドラッグして、レイアウトをゼロから構築します。見出し、写真、アイコン、ボタンなど、必要なビーバービルダーモジュールを追加します。
   
5. フィールド接続を使用して、各ループアイテムのタイトル、画像、価格、カスタムフィールドなどの動的なコンテンツを引き込みます。
   
6. Beaver Builderのドラッグアンドドロップツールを使用して、モジュールを手配してスタイルします。

このセットアップは、Total Controlを必要とする上級ユーザーまたはデザイナーに最適です。
それを使用して、カスタムブログのレイアウト、製品グリッド、またはチームディレクトリを構築します。コードは必要ありません。

レイアウト制御にはボックスモジュールを使用します

ボックスモジュールは、レイアウトの精度とスタイリングの柔軟性に関して、ループモジュールの重要なコンパニオンです。

• ボックスモジュール内にループモジュールをラップして、外側の容器の幅、パディング、マージン、および背景スタイリングを管理します。これにより、ループされたコンテンツがページレイアウト全体にどのように配置されるかを完全に制御できます。
• ループ内にボックスモジュールをネストして、各ループアイテムの内部コンテンツをグループ化します。このセットアップを使用すると、 CSSグリッドやFlexBoxなどの高度なレイアウト技術を活用できます。たとえば、各ループアイテム内に2列のレイアウトを作成できます。左側に画像を配置し、右側にテキストを配置します。間隔とアライメントを完全に制御します。

ボックスモジュールを戦略的に使用すると、動的コンテンツの視覚構造を強化しながら、クリーンで応答性の高いデザインを維持できます。

クエリ設定：どのコンテンツが表示されますか？

ループモジュールのコンテンツタブを使用すると、ループコンテンツのクエリと表示方法を制御できます。

• 投稿タイプ（投稿、ページ、CPT、製品など）を選択します。
• 分類法、カテゴリ、タグ、または著者によるフィルター
• 投稿ステータスまたは日付に基づいてコンテンツを表示します
• オフセット、並べ替えの並べ替え、および投稿制限を設定します

これには、クエリソース、表示するアイテムの数、注文、および高度なフィルターオプションが含まれます。

ページネーション

ページネーションタブを使用すると、コンテンツの分割方法を制御でき、複数のページにわたって表示されます。ナビゲーションとユーザーエクスペリエンスを改善するためのidealです。

• 番号：投稿の下に番号付きのリンクが表示されます。番号をクリックすると、対応する投稿セットが付いた新しいページが読み込まれます。
• スクロール：ユーザーがスクロールするときに追加の投稿を自動的にロードし、1つのページにコンテンツを保持します。
• なし：ページネーションを無効にします。このオプションを使用して、ナビゲーションコントロールを使用して、最新の3つなどの限られた数の投稿を表示します。
• ページごとの投稿：ページごとに表示されるアイテムの数を設定します。デフォルトは10です。

これらのオプションは、レイアウトとユーザーインタラクションの目標へのコンテンツ配信を調整するのに役立ちます。

フィールド接続を備えた動的データ

ループレイアウト内では、フィールド接続を使用して、次のような投稿データを動的に引き込むことができます。

• 投稿タイトル
• 特集画像
• 抜粋または完全なコンテンツ
• カスタムフィールド
• 著者、日付、カテゴリ、タグ

動的コンテンツをサポートするモジュール（見出し、写真、ボタン、HTMLなど）をポストデータに接続できます。

高度なスタイリングと条件付きロジック

さまざまなポストタイプを異なる方法でスタイリングしたり、条件に基づいて要素を表示/非表示にしたいですか？ループモジュールは、条件付きロジックとカスタムCSSクラスをサポートします。

たとえば、できます：

• カスタムフィールドが空の場合はボタンを非表示にします
• 注目の投稿にバッジを追加します
• ポストカテゴリに基づいて、さまざまな色やスタイルを適用します

これにより、ユーザーエクスペリエンスを微調整し、コンテンツ全体で一貫したブランディングを維持できます。

実際のループモジュールのユースケース

ビーバービルダーのループモジュールは非常に用途が広いため、デザインのニーズに合ったレイアウトに動的なコンテンツを表示できます。これを使用する強力な方法は次のとおりです。

• ブログアーカイブ：視覚的に魅力的なグリッドまたは最新のブログ投稿のリストを作成して、特集画像と抜粋を作成します。
• WooCommerce製品：ダイナミック価格、画像、およびカートへの追加ボタンを備えたカスタマイズ可能なグリッドでWooCommerce製品を紹介します。
• ポートフォリオショーケース：ブランドスタイルを反映した柔軟なレイアウトでプロジェクトやケーススタディを強調表示します。
• 証言：カスタムポストタイプからクライアントの証言を表示し、ウェブサイトのデザインに合わせてスタイルを整えます。
• イベントリスト：日付、場所、イベントの説明を使用して、今後のイベントまたはウェビナーを年代順にリストします。
• チームメンバー：写真、名前、タイトル、BIOSでチームを紹介します。各アイテムを詳細なプロファイルページにリンクします。
• 不動産リスト：カスタム投稿タイプを使用して、不動産画像、価格設定、および重要な詳細を備えた不動産リストを提示します。
• コースカタログ：タイトル、説明、登録リンクを備えたオンラインコースまたはワークショップのカタログを表示します。
• ジョブリスト：タイトル、場所、短い役割の概要を含む動的なリストを備えたカスタマイズされたジョブボードを構築します。
• レシピインデックス：画像、タイトル、説明を含むレシピのコレクションを特集してください。食品ブロガーのためのideal。

これらのユースケースは、ビーバービルダーのループモジュールの汎用性を示しています。さまざまな業界やウェブサイトで使用でき、動的で魅力的な、カスタマイズされたコンテンツレイアウトを作成するのに役立ちます。

最終的な考え：なぜループモジュールを使用するのですか？

Beaver Builderのループモジュールは、完全にカスタムの動的なレイアウトを簡単に作成する力を提供します。ブログ、ストア、または複雑なコンテンツディレクトリを構築するかどうかにかかわらず、このモジュールは、ワークフローを視覚的でコードフリーに保つ場合、データの表示方法を制御できます。

ビーバービルダーを使用してモダンなカスタムWordPressサイトを構築することに真剣に取り組む場合、ループモジュールはツールキットに必須アイテムです。完全なループモジュールのドキュメントをこちらでご覧ください。