WordPress スティッキーヘッダーを作成する方法 (コード不要のガイド)

公開: 2024-02-08

Web サイトをインタラクティブで魅力的なものに保つために重要なのは、ユーザーエクスペリエンスです。ここで、Web サイトのヘッダーのスティッキー効果が最も重要な役割を果たします。スクロール中に WP サイトの上部にナビゲーションメニューを貼り付けることで、訪問者が必要なときにいつでもナビゲーションメニューにアクセスできるようにします。

さらに、WordPress スティッキーヘッダーは、直帰率、平均時間、その他の SEO 要素にプラスの影響を与えることで、サイト全体のパフォーマンスを改善できます。しかし、私たちの多くは、サイトを最適化する際にこの戦略にあまり重点を置いていません。この背後にある理由は、適切なツールまたは方法が見つからないことである可能性があります。

このブログ投稿では、数分もかからずにWordPress ヘッダーにスティッキー効果を与える最も簡単な方法を紹介します。それでは、最後までお付き合いいただき、Web サイトのパフォーマンスを効果的かつ簡単に向上させる方法を学びましょう。

内容を隠す

スティッキーヘッダーとは何ですか?

Web サイトのヘッダーをスティッキーにする理由

WordPress スティッキーヘッダーを作成する前の前提条件

WordPress でスティッキーヘッダーを作成する方法

ステップ 1: 「スティッキーコンテンツ」モジュールを有効にします。

ステップ 2: 組み込みテンプレートを使用してヘッダーを作成します。

ステップ 3: WordPress スティッキーメニューを作成します。

まとめ

スティッキーヘッダーとは何ですか?

スティッキーヘッダーとは、Web サイトを上下にスクロールしても上部に固定されたままになるナビゲーションバーを意味します。これは主に、シームレスなナビゲーションを確保し、Web サイトをスクロールする際のUX を向上させるために構築されています。

Web サイトのヘッダーをスティッキーにする理由

ナビゲーションメニューにアクセスするために常に上にスクロールするのは非常に疲れます。 UX が低下するだけでなく、サイトの直帰率も増加します。次に何が起こるかはわかっています。サイト全体のパフォーマンスが低下します。

ここでスティッキーメニューが役に立ちます。スティッキーナビゲーションバーを使用して Web サイトのパフォーマンスを最適化するために使用されます。これらに加えて、スティッキーバーにはさらに多くの利点があります。スティッキーメニューを追加する主な利点は次のとおりです。

ヘッダーを Web サイトの上部に固定したままにすることで、Web サイトがよりインタラクティブになります。
固定メニューは、より良いSEO 結果をもたらす簡単なナビゲーションを通じてサイトの平均滞在時間を短縮します。
固定ナビゲーションバーは、視聴者が簡単にページにアクセスできるため、 CRO (コンバージョン率の最適化)に適しています。
価格設定ページでのナビゲーションが簡単になり、最終的に収益が増加します。
これにより、Web サイトの UX が向上し、直帰率が減少します。
スティッキーヘッダーをサイトに統合し、ブランド素材 (ロゴなど) を常に表示できるようにすることで、ブランド構築の機会が増加します。

WordPress スティッキーヘッダーを作成する前の前提条件

スティッキーヘッダーを追加する根本的な利点について学習したので、WordPress サイトでスティッキーヘッダーを紹介し始める時期が来ました。でも、その方法を知っていますか？

心配ない。ここでは、スティッキーナビゲーションバーを表示する最も簡単な方法を紹介します。ただし、その前に、スティッキーメニューを追加するためのプラグインがいくつか必要になります。

エレメンター（無料）。
ElementsKit (無料およびプロ)。

WordPress でスティッキーヘッダーを作成する方法

このチュートリアルでは、コーディングを行わずにスティッキーヘッダーを最初から作成する方法を説明します。つまり、ナビゲーションメニューの作成からスティッキー条件の設定まで、すべてを手順を追って説明します。それでは、ElementsKit を使用して WP にスティッキーメニューを追加してみましょう。

ステップ 1: 「スティッキーコンテンツ」モジュールを有効にします。

必要なプラグインをインストールした後、管理パネルに移動し、 ElementsKit >> モジュールに移動します。次に、「スティッキーコンテンツ」モジュールを有効にして、 「変更を保存」ボタンを押します。

ステップ 2: 組み込みテンプレートを使用してヘッダーを作成します。

2 番目のステップでは、ヘッダーを追加する必要があります。手動で作成することも、任意の方法で作成することもできますが、最も速くて簡単な方法は、ElementsKit の事前に構築されたヘッダーテンプレートを使用することです。

ElementsKitを使用してヘッダーを追加するには、 ElementsKit のヘッダーとフッタータブに移動し、 「新規追加」ボタンを押します。これにより、次のフィールドに入力する必要があるタブが表示されます。

タイトル:ナビゲーションメニューなどのヘッダーに適切なタイトルを追加します。
タイプ:ヘッダーを選択します。
条件:ヘッダーの条件を設定します。
アクティブ化/非アクティブ化:このメニューをアクティブにします。

その後、 「Elementor で編集」ボタンをクリックして、このヘッダーの組み込みテンプレートを選択します。

これにより、Elementor エディターにリダイレクトされ、ElementsKit のテンプレートライブラリにアクセスするには、 「Ekit」アイコンをクリックする必要があります。

テンプレートライブラリタブが開きます。そこで、 「セクション」タブに移動し、 「挿入」ボタンを押して適切なヘッダーテンプレートを選択する必要があります。

その後、メニューアイコンを押して、左側から表示したいメニューを選択します。さらに、次のようなメニュー設定を調整できます。

水平メニュー位置:メニューの位置を右、左、中央、両端揃えから設定します。
ドロップダウンを次のように開く:ホバーまたはクリック時にドロップダウンメニューを表示するかどうかを選択します。
サブメニューインジケーター:ヘッダーナビゲーションメニューとともに表示されるサブメニューインジケーターアイコンを選択します。
1 ページを有効にする: 1 ページに固定ヘッダーを表示する場合は有効にします。
応答性の高いブレークポイント:タブレットまたはモバイルに対して応答性を持たせます。

さらに、次の WordPress モバイルメニュー設定を編集できます。

モバイルメニューロゴ:メディアライブラリからアイコンを挿入します。
モバイルリンク:カスタムリンクをメニューに追加することも、デフォルトにすることもできます。
ハンバーガーアイコン (オプション):必要に応じて、アイコンライブラリのアイコンを選択します。
サブメニュークリック領域:メニューにサブメニューがあり、そこにアイコンを追加する場合は、これを有効にします。

ElementsKit を使用してナビゲーションメニューのコンテンツをカスタマイズする

コンテンツの後で、メインラッパー、メニュー項目スタイル、サブメニュー項目スタイル、サブメニューパネルスタイル、ハンバーガースタイル、およびモバイルメニューロゴをカスタマイズして、WordPress メニュースタイルを編集します。

ElementsKitを使用してElementorのスティッキーメニューを編集する方法

次に、 「画像」アイコンを押して、メディアライブラリまたはデバイスから画像を追加します。次に、画像の解像度、配置、キャプション、リンクを調整します。

[画像の幅] 、 [最大幅] 、 [高さ] 、 [不透明度] 、 [CSS フィルタ] 、 [境界線の種類] 、 [境界線の半径] 、および[ボックスの影]も変更する必要があります。

次に、ソーシャルプラットフォームを追加し、クリックして希望に応じてカスタマイズします。ソーシャルプロフィールフィールドを押すと、すべてのカスタマイズオプションが左側に表示されます。

ここで、ヘッダーメニューを固定的なものにするための最後の手段を講じます。これを行うには、ヘッダーメニューのドットセクション設定をクリックし、 [詳細設定] タブから ElementsKit Stickyを展開します。これは、次のようなその他の設定にも表示されます。

スティッキー:スティッキーコンテンツの条件を上、下、列から設定し、上スクロール時に表示するオプションを設定します。
Sticky until:この機能を使用すると、CSS ID を入力することで、選択したセクションまで WordPress の固定ヘッダーを表示できます。ここで CSS ID を生成するには、ヘッダーを固定したい位置までドットオプションをクリックし、追加された画像のように [詳細設定] タブに CSS ID を入力します。次に、CSS ID をコピーして、この Sticky until フィールドに貼り付けます。したがって、WordPress を更新すると、そのセクションまでスティッキーメニューが表示されます。ここでは、ヘッダーを価格表まで固定化しています。

ElementsKitを使用してヘッダーを特定のセクションまで固定的に表示するCSS IDを作成します

Sticky Offset:このフィールドを調整します。
スティッキーの背景色:スティッキーヘッダーの背景の色を設定します。
デスクトップに固定:誰かがデスクトップデバイスを使用して Web サイトにアクセスしたときにメニューを固定して表示するには、このオプションを有効にします。
タブレットの縦向きのスティッキー:タブレットでスティッキーメニューを表示するには、アクティブモードに設定します。
モバイルポートレートでスティッキー:ボタンを有効にしてヘッダーをスティッキーにします。

最後に、すべてのオプションを調整して、WordPress 上でスティッキーメニューを有効にするためにクリックします。