すべてのサイトトラフィックの半分以上がモバイル端末からのものです。ナビゲーションメニューがスマートフォンやタブレット端末でうまく動作しない場合、閲覧者の大部分がサイト内の移動方法を見つけるのに苦労することになります。
WordPressサイト構築の長年の経験により、サイトをモバイル・レスポンシブにすることの重要性を理解しています。WPBeginnerでは、常にこれを優先し、どの端末でもサイトが簡単にナビゲーションできるようにしています。
実際、私たちはモバイル・レスポンシブ・メニューをデザインし、小さな画面でもごちゃごちゃした印象を与えることなくぴったりとフィットさせ、スマートフォンやタブレットでのユーザー体験を向上させています。
このガイドでは、モバイル対応のレスポンシブWordPressメニューを簡単に作成する方法をご紹介します。
なぜモバイル対応のレスポンシブWordPressメニューを作るのか？
デザイン性の高いナビゲーションメニューは、訪問者がサイト内を移動する際の手助けとなります。しかし、デスクトップコンピューターで見栄えが良いからといって、自動的にモバイル画面やタブレットでも見栄えが良いとは限りません。
モバイルユーザーは、すべてのインターネットトラフィックの約58％を占めています。とはいえ、もしあなたのメニューがモバイル端末上で見栄えが悪かったり、正しく動作しなかったりすれば、ユーザーエクスペリエンスの低下により、オーディエンスの半分を失う危険性があります。
これでは、メールリストを増やし、売上を上げ、ビジネスを成長させるといった重要な目標を達成することが難しくなります。
それでは、スマートフォンやタブレットで見栄えのする、モバイル対応のレスポンシブ・メニューを作成する方法を見ていきましょう。以下のクイックリンクから、お好きな方法をお選びください。
方法1：モバイル対応のレスポンシブ・スライドパネルメニューを作成する
レスポンシブ・スライドパネルは、訪問者がトグルをタップまたはクリックすると画面上でスライドするナビゲーションメニューです。
こうすることで、メニューは常に手の届くところにありながら、初期設定では画面上のスペースを取らない。
スマートフォンやタブレットはデスクトップコンピューターに比べて画面が小さいため、これは特に重要である。
メニューが定数展開されていると、モバイルユーザーが端末のタッチスクリーンを使って誤ってリンクをクリックしてしまう可能性があります。そのため、スライドパネルはモバイル・レスポンシブ・メニューに適している。
モバイル対応のスライドパネルを追加する最も簡単な方法は、レスポンシブメニューを使用することです。
注： Responsive Menuには、追加テーマや条件ロジックなどの追加機能を備えたプレミアムバージョンがあります。しかし、このガイドでは、モバイル対応メニューを作成するために必要なものがすべて揃っている無料のプラグインを使用します。
まず、Responsive Menuプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のチュートリアルを参照してください。
有効化した後、プラグインを使用して以前に作成したWordPressメニューをカスタマイズすることができます。新規メニューを作成する必要がある場合は、WordPressでナビゲーションメニューを追加する方法についての初心者向けガイドをご覧ください。
一方、WordPressテーマにすでにモバイルメニューがビルトインされている場合は、そのメニューを非表示にできるように、メニューのCSSクラスを知っておく必要がある。
このステップをスキップすると、モバイルユーザーにはサイト上に2つのメニューが重なって表示されます。ステップバイステップの手順については、WordPressでモバイルメニューを非表示にする方法をご覧ください。
これで、WordPress管理サイドバーのレスポンシブメニュー ” メニューページに移動し、「新規メニューを作成」ボタンをクリックします。
メニューに使用できるいくつかの異なるモバイル・レスポンシブ・テーマが表示されます。
画像では「デフォルトテーマ」を使用していますが、お好きなテーマを使用することができます。決めたら「次へ」をクリックします。
メニューの名前を入力します。これはあくまで参考ですので、お好きなものをお使いください。
WordPressメニューのリンク」をクリックし、使用するメニューを選択します。
すでに述べたように、あなたのテーマにすでにビルトインのモバイルメニューがある場合は、そのCSSクラスを「Hide Theme Menu」フィールドに追加する必要があります。
プレミアムプラグインにアップグレードすると、いくつかの追加設定ができます。例えば、プロユーザーは特定のページや端末でメニューを非表示にすることができます。
メニューの設定に満足したら、「メニューを作成」をクリックします。
画面の右側にWordPressサイトのプレビューが表示され、左側にいくつかの設定が表示されます。
モバイルでのサイト表示を確認するには、画面左下のモバイルまたはタブレットのアイコンをクリックしてください。
モバイル端末でのメニューの表示や動作をカスタマイズするには、「モバイルメニュー」を選択します。
そして、『コンテナ』をクリックする。
ここには、さまざまな設定がある。
変更を加えると、ライブプレビューは自動的に更新されます。このことを念頭に置いて、モバイルメニューがどのように見えるかを監視できるようにメニューを展開することをお勧めします。これを行うには、単にメニューのトグルボタンをクリックします。
初期設定では、プラグインはタイトルと「さらにコンテンツを追加…」というテキストを追加します。
このテキストを自分のメッセージに置き換えたり、完全に削除することもできます。タイトルを編集するには、「タイトル」セクションをクリックして展開します。
タイトルテキスト」フィールドにメッセージを入力することができます。
タイトルにリンクを追加したり、アイコンフォントや画像を追加することもできます。
タイトルの見た目をカスタマイズするには、「スタイル」タブをクリックします。
ここでは、背景色、文字色、フォントサイズなどを 変更することができます。
タイトルテキストを表示したくない場合は、「タイトル」の横のトグルをクリックして無効化してください。
タイトルが必要不可欠でない場合、それを削除することで、モバイルナビゲーションメニューのリンクやその他のコンテンツのためのスペースを確保することができます。
ここにコンテンツを追加……」テキストを独自のメッセージに置き換えるには、クリックして「追加コンテンツ」エリアを展開します。
左側のメニューにある設定を使って、独自のテキストを入力したり、テキストの色を変更したり、テキストの配置を変更したりできるようになりました。
テキストを完全に削除するには、単にクリックしてトグルを無効化します。
この場合も、メニューの残りのコンテンツを表示するためのスペースを確保することができます。これは、一般的に画面が小さいスマートフォンやタブレットで特に有効です。
初期設定では、レスポンシブメニューはすべてのメニュー項目を個別リストとして表示します。しかし、これらのリンクを複数のカラムで表示したい場合もあります。
メニューのラベルが短い場合、メニューが乱雑に見えることなく、少ないスペースでより多くの項目を表示することができるので、これは効果的です。
さまざまなカラムレイアウトを試すには、「メニュー」セクションをクリックして展開する。
メニューコンテナのカラム」ドロップダウンを開き、使用するカラム数を選択できます。
この時点で、「更新必須」のテキストが表示されるかもしれません。このメッセージが表示されたら、クリックしてライブプレビューを新しいカラム設定で更新してください。
初期設定では、プラグインはWordPressメニューに検索バーを追加します。これは訪問者が興味深いコンテンツを見つけるのに役立ちますが、画面上の貴重なスペースを取ることにもなります。
もしご希望であれば、「検索」の隣にあるトグルを無効化することで、モバイルユーザー用の検索バーを削除することができます。
他にも設定できることがたくさんあるので、他のオプションに目を通すのに時間がかかるかもしれない。しかし、よくデザインされたモバイル対応メニューを作成するにはこれだけで十分です。
ナビゲーションメニューの設定に満足したら、「更新」をクリックします。
モバイル端末でWordPressブログにアクセスすると、新しいメニューが表示されます。また、デスクトップからWordPressサイトのモバイル版を表示することもできます。
方法2：モバイル対応のフルスクリーンレスポンシブメニューを作成する
もう一つのオプションは、フルスクリーンレスポンシブメニューを追加することです。これは、異なる画面サイズに自動的に調整されるメニューで、訪問者がどの端末を使用していても、ナビゲーションメニューは常に美しく表示されます。
空いているスペースをすべて使ってメニューが表示されるため、スマートフォンやタブレット端末では、どんなに小さな画面でもナビゲーションがしやすくなっている。
フルスクリーンメニューを作成する最も簡単な方法は、FullScreen Menuを使用することです。このプラグインを使用すると、モバイル端末専用のフルスクリーンメニューを作成することも、スマートフォン、タブレット、デスクトップコンピューターに同じメニューを表示することもできます。
まず最初にFullScreen Menuプラグインをインストールして有効化します。 詳しくはWordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、WordPressのメニューからフルスクリーンメニューオプションのページにアクセスし、以下のボックスにチェックを入れます：有効化したフルスクリーンメニュー」。
また、’管理ユーザーのみにメニューを表示する’ボックスをチェックすることをお勧めします。これにより、メニューの設定中に変更を確認することができますが、本番になるまで訪問者にはモバイルメニューが表示されません。
初期設定では、プラグインはすべての端末でフルスクリーンメニューを表示します。スマートフォンとタブレットのみにフルスクリーンメニューを表示したい場合は、「モバイルのみ」にチェックを入れてください。
その後、「デザイン／外観」タブをクリックして、メニューの外観を微調整することができます。
ここでは、フルスクリーンメニューの色、フォント、アニメーションの設定を選択できます。
これらの変更を行う場合、「初期背景メニュー」はメニューのトグルアイコンであることに注意してください。一方、「開いた背景メニュー」は、拡張されたフルスクリーンモバイルメニューの色です。
メニューの色を選んだら、「メニュー外観」セクションまでスクロールしてください。ここでは、メニューのフォントカラー、フォントファミリー、フォントサイズを変更することができます。
ただ、追加のフォントを読み込むと、WordPressサイトのパフォーマンスや速度に影響を与える可能性があることに注意してください。デスクトップコンピューターに比べて処理能力が低いモバイル端末では、必ずしも良い選択とは言えません。また、モバイル端末のインターネット接続環境が悪い場合、サイトの読み込みがさらに遅くなる可能性もあります。
アニメーションの設定」までスクロールする。
まず始めに、訪問者がトグルアイコンをクリックしたときにメニューがどのように展開するかを選択することができます。アニメーションタイプ “のドロップダウンメニューを開き、”上から下へ “や “左から右へ “などのオプションをリストから選択してください。
メニューのレイアウトに満足したら、「メニューコンテンツ」タブをクリックしてコンテンツを追加します。
ここで、’Select Menu’ドロップダウンを開き、フルスクリーンで表示したいメニューを選択する。
まだナビゲーションメニューを作成していない場合は、WordPressでナビゲーションメニューを追加する方法のガイドをご覧ください。
メニューに追加コンテンツを表示したい場合は、「フリーHTML / ショートコード」ボックスに追加することができます。これはミニページエディターとして機能するので、テキストを入力したり、書式を変更したり、箇条書きや番号付きリストを追加したりすることができます。
プライバシーポリシーページへのリンクを追加するチェックボックスもあります。
次に、WordPressのメニューにソーシャルメディアのアイコンを追加してみましょう。これらのアイコンは、フルスクリーンメニューの下部に一列に表示されます。
これらのアイコンを追加するには、単にクリックして「ソーシャルアイコン1」ボックスを展開します。
アイコンのタイトルを「Facebook」などと入力できるようになった。
その後、「ソーシャルアイコン」の隣にある矢印をクリックし、モバイル訪問者に表示したいアイコンを選択します。
最後に、「ソーシャルURL」フィールドに使用したいアドレスを入力する。
さらにアイコンを追加するには、「別のアイコンを追加」ボタンをクリックするだけです。
最後に、WordPressの検索バーを追加して、訪問者が探しているものを見つけやすくすることもできます。これを行うには、「検索バーを追加する」の隣にあるボックスをチェックするだけです。
初期設定では、プラグインは「Search something…」というメッセージを表示します。しかし、’検索入力プレースホルダー’フィールドに入力することで、カスタマイザーに置き換えることができます。
例えば、WooCommerceストアを運営しているのであれば、’Start shopping’や’Search for products’といったテキストを使用すると良いでしょう。
メニューの設定に満足したら、「変更を保存」ボタンをクリックします。
モバイル端末でサイトにアクセスすると、フルスクリーンメニューが表示されます。
WordPressのテーマカスタマイザーを使って、モバイル版のサイトをプレビューすることもできます。
ボーナス：ランディングページにモバイル対応メニューを追加する方法
ランディングページやセールスページを作成するのであれば、デスクトップと同様にモバイル端末でも見栄えのするデザインにしたいものです。
それを念頭に置いて、SeedProdを使用してページを作成することをお勧めします。これは最高のWordPressページビルダーで、300以上のプロがデザインしたテンプレートが付属しています。
SeedProdを使用してデザインを作成した後、SeedProdの既製のナブメニューブロックを使用してページにモバイルレスポンシブメニューを追加することができます。このブロックを使用すると、メニュー端末とデスクトップ用の区切りメニューを作成することができます。
このようにして、ユーザーの端末によって異なるレイアウトを使用したり、異なるリンクを表示したりすることもできる。
さらに詳しく知りたい方は、WordPressでカスタムナビゲーションメニューを追加する方法をご覧ください。
ナビブロックをデザインに追加したら、’Advanced’タブをクリックするだけです。
ここで、「端末の表示」セクションをクリックして展開します。
その後、「デスクトップで非表示」のトグルをクリックして有効化する。これで、このメニューはモバイル端末でのみ表示されるようになります。
左メニューの設定を使って、リンクを追加したり、メニューのレイアウトを変更したりできるようになりました。
この投稿が、モバイル対応のレスポンシブ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 Shan Shah
Can we do customization our self using css ?
WPBeginner Support
It would require more than just CSS and would not be beginner friendly which is why we recommend the methods in this article
管理者
Muhammad Hammad
Awesome guide. I was having a huge problem with the menu but it worked very well after I read this blogpost. Super detailed! Thank you wpbeginner team!
WPBeginner Support
Glad our guide was helpful
管理者
THANKGOD JONATHAN
Saved by this! My menu looked like a mess on phones. This guide helped me whip it into shape – now it’s sleek & user-friendly. Happy visitors, happy me!
WPBeginner Support
Glad our guide was able to help
管理者
Ahmed Omar
A fantastic guide on crafting a mobile-ready responsive WordPress menu!
Your step-by-step instructions, especially the emphasis on media queries and flexible layouts, make it easy to ensure a seamless mobile experience.
One technical tip: incorporating touch-friendly gestures can add a polished feel to the navigation.
Thanks for the insights – my site’s mobile menu is now looking sleek and user-friendly!
WPBeginner Support
Happy to hear!
管理者
Shawn
Does it support multi menu level?
WPBeginner Support
The plugin does allow a dropdown for multi-level menus
管理者
Maja
What is “20160909” in wp_enqueue_script?
WPBeginner Support
It is to set a version number to help the menu avoid possible caching issues
管理者
Ahsan
Hi there, i did number 4 method, it’s working but one issue on the mobile screen is that, when i refresh the page menu image appears and when i click on the menu image; side navbar open but the menu image gone.
after refreshing the page it again appears.
please help
WPBeginner Support
It sounds like the caching on your site could be causing you problems. If you clear the cache on your site that should help fix the problem.
管理者
Boris Béalu
I did your number 4 method and it worked great. Thank you. I do have a question, how could I have a background with opacity in all the rest of the site? Thank you.
Boris Béalu
I did your number 4 method and it worked great. Thank you. I do have 2 questions, how do I change the icon when the menu is open? Like the others menus in your article, an icon with a cross.
And how could I have a background with opacity in all the rest of the site? Thank you, Boris.
Amy
Is there a way to have one menu on desktop and another one for mobile in word press?
Annika
Hello!
I was looking at this tutorial on responsive mobile menu and see that the wordpress responsive hamburger menu is still left in the background behind the Responsive Menu plugin. How do I get rid of that one? I’m using ShiftNav and have the same issue.
I’m a wordpress beginner and have used many tutorials, and always seem to come back to your tutorials, so thank your for the simple explanations!
Bodo
I’m using method 3 and have carefully pasted the js and php quotes into my theme, but on clicking the menu button nothing happens. Please help
All the best,
Bodo
Jill
I’m using a child theme of Thematic. There’s no reference to the primary nav in the header.php file, so I created a new menu called “mobile-menu” and wrapped your code around that in the header.php file. Unfortunately, it’s not working. I see the hamburger icon but nothing happens when I tap it on my iPhone. Any ideas?
edwin
my searchdropdown wont work on mobile devices it closes inmediately pull my hair out:
anny idea;s?
Juan
this blog is amazing, thanks for the contribution.
Matthew Jacobson
I did your number 4 method and it worked great. Thank you. I do have a question, how do I change the mobile menu from a overlay menu, like the one in the example, to a push menu? In other words once I click the icon I want it to push my site to the right so I can see the site as well as the menu?
Thank you
L E Johns
The plugin you recommend requires PHP 5.4. How does one upgrade to whatever PHP 5.4 is? Thank you.
WPBeginner Support
You need to ask your WordPress hosting provider to upgrade your PHP version. If they don’t then you need to move to a better WordPress hosting provider.
管理者
Dave Ball
Re: Responsive Menu plugin — how do you find out the CSS class of your current non-responsive menu?
WPBeginner Support
Use the inspect element tool in your browser. Right click on your menu and then select Inspect from browser menu. You will see the HTML code and as you move your mouse to the HTML code you will see which area it affects in the preview window.
管理者
Fredda
Then what? I found the element but when I copy and paste it in the appropriate space the menu still shows.
WPBeginner Support
If you are selecting the element for the menu then you would want to reach out to the plugin’s support for their recommendations.
kplalushi
why wpbeginner is not responsive?
Editorial Staff
New design is coming soon
管理者