Diviのブログテンプレートにスティッキーカテゴリメニューを追加する方法

公開: 2019-11-09

カテゴリメニューは、どんなブログにも楽しい追加です。彼らはブロガーに利用可能なさまざまな種類のトピックを紹介する機会を与え、読者が彼らが気にかけているものに素早くそして簡単にたどり着くことができるようにします。したがって、Webサイトのすべてのブログ関連テンプレートに適切に設計されたカテゴリメニューがあることが重要です。

このチュートリアルでは、Diviのテーマビルダーを使用して、スティッキーカテゴリメニューをブログに追加する方法を紹介します。 Divi Builderを使用してスティッキーカテゴリメニューを作成する方法と、ブログを構成するサイトのさまざまなテンプレートにカテゴリメニューを追加する方法についても説明します。

始めましょう。

スニークピーク

投稿テンプレートに追加されたスティッキーカテゴリメニューは次のとおりです

これがモバイルの一番下のスティッキーカテゴリメニューです。

カテゴリページテンプレートのカテゴリメニューは次のとおりです。

そして、これは、投稿スライダーの下から始まり、スクロールでページの上部に貼り付けられるスティッキーカテゴリメニューを使用して作成する、すばやく簡単なブログテンプレートです。

テンプレートを無料でダウンロード

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

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

無料でダウンロード

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

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

レイアウトをページにインポートするには、zipファイルを抽出し、テーマビルダーの移植性オプションを使用してjsonファイルの1つをDiviテーマビルダーに追加するだけです。

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

始めるために必要なもの

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

まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
新しいデザインを開始するには、テーマビルダーパック＃6をダウンロードしてください。

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

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

スティッキーセカンダリカテゴリメニューをブログテンプレートに追加する

テーマビルダーパック＃6のアップロード

このチュートリアルでは、テーマビルダーパック＃6を使用します。ブログ投稿からパックをダウンロードしたら、WordPressダッシュボードに移動し、Divi> ThemeBuilderに移動します。

次に、右上の移植性アイコンをクリックします。移植性ポップアップで、[インポート]タブを選択し、Divi-Theme-Builder-Pack-6-All.jsonファイルを選択します。次に、「Diviテーマビルダーテンプレートのインポート」ボタンをクリックします。

これにより、すべてのテンプレートがテーマビルダーにインポートされます。

これで、カテゴリメニューの作成を開始する準備が整いました。

WordPressで新しいカテゴリメニューを作成する

カテゴリメニューは、WordPressの通常のメニューと同じように作成できます。 WordPressダッシュボードから、[外観]> [メニュー]に移動します。 [新しいメニューの作成]リンクをクリックし、メニューに名前を付けて、[メニューの作成]ボタンをクリックします。

メニュー項目の下で、[カテゴリ]トグルを開き、メニューに追加するすべてのカテゴリ/ページを選択します。カテゴリアイテムがカテゴリトグルに表示されるように、カテゴリがすでに作成されていることを確認してください。カテゴリメニュー項目は、特定の投稿カテゴリのカテゴリページにリダイレクトされます。

投稿テンプレートの本文領域でスティッキーカテゴリメニューをデザインする。

カテゴリメニューを作成したら、カテゴリメニューをデザインします。これを行うには、テンプレートの1つの本体領域に追加する必要があります。最終的にはブログに関連する他のテンプレートにカテゴリメニューを追加しますが、今のところ、すべての投稿のテンプレート（または投稿テンプレート）に追加しましょう。

ボディエリアテンプレートレイアウトエディタを開く

テーマビルダーインターフェイスで、「すべての投稿」にすでに割り当てられているテンプレートを見つけて、カスタムボディ領域の編集アイコンをクリックします。

テンプレートの上部に新しいセクションと行を追加します

テンプレートレイアウトエディタで、1列の行を持つ新しいセクションを作成し、レイアウトの最上部にドラッグします。

セクションのカスタマイズ

モジュールを追加する前に、セクション設定を開き、次のように背景とパディングを付けます。

背景色：＃f92c8b
パディング：1vw上部、1vw下部

行をカスタマイズする

次に、行の設定を次のように更新します。

背景のグラデーションの左の色：＃f92c8b
背景のグラデーションの正しい色：＃ffd625
グラデーション方向：90度
パディング：0px上、0px下
丸みを帯びた角：20px

メニューモジュールの追加

1列の行内に、新しいメニューモジュールを追加します。

次に、ドロップダウンメニューから前に作成したカテゴリメニューを選択します。選択すると、メニュー項目がメニューに表示されます。

テンプレートに一致するようにメニューモジュールを設計する

行の背景色が表示されるように、デフォルトの背景色を削除します。

次のデザイン設定を更新します。

スタイル：中央揃え
メニューフォント：Ubuntu
メニューフォントの太さ：太字
メニューフォントスタイル：TT（大文字）
メニューテキストの色：#ffffff
メニューの文字間隔：2px
メニューラインの高さ：2em
ドロップダウンメニューの背景色：#ffffff
ドロップダウンメニューの線の色：＃f92c8b

ドロップダウンメニューのテキストの色：＃222222
モバイルメニューのテキストの色：＃222222
ハンバーガーメニューアイコンの色：#ffffff
ハンバーガーメニューアイコンフォント：40px
幅：90％
モジュールの配置：中央

セクションと行の可視性

メニューのドロップダウンが非表示にならないようにするには、セクションと行の表示を確認して表示に設定する必要があります。さらに、メニューの順序全体をページ上の他のすべてのコンテンツよりも上に保つために、zインデックスに高い数値を指定する必要もあります。これは、モバイルのドロップダウンメニューとスティッキーメニューの視認性を最大化するために必要になります。

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

水平方向のオーバーフロー：目に見える
垂直オーバーフロー：目に見える
Zインデックス：999

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

水平方向のオーバーフロー：目に見える
垂直オーバーフロー：目に見える

セクション（メニューを含む）をスティッキーにする

これはもちろんオプションですが、スティッキーカテゴリメニューを作成するには、セクション設定を開き、次のカスタムCSSをメイン要素に追加します。

position: -webkit-sticky !important;
position: sticky !important;
top: 0px;

セクションを複製して下部カテゴリメニューを作成する

モバイルでのユーザーエクスペリエンスを向上させるために、ページの下部に表示される別のカテゴリメニューを作成できます。メニューを作成するには、作成したメニューを含むセクションを複製するだけです。

下部のスティッキーメニューをモバイル向けに最適化

スティッキーCSSを下部の位置で更新します。

このメニューはモバイルで「固定」するためだけに必要なので、セクション設定を開き、デスクトップ用のカスタムCSSを削除します。次に、タブレットタブの下に次のカスタムCSSを追加します。

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

下部カテゴリメニューのドロップダウンメニューの方向を変更する

メニューはモバイルでは画面の下部に表示されるため、ドロップダウンメニューの方向を変更します。

ドロップダウンメニューの方向：上向き

「カテゴリ」メニューラベルを追加

モバイルメニューアイコンの横にラベルを追加するには、[メニュー設定]の[詳細設定]タブで、次のカスタムCSSを[前の要素]に追加します。

position: absolute !important;
color: #ffffff!important;
font-size: 16px;
content: "Categories";
line-height: 2em;
left: 50%;
margin-left: -110px;

これまでのモバイルでのメニューは次のようになります。

モバイルでトップメニューを非表示

モバイルでヘッダーが過密にならないようにするには、携帯電話とタブレットのトップメニューを無効にします。これにより、デスクトップの一番上のスティッキーメニューのみが表示されます。

両方のメニュー/行をDiviライブラリに保存します。

これで、レイアウト用の2つのカテゴリメニューの作成が完了しました。それらを他のテンプレートに簡単に追加できるように、Diviライブラリに保存できます。トップメニューを保存するには、セクションメニューから「ライブラリに追加」アイコンを選択します。次に、レイアウトに名前を付けて、[ライブラリに保存]ボタンをクリックします。

同じプロセスを繰り返して、下部のメニューもライブラリに保存します。覚えやすい名前を付けてください。

ブログ投稿テンプレートの最終結果

新しいスティッキーカテゴリメニューを配置して、ライブ投稿がどのように表示されるかを確認しましょう。

デスクトップビュー（トップメニュー）

モバイルビュー（ボトムメニュー）

スティッキーセカンダリカテゴリメニューをカテゴリページテンプレートに追加する

メニューセクションがDiviライブラリに追加されているので、それらを任意のテンプレートレイアウトに追加できます。カテゴリメニューを追加する次のテンプレートは、カテゴリページテンプレートです。

カテゴリページテンプレートの本文領域を編集する

「すべてのカテゴリページ」に割り当てられているテンプレートを見つけて、カスタムボディ領域の編集アイコンをクリックします。

ライブラリからトップカテゴリメニューを追加

テンプレートレイアウトエディタ内から、青いプラスアイコンをクリックして新しいセクションを追加します。次に、[ライブラリから追加]タブを選択し、リストから最上位のカテゴリメニューを選択します。

次に、セクションをテンプレートレイアウトの一番上に移動します。

ライブラリから下部のカテゴリメニューを追加

次に、クリックして、レイアウトの一番下に新しいセクションを追加します。次に、ライブラリから一番下のカテゴリメニューを追加します。

メニューのアクティブリンクの色を更新

このテンプレートの場合、メニュー項目にはこのテンプレートを使用するカテゴリページへのリンクが保持されるため、アクティブなリンクの色を更新することをお勧めします。トップメニュー設定を開き、以下を更新します。

アクティブリンクの色：＃4160fd

これで、カテゴリページにアクセスすると、アクティブなリンクが青色で表示されます。

カテゴリページテンプレートの最終結果

スティッキーカテゴリメニューをブログページテンプレートに追加する

スティッキーカテゴリメニューをウェブサイトのブログページに追加することもできます。ブログページは基本的にブログのホームページであり、通常はすべてのブログ投稿のフィードが表示されます。 Divi Theme Builderを使用すると、ブログページのテンプレートを作成し、カテゴリメニューを簡単に追加できます。

ブログテンプレートの作成

まず、カテゴリページテンプレートを複製します。

次に、複製したテンプレートをブログに割り当てます。

ブログテンプレートのカスタム本文を編集します。

ブログテンプレートのレイアウトをカスタマイズする

テンプレートレイアウトエディターを使用して、ブログテンプレートをデザインします。とりあえず、ページの上部にある素敵な全幅の投稿スライダーを付けましょう。これを行うには、新しい全幅セクションを作成します。

全幅ポストスライダーを追加

次に、全幅のポストスライダーモジュールをセクションに追加します。

「現在のページの投稿」をプルするようにコンテンツを設定します。次に、ブログページに適切な動的コンテンツを取得していることを確認します。

次のように全幅ポストスライダー設定を更新します。

タイトルフォント：Ubuntu
タイトルフォントの太さ：中
ボディフォント：Ubuntu

ポストスライダーの下にメニューを移動

このレイアウトでは、投稿スライダーをページの上部にドラッグして、上部のスティッキーカテゴリメニューがスライダーの下に配置されるようにします。

投稿（またはブログ）ページを作成して割り当てる

WordPressで指定されたブログページがあることを確認してください。これを行うには、[設定]> [読み取り]に移動します。次に、ホームページを表示するには、静的ページを選択します。次に、投稿ページに使用するページを選択します。

ブログページテンプレートの最終結果

カテゴリメニューがページの上部に到達すると、スティッキーになることに注意してください。

最終的な考え

スティッキーなカテゴリメニューは、ブログを次のレベルに引き上げることができます。 1つを構築するには、DiviBuilderを使用するだけです。また、テーマビルダーを使用すると、サイトの好きな場所にメニューを簡単に追加できます。さらに、モバイル用に別のスティッキーメニューを作成して、ユーザーに最高のエクスペリエンスを提供することもできます。うまくいけば、これはあなた自身のブログや次のプロジェクトで役立つでしょう。

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

乾杯！