Diviブログ投稿テンプレートの動的投稿情報バーを作成する方法

ブログ投稿テンプレートに動的コンテンツを追加することは、投稿のタイトル、メタデータ、注目の画像などを提供するために不可欠です。通常、これらの動的要素は、レイアウトのデザイン内に通常の静的要素として配置されます。 ただし、読者にとって、これらの動的要素のいくつかを最前線に置いておくと役立つ場合があります。 ここで、動的な投稿情報バーが役立ちます。 動的な投稿情報バーは、ブラウザーの上部に固定されたままで（固定ヘッダーのように）、動的コンテンツやその他のCTAの役立つ部分が含まれています。 たとえば、このバーを使用して、現在読んでいる投稿、コメントを残すためのリンク、または関連するカテゴリへのリンクを読者に思い出させることができます。

このチュートリアルでは、動的な投稿情報バーを作成し、Diviテーマビルダーを使用してブログ投稿テンプレートに追加する方法を説明します。 完了すると、このバーはサイト全体のすべてのブログ投稿に対してシームレスに機能します。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。 アンカーリンク（「コメントを残す」および「購読」）がユーザーを投稿の対応する領域に送信する方法に注目してください。

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

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

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

無料でダウンロード

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

ダウンロード

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

セクションレイアウトをDiviテーマビルダーにインポートするには、Diviテーマビルダーに移動します。

移植性アイコンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションテンプレートがDiviテーマビルダーに表示されます。

チュートリアルに取り掛かりましょう。

パート1：既製のテンプレートのインポート

このチュートリアルでは、6番目のテーマビルダーパックから作成済みのテンプレートをいくつか使用します。 投稿情報バーを追加する作業用グローバルヘッダーを提供するデフォルトのWebサイトテンプレートをインポートします。 そして、ブログ投稿テンプレートをインポートして、ライブ投稿で結果をテストします。

重要：ライブサイトを台無しにしないように、これらのテンプレートをテストサイトにインポートすることをお勧めします。

デフォルトのWebサイトテンプレートをインポートする

まず、Divi用の6番目の無料テーマビルダーパックをダウンロードする必要があります。 次に、ファイルを解凍します。

WordPressダッシュボードから、Divi> ThemeBuilderに移動します。 次に、右上の移植性アイコンをクリックします。 移植性ポップアップで、インポートタブを選択します。 次に、ダウンロードしたフォルダーからデフォルトのWebサイトテンプレートjs​​onファイルを選択し、インポートボタンをクリックします。 これにより、グローバルヘッダーとフッターを含む新しいデフォルトのウェブサイトテンプレートがインポートされます。

投稿テンプレートをインポートする

このプロセスを繰り返して、同じダウンロードフォルダーから投稿テンプレートをインポートします。 移植性ポップアップを開き、投稿テンプレートのjsonファイルを選択して、インポートボタンをクリックします。 これにより、サイト全体のすべての投稿に割り当てられた投稿テンプレートと、デフォルトのヘッダーフッターが提供されます。

投稿テンプレートヘッダーでグローバルを無効にする

動的な投稿情報バーを投稿テンプレートのヘッダーに追加します。 ただし、投稿テンプレートにのみ投稿情報バーが必要なため、ヘッダーのグローバルを無効にして、サイト全体のすべてのヘッダーにバーが追加されないようにする必要があります。 グローバルヘッダーでグローバルを無効にするには、グローバルヘッダーの設定メニューを開き、[グローバルを無効にする]を選択します。

これで、ヘッダーは「カスタムヘッダー」というラベルの付いた灰色になります。 準備ができたら、編集アイコンをクリックしてヘッダーレイアウトテンプレートを編集します。

動的投稿情報バーの構築

セクションと行の追加

ヘッダーレイアウトエディター内で、ヘッダーを保持している現在のセクションの下に新しい通常のセクションを作成します。

次に、セクションに2分の1、4分の1、4分の1の列の行を追加します。

セクション設定

セクション設定を開き、以下を更新します。

• 背景色：#eceffe
• パディング：上10px、下10px

行設定

セクション設定が追加されたら、行の設定を開き、以下を更新します。

• 側溝幅：1
• パディング：0px上、0px下

[詳細設定]タブで、次のカスタムCSSをメイン要素に追加します。

display:flex !important;
flex-wrap: nowrap;
align-items: center;

これにより、モバイルで列が確実にスタックダウンします。

投稿タイトルの動的コンテンツを追加する

バーに追加する動的コンテンツの最初の部分は、投稿のタイトルです。 これは、読者が現在読んでいる投稿のタイトルを思い出させるのに役立ちます。

テキストモジュールを追加

投稿タイトルを動的コンテンツとして作成するには、左端の列内に新しいテキストモジュールを作成します。

投稿/アーカイブタイトルを動的コンテンツとして追加

次に、テキスト設定の本文領域にカーソルを合わせて、[動的コンテンツを使用]アイコンをクリックします。 リストから「投稿/アーカイブタイトル」を選択します。

投稿/アーカイブタイトルの動的コンテンツ設定を開き、before入力ボックスに以下を追加します。

You're Reading: 

次に、変更を保存します。

デザイン設定

[デザイン]タブで、動的タイトルのスタイルを次のようにカスタマイズします。

• テキストフォント：Ubuntu
• テキストフォントの太さ：中
• テキストテキストの色：＃121212
• テキストテキストサイズ：14px（デスクトップ）、12px（タブレット）、11px（電話）

動的投稿カテゴリ情報を追加する

投稿カテゴリ情報を作成するには、投稿タイトルを保持するテキストモジュールを複製します。

次に、重複テキストモジュールの設定を開き、投稿カテゴリを動的コンテンツとして本文に追加します。

投稿カテゴリの動的コンテンツ設定を開き、以下を更新します。

• 前：で
• カテゴリセパレータ：＆

リンクの色を更新する

[デザイン]タブで、リンクの色を次のように更新します。

• リンクテキストの色：＃4160fd

動的コメントカウント情報の追加

投稿情報バーに追加するもう1つの役立つ情報は、コメント数です。これにより、ユーザーは必要に応じて自分のコメントを使用するように促されます。 コメント数には、投稿のコメントへのリンクも含まれます。

動的コメントカウント情報を作成するには、テキストモジュールをカテゴリと複製し、中央の列にドラッグします。

次に、投稿コメント数を動的コンテンツとしてテキスト本文に追加します。

コメント投稿数の設定を開き、以下を追加します。

• 後：コメント

「コメントを残す」召喚状の追加

コメント数に加えて、コメントを残すための簡単な召喚状を追加します。 リンクは、投稿の下部にあるコメントセクションにスクロールするアンカーリンクになります。

CTAを作成するには、コメント数を保持している列2のテキストモジュールを複製します。

次に、複製のテキスト設定を開き、次のリンクhtmlを本文に追加します。

<a href="#respond">Leave a Comment</a>

購読ボタンの追加

投稿情報バーに最後に追加するのは、サブスクライブボタンです。 これは、メールオプトインフォームを含む投稿テンプレートのセクションにユーザーを誘導するアンカーリンクにもなります。

これを行うには、右端の列にボタンモジュールを追加します。

[デザイン]タブで、ボタンのスタイルを次のように更新します。

• ボタンのテキストサイズ：14px（デスクトップ）、12px（タブレット）、11px（電話）
• ボタンのテキストの色：#ffffff
• ボタンの背景のグラデーション左の色：＃7e5ce6
• ボタンの背景のグラデーションの右の色：＃25b8ee
• ボタンの境界線の幅：0px
• ボタンの境界線半径：100px
• ボタンの文字間隔：2px
• ボタンフォント：Ubuntu
• ボタンのフォントの太さ：太字
• ボタンのフォントスタイル：TT
• パディング（デスクトップ）：上10px、下10px、左20px、右20px
• パディング（タブレット）：上6px、下6px、左14px、右14px

ボタンにアンカーリンクを追加するには、[コンテンツ]タブに移動し、次のボタンリンクURLを追加します。

• ボタンリンクURL：#subscribe

このリンクは、投稿テンプレートの本文にあるメールオプトインフォームを保持するセクションに対応するCSSIDを追加するまで機能しません。

モバイルで列1を無効にする

モバイルには固定バー用のスペースがあまりありません。 そのため、どの情報を含めるかを決定する必要があります。 この例では、モバイルでCTAを含む2つの列を残し、投稿のタイトルとカテゴリを含む列を無効にします。

これを行うには、列1の設定を開きます。[詳細設定]タブで、電話とタブレットの表示を無効にします。

セクションに固定位置と高いZインデックスを与える

設計が完了したら、セクションを固定位置にすることができます。 アイデアは、最初はヘッダーのあるセクションの後ろにバーを非表示にすることです。 次に、ユーザーがスクロールすると、ヘッダーの下から固定投稿情報バーが表示されます。

セクション設定を開き、以下を更新します。

• 位置：固定
• Zインデックス：998

固定バーを投稿の残りのコンテンツの上に配置する必要があるため、zインデックスが998であることに注意してください。

セクションヘッダーZインデックスを更新

投稿情報バーセクションのzインデックスが高いため、ヘッダー付きのセクションの上に表示されます。 これを修正するには、ヘッダーのあるセクションのセクション設定を開き、以下を追加します。

• Zインデックス：999（バーのあるセクションより1つ多い）

レイアウトエディタで変更を保存します。

本文テンプレートの電子メールオプトイン行にCSSIDを追加します

バーに追加するサブスクライブボタンCTAには、投稿テンプレートにアンカーまたは「ジャンプ」する場所が必要です。 CTAは「サブスクライブ」するため、電子メールの操作フォームにジャンプする必要があります。

これを行うには、テーマビルダーで投稿テンプレートの「カスタムボディ」領域を開きます。

レイアウトの下部にあるメールオプトインフォームの行を見つけて、次のCSSIDを追加します。

• CSS ID：サブスクライブ

これにより、サブスクライブボタンのアンカーリンクをテンプレートのこの特定の領域にスクロールできるようになります。

完了したら、レイアウトとテーマビルダーへの変更を保存します。

最終結果

最終結果を確認するには、サイトでライブ投稿を開いて表示するだけです。 アンカーリンク（「コメントを残す」および「購読」）がユーザーを投稿の対応する領域に送信する方法に注目してください。

最終的な考え

この動的な投稿情報バーが、Diviブログ投稿のUXを向上させるのに役立つことを願っています。 他の情報も自由に試してみてください。 ブログモジュールを使って、そこに関連する投稿を掲載する方法があると確信しています。

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

乾杯！