WordPressサイトにスライドパネルメニューを追加すると、特にモバイル端末でのナビゲーションが向上します。この機能は、ユーザーがメニューアイコンをタップしたときにスムーズで美しいアニメーションを提供します。
レスポンシブメニューは、サイト訪問者がスマホやタブレットで簡単にサイトを閲覧できるようにします。シームレスなブラウジング体験を保証し、閲覧者の興味を引き付けます。
この投稿では、WordPressテーマにスライドパネルメニューを追加する方法を紹介する。すべて、コードを書かずにできる。
なぜWordPressテーマでスライドパネルメニューを追加するのか？
よくデザインされたメニューは、訪問者がWordPressサイト内を案内するのに役立ちます。訪問者の多くはモバイル端末を使用しているため、WordPressサイトのモバイルバージョンをプレビューして、ナビゲーションメニューが小さな画面でどのように見えるかを確認することが重要です。
幸いなことに、多くのWordPressテーマには、小さな画面で表示したときに自動的にモバイルフレンドリーなメニューを表示するビルトインスタイルが付属しています。
しかし、モバイルナビゲーションをさらにカスタマイズし、フルスクリーンレスポンシブメニューやアニメーションスライドパネルメニューを追加したい場合もあるでしょう。
それを念頭に置いて、WordPressテーマでスライドパネルメニューを追加する方法を見てみましょう。
WordPressテーマでスライドパネルメニューを追加する方法
最初に行う必要があるのは、レスポンシブメニュープラグインをインストールして有効化することです。必要な場合は、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。
レスポンシブメニュープラグインには、追加テーマや条件ロジックなどの追加機能を備えたプレミアムバージョンがあります。しかし、このチュートリアルでは無料のプラグインを使用します。
有効化したら、WordPressダッシュボードからレスポンシブメニュー ” メニューに移動しましょう。画面の上部にある「新規メニューを作成」ボタンをクリックします。
レスポンシブメニューに使用できる4つのテーマが表示されます。追加テーマは購入可能です。
このチュートリアルでは、自動的に選択されたテーマを使用します。次へ」ボタンをクリックします。
メニュー設定」ページが表示されます。
ここで、レスポンシブメニューの名前を入力し、パネルに表示するWordPressメニューを選択します。例えば、私たちは「ナビゲーション」メニューを選択しました。
新規メニューを作成する必要がある場合は、WordPressでナビゲーションメニューを追加する方法をご覧ください。
WordPressテーマに付属している通常のメニューを非表示にして、ユーザーに新しいスライドパネルメニューだけを表示させることもできます。これは、「テーマメニューを非表示」フィールドにCSSコードを入力することで行います。
さらに詳しく知りたい場合は、「さらに詳しく」のリンクをクリックしてください。
注：Proバージョンのユーザーにはいくつかの追加設定があります。例えば、Proユーザーはメニューを表示する端末とページを選択することができます。
設定に満足したら、ページの一番下にある「メニューを作成」ボタンをクリックしてください。これでメニューのカスタマイザーが完了するページに移動します。
画面の右側にサイトのプレビューが表示され、下部にスマホ、タブレット、デスクトップ表示を切り替えるボタンがあります。左側にはカスタマイズオプションもあります。
メニューの上にテキストが表示されていることに気づくかもしれません。これはメニューのタイトルと、プラグインが「追加コンテンツ」と呼んでいるテキストの行です。
ページ左のメニューから「モバイルメニュー」をクリックし、「コンテナ」をクリックすると、テキストを編集したり非表示にしたりすることができる。
さらに、「タイトルテキスト」フィールドには、「メインメニュー」や「ナビゲーション」など、好きなものを入力することができます。タイトルを表示したくない場合は、「タイトル」スイッチをオフの位置にスライドするだけです。
その後、「追加コンテンツ」設定までスクロールダウンします。
ここから、この設定をオフに切り替えたり、代替コンテンツを入力したりすることができる。下のスクリーンショットでは、このスイッチがオフになっているため、「ここにコンテンツを追加…」という文字が非表示になっていることがわかります。
メニューの設定に満足したら、ページ下部の「更新」ボタンをクリックして設定を保存することを確認しよう。
Responsive Menuプラグインには、スライドパネルメニューの動作や外観を変更するためのオプションが他にも多数用意されています。プラグインの設定ページでこれらのオプションを調べ、必要に応じて調整することができます。
さあ、あなたのサイトにアクセスして、メニューの動きを見てみましょう。これがデモサイトでの見え方です。現在のページがメニューにある場合、そのページがカラーバンドでハイライトされることに注意してください。
エキスパートヒント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.
Mohammad Kashif
Awesome!
Can i add close button in the popout?
Luke Marshall
I’m still waiting on a support ticket reply from you guys regarding this exact need! the one you offer is on the right side only with no apparent way to change it to the left, I’m glad I’ve found this.
Cynthia
Change the function “left” to “right” in the two spots it is used in the function code.
Ru
Do you have demo for this?
I want to check it before
Daniel Jarosz
clean & simple, thank You for this tutt!
Ann
Hi, this code works perfectly when I run my website locally but not once it’s live. Is there any possible explanation to this? I updated the image links not sure what else needs to be updated as the folders have not changed.
Madiha
its not working on my site plz visit and tell the solution
http://www.dailynewscompany.com
Mattia
Hi, interesting article… Do you have a DEMO of this, or a URL to an online site in which you implemented it? It would be interesting to see it in a real case, before trying to use it! Many thanks
Jim
Is it possible to show how the script could be modified so the close event can be triggered by clicking anywhere else but on the navigation?
In other words, so the user doesn’t need to just click on the toggle menu icon to close the navigation sidebar?
Thanks.
Karl
I am searching high and low for a plugin or the ability to implement the type of menu you have currently running at the top of your page. You have a “Play” button on the right side of your header. Upon pressing it a content area slides out from your header section. I really want to use this type of menu in my site. If you could point me even to a link where this type of menu is explained I’ll take it from there and thanks. This is an awesome tutorial!
WPBeginner Support
Karl you can right click on the play button and select inspect element and study our source code. We will also try to cover it soon at WPBeginner as a tutorial.
管理者
Shubham Dubey
Sorry for replying here,(Comments is not available)
Hey! I’m using Genesis framework, with its child theme, i’m unable to find header.php file there,
i just copied the header.php file from genesis to my child themes folder, but after opening header.php file didn’t found any lines
hOW TO DO THIS WITH CHILD THEMES, PLEASE EXPLAIN.
Jim
Excellent guide. I’m almost there with a test implementation, however I’m wondering…can I use a relative path in the sidepanel.js file instead of the absolute path?
I’ve tried to do so but I cannot figure it out. Should the relative path be relative to the html file calling the javascript?
Thanks
krish
It’s good and useful content. The screenshot and coding easily understand and apply to my website. Good job man!!!
Håkon Stillingen
Interesting article. How would I go about replacing default header in Genesis Framework?