WordPressで先頭固定表示のナビゲーションメニューを作りたいですか？
トップナビゲーションメニューには通常、最も重要なページすべてへのリンクがあります。このメニューを先頭固定表示にすることで、ユーザーがページをスクロールしても画面上に表示し続けることができ、いつでも簡単にアクセスできるようになります。
この投稿では、WordPressサイトに先頭固定表示のナビゲーションメニューを簡単に追加する方法をご紹介します。
先頭固定表示ナビゲーションメニューとは？
スティッキーまたはフローティングナビゲーションメニューは、ユーザーがスクロールダウンすると画面の先頭に「固定表示」されるため、画面上にすべて表示されます。
通常、WordPressのトップナビゲーションメニューには、サイトの最も重要なコンテンツへのリンクが含まれています。このメニューを先頭固定表示にすることで、訪問者はスクロールすることなく、いつでもそれらのリンクをクリックすることができます。
オンラインストアを運営している場合、トップナビゲーションメニューには通常、購入手続きやお買い物カゴなど、コンバージョンを目的としたページへのリンクがあります。先頭メニューを固定表示にすることで、お買い物カゴからの離脱率を減らし、売上を伸ばすことができます。
それでは、WordPressテーマやWooCommerceストアで、先頭固定表示のナビゲーション・メニューを簡単に作成する方法を見ていきましょう。以下のクイックリンクから、使いたい方法にジャンプしてください：
方法1：テーマ設定を使って先頭固定表示メニューを追加する（簡単）
最高のWordPressテーマの中には、先頭固定表示ナビゲーションメニューをビルトインでサポートしているものがあります。とはいえ、WordPressのダッシュボードでテーマ ” カスタマイズに行き、「メニュー」と書かれた設定を探して、テーマの設定をチェックする価値はある。
お使いのテーマが先頭固定表示に対応しているかどうか本当に〜してもよいですか？その場合は、テーマのドキュメンテーションを確認するか、開発者に問い合わせてください。詳しくは、WordPressのサポートを正しく依頼し、サポートを受ける方法をご覧ください。
もしあなたのテーマが先頭固定表示にビルトインされていない場合は、以下の他の方法を使う必要がある。
方法2：プラグインを使って先頭固定表示ナビゲーションメニューを追加する（推奨）
WordPressで先頭固定表示ナビゲーションメニューを追加する最も簡単な方法は、Sticky Menu & Sticky Headerプラグインを使うことです。このプラグインを使えば、メニューを含め、どんなものでも先頭固定表示にすることができます。
まず、プラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、ビギナーズガイドをご覧ください。
有効化したら、Settings（設定） ” Sticky Menu（先頭固定表示）（または何でもいい！）にアクセスしてください。
まず始めに、ブラウザーのinspectツールを使って、先頭に固定表示させたいナビゲーション・メニューのCSSIDを取得する必要があります。
サイトにアクセスし、ナビゲーションメニューにマウスオーバーするだけです。その後、右クリックしてブラウザーメニューから「Inspect」を選択するだけです。
ブラウザー内に新しいパネルが開き、ナビゲーションメニューのソースコードを見ることができます。
メニューまたはサイトのヘッダーに関連するコードの行を見つける必要があります。それは次のようになります：
<nav id="site-navigation" class="main-navigation" role="navigation">
コードを見つけるのに苦労している場合は、「Inspect（検査）」パネルにあるさまざまな行にマウスオーバーしてください。次の画像のように、正しいコードを見つけると、ブラウザーがナビゲーション・メニューをハイライトします。
この場合、ナビゲーション・メニューのCSS IDはsite-navigationです。
この情報を入手したら、WordPressダッシュボードに戻り、「Sticky Element (必須)」フィールドに追加します。
また、先頭にハッシュ文字（#）を追加する必要があるので、サイトナビゲーションは #site-navigationになります。
その後、ページ下部の「変更を保存」ボタンをクリックし、変更内容を保存します。
これで、WordPressサイトにアクセスしてスクロールしても、メニューが一番上に表示されるようになります。
時には、非表示にしたくないコンテンツに先頭固定メニューが重なることがあります。
その場合は、「Space between top of the page and sticky element」フィールドに数字を入力して、画面上部と先頭固定表示ナビゲーションメニューの間にスペースを定義する必要があります。
先頭固定表示メニューは、モバイル端末のような画面の小さい端末では問題を引き起こす可能性があります。その点を考慮し、デスクトップからWordPressサイトのモバイル版をチェックすることをお勧めします。
メニューの見た目に満足できない場合は、次のフィールドを見つけることによって、モバイルユーザーのためにメニューを「固定解除」することができます：「Do not stick element when screen is smaller than.
ここで「780px」と入力する。
このほかにもいくつかの設定がありますが、先頭固定表示ナビゲーションを作成するのに必要な設定はすべてこれだけです。
ナビゲーションメニューの設定に満足したら、「変更を保存」をクリックして設定を保存します。
方法3：コードを使って先頭固定表示ナビゲーションメニューを追加する
CSSを使って先頭固定表示ナビゲーションメニューを作ることもできます。
WordPressにカスタムコードを追加する最良の方法は、WPCodeを使用することです。WPCodeは、カスタムCSS、PHP、HTMLなどを追加できる最高のコードスニペットプラグインです。
テーマファイルを直接編集するわけではないので、WordPressでよくあるエラーを避けることができます。また、カスタムコードを失うことなく、テーマの更新や全く別のテーマへの変更も可能です。
また、先頭固定表示のオン・オフを個別クリックで切り替えることもできる。
まず、無料のWPCodeプラグインをインストールし、有効化する必要があります。 詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
プラグインを有効化したら、Code Snippets ” + Add Snippetのページに移動し、あなたのサイトに追加できるすべての既製のWPCodeスニペットを見ることができます。
これらには、コメントを完全に無効化するスニペット、WordPressが通常サポートしていないファイルタイプのアップロード、添付ファイルページの無効化などが含まれます。
ここで、「カスタムコードの追加（新規スニペット）」にマウスオーバーし、表示されたら「スニペットを使用」ボタンをクリックするだけです。
次の画面では、コード・スニペットのタイトルを入力する必要がある。これは単なる参考用なので、好きなものを使ってください。
次に、「コードタイプ」のドロップダウンを開き、「CSSスニペット」を選択する。
これで、WPCodeコードエディターに以下のスニペットを追加する：
#site-navigation {
background:#00000;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
これで黒い背景のナビゲーション・メニューが作成されます。backgroundの隣にある16進コードを変更することで、好きな色を使うことができます。
例えば、background：#を使えば、メニューの背景は白になります。どの16進コードを使えばよいか本当に〜してもよいですか？
また、#site-navigationをナビゲーション・メニューのCSS IDに置き換える必要があります。このコードを見つけるには、上で説明したのと同じ手順に従ってください。
コードに満足したら、’Inactive’トグルをクリックして’Active’に変更し、’Save Snippet’ボタンをクリックします。
WordPressのブログやサイトにアクセスすると、先頭固定表示ナビゲーションメニューが表示されます。
テーマによっては、ナビゲーションメニューがサイトヘッダーの上ではなく、下に表示されることがあります。この場合、先頭固定表示ナビゲーションメニューがサイトタイトルやヘッダーに近すぎたり、重なって表示されることがあります。
このような場合は、カスタムCSSスニペットに以下を追加してください：
.site-branding {
margin-top:60px !important;
}
サイトブランディングをヘッダーエリアのCSSクラスで置き換えるだけです。この情報を得るには、ブラウザーの「Inspect」ツールを使い、方法2で説明したのと同じ手順を踏むだけです。
ボーナス：WordPressの投稿を先頭固定表示にする
WordPressブログをお持ちなら、ブログ投稿の一部を先頭固定表示にするのは良いアイデアです。サイトの最も重要なコンテンツを含む柱となる投稿や、ユーザーと交流してもらいたいお知らせやプレゼントの投稿などです。
選択した投稿に付箋を付けると、新しいコンテンツを公開しても、その投稿はブログページの先頭に残り、付箋の下に表示されます。
コンテンツエディターでブログ投稿を開けば、簡単に先頭に固定表示させることができます。ブロックパネルの’Summary’タブを展開し、’Stick to the top of the blog’オプションをチェックしてください。
その後、上部にある「更新」または「公開」ボタンをクリックして、設定を保存します。これで、WordPressサイトに先頭固定表示ブログ投稿が作成できました。
詳しくは、WordPressで先頭固定表示をする方法のチュートリアルをご覧ください。
この投稿が、あなたのWordPressサイトに先頭固定表示ナビゲーションメニューを追加するのにお役に立てば幸いです。また、ブログのトラフィックを増やす方法についての初心者ガイドと、最高のWordPressページビルダー・プラグインの比較もご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi says
is there a way to make sticky menu only apply to certain posts/pages? Like for examlpe, having it non-sticky on my blog’s homepage but sticky everywhere else on the website?
WPBeginner Support says
If your theme does not offer that option then we would recommend the plugin for a simple method to have that conditional display
管理者
Mrteesurez says
Well crafted, I am happy to see the plugin you shared here “sticky menu or (anything) on scroll”. That’s means it can be used to make sticky any elements apart from menu.
Initially I used raw code for it, thanks for share this easy method.
Jiří Vaněk says
Thanks for the tutorial. I’ve always been looking for usually a template that can basically do this. According to this guide, I no longer have to.
WPBeginner Support says
Glad we could help open up your theme options
管理者
Paul says
Where do i leave the 5 Stars…..thank-you very much!!
WPBeginner Support says
Glad our guide was helpful
管理者
Jess says
Thank you so so much for this helpful post!!! So clear and easy to follow.
WPBeginner Support says
Glad our guide was helpful
管理者
Ivaylo says
Great practical tutorail. I did Method 2 and it worked instantly, however when I open the website on mobile, the buttons from the menu have vanished. Anyone knows why or how to solve it?
Cheers!
WPBeginner Support says
If you haven’t done so already, we would recommend checking with the support for your specific theme to see if it could be a conflict with your theme’s CSS
管理者
Serena Richardson says
Hello,
How do you create a sticky floating menu down the right hand side of a page rather than at the top, so it moves down as you scroll down.
Thanks!
Serena
WPBeginner Support says
That would be adding a sticky widget which we have a recommendation in our article below:
https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/
管理者
Tom Browne says
Worked instantly. Thank you
WPBeginner Support says
You’re welcome
管理者
simran says
level of perfection and the way of present the information …thanks you..
WPBeginner Support says
Glad our guide was helpful
管理者
Theo says
Where do I find out the id of my navbar?
Can’t find it.
WPBeginner Support says
To do that you would use inspect element. We have a guide on how to properly use inspect element below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
管理者
Natasha T says
A lifesaver, can’t thank you enough.
WPBeginner Support says
You’re welcome
管理者
Tam says
Hello!
Thanks for your help! It worked like magic :D.
I learn a little CSS and tried to make my nav sticky from a free theme (GeneratePress) but didn’t work. (I tried “position: sticky;” in CSS), but thank your code that helped me to fix it
WPBeginner Support says
Glad our article was helpful
管理者
alexandre says
Just what I was looking for! Great plugin.Thank’s
WPBeginner Support says
You’re welcome, glad you found our recommendation helpful
管理者
Guy Bailey says
Many thanks for your help – just a small q; the background of my menu is transparent when scrolling down. Any quick fixes of tricks to add a solid colour behind it (white in our case)?
WPBeginner Support says
It would depend on how your menu is set up but you can use inspect element to find the object that you can set the background-color property to: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Manish says
Thank You. When Wpbeginner writes a blog post on a topic, it is bound to be helpful.
WPBeginner Support says
Glad our content has been helpful
管理者
Everest says
Thanks so much.
You made my day.
WPBeginner Support says
You’re welcome, glad we could help
管理者
Tony Chung says
The CSS code worked and I did have to add a margin to the header so the whole title would display. My menu bar stretches across the top but the menu buttons start at the left and stop in the middle. How do I move the buttons to be centered on the page?
WPBeginner Support says
That would vary from theme to theme the specifics, but you would normally need to modify the CSS. You can test changes using inspect element: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Chinedu says
Wow, This works perfectly.
Thank you
WPBeginner Support says
Glad our solution worked for you
管理者
Gillian Davies says
I have a list of books in a table. I have imported the images of their front covers into Media, now I want to have the images pop up as a viewer scrolls down the list. Similar to a row hover, but how do I do this in a table created in table maker?
Raul says
How can i make this fixed navigation menu scrollable?
So i used it for a sidebar but when the sidebar it is too long it doesn’t fit on the screen and i cant scroll it down.
Rushikesh Thawale says
Hello,
How did you write the code LIKE A CODE in this post? I mean how to show HTML codes like this in a post?
Thanks.
Tara says
You’ve probably found out by now, but for those searching, how to show your code on your post use the html character for the opening bracket on the html tags < ; without the space.
WPBeginner Support says
That is one method but for this, we’re using the second method in our article here: https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/
管理者
Cesar says
Great post! your CSS code works for me
dani says
Alain says
Very usefull !
thank you.
amin says
Also you can “z-index: 999xxxx” for logo or any element that you want put it on navbar
Sujith Reghu says
I want to know how to add a sticky menu inside a WordPress post or page. Like for a long post, the headings and sub-headings of the post itself to be presented in the sticky menu so that a reader can easily navigate from one section in the post to another. Thanks…
Zac says
thanks for the tutorial!
what i need is a little different, i need a ‘mini-menu’ to appear when you hover on the menu … so it doesn’t show until you hover .. like a drop down
if you could make this tutorial i would appreciate it.
amin says
you can use a mega-menu plugin or uber menu plugin, but you can make it without plugin, by css or jquery, like bootstrap3 menu