WordPress メニューとヘッダを固定しよう - Sticky Menu＆Sticky Headerプラグイン

WordPressでメニューとヘッダを固定したい場合、テーマの機能を使用するか、CSSコードで固定したり、あるいはプラグインを使用することができます。 テーマでヘッダやメニューは固定機能を提供しなければmyStickymenuとSticky Menu＆Sticky Headerのような無料のプラグインを使用すると、簡単にヘッダを固定することができます。

Avada, Enfold, Newspaper など、いくつかのテーマでは、ヘッダーを固定する機能をテーマオプションを介して提供します。 このサイトに設置された GeneratePress テーマでも有料版では、Sticky Navigation機能を提供します。 現在、このブログにヘッダ固定機能が適用されています。

[この記事は、2015年に作成されたが、最新のバージョンに合わせて内容を全面的に修正して再発行しました。 ]

WordPress メニューとヘッダを固定しよう - Sticky Menu＆Sticky Headerプラグイン

前回の記事でmyStickymenuプラグインを使用して メニューを上に固定する方法を見てみました。 この記事では、メニューとヘッダを上部に固定するプラグイン Sticky Menu＆Sticky Header（以前の名称Sticky Menu（or Anything！）on Scroll））について説明します。

タイトルが示すように、このプラグインは、 メニューだけでなく、すべての要素を固定することができるプラグイン입니다。

まず、テーマでヘッダとメニューを固定する機能を提供していることをチェックしてみてください。 ヘッダとサイドバーなどの固定機能は有料版では通常提供されます。 シンプルなサイドバーの固定は、CSSコードを使用して実装することも可能です。 例えば、 GeneratePress テーマでサイドバーを固定するには、次のようなコードを使用することができます。

// Make the GeneratePress sidebar sticky
// GeneratePress 테마 사이드바 고정
@media (min-width: 769px) {
    #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

アストラテーマでは、次のようなコードを使用することができます。

// Fix sidebar in WordPress Astra theme
//  Astra 테마에서 사이드바 고정
/* 사이드바 고정 */
@media screen and (min-width: 769px) {
#secondary {
    position: sticky;
    position: -webkit-sticky;
    top: 30px;
}
}

Sticky Menu＆Sticky Header設定

このプラグインは、 伝言板>プラグイン>新規追加で「Sticky Menu＆Sticky Header "を検索してインストールすることができます。 このプラグインをインストールして有効にすると伝言板の 設定 メニューの下に "Sticky Menu（or Anything！）」というメニューが追加されます。

1. Sticky Element：（required）に固定する要素を入力する欄です。 アイディー（ID）またはクラス（class）の要素を追加することができます。 例：＃main-navigationまたは.main-mun-1
2. Space between top of page and sticky element：（optional）には、固定する要素と上部との距離を設定します。
3. Sticky element opacity when scrolling：（optional） - スクロール時作り付けの要素の透明度を設定します。 この機能は、PROバージョンでのみサポートされます。
4. Check for Admin Toolbar： ユーザーがログインしたときの上部の管理者ツールバー（Admin Toolbar）ので、メニューの一部が覆う場合は、このオプションをチェックします。
5. エフェクト：効果（PRO版のみ）
6. Background Color When Sticky： 固定時の背景色を設定する（プロバージョンのみ）。 このオプションは、有料版でのみ提供しています。
7. カスタムCSS： カスタムCSS（PROバージョンでのみ使用可能）
8. Do not stick element when screen is smaller than：（optional）： 小さな画面で固定していない場合は、ピクセルを設定すると、設定されたサイズ以下の画面では、固定されていません。
9. Do not stick element when screen is larger than：（optional）： 大画面で固定していない場合は、ピクセルを設定すると、設定されたサイズ以上の画面では、固定されていません。

詳細設定 タブを選択すると、高度なオプションを設定することができます。

[詳細]タブでは、Z-indexの値を設定することができます。 Z-indexの詳細については、 W3Schools文書を参照してみてください。 次のオプションは、PROバージョンでのみサポートされます。

• Push-up element（プッシュアップ要素）
• Legacy mode（レガシーモード）
• Do not use sticky on selected pages / posts（選択したページ/ポストで固定していない）

例：アストラテーマヘッダ固定する

例として人気 WordPress テーマの一つである Astra テーマのヘッダーを固定する方法を見てみましょう。 ちなみに、アストラテーマでヘッダを固定する機能は、 Astra テーマの有料版で提供されます。 有料版を購入せずに、ヘッダーを固定したい場合は、この記事で紹介するプラグインを利用することができます。

Astra ヘッダーを固定するには 伝言板>設定> Sticky Menu（or Anything！） ページに移動し、 Sticky Element：（required） 部分に次のCSSクラスを入力します。

.site-header

変更を保存して、サイトを更新すると、ヘッダが固定されていることを確認することができます。

最後に、

使用しているテーマでヘッダ/メニューを固定するためのオプションを提供している場合は、このオプションを使用してヘッダーやメニューを固定することができますが、テーマでそのような機能が提供されない場合、この記事で紹介したプラグインを使用することができます。 Avada, Enfold、Divi、 Newspaper, GeneratePress などのテーマで、ヘッダー/ナビゲーションを固定する方法は、「WordPress ヘッダ固定する（+Avada, Enfold、Divi、 Newspaper, GeneratePress テーマなど）」で確認することができます。

Sticky Menu（or Anything！）on Scrollを使用すると、 WordPressで、メニューとヘッダだけでなく、ほぼすべての要素を上に固定することができます。 テストしてみた結果、テーマに沿ってmyStickymenuやSticky Menu（or Anything！）on Scroll中のより適切なものを使用すると、なりそうです。 myStickymenuは、いくつかのオプションが提供されますが、メニューだけ固定可能であるがSticky Menu（or Anything！）on Scrollは、すべての要素を固定することができるという点で、まともなプラグインです。

参照

• WordPress 携帯電話をかけるボタン/連絡先アイコンを追加する