WordPressにフルスクリーンレスポンシブメニューを追加する方法

メニューは、訪問者がWordPressウェブサイトをナビゲートし、より多くの投稿やページを見つけるのに役立つために不可欠です。フルスクリーンレスポンシブメニューは、モバイルユーザー向けにウェブサイトをデザインする際に特に役立ちます。

ユーザーがハンバーガーアイコンをクリックまたはタップすると、美しいアニメーションを使用してウェブサイトのメニューのフルスクリーンオーバーレイが表示されます。

私たちは、どのタイプのメニューが最も良い結果をもたらすかを確認するために、独自のウェブサイトでいくつかの異なるメニュータイプを試しました。この記事では、コードを書かずにWordPressにフルスクリーンレスポンシブメニューを追加する方法を紹介します。

WordPressでフルスクリーンレスポンシブメニューを追加する理由

デザイン性の高いメニューは、訪問者がWordPressウェブサイトやWooCommerceストア内を移動するのに役立ちます。しかし、スマートフォンの小さな画面で操作する際に、ヘッダーの標準メニューをタップするのは難しい場合があります。

多くのウェブサイトでは、すでにデスクトップよりもモバイルからの訪問者の方が多いです。そのため、WordPressサイトのモバイル版をプレビューして、モバイルデバイスでどのように表示されるかを確認することをお勧めします。

フルスクリーンレスポンシブモバイルメニューは、さまざまな画面サイズに自動的に調整されます。メニューには利用可能なすべてのスペースが使用されるため、スマートフォンやタブレットでのナビゲーションが容易になります。

WordPressでフルスクリーンレスポンシブメニューを追加する方法を見てみましょう。

WordPressにフルスクリーンレスポンシブメニューを追加する方法

まず最初に行う必要があるのは、FullScreen Menuプラグインをインストールして有効化することです。詳細については、初心者向けWordPressプラグインのインストール方法ステップバイステップガイドをご覧ください。

有効化したら、WordPress管理メニューのフルスクリーンメニューオプションページに移動して、プラグイン設定を構成してください。自動的に「設定」タブに移動します。

メニューを有効にするには、「アニメーションフルスクリーンメニューを有効にする」チェックボックスをオンにすることから始めます。

最初は「管理者ユーザーのみにメニューを表示する」のチェックボックスも確認することをお勧めします。これにより、メニューを設定しながら変更を確認できますが、サイトの訪問者は完了するまで表示できません。

作業が完了したら、そのボックスのチェックを外すのを忘れないでください。

その他の設定では、モバイルデバイスでのみメニューを表示したり、クリックまたはスクロールでメニューを閉じたり、特定のページでメニューを非表示にしたりできます。この例ではこれらの設定はチェックしませんが、ご自身のサイトに合わせて自由にカスタマイズしてください。

フルスクリーンメニューのデザインと外観

次に、メニューのデザインをカスタマイズします。幸いなことに、このメニュープラグインでは、カスタムCSSを記述する必要なく、これを行うことができます。

メニューをカスタマイズするには、ページ上部の「デザイン/外観」タブをクリックする必要があります。このページでは、メニューの色、フォント、および アニメーション 設定を選択できます。

ページの先頭には、2つのカラー設定があります。最初の色は、ハンバーガーメニューアイコン用です。これはウェブサイトの右上隅に表示されます。訪問者がそれをクリックまたはタップすると、フルスクリーンメニューが表示または非表示になります。

2番目のカラー設定は、メニューの背景用です。

各ボックスをクリックすると、カラーパレットが表示されます。使用したい色をクリックするか、その16進数コードを入力できます。

メニューの色を選択したら、ページを下にスクロールして「フォント/外観」セクションに進みます。ここでは、メニューテキストに使用されるフォントの色、フォントファミリー、およびフォントサイズを選択できます。

このチュートリアルでは、テーマのフォントを使用するデフォルト設定のままにします。この設定は、ウェブサイトのデザインと一致するため推奨されます。また、追加のフォントを読み込むと、WordPressサイトのパフォーマンスと速度に影響を与える可能性があります。

特定のページに横長のサイドメニューを表示したり、メインメニューの高さが足りない場合にスクロールさせたりする設定もあります。このチュートリアルでは、これらの設定はチェックを外したままにしますが、ご自身の WordPressブログ やウェブサイトで自由に試してみてください。

その後、「アニメーション設定」セクションまでスクロールします。ここで、2つの主要な設定を調整できます。

これらの最初の項目は「アニメーションタイプ」です。これにより、メニューがアクティブになったときのアニメーションの方向を選択できます。上から下、左から右、右から左から選択できます。

2番目の設定は、メニュー項目にマウスカーソルを合わせたときのエフェクトです。選択肢は、パディングライン、背景色、および丸い境界線付きの背景色です。

フルスクリーンメニューコンテンツ

最後に、ページの上部に戻り、「Menu Content」タブをクリックする必要があります。ここで、フルスクリーンメニューに表示されるWordPressメニューを選択できます。

上部にある「メニューを選択」の隣で、ドロップダウンリストからメニューを選択する必要があります。まだナビゲーションメニューを作成していない場合は、WordPressにナビゲーションメニューを追加する方法に関するガイドをご覧ください。

メニュー画面にさらにコンテンツを表示したい場合は、次のセクション「Free HTML / Shortcodes」に追加できます。エディタボックスにコンテンツを入力し、メディアファイルを自由に追加してください。このコンテンツはメニューの下に表示されます。

プライバシーポリシーページへのリンクを含めるチェックボックスもあります。多くのウェブサイト所有者は、メインメニューではなくフッターに追加することを好みます。

次に、ソーシャルアイコンをメニュー項目として追加したい場合があります。これらは、フルスクリーンメニューの下部に横一列に表示されます。

それらを追加するには、単に「ソーシャルアイコン」セクションまでスクロールダウンし、アイコンのタイトル（例：「Facebook」）を入力します。その後、適切なアイコンを選択し、ソーシャルページのURLを入力します。

「別のアイコンを追加」ボタンをクリックすると、さらにアイコンを追加できます。

最後に、ネイティブのWordPress検索バーをレスポンシブメニューの上部に追加できます。「メニューコンテンツ」ページの最下部までスクロールし、「検索バーを追加？」ボックスをチェックする必要があります。必要であれば、プレースホルダーテキストを入力することもできます。

最後に、「変更を保存」ボタンをクリックして設定を保存します。

これで、ウェブサイトにアクセスして、フルスクリーンレスポンシブメニューが機能していることを確認できます。ブラウザのサイズを変更して、メニューがさまざまな画面サイズでどのように動作するかを確認することをお勧めします。

デモウェブサイトでの表示は以下の通りです。

フルスクリーンメニューに満足したら、**フルスクリーンメニューオプション**に戻り、「管理者ユーザーのみにメニューを表示」のチェックを外すのを忘れないでください。「変更を保存」ボタンをクリックすると、ウェブサイトの訪問者がメニューにアクセスできるようになります。

この記事が、WordPressサイトにフルスクリーンレスポンシブメニューを追加する方法を学ぶのに役立ったことを願っています。また、WordPressサイトにメガメニューを追加する方法や、WordPressテーマにスライドパネルメニューを追加する方法についても学びたいかもしれません。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。