ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2021年9月7日| 7のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

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

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

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

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!)」というメニューが追加されます。

WordPress ヘッダ固定プラグイン
  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): 大画面で固定していない場合は、ピクセルを設定すると、設定されたサイズ以上の画面では、固定されていません。

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

WordPress ヘッダ固定プラグ - 高度な機能

[詳細]タブでは、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は、すべての要素を固定することができるという点で、まともなプラグインです。

参照



7のコメント

コメント

  1. 上記説明欄「STICKY MENU(OR ANYTHING!)ON SCROLL設定」
    で、次の「ID(ID)/クラス(Class)」に要素を追加するようにされてい
    IDとClassはどのように確認できますか? 入力しようとしてもIDとClassが何であるかをモルラソヨ。

    (1)には、固定する要素を入力する欄です。 「ユーザ名(ID)またはクラス(class)」の要素を追加することができます。

    応答
    • CSSで使用されるIDとクラスを指定します。 CSSのID /クラスについては、CSS関連の本を参照するか、グーグリングは、さまざまな文書を見つけることができます。 ID /クラスは、CSS関連の本で一番最初に説明している基本的な事項です。

      応答
      • はいありがとうございます。 ^^

  2. 固定はされますが、サイトが不安定なみたいよ。忘れてしまったのを忘れスラッシングイネヨㅠ

    応答
    • こんにちは、ハンソフイ様。 テーマでヘッダやメニューを固定する機能を提供していませんか?
      テーマで提供される場合、テーマ機能を使用することをお勧めします。

      このブログの場合、テーマ( GeneratePress)で提供されるSticky機能を使用してヘッダーを固定しました。

      応答
  3. #mastheadを利用して、やっと成功しました。 ところが、フッターも...つまりメニューとフッター、二つの同時適用することができませんか?

    応答
    • こんにちは、イオイル様。

      #mastheadはテーマによって異なり、Google Chromeの開発ツールを利用して、簡単に確認が可能です。

      この記事で紹介されたプラグインを使用してメニューを固定し、フッターは簡単なCSSで固定させることができるでしょう。 次の記事を参照してみてください:

      https://www.thewordcracker.com/miscellaneous/sticky-fixed-bottom-div-element/

      そしてフッターを固定することに関連して、以下の文も参照してみることができます。

      https://avada.tistory.com/1397

      応答