Diviテーマビルダーで投稿コンテンツモジュールを使用する方法

投稿コンテンツモジュールは、Diviテーマビルダーでテンプレートのボディエリアレイアウトを作成するときに使用できる特別なモジュールです。 投稿コンテンツモジュールとは何か、およびその使用方法を理解することは、Diviテーマビルダーを使用してカスタムテンプレートを設計するときに非常に役立ちます。

このチュートリアルでは、Post Content Moduleがどのように機能するか、およびDiviでテンプレートを設計するときにそれをどのように使用するのが最適かについて説明します。

飛び込みましょう！

私たちのYoutubeチャンネルを購読する

Diviの投稿コンテンツモジュールについて

投稿コンテンツモジュールの主な機能は、特定の投稿またはページテンプレート内の投稿またはページコンテンツを表示（およびスタイル設定）することです。 このモジュールは、テーマビルダーでのみ機能するように設計されているため、Diviビルダーを使用して通常のページや投稿を編集することはできません。

テーマビルダーでは、投稿コンテンツモジュールにより、テーマビルダーテンプレートのボディ領域内で使用されるDiviビルダー用の領域が作成されます。 また、デフォルトのWordPressエディターを使用して作成された投稿またはページのコンテンツを表示およびスタイル設定するためにも使用できます。 これは、ブログ投稿テンプレートの作成に特に適しています。

モジュールは、Diviで新しいモジュールを追加する通常のプロセスを使用して、任意のテンプレートのボディ領域レイアウトに追加できます。 モジュールの追加アイコンをクリックして、リストから投稿コンテンツモジュールを選択するだけです。

これにより、テンプレートに割り当てられた投稿またはページに継承されるデフォルトのスタイル要素を追加するために使用できるすべてのデザインオプションを含む投稿コンテンツ設定モーダルが表示されます。

模擬コンテンツは、これらの要素がライブページまたは投稿でどのように表示されるかを視覚的に示すためにあります。

投稿コンテンツモジュールの簡単な紹介ができたので、独自のDiviサイトでどのように使用するかを見ていきましょう。

投稿テンプレートに投稿コンテンツモジュールを使用する

投稿コンテンツモジュールを使用して、クラシックまたはデフォルトのエディター（Diviではない）で作成された投稿コンテンツを表示する

投稿コンテンツモジュールの非常に実用的なアプリケーションは、モジュールを使用して、テンプレート上の投稿コンテンツにスタイルを追加し、WordPressのデフォルトの投稿エディターで（Divi Builderを使用せずに）作成されたコンテンツを投稿することです。

たとえば、Diviサイトのすべての投稿に割り当てられる新しいテンプレートを作成できます。

次に、テンプレートレイアウトエディターを使用して、静的なデザイン要素と動的なコンテンツを使用してブログ投稿テンプレートをデザインします。

単一の投稿からの実際の投稿コンテンツを表示するテンプレートの領域を特定します。 次に、投稿コンテンツモジュールをテンプレートレイアウトに追加します。

次に、投稿コンテンツモジュールの設定を開いて、サイトの新規または既存の投稿に追加された投稿コンテンツに適用するスタイルを追加します。 投稿コンテンツモジュールには、スタイルを設定できるさまざまな要素を備えたモックコンテンツが組み込まれています。 このモックコンテンツは、Webサイトで投稿を表示すると、実際の投稿コンテンツに置き換えられます。

投稿コンテンツモジュールがテンプレートに追加され、スタイルが投稿モジュール設定に追加されると、投稿テンプレートをライブサイトのブログ投稿で使用できるようになります。

WordPressのデフォルトのエディターまたはクラシックエディターを使用して、新しい投稿を作成したり、既存の投稿を編集したりできます。

クラシックエディターを使用する場合、wysiwygエディターを使用してコンテンツボックスに追加されたコンテンツは、投稿コンテンツモジュールによってスタイル設定されたテンプレートの領域に入力されます。

デフォルトのWordPressエディター（またはブロックエディター）を使用する場合、ブロックエディターで作成したコンテンツはすべて、テンプレートのポストコンテンツモジュール領域に入力されます（そしてそのスタイルを継承します）。

デフォルト/クラシックエディターを好むブロガーは、テンプレートの投稿コンテンツモジュールで設定されたスタイルを継承するため、コンテンツのスタイルについて心配する必要はありません。 そのため、ライターは実際のコンテンツにもっと集中できます。 さらに、投稿テンプレートには、投稿の全体的なデザインを完成させるために、投稿コンテンツを囲む追加のデザインと動的コンテンツが含まれます。

これは、デフォルト/クラシックエディタで作成されたモック投稿のバックエンドを示しています。

これは、フロントエンドで表示したときの同じ投稿です。

テンプレートに存在するデザインと動的コンテンツに加えて、テンプレートを使用した投稿コンテンツのスタイルに注意してください

投稿コンテンツモジュールを使用して、Diviで作成された投稿コンテンツを表示します。

ブログ投稿に投稿テンプレートを使用する場合、デフォルトのエディターを使用する代わりに、Diviビルダーを使用して1つ以上のブログ投稿をデザインすることを決定する場合があります。 これにより、テンプレート内のデフォルトのエディターと投稿コンテンツモジュールのスタイルに単純に依存するのではなく、投稿コンテンツのすべての要素のデザインをより細かく制御できるようになります。

Divi Builderを使用して投稿をデザインしている場合でも、投稿コンテンツデザインの合計スペースは、投稿テンプレート内の投稿コンテンツモジュールで指定された領域内に含まれることに注意してください。

詳細については、サイト全体のブログ投稿テンプレートを作成する方法に関するドキュメントを確認してください。

ページテンプレートに投稿コンテンツモジュールを使用する

名前にもかかわらず、投稿コンテンツモジュールは投稿とページに同様に使用できます。 したがって、Webサイトの1つ以上のページの本文テンプレートを作成する場合は、投稿コンテンツモジュールを使用して、ページコンテンツが確実に表示されるようにする必要があります。

ほとんどの場合、各ページは通常、ページごとに作成される一意の静的コンテンツで構成されているため、1つ以上のページの本文テンプレートを作成する必要はありません。 ただし、ページにも本文テンプレートが役立つ場合があります。 ページに自動的に表示したいテンプレートレベルのデザインとコンテンツを追加すると役立つ場合があります。

たとえば、サイト全体のすべてのページに同じページタイトルデザインを含めることができます。 または、すべての（または一部の）ページの下部にEmailOptinのようなCTAを含めることもできます。

これがWebサイトでどのように機能するかの例を次に示します。

まず、Divi Theme Builderに移動して、新しいテンプレートを作成します。 次に、テンプレートをすべてのページに割り当て、カスタムの本文領域をテンプレートに追加します。 その後、クリックしてカスタムボディ領域を編集します。

テンプレートレイアウトエディターで、Divi Builderを使用して、動的コンテンツを使用してページタイトルセクションをデザインします。 テキストモジュールを使用して、テキストモジュールの本文コンテンツの投稿/アーカイブタイトル動的コンテンツ要素をプルすることをお勧めします。 投稿/アーカイブタイトルには、ページタイトルも表示されます。

次に、投稿コンテンツモジュールの新しいセクションを作成します。 繰り返しになりますが、これが必要なのは、投稿コンテンツモジュールがないと、テンプレートに個々のページコンテンツやデザインが表示されないためです。

この投稿コンテンツモジュールはページコンテンツの親コンテナになるため、投稿コンテンツモジュールがページの幅全体に広がるようにすることをお勧めします。 Divi Builderを使用すると、個々のページコンテンツをデザインするときに、いつでも間隔を調整できます。

次に、すべてのページに表示されるセクションをテンプレートの下部に追加できます。 コンテンツを実際の投稿/ページコンテンツの下に表示する必要があるため、投稿コンテンツモジュールを含むセクションの下にコンテンツを追加する必要があります。

これは、ソーシャルアイコンとメールオプチンを含む投稿コンテンツの下に作成されたセクションの例です。

注：Divi Builderを使用してDiviの実際のページをデザインするため、投稿コンテンツモジュールにスタイルを追加する必要はありません。

これでページテンプレートが配置されたので、[ページ]> [新規追加]に移動して、Diviに新しいページを作成できます。 次に、タイトルを追加して、DiviBuilderをデプロイします。

次に、クリックしてフロントエンドでビルドします。

Diviを使用して、フロントエンドでページコンテンツをデザインできます。 ただし、フロントエンド（ビジュアル）ビルダーが、ページに割り当てられたページテンプレートの投稿コンテンツモジュール領域にどのように含まれるかに注意してください。 Divi Builderで投稿またはページを編集すると、Divi Builder UI全体がPostContent Moduleが含まれる列に表示されます。このモジュール以外のすべては静的であり、ThemeBuilderの外部で変更することはできません。

したがって、この例では、ページは次の領域で構成されています。

1. グローバルヘッダー（ページテンプレートのカスタムヘッダー領域に追加）
2. タイトルセクション（ページコンテンツの上のページテンプレートのカスタムボディエリアレイアウトに追加）
3. 投稿コンテンツセクション（ページテンプレートのカスタムボディエリアレイアウトに追加。DiviBuilderの構築スペースを決定する投稿コンテンツモジュールで構成されます）
4. CTAセクション（ページコンテンツの下のページテンプレートのカスタムボディエリアレイアウトに追加）
5. グローバルフッター（ページテンプレートのカスタムフッター領域に追加）

フロントエンドのページをDiviBuilderで編集すると、次のようになります。

ポストコンテンツモジュールは、ショートコードによって生成されたWooCommerceページの設計に適しています。

ポストコンテンツモジュールは、WooCommercePagesのページテンプレートを作成するときにも役立ちます。 WooCommerceページは、ショートコードを使用してページコンテンツを生成します。 これらのショートコードは、WooCommerceページのコンテンツボックス内にあります。

Diviでページを編集すると、デフォルトでアカウントページがどのように表示されるかを次に示します。

このWooCommerceページのテンプレートをデザインするために、ページエディターにDiviBuilderをデプロイする必要はありません。 Divi Theme Builderでテンプレートを作成し、post contentモジュールを使用してショートコード（少なくともその一部）によって生成されたページコンテンツのデザインをターゲットにすることができます。

テンプレートを作成するときは、必ずテンプレートをWooCommerceページに割り当ててください。

重要：投稿コンテンツモジュールは、アーカイブ/カテゴリページのコンテンツを表示しません。 コンテンツを表示するための投稿コンテンツモジュールに依存するテンプレートにショップページを割り当てないようにしてください。 ショップページにはコンテンツは表示されません。 したがって、テンプレートで投稿コンテンツモジュールを使用する予定なので、テンプレートの割り当てを制限して、カート、チェックアウト、または[マイアカウント]ページのみを含める必要があります。

これで、カスタムのボディ領域をテンプレートに追加し、テンプレートレイアウトエディターを使用してビルドできます。

次に、DiviBuilderを使用してページテンプレートをカスタマイズします。 Post Content Moduleを追加するときは、ショートコードによって生成されたWooCommerceページ要素のデザインをターゲットにするために、必ずデザイン設定を更新してください。

そして、投稿コンテンツモジュールのスタイルが設定されたフロントエンドのマイアカウントページは次のようになります。

残念ながら、投稿コンテンツモジュールは、WooCommerceページで生成されたコンテンツのすべての要素を直接スタイル設定することはできません。 しかし、これはwoocommerceページテンプレートをデザインするときに素晴らしいボーナスを提供します。

インデックス/アーカイブ/カテゴリページテンプレート用ではありません

投稿コンテンツモジュールは、Diviで作成された特定のページまたは投稿のコンテンツを表示するように設計されているため、インデックス（アーカイブ）ページテンプレートでは機能しません。 テンプレートがインデックス（アーカイブ）ページで使用されている場合）、モジュールはフロントエンドでレンダリングされないため、コンテンツは表示されません。

このモジュールがボディエリアに存在するが、投稿コンテンツが存在しない場合（またはテンプレートがインデックス（アーカイブ）ページで使用されている場合）、モジュールはフロントエンドでレンダリングされません。

つまり、postモジュールのコンテンツを使用して、検索結果ページや404ページなどのアーカイブページのコンテンツを表示しないでください。

アーカイブページテンプレートにブログモジュールを使用します。

アーカイブページのテンプレートを作成する場合、Diviのブログモジュールには、現在のページのコンテンツを表示するオプションが含まれています。 これにより、カテゴリまたはアーカイブページに関連付けられたコンテンツが生成されます。

詳細については、ブログのカテゴリページテンプレートを作成する方法に関するこの投稿を確認してください。

製品ページテンプレート用ではありません

DiviでWooCommerce製品の製品ページテンプレートを作成するときは、テンプレートの本文領域に製品情報を表示するために投稿コンテンツモジュールに依存しないことが最善です。 Diviには、テンプレートレベルで製品情報を動的に取り込むために必要なすべてのWooモジュールがあります。 製品ページに割り当てられたテンプレートでコンテンツ投稿モジュールを使用すると、コンテンツボックスに含まれているコンテンツのみが表示されます（デフォルトでは、製品の説明のみです）。

詳細については、商品ページテンプレートの作成方法をご覧ください。

投稿コンテンツモジュールが見つからない場合の警告

投稿コンテンツモジュールがテーマビルダーテンプレートの本体に含まれておらず、「Divi Builderを使用」を選択してそのテンプレートを使用して投稿を編集すると、警告ポップアップボックスが表示され、使用されているテンプレートにコンテンツモジュールを投稿します。 テンプレートに必要な変更を加えるためにテーマビルダーに直接移動するためのボタンもあります。

最終的な考え

Diviサイトの新しいテンプレートを設計するときは、投稿コンテンツモジュールの使用方法を理解することが重要です。 このモジュールは、動的コンテンツ要素と組み合わせてブログ投稿のテンプレートを作成するのに最適です。これにより、DiviBuilderをデプロイしなくてもブログ投稿を作成するワークフローを合理化できます。 ただし、投稿コンテンツモジュールは、WooCommerceページであっても、ページテンプレートにも役立ちます。

これまでの投稿コンテンツモジュールでのあなたの経験は何ですか？

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

乾杯！