Diviの動的コンテンツ機能を使用して動的投稿レイアウトを設計する方法

Diviの新しい動的コンテンツ機能により、ブログ投稿（およびその他多数）の動的レイアウトを構築することができます。 そして、あなたがこれをすることを検討するかもしれない正当な理由があります。 一つの理由はデザインです。 特に開始点として利用可能な既成のレイアウトを使用する場合は、ビジュアルビルダーを使用してDiviでいくつかの素晴らしい投稿レイアウトを設計できます。 もう一つの理由は利便性です。 すべての動的コンテンツ要素（カテゴリ、注目の画像、投稿タグ、カスタムフィールドなど）を使用して投稿レイアウトを設計すると、ブログ投稿の作成と更新のプロセスが大幅に簡素化されます。 実際の投稿コンテンツを除いて、他のすべての投稿データは、ビジュアルビルダーをデプロイすることなく更新できます。

このチュートリアルでは、Diviで動的な投稿レイアウトを作成する方法を紹介します。 事前に作成されたレイアウトから始めて、レイアウト全体に動的コンテンツを追加し、それに合わせてそのコンテンツを設計するプロセスについて説明します。 カスタムフィールドを動的コンテンツとして使用する簡単な方法も紹介します。

始めましょう。

スニークピーク

始めるために必要なもの

このチュートリアルでは、次のものが必要になります。

• ディビのテーマ
• パーソナルトレーナーレイアウトパック。 このレイアウトパックには、DiviBuilderからアクセスできます。 パーソナルトレーナーサービスのページレイアウトを使用して、投稿レイアウトのデザインを開始します。

また、カスタムフィールドを利用して、カスタム投稿タイプ機能を使用して注目のワークアウトセクションを作成する方法についても説明します。 カスタムフィールドはWordPressに組み込まれており、追加のプラグインなどは必要ありません。 だからあなたはすでにあなたが必要なものを持っています。

パート1：既成のレイアウトを投稿に追加する

開始するには、先に進んで新しい投稿（ページではなく）を作成し、投稿にタイトルを付けてから、[DiviBuilderを使用]ボタンをクリックします。 最初にデフォルトのWordPressエディター画面から投稿設定をカスタマイズする必要があるため、ビジュアルビルダーはまだデプロイしないでください。

レイアウトから画像を取得するために、事前に作成されたレイアウトを追加したいので（注目の画像に必要です）。 DiviBuilderメニューにある[LoadLayout]ボタンをクリックします。

[ライブラリからロード]ポップアップから、パーソナルトレーナーサービスページレイアウトを選択し、[このレイアウトを使用]ボタンをクリックして投稿に展開します。

次に、投稿を公開して設定を保存します。

パート2：Diviページ設定の更新、メタデータの投稿、注目の画像

Diviページ設定

新しいレイアウトがデザインに合うように、Diviページの設定を更新することが重要です。 代わりに投稿タイトルモジュールを使用するため、デフォルトの投稿タイトル表示も非表示にする必要があります。

ページの右上にある[Diviページ設定]ボックスを見つけて、以下を更新します。

ページレイアウト：全幅
投稿タイトルを表示：非表示

Diviページ設定が表示されない場合は、Divi Builderがアクティブ化されていない可能性があるため、最初にアクティブ化してください。

カテゴリを追加

カテゴリボックスの下に、「筋力トレーニング」という新しいカテゴリを追加し、それが選択されている唯一のカテゴリであることを確認します。

タグを追加する

タグボックスに、スピード、トレーニング、ワークアウトの3つのタグを追加します。

注目の画像

次に、以下のスクリーンショットに示すように、レイアウトのヘッダーで使用されている背景画像と一致する注目画像を追加します。

パート3：動的ワークアウトコンテンツのカスタムフィールドの追加

カスタムフィールドはWordPressに組み込まれています。 これにより、投稿者は、カテゴリ、投稿者、投稿日などのデフォルトのメタデータに加えて、投稿に追加情報（メタデータと呼ばれる）を追加できます。基本レベルでは、カスタムフィールドを使用して天気を表示できます。または投稿を書くときの作者の気分。 ただし、カスタムフィールドを使用して、Webサイトの動的コンテンツを作成する方法はたくさんあります。 Webサイトにカスタムフィールドを追加する方法の詳細をお気軽に読んでください。 ただし、このユースケースでは、カスタムフィールドをいくつか作成することで、カスタムフィールドの基本的な概念を理解できると思います。

この例では、動的コンテンツを投稿に追加するために使用できるいくつかのカスタムフィールドを追加する方法を示します。 この例の動的コンテンツは、注目のワークアウトです。 カスタムフィールドが配置されると、投稿者が行う必要があるのはカスタムフィールド値を入力することだけであり、コンテンツはVisual Builderをロードすることなく投稿に（動的に）更新されます。

これを行うには、投稿の一番下までスクロールして、[カスタムフィールド]ボックスを見つけます。 何らかの理由で表示されない場合は、ページ上部の画面オプションから選択してください。

次に、[カスタムフィールド]ボックスのドロップダウン（折りたたまれている場合）をクリックして新しいカスタムフィールドを追加し、次のように入力します。

名前：ワークアウトタイトル
値：注目のワークアウト

次に、[カスタムフィールドの追加]ボタンをクリックします。

名前は、Diviでカスタムフィールドを識別する方法です。 値は、Diviの動的コンテンツ機能を使用してページに動的に追加されるコンテンツです（これについては後で詳しく説明します）。

このプロセスを続行して、次のカスタムフィールドをWebサイトに追加します。

名前：ウォームアップ
値：800m走

名前：期間
値：30分

名前：ウェイトリフティング
価値：

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

名前：クールダウン
値：400m走

注：これらのカスタムフィールドはDiviテーマに追加され、将来作成する新しい投稿で使用できるようになります。 言い換えれば、それはこの単一の投稿に限定されません。

投稿を更新することを忘れないでください！

パート4：VisualBuilderを使用して投稿レイアウトに動的コンテンツを追加する

投稿の設定とメタデータが整ったので、次は動的コンテンツを投稿に追加し始めます。 これを行うには、VisualBuilderを展開します。

この高度なレイアウトデザインの検索と編集を少し簡単にするには、設定メニューを開き、ビルダーのデフォルトのインタラクションモードをクリックモードに設定します。

ヘッダーセクションで、ボタンモジュールを削除します（不要です）。

背景画像を注目画像の動的コンテンツに置き換える

動的コンテンツの最初の部分では、上部ヘッダーセクション行の列1で使用されている背景画像を、投稿に使用されている注目の画像に置き換えます。 これを行うには、行の設定を開き、列1の背景設定を見つけて、[背景画像]タブをクリックします。 次に、現在そこにある画像を削除してから、背景画像のプレビューボックスにカーソルを合わせます。 ボックスの右上に動的コンテンツアイコンが表示されます。 それをクリックして、動的コンテンツオプションを開きます。 次に、リストから[注目の画像]動的コンテンツオプションを選択します。

同じ画像を使用しているため、レイアウトはまったく同じになります。 唯一の違いは、投稿の注目画像として設定されている画像から背景画像が取得されることです。 これがダイナミックコンテンツの美しさです！

続けましょう。

投稿タイトルモジュールを使用した投稿タイトルの追加

現在ページのタイトルを保持しているテキストモジュールの下に、投稿タイトルモジュールを追加します。 動的コンテンツを使用してモジュールに投稿タイトルを追加するオプションもありますが、投稿タイトルモジュールはすでに動的コンテンツのように機能し、SEOのh1見出しタグを保持しているため、カスタム投稿レイアウトに使用するので完璧です。 。

次に、投稿タイトルモジュールの設定を次のように更新します。

メタを表示：いいえ
注目の画像を表示：いいえ

次に、上のテキストモジュールに移動し、[h2]タブを右クリックして、このリストからオプションを選択することにより、h2の見出しスタイルをコピーします。

次に、モジュールを右クリックしてリストからオプションを選択することにより、h2見出しスタイルを投稿タイトルモジュールに貼り付けます。

その後、再び上記のテキストモジュールに戻り、間隔スタイルをコピーして、投稿タイトルモジュールに貼り付けます。 次に、投稿タイトルのテキストの色を明るい色に変更して、白い色にします。

これで、投稿のタイトルは元のレイアウトのタイトルのデザインと一致するはずです。

これで、元の見出しを含むテキストモジュールを削除できます。

動的コンテンツを使用してメタデータの行を作成する

レイアウトの2番目のセクションに移動します。 次に、ビジュアルビルダーでセクションをドラッグするか、セクション設定で0pxに設定して、セクションの上部のパディングを取り出します。

レイアウトの2番目のセクションの最初の行には、その下に仕切りがあるテキストモジュール（「パーソナルトレーニングについて」のコンテンツがあります）があります。 ここで、動的コンテンツを使用してメタデータのカスタム行を作成します。

この行のサイズを上部セクションの行のサイズと一致させる必要があります。 これを行うには、上部の行の行設定を開き、サイズ設定スタイルをコピーします。 次に、それらを2番目のセクションの最初の行に貼り付けます。 次に、行ガターを2に更新します。新しいサイズは次のスクリーンショットのようになります。

また、次のようにカスタム間隔を追加する必要があります。

カスタムパディング：左1％、右1％

次に、行の設定を保存します。

次に、行の列構造を4列のレイアウトに更新します。

これで、動的コンテンツを追加する準備が整いました。 これを行うには、左端の列にあるテキストモジュールの設定を開き、コンテンツボックスにカーソルを合わせます。 ボックスの右上に動的コンテンツアイコンが表示されます。 それをクリックして、動的コンテンツオプションを開きます。

次に、[公開日を投稿]オプションを選択します。

次に、それに応じて日付形式を変更します。

これにより、投稿の公開日が動的コンテンツとして追加されます。

動的な日付コンテンツを使用してテキストモジュールのスタイルを設定するには、テキストモジュールのモジュールスタイルをすぐ下の行の左側の列にコピーします。

次に、モジュールスタイルを動的な日付コンテンツを含むテキストモジュールに貼り付け、テキストテキストの色を白に変更します。

次に、テキストモジュールとその下の仕切りをコピーして、列2に貼り付けます。次に、動的コンテンツを[投稿カテゴリ]に変更します。

レイアウトのデザインに合わせて、リンクテキストの色を白に更新する必要があります。

次に、仕切りのある投稿カテゴリテキストモジュールを列3にコピーします。次に、動的コンテンツを投稿コメント数に変更します。 [コメント数の投稿]ポップアップで、[前に]入力ボックスに次のように入力します。

前：コメント：

動的コンテンツのポップアップで使用できる前後の入力ボックスは、動的コンテンツの前後にテキストを追加するための便利なオプションです。 これは、必要に応じてラベル、価格記号、その他の要素を追加するのに役立ちます。

それでは、動的コンテンツを追加し続けましょう。 列3のテキストモジュールと仕切りをコピーして、列4に貼り付けます。この最後の列には、投稿者のサムネイルと作成者名が保持されます。 したがって、テキストモジュールの動的コンテンツを投稿者に変更します。 [投稿者の投稿]ポップアップで、以下を更新します。

前：投稿者：
名前の形式：姓名

投稿者のコンテンツを含むテキストモジュールの上に、新しい画像モジュールを追加します。 イメージモジュールの設定を開き、デフォルトのイメージを削除します。 これまでと同じように、画像プレビューボックスの動的コンテンツアイコンをクリックして、投稿者のプロフィール写真を動的コンテンツとして追加します。

次に、デザイン設定を調整して画像を引き上げ、次のようにカスタム幅を設定します。

幅：80px
カスタムマージン（デスクトップ）：-82pxトップ
カスタムマージン（タブレット）：0px上

注：投稿の作成者名には、現在の投稿に割り当てられている作成者が表示されます。 また、投稿者のプロフィール写真は、WordPressダッシュボードの[ユーザー]> [プロフィール]でユーザープロフィールに設定されているものです。

パート5：カスタムフィールドを動的コンテンツとして追加して、注目のワークアウトを投稿に追加する

チュートリアルの前半でこれらのカスタムフィールドを追加した方法を覚えていますか？ 次に、これらのカスタムフィールドを、投稿の注目のワークアウトのコンテンツとして使用します。

注目のワークアウト動的コンテンツを追加するには、最初に4列の行のすぐ下にある2列の行を、すべての動的メタデータと複製します。 次に、両方の列のモジュールを削除し、左側の列に宣伝文モジュールを追加します。

宣伝文モジュールを使用して、ワークアウトセクションの動的コンテンツを追加します。 開始するには、左側の列に新しい宣伝文モジュールを追加します。

タイトルには、「ワークアウトタイトル」という名前のカスタムフィールドを動的コンテンツとして追加します。 次に、宣伝文のコンテンツについて、「期間」という名前のカスタムフィールドを動的コンテンツとして追加します。

物事を動かし続けるために、これらのモジュールのスタイリングについては詳しく説明しません。 ただし、タイトルの左側に配置された宣伝文のアイコンを追加し、レイアウトに一致するようにデザインを更新する必要があります。

次に、下に2番目の宣伝文句モジュールを追加します。 タイトルとして「ウォームアップ」というテキストを入力します。 次に、「ウォームアップ」という名前のカスタムフィールドを動的コンテンツとして追加します。

その下に3つ目の宣伝文を追加します。タイトルは「ウェイトリフティング」、動的コンテンツはカスタムフィールド「ウェイトリフティング」です。 このカスタムフィールド値にはhtmlを使用しているため、ウェイトリフティングポップアップで生のhtmlを有効にする必要があります。

タイトルとして「CoolDown」、動的コンテンツとしてカスタムフィールド「CoolDown」を使用して、最後の宣伝文句モジュールを追加します。

これで、投稿にワークアウトを追加するための動的セクションができました。

WordPressのデフォルトのページエディターからカスタムフィールドの値を更新するだけで、Diviビルダーにアクセスしなくてもコンテンツが投稿レイアウトに自動的に追加されます。

パート6：投稿タグの動的コンテンツを使用した「関連トピック」セクションの設計

動的コンテンツを使用して投稿タグを表示し、投稿の見栄えの良い「関連トピック」セクションを作成できます。 これを行うには、新しい1列の行を作成し、その行にテキストモジュールを追加します。

次に、コンテンツボックスに、動的コンテンツとして投稿タグを追加します。 次に、次の投稿タグオプションを更新します。

前：関連トピック：
タグセパレータ：//

注：タグセパレーターにはほぼすべての文字セットを使用できるため、クリエイティブなデザインのためにさまざまな文字を自由に試してみてください。

コンテンツのスタイルを設定するには、次のデザイン設定を更新します。

テキストフォント：Oswald
テキストフォントの太さ：半太字
テキストテキストの色：＃ff4c00
テキストテキストサイズ：30px
リンクフォント：Oswald
リンクフォントの太さ：半太字
リンクテキストの色：＃262d3f
リンクテキストサイズ：50px
リンク文字の間隔：2px
リンクラインの高さ：1.6em

これが最終的なデザインです。

パート7：著者の経歴とコメントセクションの追加

この時点で、動的コンテンツを追加し、投稿レイアウトのデザインをかなり簡単に調整できるようになっているので、これらの最後の2つの要素についてはあまり詳しく説明しません。

動的コンテンツを使用した著者の経歴セクションの追加

投稿コンテンツの下部に作成者の略歴セクションを追加するには、投稿者、投稿者のプロフィール写真、および作成者のバイオダイナミックコンテンツを使用できます。 下のスクリーンショットでわかるように、1/43/4列の行を作成しました。 次に、投稿者のプロフィール写真を左側の列に追加しました。 右の列に、投稿者の略歴を下に追加しました。 また、セクションの背景画像（およびグラデーションオーバーレイ）として、注目の画像の動的コンテンツを追加しました。 これがどのように見えるかの例です。

コメントモジュールを使用したコメントセクションの追加

カスタム投稿レイアウトを使用しているので、コメントセクションのデザインをレイアウトと一致させることができるようにコメントモジュールを使用することになります。 コメントモジュールを新しいセクション行に追加するだけで、ボタンのスタイルとフォントが現在のレイアウトと一致します。 これがどのように見えるかの例です。

最終設計

すべてのデザインが調整された後のポスト全体の最終的なデザインは次のとおりです。

投稿コンテンツの更新と将来の投稿のためのレイアウトの保存

Divi Builderを使用して投稿レイアウトを作成しているため、Diviモジュールを使用して投稿の実際の投稿コンテンツを更新する必要があります。 しかし、他のすべてが動的になったことで、これによりプロセスが大幅に容易になります。 新しい投稿を作成するときに、保存したレイアウトを投稿に追加して投稿の内容を更新するだけで済むように、投稿のレイアウトをライブラリに保存する必要があります。

最終的な考え

Diviの動的コンテンツは、投稿データの追加と更新を非常に簡単にする強力な機能です。 したがって、Divi Builderを使用してブログ投稿（またはプロジェクトなどの他のカスタム投稿タイプ）のカスタムレイアウトを設計する場合は、動的コンテンツが最適です。 もちろん、動的コンテンツは投稿に限定されません。 Webサイト全体で動的コンテンツとカスタムフィールドを利用できます。 この投稿がいくつかの可能性を理解するのに役立ち、動的コンテンツを素晴らしい新しい方法で使用するように刺激することを願っています。

コメントでお返事をお待ちしております。

乾杯！