Diviアーカイブページに石積みレイアウトを与える方法

アーカイブページにカスタムの石積みレイアウトを与えるために、Diviテーマビルダーを使用してカスタムの動的アーカイブページテンプレートを設計できます。 Diviでは、Divi Theme Builderが登場する前は、開発者はアーカ​​イブページテンプレートテーマファイルのPHPコードを手動でカスタマイズしてから、純粋に外部CSSを使用してページテンプレートのスタイルを設定する必要がありました。 これにより、組積造のレイアウトを作成することがはるかに困難になりました。 しかし今、Divi Theme Builderにより、このプロセスは簡単で楽しいものになりました！

このチュートリアルでは、アーカイブページのタイトル、サブタイトル、ブログ投稿を動的に表示するアーカイブページテンプレートを作成する方法を紹介します。 また、ブログ投稿モジュールを使用すると、投稿アーカイブを石積みグリッドレイアウトで簡単に表示できます。

始めましょう！

スニークピーク

これは、このチュートリアルで一緒に設計するアーカイブページテンプレートの概要です。 この画像では、「WordPress」カテゴリのすべての投稿を表示するために使用されています。

アーカイブページテンプレートを無料でダウンロード

このチュートリアルのテンプレートを手に入れるには、まず下のボタンを使用してテンプレートをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

テンプレートレイアウトをWebサイトにインポートするには、Diviテーマビルダーに移動し、移植性オプションを使用して.jsonファイルをテーマビルダーにインポートする必要があります。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、インストールされているDiviテーマ（またはDiviテーマを使用していない場合はDivi Builderプラグイン）をインストールしてアクティブ化します。
2. アーカイブページテンプレートを作成するため、結果を表示するには、作成者、カテゴリ、タグが割り当てられたブログ投稿をWebサイトに作成しておく必要があります。

その後、あなたは行く準備ができています。

アーカイブページテンプレートで利用可能なモジュールと動的コンテンツを理解する

Diviサイトのアーカイブページテンプレートを作成するときは、正しい情報を動的に表示するテンプレートを効果的に作成できるように、自由に使用できるツールを理解することが重要です。 アーカイブページテンプレートの場合、ユーザーがアーカイブページにアクセスするたびに、現在のページの投稿を表示することに最も関心があります。 たとえば、ユーザーがカテゴリリンク「ビジネス」をクリックすると、カテゴリ「ビジネス」のすべての投稿を表示するアーカイブページが表示されます。 一部のDiviモジュールには、テンプレートへの動的コンテンツの表示を簡単にするための組み込みオプションがあります。

ブログモジュール

ブログモジュールは、アーカイブページテンプレートを表示するために使用する必要がある主要なモジュールです。 これは、現在のページの投稿を表示するオプションが組み込まれているためです。

これは基本的に、ユーザーがページにアクセスするたびに通常生成される投稿を表示するようにDiviに指示しています。 したがって、「現在のページの投稿」を表示するように設定されたオプションを使用すると、ユーザーはアーカイブページを表示し、その現在のページの投稿を正しく表示することができます。

投稿/アーカイブタイトル（動的コンテンツ）

投稿/アーカイブページタイトルを表示する簡単な方法は、通常のDiviモジュールを使用してから、すべてのDiviモジュール内で利用可能な動的コンテンツ機能を使用して投稿/アーカイブページタイトルを取得することです。

たとえば、テキストモジュールを使用して、投稿/アーカイブページのタイトルを動的コンテンツとして本文コンテンツに追加できます。 次に、好きなようにタイトルのスタイルを設定できます。

アーカイブページテンプレートを作成するために必要なツールを理解したので、ジャンプして一緒に作成しましょう。

組積造レイアウトでDiviアーカイブページテンプレートを作成する方法

組積造のレイアウトでアーカイブページテンプレートを作成するには、テーマビルダーを使用してすべてのアーカイブページの新しいテンプレートを設計するだけです。

すべてのアーカイブページのカスタムテンプレートの作成と割り当て

開始するには、WordPressダッシュボードに移動し、Divi> ThemeBuilderに移動します。 次に、空の灰色のボックス領域をクリックして、新しいテンプレートを追加します。

次に、テンプレートをすべてのアーカイブページに割り当てます。

テンプレートへの新しいカスタムボディエリアの追加

テンプレートのカスタムボディを作成するには、[カスタムボディの追加]領域をクリックして、[カスタムボディの作成]を選択します。

次に、「最初からビルド」オプションを選択します。

動的アーカイブタイトルを追加

テンプレートレイアウトエディタで、デフォルトのセクション設定を背景色で更新します。

• 背景色：#eeeeee

次に、通常のセクション内に新しい1列の行を作成します。

次に、テキストモジュールを行に追加します。

デフォルトの本文コンテンツを削除し、「動的コンテンツを使用」アイコンをクリックして、「投稿/アーカイブタイトル」オプションを選択します。

Post / Archive Title要素を配置したら、歯車アイコンをクリックして設定を開きます。

次に、BeforeおよびAfter入力領域を更新して、コンテンツをH1タグでラップし、次のように動的タイトルの後に静的コンテンツを追加します。

前：

<h1>

後：

</h1>

SEOの目的で、タイトルをH1タグでラップする必要があります。

スタイルダイナミックアーカイブタイトル

動的コンテンツが配置されたら、次を使用してスタイルを設定できます。

• 見出しフォント：Mulish
• 見出しフォント：重量：重い
• 見出しテキスト配置：中央
• 見出しのテキストの色：＃3a405a
• 見出しのテキストサイズ：70px（デスクトップ）、40px（タブレットと電話）

動的アーカイブのサブタイトルテキストを追加

動的アーカイブページのタイトルをカスタムHTMLでラップできるため、サブタイトルテキスト内で動的アーカイブページのタイトルを取得するサブタイトルを追加できます。

これを行うには、前のテキストモジュールの下にタイトル付きの新しいテキストモジュールを作成します。

デフォルトの本文テキストを削除し、投稿/アーカイブタイトルの動的コンテンツを本文に追加します（以前と同じように）。

投稿/アーカイブのタイトル設定を開き、コンテンツの前後に以下を追加します。

前：

<h3>Here are the articles on 

後：

 </h3>

これで、タイトルは前のテキスト行に沿って表示されます。

スタイルダイナミックアーカイブタイトル

動的コンテンツが配置されたら、次のH3設定を更新してスタイルを設定できます。

• 見出し3フォント：Mulish
• 見出し3テキスト配置：中央

ブログモジュールを使用して現在のページの投稿を動的に表示する

動的アーカイブページのタイトルを設定したら、現在のアーカイブページの投稿を表示するブログモジュールを追加する必要があります。

新しいセクションを追加

ブログモジュールを追加する前に、ページに新しいセクションを追加しましょう。

新しい1列の行を追加する

次に、新しい1列の行を新しいセクションに追加します。

次に、行の設定を開き、以下を更新します。

• カスタムガター幅を使用：はい
• 側溝幅：2;
• 幅：95％

現在のページの投稿を動的に表示するブログモジュールを追加する

次に、ブログモジュールを行に追加する必要があります。

正しい投稿アーカイブを取得するには、archvieページで[現在のページの投稿]が有効になっていることを確認する必要があることを忘れないでください。 次のようにコンテンツオプションを更新します。

• 現在のページへの投稿：はい

デザインブログモジュール

コンテンツ設定が整ったら、デザインにいくつか変更を加えましょう。 [デザイン]タブで、次のようにレイアウトを更新します。

• レイアウト：グリッド

次に、[コンテンツ]タブに戻り、グリッドアイテムに次の背景色を追加します。

• 背景色：＃3a405a

タイトルのテキストスタイルを更新する

• タイトルフォント：Mulish
• タイトルフォントの太さ：太字
• タイトルテキストの色：#eee
• タイトルテキストサイズ：34px
• タイトルラインの高さ：1.3em

本文のテキストスタイルを更新する

• ボディフォント：Montserrat
• 本文の色：#ffffff
• ボディラインの高さ：2em

メタテキス​​トスタイルを更新する

• メタフォント：Montserrat
• メタテキス​​トの色：＃ffb100

ページ付けスタイルを更新する

• ページ付けフォントの太さ：太字
• ページ付けテキストの色：＃3a405a

この時点で、アーカイブページテンプレートが稼働し、ページタイトルと、現在のアーカイブページの投稿を動的に表示するブログ投稿（石積みレイアウト）が完成しました。

最終結果

結果をテストするには、サイトのさまざまな種類のアーカイブページにアクセスしてください。

これは、カテゴリ「WordPress」のすべての投稿を表示するカテゴリアーカイブページテンプレートの例です。

これは、特定の著者のすべての投稿を表示する著者アーカイブページテンプレートです。

これは、「ニュース」というタグが付いたすべての投稿を表示するタグアーカイブページです。

そして、これが2019年10月のすべての投稿を表示する日付アーカイブページテンプレートです。

最終的な考え

Diviのテーマビルダーを使用して新しいアーカイブテンプレートを作成する方法がわかれば、投稿に石積みのレイアウトを追加するのは簡単です。 秘訣は、アーカイブページのタイトルを動的コンテンツとして表示するためのDiviの組み込みオプションを使用し、次にブログモジュールを使用して現在のページの投稿を石積みグリッドレイアウトで動的に表示することです。 うまくいけば、これは簡単に見落とされる可能性のあるアーカイブページをターゲットにすることで、Webサイトの全体的なデザインを後押しするのに役立ちます。

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

乾杯！