Diviテーマビルダーでサイドバーを使用するためのガイド

公開: 2019-11-14

サイドバーは、どのWebサイトにとっても重要な資産になる可能性があります。 Diviは、開発者がDiviテーマビルダーを使用して投稿またはページテンプレート用の完全にカスタムのサイドバーを設計できるようにすることで、サイドバーの作成を容易にします。 Diviユーザーが目的のサイドバー領域を持つ列構造を選択すると、WordPressウィジェット領域、Diviモジュール、または両方の組み合わせを使用してサイドバーコンテンツを作成し、Diviモジュールでサイドバーコンテンツを構築するオプションがあります。

この投稿では、Divi ThemeBuilderでサイドバーを使用する方法についてのクイックガイドを提供します。テンプレートのサイドバー領域を適切に作成する方法と、サイドバーにコンテンツを入力する方法について説明します。これにより、既存のサイドバーを新しいDiviテンプレートに組み込んだり、Webサイト全体で任意の数のテンプレート用の新しいサイドバーを作成したりできます。

それを手に入れよう！

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

Diviテンプレートでサイドバーを使用する際の簡単な説明

Divi Theme Builderを使用して、Webサイト上の任意の投稿またはページテンプレートにサイドバーを追加できます。このプロセスは、DiviBuilderを使用して特定のページレイアウトのサイドバーを作成するのと同じです。唯一の違いは、テンプレートに追加されたサイドバーが、テンプレートに割り当てられているすべての投稿またはページに表示されることです。これにより、Webサイト全体でサイドバーをグローバルに制御できます。

WordPressサイドバーとDiviサイドバー

WordPressサイドバーは、Diviテーマのデフォルトテンプレートに組み込まれているサイドバーです。これらのサイドバーは、サイドバーを含むレイアウトで、DiviBuilderを使用してページをデザインしていないページまたは投稿に対して表示されます。

DiviサイドバーはDiviBuilder内で作成され、サイドバーモジュールを介したWordPressウィジェットを含むDiviモジュールを使用してコンテンツを入力できます。

テンプレートのサイドバー領域を作成する方法

テンプレートのサイドバーを作成するプロセスは非常に簡単です。

まず、作成するテンプレートにカスタムボディを追加する必要があります。

次に、セクションと行および列の構造を使用してページテンプレート構造を構築する必要があります。

たとえば、セクションの上部にある1列の行を使用して、テンプレートのページ見出しを表示できます。

次に、見出し行の下に、テンプレートのサイドバーとして指定できる列を含む構造を持つ別の行を追加します。

または、複数の行を追加して本文のコンテンツを作成する機能を備えた指定のサイドバー領域を利用したい場合は、特殊なセクションを作成できます。

さまざまな特殊セクションの柱構造には、モーダルのオレンジ色で示される指定されたサイドバー領域があります。

テンプレートのサイドバー領域を作成するために特殊セクションを使用するか、通常セクションを使用するかはあなた次第です。特殊なセクションを使用する場合、サイドバー領域は、従来のサイドバー構造のように、セクションのその領域全体に配置されるように特別に作成されます。つまり、反対側（サイドバー以外の側）は複数の行を使用して構築できますが、これは通常のセクションでは不可能です。通常のセクションを使用する場合は、より多くの組み込み設定を使用してサイドバーの列をスタイリングできるという利点があります。したがって、単純なテンプレート、特にブログモジュールを使用してテンプレートコンテンツを表示するテンプレートの場合、通常のセクションを使用して、本体コンテンツ（ブログモジュール）に1つの列を指定し、指定したサイドバー領域に1つの列を指定します。

テンプレートにサイドバーコンテンツを追加する方法

テンプレートにサイドバーコンテンツを追加するには、主に2つの方法があります。 1つ目は、WordPressウィジェットエリアをDiviテンプレートに追加することです。 2つ目は、テンプレートレイアウトエディターでDiviモジュールと動的コンテンツをサイドバーに直接追加することです。ただし、必要に応じて、1つのサイドバーに複数のウィジェット領域とDiviモジュールを追加することで、2つの組み合わせを作成できます。

WordPressウィジェットエリアの追加

WordPress（およびDivi）は、ウィジェット領域を使用して、デフォルトでサイドバーにデータを入力します。ウィジェット領域は、WordPressダッシュボードに移動し、[外観]> [ウィジェット]に移動して見つけることができます。そこには、すでにウィジェットが入力されているデフォルトのサイドバーウィジェットエリアが表示されます。

次に、サイドバーコンテンツとして表示するウィジェットをサイドバーウィジェット領域に追加できます。このウィジェット領域全体をDiviテンプレートに表示できるようになります。

サイドバーモジュールを使用してウィジェット領域を表示およびスタイル設定する

テンプレートレイアウトエディタを使用してテンプレートのカスタムボディ領域を編集する場合、指定されたサイドバー列にサイドバーモジュールを追加できます。

サイドバー設定モーダルで、表示するウィジェット領域を選択します。

次に、サイドバー設定を使用して、テンプレートデザインに一致するようにウィジェット領域のスタイルを設定できます。

サイドバーコンテンツにWordPressウィジェット領域を使用する利点

サイドバーコンテンツにWordPressウィジェットエリアを使用することにはいくつかの利点があります。ここに頭に浮かぶいくつかがあります：

- 新しいDiviテンプレートで既存のWordPressサイドバー（Diviで構築されていない）を使用できます。したがって、デフォルトのサイドバーを使用するブログがある場合は、Diviテーマビルダーで新しいテンプレートを作成するときにサイドバーを最初から再構築することを心配する必要はありません。
- テーマビルダーを使用して、デュアルWordPressサイドバーを表示します。通常のセクションと特殊なセクションで使用できるDiviの複数のレイアウトオプションを使用すると、サイドバーを含めるために複数の列を指定できます。サイドバーごとに追加のウィジェット領域を作成し、サイドバーモジュールを使用してそれらを追加することもできます。
- Diviテーマビルダーを使用してWordPressサイドバー/ウィジェットエリアのスタイルを設定できます。デフォルトのWordPressメニューのスタイルを設定するために外部CSSに依存したくない場合は、スライダーモジュールを使用してテンプレートレイアウトに追加し、スライダーモジュールの設定を使用してウィジェット領域のスタイルを設定できます。
- ウィジェットを使用して、Diviモジュールでは使用できないコンテンツをサイドバーに追加します。ウィジェットを使用して、Diviモジュールでは実行できない方法でサイドバーにコンテンツを追加できる場合があります。これは、カスタムウィジェットを提供するサードパーティのプラグインを使用している場合に特に当てはまります。

サイドバーコンテンツとしてのDiviモジュールの追加

もちろん、サイドバーのコンテンツを表示するためにサイドバーモジュールを使用することに限定されません。あなたはあなたが望むどんなタイプのコンテンツも作成するためにあなたの処分でDiviモジュールの全力を持っています。指定されたサイドバーの列に移動して、新しいモジュールを追加するだけです。

次に、Diviの組み込み設定を使用してこれらの要素を設計し、テンプレートの設計に一致させることができます。

サイドバーのコンテンツがテンプレートに追加されているため、動的コンテンツを利用する必要があります。たとえば、投稿テンプレートの場合、サイドバーに最近の投稿を含むブログモジュールを含めることができます。

テンプレートサイドバーでWordPressウィジェットエリアとDiviモジュールを組み合わせる

ウィジェット領域（およびそのすべてのウィジェット）をDiviモジュールと組み合わせて、サイドバーコンテンツのよりカスタムなレイアウトにすることもできます。これにより、Diviモジュールに加えて、お気に入りの組み込みのWordPressウィジェットを自由に使用できるようになります。

複数のテンプレートを使用して異なるサイドバーを異なるテンプレートに割り当てる

Divi Theme Builderを使用すると、テンプレートごとに異なるサイドバーを作成できます。これは、ページまたは投稿に固有のコンテンツをユーザーに提供するのに役立ちます。

たとえば、「すべての投稿」テンプレートでブログに関連するコンテンツを含むサイドバーを作成できます。

次に、「すべての商品」テンプレートのストアに特に関連するコンテンツを含むサイドバーを作成します。

最終的な考え

このクイックガイドが、Diviテーマビルダーを使用してテンプレートのサイドバーを作成する方法を理解するのに役立つことを願っています。 WordPressウィジェットエリアとDiviモジュールを使用してサイドバーコンテンツを作成できることを忘れないでください。また、テーマビルダーを使用すると、サイト全体のさまざまなページや投稿にコンテンツ対応のサイドバーを作成できます。

Diviテンプレートのサイドバーを作成した経験は何ですか？

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

乾杯！