Diviテーマビルダーを使用してブログのカテゴリページテンプレートを作成する方法

カテゴリページは、ユーザーが興味を持っている（または検索している）ものでいっぱいのページ全体をユーザーに提供することで、ユーザーにとって非常に役立ちます。 しかし、多くの場合、カテゴリページはデザインに関して苦しむ可能性があります。 Diviでは、Divi Theme Builderが登場する前は、開発者はカテゴリページテンプレートテーマファイルのphpコードを手動でカスタマイズしてから、純粋に外部CSSを使用してページテンプレートのスタイルを設定する必要がありました。 しかし今、Divi Theme Builderにより、このプロセスは簡単で楽しいものになりました！

このチュートリアルでは、Divi Theme Builderを使用して、ブログのカテゴリページテンプレートを最初から完全に作成する方法を示します。 投稿カテゴリに割り当てられた新しいテンプレートをすばやく設定する方法と、DiviBuilderを使用して適切なモジュールと動的コンテンツを使用してテンプレートを設計する方法を示します。

始めましょう！

スニークピーク

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

レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

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

始めるために必要なもの

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

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

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

カテゴリページテンプレートで利用可能なモジュールと動的コンテンツ

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

ブログモジュール

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

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

ポストスライダーモジュールとポストタイトルモジュール

投稿スライダーモジュールを使用して、現在のページの投稿を表示することもできます。 これは、ブログモジュールと同様に、カテゴリページにアクセスしたときに生成された投稿を表示する動的な投稿スライダーを作成するのに役立ちます。

投稿タイトルモジュールも使用できますが、ページのタイトルを動的に表示する機能にかなり制限されています。 投稿タイトルモジュール内で利用可能な他の要素のほとんどは、アーカイブページには適用できず、特定の投稿テンプレートにのみ適用できます。

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

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

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

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

ブログのカテゴリページテンプレートを作成する方法

このカテゴリページテンプレートの目標は、Diviのブログ投稿のすべてのカテゴリページに割り当てられるテンプレートのカスタム本文領域を作成することです。 このテンプレートのカスタムヘッダーまたはフッター領域は作成しません。 ただし、このテンプレートは、独自のヘッダーとフッターを使用して、独自のWebサイトで簡単に使用できます。

投稿カテゴリのカスタムテンプレートの作成と割り当て

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

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

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

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

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

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

テンプレートレイアウトエディタで、通常のセクション内に新しい1列の行を作成します。

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

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

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

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

前：

<h1>

後：

 Articles</h1>

SEOの目的で、タイトルをH1タグでラップする必要があります。 タイトルの後に静的な単語「Articles」が追加されているため、ユーザーが「Business」カテゴリページにアクセスすると、タイトルには「BusinessArticles」と表示されます。

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

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

• 見出しフォント：Ubuntu
• 見出しフォント：太さ：太字
• 見出しのテキストの色：＃192231
• 見出しのテキストサイズ：48px（デスクトップ）、38px（タブレット）、28px（電話）
• 見出し線の高さ：1.2em

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

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

新しい行を追加

現在の一番上の行の下に新しい1列の行を追加します。

ブログモジュールを追加する

次に、ブログモジュールを行に追加します。

次のようにコンテンツオプションを更新します。

• 現在のページへの投稿：はい
• 投稿数：9
• 続きを表示ボタン：はい

正しい投稿アーカイブを取得するには、カテゴリページで[現在のページの投稿]が有効になっていることを確認する必要があることを忘れないでください。

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

コンテンツ設定が整ったら、次のようにデザインにいくつかの変更を加えましょう。

• レイアウト：グリッド

• タイトルフォント：Ubuntu
• タイトルフォントの太さ：太字
• タイトルテキストの色：＃192231
• メタフォント：Ubuntu
• メタテキス​​トの色：＃985e6d
• メタテキス​​トサイズ：13px

• 続きを読むフォント：Ubuntu
• 続きを読むフォントの太さ：太字
• 続きを読むフォントスタイル：下線
• 続きを読むテキストの色：＃985e6d
• ページ付けフォント：Ubuntu
• ページ付けテキストの色：＃985e6d
• ページ付けテキストサイズ：18px
• ページ付けラインの高さ：2em

• グリッドレイアウトの境界線の幅：0px
• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウブラー強度：70px
• ボックスシャドウスプレッド強度：-10px
• 影の色：rgba（25,34,49,0.3）

この時点で、現在のカテゴリページに従って正しく表示されるページタイトルとブログ投稿を備えた基本的なカテゴリページが稼働しています。 ただし、投稿をクリエイティブな方法で表示するモジュールを追加することで、よりクリエイティブになります。

投稿スライダーを作成して、現在のカテゴリの最新の4つの投稿を取得します。

投稿スライダーモジュールを使用して、カテゴリページの投稿を動的に表示することもできます。 これがその方法です。

新しい行を追加

最初に、一番上の行の下に1/32/3列レイアウトの新しい行を追加します。

ポストスライダーモジュールを追加する

左側の列に、ポストスライダーモジュールを追加します。

次に、投稿スライダーのコンテンツオプションを次のように更新します。

• 現在のページへの投稿：はい
• 投稿数：4
• 投稿メタを表示：いいえ

ポストスライダーモジュールの設計

投稿スライダーのコンテンツが配置されたので、次のようにデザイン設定を更新します。

• テキストの配置：左
• タイトルフォント：Ubuntu
• タイトルラインの高さ：1.3em
• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：16px
• ボタンの背景色：＃985e6d
• ボタンの境界線の幅：0px
• ボタンフォント：Ubuntu

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウブラー強度：70px
• ボックスシャドウスプレッド強度：-10px
• 影の色：rgba（25,34,49,0.3）

全幅レイアウトでブログモジュールを作成する

右側の列では、グリッドレイアウトの代わりに全幅レイアウトの別のブログモジュールを追加できます。 これにより、カテゴリの投稿に別の独自の表示領域を提供できるようになります。

ブログモジュールを追加する

時間を節約するために、一番下の行にある既存のブログモジュールをコピーして、投稿スライダーの横の右側の列に貼り付けましょう。

重複するブログモジュールの設定を更新する

重複するブログモジュール設定を開き、以下を更新します。

• 現在のページへの投稿：はい
• 投稿数：3
• 抜粋の長さ：120
• 注目の画像を表示：いいえ（少なくとも今のところ）
• ページ付けを表示：いいえ

• レイアウト：全幅：
• ボックスシャドウ：なし

これまでの結果

これまでのところ、結果は3つのブログ投稿の最小限の表示です。

しかし、さらに一歩進めたい場合は、各投稿の抜粋の左側にいくつかの小さな注目の画像を追加できます。

カスタムCSSを使用して、投稿の抜粋コンテンツの左側に浮かぶ小さな注目の画像を作成します。

ブログ投稿の抜粋の左側にいくつかの小さな注目の画像を追加するには、いくつかのカスタムCSSを追加する必要があります。

ブログモジュールにカスタムCSSクラスを与える

手始めに、ブログモジュールにカスタムCSSクラスを追加する必要があります。 ブログ設定を開き、[詳細設定]タブで次のように入力します。

• CSSクラス：left-blog-image

コードモジュールを使用してCSSコードを追加する

このテンプレートに小さなCSSスニペットを追加しているだけなので、コードモジュールを使用できます。 ブログモジュールの下にコードモジュールを追加します。

CSSコードを挿入

次に、コードコンテンツ領域内に次のCSSを入力します。

<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>

ブログモジュールの設定を更新して、注目の画像を含める

これで、CSSスニペットのおかげで左側の新しい位置に表示されるように、注目の画像を追加し直すことができます。

テンプレートへの追加のスタイリング

まとめる前に、デザインに少し手を加えてみましょう。

アーカイブタイトルの下にディバイダーを追加してスタイルを設定する

テンプレートの上部にあるアーカイブページのタイトルのすぐ下に仕切りモジュールを追加します。

次に、次のように仕切りの設定を更新します。

• 線の色：＃985e6d
• 仕切りの重量：3px
• 最大幅：200px

セクションディバイダーをレイアウトに追加

セクション設定を開き、次のようにセクションディバイダーを追加します。

• トップディバイダースタイル：スクリーンショットを参照
• トップディバイダーカラー：rgba（73,78,107,0.07）
• 仕切りの高さ：90vw
• 仕切りフリップ：水平および垂直

ポスト表示の重複を避けるために、各モジュールでポストオフセット番号を使用してください

現在、すべてのモジュールが現在のカテゴリページの同じ投稿コンテンツを取得しています。 これらのモジュールが重複して表示されないようにするために、[投稿オフセット番号]オプションを使用して、投稿フィードを表示している特定の数の投稿を「スキップ」できます。

全幅ブログモジュールポストオフセット

投稿スライダーには、現在のカテゴリページの最初の（最新の）投稿が既に表示されているため、この投稿を隣接するブログモジュールでオフセットできます。 投稿スライダーの右側にあるブログモジュールの設定を開き、次のように投稿オフセット番号を更新します。

• ポストオフセット番号：1

これで、モジュールは現在のカテゴリページの2番目に新しい投稿から始まります。

グリッドブログモジュールポストオフセット

最初のブログモジュールの投稿オフセットを設定したら、テンプレートの下部にあるメインブログモジュールの投稿をオフセットする必要があります。 そのブログモジュールを開き、投稿オフセット番号を次のように更新します。

• ポストオフセット番号：4

上にすでに表示されている4つの投稿を考慮して、オフセット番号を4に設定する必要があります。 モジュールは、他のモジュールが中断したところから再開し、最新の5番目の投稿から開始します。

最終結果

最終結果を表示するには、WordPressダッシュボードに移動し、[投稿]> [カテゴリ]に移動します。 次に、クリックして既存のカテゴリの1つを表示します。

これが最終結果です。

そして、ここではタブレットと電話のディスプレイにあります。

最終的な考え

この投稿が、Webサイトのカテゴリページデザインを作成するという課題に直面したときに、少し楽に呼吸できるようになることを願っています。 Divi Theme Builderを使用すると、特にブログモジュールに現在のページの投稿を表示するオプションが追加され、非常に簡単に実行できます。 また、投稿オフセットオプションを使用すると、重複する投稿が表示されることなく、複数のブログモジュール（または投稿スライダーモジュール）を組み合わせることができます。

Divi Theme Builderは、カテゴリページの作成にどのように役立ちましたか？

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

乾杯！