Divi 5「ループビルダー」でACFを最大活用し、チームディレクトリをわずか1時間で構築する方法

Divi 5のループビルダー機能を使えば、Advanced Custom Fields（ACF）の無料版を使ってレスポンシブなグリッドを簡単に作成できます。この記事では、ACFの設定、CSSグリッドの設定、そしてループビルダーを使って1時間以内でチームポートフォリオグリッドを作成する方法をご紹介します。

まだダウンロードしていない場合は、Elegant Themes メンバー エリアにアクセスして最新の Divi 5 ベータ版をダウンロードし、チュートリアルに従ってください。 さあ、始めましょう。

ループビルダーとは何ですか?

Divi 5のループビルダーは、ビジュアルビルダーまたはテーマビルダーで直接、動的で繰り返し可能なレイアウトを作成できる機能です。これにより、Diviの標準ブログモジュールとポートフォリオモジュールの制限が解消されます。従来のモジュールとは異なり、ループビルダーはほぼすべてのコンテンツタイプに対してクエリとデザインを完全に制御できます。 投稿、用語、ユーザー、カスタム投稿タイプ（プロジェクトなど、またはこのチュートリアルの場合はチームメンバー）をループして、動的なデータを簡単に取得できます。ループ内の1枚のカードにスタイルを設定するだけで、追加のアイテムはすべてそのデザインを自動的に継承するため、手作業による調整に費やす時間を節約できます。FlexboxとCSSグリッドを組み込むことで、メイソンリーグリッドやカルーセル（グループカルーセルモジュールを使用）などの高度なレイアウトを実現し、完全に対称的な配置を実現できます。ビジュアルビルダーでページ単位で構築する場合でも、テーマビルダーでグローバルに構築する場合でもシームレスに機能するため、スケーラブルでメンテナンス性の高いサイトに最適です。

ループビルダーを使用してチームディレクトリを構築する方法

このチュートリアルでは、ACFの無料版を使ってチームメンバー用のカスタム投稿タイプを作成します。以下では、カスタム投稿タイプ、フィールドグループ、そしてループに連携させるカスタムフィールドの作成など、ACFの設定手順を詳しく説明します。この記事を読み終える頃には、あらゆるDiviウェブサイトで使用できる、完全にレスポンシブなチームメンバーショーケースの作成方法がわかるようになります。 ステップ1: ACFを構成する まずは、DiviウェブサイトにAdvanced Custom Fields（ACF）の無料版をインストールしてください。プラグインを有効化し、「ACF」>「投稿タイプ」に移動します。 新しい投稿タイプを作成するには、「+ 投稿タイプを追加」ボタンをクリックします。 必須のラベルを記入してください: 複数形ラベル: チーム 単一ラベル: チームメンバー 投稿タイプキー: team_member 分類: カテゴリ [パブリック]がオンになっていることを確認します。 「詳細設定」をオンにします。「全般」タブで、「注目の画像」、「タイトル」、「エディター」、「抜粋」、「カスタムフィールド」が有効になっていることを確認します。 最後のステップは、「変更を保存」をクリックすることです。 左側のツールバーを見て、保存後にチームメンバーの投稿タイプが表示されることを確認します。 フィールドグループを作成する 「ACF」>「フィールド グループ」に移動し、「+ フィールド グループの追加」ボタンをクリックして新しいグループを作成します。 フィールドグループに「チームメンバーの詳細」というタイトルを割り当てます。「設定」までスクロールダウンし、新しいルールを作成します。「投稿タイプ > 等しい > チームメンバー」です。「変更を保存」ボタンをクリックしてグループを保存します。 カスタムフィールドを作成する 投稿タイプとフィールドグループが作成されたので、カスタムフィールドを作成する必要があります。デフォルトでは、ACFによって最初のフィールドが自動的に作成されます。フィールド名にマウスオーバーすると設定が表示されます。「編集」をクリックします。 フィールドタイプとして「テキスト」、フィールドラベルとして「ポジション/タイトル」、フィールド名として「position_title」、デフォルト値として「ポジション - タイトル」を選択します。次に、「閉じる」をクリックしてフィールドを追加します。 残りのフィールドを追加するには、手順を繰り返します。すべてのフィールドとその情報をここに書き出す代わりに、以下の表を作成しました。

フィールドラベル フィールド名 フィールドタイプ 役職 ポジションタイトル 文章 バイオ メンバーバイオ テキストエリア 電子メールアドレス メンバーメールアドレス メール 電話番号 メンバー電話番号 文章 LinkedInのURL linkedin_url URL FacebookのURL facebook_url URL インスタグラムのURL インスタグラムのURL URL

すべてのフィールドが作成されたら、画面の右上にある「変更を保存」をクリックします。 最初のチームメンバーを作成する [チーム メンバー] > [新しいチーム メンバーの追加]に移動します。 チームメンバーの投稿が公開されたら、タイトルと注目の画像を追加します。 カスタム フィールドに情報を入力します。 これらの手順を繰り返して、チームメンバーの投稿をすべて作成します。 ステップ2: ループを作成する まず、Diviで新しいページを作成するか、既存のページを開いてください。この記事では、Web Designスターターサイトを使用し、「About」ページにチームメンバーの紹介ページを追加します。 まず、単一列の Flex Row をページに追加します。 行設定を開き、要素メニューを展開して、列の編集アイコンをクリックします。 ループメニューを展開し、ループ要素を有効にします。 「クエリタイプ」フィールドでは「投稿タイプ」を選択したままにします。「投稿タイプ」フィールドで、「チームメンバー」カスタム投稿タイプを選択します。 [特定の用語を含む投稿のみを含める]フィールドで、[チーム メンバー]を選択します。 「1ページあたりの投稿数」フィールドに「 12 」と入力します。これにより、ループに12件の投稿がすべて表示されます。 行設定の「デザイン」タブに切り替えます。レイアウトスタイルを「グリッド」に変更し、行の縦横の間隔をそれぞれ20pxに設定します。列数を3に設定します。 ステップ3: 列のスタイル設定 ループを配置したら、コンテンツを配置する列のスタイルを設定できます。行の単一の列をクリックします。「デザイン」タブに移動します。「間隔」メニューを展開し、すべての辺に25pxのパディングを追加します。 次に、「境界線」メニューを展開します。列の境界線の半径を20pxに設定します。境界線のスタイル設定で、「境界線の幅」に1pxを入力し、「境界線の色」に#cfcfcfを指定します。 列設定で「コンテンツ」タブに戻り、「背景」メニューを展開し、「背景色」に「#ffffff」を割り当てます。 ステップ4: 列にコンテンツを追加する これで、列にコンテンツを追加できるようになりました。ループの最初の列をクリックして、画像モジュールを追加します。 画像フィールドの上にマウスを置くと、動的コンテンツアイコンが表示されます。 ダイナミックタグとして「ループフィーチャー画像」を選択します。必要に応じて画像のスタイルを設定します。 見出しモジュールを追加する 見出しモジュールを追加するには、黒い + アイコンをクリックします。 見出しモジュールの動的コンテンツアイコンをクリックし、ループ投稿タイトルを選択します。 列に別の見出しモジュールを追加します。今回は「ループ投稿カスタムフィールド」オプションを選択します。 [カスタム フィールドの選択]の横にあるドロップダウン メニューを展開します。 カスタム フィールドとして[役職/タイトル]を選択します。 「適用」ボタンをクリックして、カスタムフィールドをモジュールに割り当てます。モジュールのスタイルを必要に応じて設定します。 テキストモジュールを追加する 列にテキストモジュールを追加します。ダイナミックコンテンツ設定で「ループ投稿カスタムフィールド」を選択し、カスタムメタキーとして「Bio」を選択します。 ネストされた行を追加する 次に、最初の列にネストされた行を追加します。黒い「+」アイコンをクリックし、「新規行」までタブ移動して、「5列の行」を選択します。 ネストされた行の「デザイン」タブで、水平ギャップを10 ピクセルに調整します。 行のレイアウト設定で、項目の配置を中央に設定します。 アイコンモジュールを追加する ネストされた行の最初の列をクリックし、アイコンモジュールを追加します。 メールアイコンを選択し、モジュールのスタイルを設定して、「メールアドレス」カスタムフィールドを選択します。「適用」ボタンをクリックしてコンテンツを保存します。 次に、アイコン モジュールを右クリックしてコピーします。 ネストされた行の 2 番目の列をクリックし、右クリックして、[モジュールの貼り付け] > [モジュール内部の貼り付け]を選択します。 残りの列についても繰り返します。 最後のステップは、各アイコンモジュールのアイコンを置き換え、適切な動的コンテンツタグを割り当てることです。 垂直間隔を調整する ループの垂直間隔を調整する場合は、「デザイン > レイアウト > 垂直間隔」で列の垂直間隔を変更します。 すべてのカードが完全に整列するようにするには、「コンテンツの揃え方」フィールドを「間隔」に調整します。 次のステップに進む前に、ビジュアル ビルダーの右上にある [保存] ボタンをクリックしてレイアウトを保存します。 ステップ5：小さな画面に合わせてレイアウトを調整する プロセスの最後のステップは、レイアウトにレスポンシブな調整を加えることです。Divi 5のカスタマイズ可能なレスポンシブブレークポイントを使用すると、最大7つのブレークポイントでデザインを微調整でき、あらゆるデバイスで洗練されたデザインを実現できます。 デフォルトでは3つのブレークポイントが有効になっています。ただし、ビジュアルビルダーの上部バーにある3つのドットの省略記号メニューをクリックすることで、7つすべてを簡単に有効にすることができます。 必要なブレークポイントをオンに切り替えて有効にします。完了したら、「保存」ボタンをクリックして続行します。 Divi 5のレスポンシブエディターは、セクション、行、列、モジュールレベルで使用でき、レイアウトを構築しながらレスポンシブな値を調整できます。モジュールのデザイン設定でレスポンシブアイコンをクリックすると、有効になります。 レスポンシブエディターモーダルが表示され、すべてのブレークポイントを即座に調整できるようになります。 各ブレークポイントを移動するときに、[コンテンツ]タブにある[構造テンプレートの適用]ボタンをクリックして列の数を調整できます。 モーダルが表示されたら、ボタンをクリックするだけで列構造を変更し、定義済みのテンプレートを適用できます。 最後に、ループ列の「デザイン」タブに移動して、各ブレークポイントの列数を調整します。「サイズ変更」メニューを展開し、各デバイスの列スパンを変更します。 ご覧のとおり、ACF で Loop Builder を使用すると、簡単かつ高速で、無限の創造的な可能性が生まれます。

今すぐ Divi 5 ループ ビルダーをご利用ください。

Loop Builderを使えば、一度の設定で無限の可能性が広がります。投稿タイプを入れ替えたり、クエリを調整したり、サイト全体でレイアウトを再利用して、チーム紹介、ポートフォリオ、推薦文などを掲載することも可能です。これで、チームの成長に合わせて簡単に更新できる、プロフェッショナルでレスポンシブなチームディレクトリを構築できます。 準備はできましたか？最新の Divi 5 ベータ版を今すぐダウンロードして、Loop Builder を試して、驚くようなダイナミックなコンテンツを作成しましょう。

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