WordPressのプラグインでメニューを自在に作成しよう！

Webサイトではメニューの役割がとても重要になります。サイトを訪れたユーザーを的確にナビゲーションすることで、サイトの回遊率やコンバージョンを高めることができるのです。そのため、デザインはもちろん、どんな項目を入れるか、どのページにリンクするかは大切なポイントになります。WordPressでサイトを運営していて、メニューの項目を増やしたい、デザインを変えたいなど、自在にカスタマイズできないかと思ったことのある人も多いのではないでしょうか。この記事では、プラグインを使ってメニューを自在に作成する方法を紹介します。

プラグインを使用してメニューを作成する方法

WordPressでメニューを自由にカスタマイズするのは簡単ではありません。WordPressの管理画面からメニューの項目は設定できますが、項目の上限数を増やしたり、デザインを変えたりする場合には、PHPやCSSに関するスキルが必要になります。しかし、プラグインをうまく活用すれば、専門的なスキルがなくても、メニューを自在にカスタマイズすることが可能です。WordPressには、メニューを簡単に作成できるプラグインが多数あります。これらのプラグインを使えば、思いどおりのメニューを作成できるでしょう。ただし、それぞれのプラグインによって、作成方法やできることも違ってきますので、しっかりと確認しておくことが必要です。

メニューを作成する前に考えておくべきこと

メニューを作成する際は、いきなり作成せずに、どんなメニューにするか、しっかりと考えることが必要です。一般的に、メニューはヘッダーに設置する「グローバルメニュー」とフッターに設置する「フッターメニュー」があります。特に重要になるのがグローバルメニューで、多くのユーザーはこのメニューを見て、どんな情報のあるサイトであるかを判断しているのです。また、どのページに移動しても、常に上部に表示されていますので、ユーザーを効率的にナビゲーションする役割を果たします。

グローバルメニューの項目の数は限られますので、特にアピールしたいページや会社案内ページなどにリンクするのが一般的です。フッターメニューは、各ページの一番下に表示されるメニューで、ページを最後まで見なければ目にすることはありません。コンテンツを最後まで読んだユーザーをナビゲートしたり、利用規約やプライバシーポリシーなどを掲載したりするケースが多いです。グローバルメニューの場合、設置する項目の数は、多くても6～7つがよいでしょう。

どの項目を掲載するかを決めるためには、まずサイト内の情報を整理してグループ化します。たとえば、「商品A」「商品B」「商品C」のようなページがあったら、「商品一覧」のグループにまとめることができるでしょう。すると、メニューに商品一覧の項目を設置すれば、ユーザーを効率的にナビゲートできるようになります。また、メニューを作成する際に重要になるのが、クリックすると、どんな情報を見られるのかが一目でわかるようにすることです。そのため、メニューの項目名は誰が見てもわかるように簡潔にまとめるようにしましょう。

【おすすめプラグイン】1.Elementor

「Elementor」は、ページを簡単に作成できるプラグインです。画像やテキストをドラッグ＆ドロップして好きな場所に配置するだけなので、直感的に作業することができます。他のプラグインよりも、スピード感のある操作ができるのが魅力です。用意された100種類以上のテンプレートに、商品説明やお客様の声など目的別に設計された300以上のブロックを配置するだけで、簡単にページレイアウトを作ることができます。テンプレートのデザイン性も高いので、デザイン力に自信がない人でも、プロレベルのページを作ることができます。専門的なスキルがないと難しいページレイアウトも、ドラッグ＆ドロップするだけなので簡単です。

また、付属している専用のツールセットを利用すれば、スマホ対応のレスポンシブデザインにすることも可能です。Elementorでページを作成する手順は次のようになります。Elementorをインストールして有効化すると、WordPress管理画面の左カラム下に「Elementor」と表示されます。固定ページから「新規追加」を選択して、タイトル、パーマリンク、テンプレートを決め、「下書きとして保存」する手順です。そのうえで、下書き保存した記事の「Elementorで編集」をクリックすると、ドラッグ＆ドロップするだけで、ページ作成ができるようになります。

【おすすめプラグイン】2.Header Footer Elementor

「Header Footer Elementor」は、ドラッグ＆ドロップするだけで、ヘッダーとフッターが作成できるプラグインです。WordPressでヘッダーやフッターを自由にカスタマイズするのは簡単ではありません。しかし、Header Footer Elementorを利用すれば、思いどおりにカスタマイズすることができます。さまざまなエレメントが用意されており、それをドラッグ＆ドロップするだけなので、専門的な知識も必要ありません。Header Footer Elementorで、ヘッダーを作成する手順は次のとおりです。Header Footer Elementorをインストールして有効化すると、WordPress管理画面の「外観」に「Header Footer Builder」と表示されます。

ここをクリックして「新規追加」を選択し、ヘッダーまたはフッターを選び、テンプレートに名前をつけます。そのうえで、「Elementorで編集」をクリックして、テンプレートを作成する手順です。左カラムにエレメントが表示されていますので、これを右側のインターフェースにドラッグ＆ドロップして、テンプレートを作成していきます。テンプレートが完成したら、「更新」ボタンをクリックしましょう。すると、作成したテンプレートがヘッダーまたはフッターとして自動的にWordPressの各ページに適用されます。

【おすすめプラグイン】3.NavMenu Addon For Elementor

「NavMenu Addon For Elementor」は、 Elementorでメニューを扱えるようにするためのプラグインです。Elementorにアドオンすれば、Elementor上でドラッグ＆ドロップするだけでメニューを作成できます。ナビゲーションメニュー、サイトブランドオプション、検索ボックス、MegaMenu、フルスクリーンメニューオーバーレイなどを設置できますが、現在はMegaMenuとフルスクリーンメニューオーバーレイは、編集モードでは表示されません。NavMenu Addon For Elementorをインストールして有効化すると、Elementorの「Edit Nav Menu」でメニューが作成できるようになります。

「Layout」の「Menu」で、グローバルメニューやフッターメニュー、サイドバーメニューなど、作成するメニューを選択する手順です。ここで、メニューを作成し、さらに表示位置やマウスオン時の効果などを設定します。デザインのカスタマイズ性も高く、画像の上にメニューを表示させたり、メニューの形を角丸にしたりするようなことも簡単にできます。面倒なメニュー幅の調整などもドラッグするだけで簡単に行うことが可能です。下層メニューを設定してドロップダウン式で表示することもできます。また、スマートフォンとタブレット用にモバイルメニューを設定できるのも、このプラグインの魅力です。

【おすすめプラグイン】4.Anywhere Elementor Pro

「Anywhere Elementor Pro」は、投稿ページや固定ページ、商品ページなどのレイアウトをElementorで作成できるようにするためのプラグインです。「投稿タイトル」「投稿内容」「もっと読むボタン」「検索フォーム」など、さまざまなウィジェットが用意されており、それを配置するだけで、ページのレイアウトが簡単にできあがります。ドラッグ＆ドロップするだけで作成できるので、専門的なスキルも必要ありません。404ページや検索ページなどのレイアウトもAnywhere Elementor Proを使えば、簡単にカスタマイズできます。

Anywhere Elementor Proをインストールして有効化すると、WordPress管理画面の左カラムに「AE Templates」と表示されているのを確認できるでしょう。ここをクリックして、テンプレートの編集画面に進み、テンプレートの名前をつけたうえで「Edit with Elementor」をクリックすると、Anywhere Elementor Proの画面が開きます。左カラムに「イメージ」「投稿タイトル」「ボタン」など、さまざまなウィジェットが表示されていますので、これをドラッグ＆ドロップして、レイアウトを作成していきます。動画やスライダーなども簡単に設置できますので、Anywhere Elementor Proを利用すると、オリジナル性の高いページが作成可能です。

【おすすめプラグイン】5.Max Mega Menu

「Max Mega Menu」は、テーマ本来のグローバルナビメニューにメガメニューを出せるようにするプラグインです。メガメニューとは、グローバルナビメニューにマウスオンすると、スペースいっぱいに新たなメニューを表示させるものです。商品画像やアイコンを表示して魅力的に見せたり、多層構造のメニューをわかりやすく見せたりすることができます。スペースが広くとれるため、メニューに掲載できる情報を一気に増やせるメリットがあります。また、ユーザビリティを向上させ、ユーザーを目的のページに導くのにも効果的です。

Max Mega Menuでメガメニューを作成する手順は下記のとおりです。Max Mega Menuをインストールして有効化すると、WordPress管理画面の「外観」に「Max Mega Menu」と表示されます。ここをクリックして、Max Mega Menuの設定画面を開きます。「Menu Themes」タブを選択し、「create a new theme」をクリックしてメニューを作成しましょう。「Responsive」で、ボタン化するポイントとボタン化したときに表示する文字を入力し、レスポンシブ設定を行います。「Menu Bar」で、メニューバーの背景色、メニュー内側の余白、メニューバーの角丸などの設定が可能です。

「Top Level Menu Items」で、各メニュー項目の背景色、マウスオン時の色、各メニュー間の間隔、各メニュー間の高さを設定し、「Font」で文字の大きさと色を設定します。次に、「外観」の「メニュー」に移動し、左側の「Mega Menu Settings」で「Enable」のボックスにチェックを入れ、作成したMax Mega Menuテーマを選択したうえで「保存」をクリックして終了です。アイコンを設定したい場合は、メニュー項目にマウスを重ねると表示される「Mega Menu」ボタンをクリックすれば、アイコンの一覧が表示されます。

【おすすめプラグイン】6.Responsive Menu

「Responsive Menu」は、簡単にモバイルメニューを設置できるプラグインです。スマートフォンのユーザーも増え、サイトのスマホ最適化は見逃せないものになっています。しかし、パソコン向けの設定で手一杯で、なかなかスマホメニューの最適化まで対応できていない人も多いのではないでしょうか。Responsive Menuを利用すれば、アコーディオン式のモバイルメニューを簡単に作成できます。ただし、テーマによっては互換性の関係で表示できない可能性もあるので、事前に確認しておきましょう。

Responsive Menuでモバイルメニューを作成する手順は下記のようになります。Responsive Menuをインストールして有効化すると、WordPressの管理画面の左カラム下に「WPR Menu」と表示されているのを確認できるでしょう。ここをクリックして、「Initial Setup」のBreakpointでレスポンシブメニューを表示させるサイトの最大幅を指定し、Menu to useで設定してあるメニューセットのなかからどれを使うのかを指定します。

次に「Container」のSizingでメニュー幅を設定しますが、レスポンシブデザインなので、画面に対して何％で表示するか指定するのがよいでしょう。さらに、「Menu」のStylingで、フォントのサイズやメニューの高さなどを指定してモバイルメニューを完成させます。Responsive Menuは無料で利用できますが、14.99ドルの有料版にすると画面上部に追従するヘッダーバーの設置、タッチジェスチャー、ページをスクロールするとメニューが閉じる、などの機能を利用することができます。

【おすすめプラグイン】7.Menu Image

「Menu Image」は、メニューに画像を載せることができるプラグインです。menuファイルを編集せずに、管理画面からの設定で手軽に画像を挿入できるのがメリットです。一般的なテーマでは、メニューに表示できるのはテキストのみで、画像を表示させることはできません。しかし、Menu Imageを利用すれば、簡単にメニューに画像を載せることができます。Menu Imageでメニューに画像を載せる手順は次のとおりです。Menu Imageをインストールして有効化すると、「メニューを編集」画面のメニュー構造のなかにアイコンの設定が追加されます。

ここで、アイコンとして使用する画像を登録し、画像サイズやテキストを表示する位置を指定しましょう。また、画像の表示については、通常の状態とマウスがオンしたhover状態の2種類について指定できます。違和感のないすっきりしたメニューにするためには、背景を透過したPNGやGIF形式の画像を使用するのがおすすめです。もし、手元に使用する画像がない場合は、無料の素材サイトで探すとよいでしょう。きっとイメージにあった画像が見つかります。ただし、素材によっては商用利用を禁じている場合もありますので、利用規約をしっかり確認したうえで使用しましょう。

まとめ

メニューをカスタマイズするだけで、ユーザーの導線が変わり、サイトの回遊率が大きく向上することもあります。ユーザーが探している情報を見つけやすいグローバルメニューを作成しましょう。今回紹介したプラグインを使って、ドロップダウン式のメニューやメガメニューを設置すれば、見てほしいページに効率的に誘導できるようになります。WordPressのプラグインには、今回紹介したもの以外にも、さまざまな機能をもったプラグインがあります。