WordPressでメニューを自由にカスタマイズしたい！

サイトを訪れたユーザーをうまくナビゲートするためには、メニューが重要になります。ユーザビリティの高いサイトにするためには、目的のページをすぐに見つけることができ、少ないクリックでたどり着けるようにすることが必要です。WordPressでサイトを運営している人のなかには、メニューをもっと自由にカスタマイズしたいと考えている人も多いのではないでしょうか。この記事ではメニューのカスタマイズに関する悩みや具体的なカスタマイズ方法などについて詳しく紹介します。

メニューをカスタマイズする際の悩みとは

メニューのカスタマイズに関する悩みとしては、主に下記のようなものがあります。まず、テーマによってはメニューの変更に対応していないことも珍しくありません。デザインや機能が気に入ってテーマを変えてみたが、メニューをカスタマイズできずに戸惑ってしまうようなこともあるでしょう。メニューの数を無理に増やそうとすると、ページ全体のレイアウトが崩れてしまうようなこともあります。メニューを階層化したくても階層分けできないのも、メニューのカスタマイズに関して多い悩みです。ページの量が増えてくると、メニューを階層分けしたほうが見やすくなります。

たとえば、一口に会社案内といっても、会社概要や役員紹介、会社沿革、支店所在地など、さまざまな情報があるのです。これを階層化すれば、ユーザーも探している情報をすぐに見つけられるようになり、ユーザビリティの高いサイトを実現できます。また、自由にデザインを変更できないことも、メニューのカスタマイズに関して多い悩みです。色や形を変えたい、フォントの大きさを変えたいと思っても、CSSのスキルがなければ変更できないケースも多いのです。

メニューをカスタマイズするメリット

メニューをカスタマイズするメリットとしては、第一にユーザビリティが高まることが挙げられます。ユーザビリティの高いサイトはユーザーが探している情報を少ないクリックで見つけることができるため、サイト内の回遊率が高くなり、滞在時間も長くなります。しかし、ユーザビリティの良くないサイトは、ユーザーが必要な情報を見つけられずにイライラして、サイトをすぐに離脱してしまうのです。ユーザビリティの良し悪しはコンバージョンにも影響しますので、見逃すことができません。

アクセス数を増やすことにつながるのも、メニューをカスタマイズするメリットです。メニューをカスタマイズして必要な情報を見つけやすくなれば、リピート訪問するユーザーも増えてくるでしょう。ブックマークやバックリンクするユーザーも増えて、Googleなど検索エンジンの評価を上げることにもつながります。また、自身もサイトを扱いやすくなるというメリットもあります。ページが階層化されて整理されると、どのページにどんな情報があるのかをすぐに把握できるので、サイト全体を管理しやすくなるのです。

メニューをカスタマイズする方法

WordPressのメニューを変更するための一般的な方法は、次のようになります。WordPressの管理画面にアクセスして、まず「外観」の「メニュー」をクリックしましょう。メニューを追加する場合は、「新規メニューを作成」をクリックして、任意のメニュー名を入力し「メニューを作成」をクリックします。表示された「メニュー構造」に左カラムのメニュー項目を追加すると、その項目がメニューに表示されます。

メニューに追加できる項目は「固定ページ」「リンク」「カテゴリー」のなかから選ぶことが可能です。項目の追加が完了したら、下部に表示されている「メニュー設定」で、「メインメニュー」などを選択し、メニューを表示させる位置を決めて、「メニューを保存」ボタンをクリックします。メニューの並び替えの手順は下記のとおりです。メニュー編集画面を開いて、メニュー構造内の項目をドラッグ＆ドロップすると、その並びどおりにメニューが表示されます。

メニューを階層化して、ドロップダウンメニューにすることもできます。メニュー編集画面を開いて、構造内の項目の直下に追加したい項目をドラッグ＆ドロップするとサブアイテムとして下階層に表示されるのです。メニューの項目を削除したい場合は、メニュー構造内の削除したい項目右側の下向きの三角をクリックします。すると、左下に「削除」と表示されますので、これをクリックすると、メニューからその項目が削除されます。

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

WordPressサイトは、プラグインを使ってメニューをカスタマイズすることができます。「Elementor」は、ヘッダーメニューやフッターメニューをユニークにカスタマイズできるプラグインです。メニューをカスタマイズするのが難しいテーマであっても、Elementorを使えば簡単にカスタマイズできるようになります。使い方も簡単で、ドラッグ＆ドロップで画像やテキストを任意の場所に入れるだけなので、直感的に作業できます。

メニューのカスタマイズで困るのが、各メニュー項目の幅の調整ですが、Elementorならドラッグするだけで、好みの幅に変更可能です。また、レスポンシブデザインにも対応しているため、スマートフォンやタブレットなど、デバイスによってメニューを変更することもできます。Elementorでメニューをカスタマイズする手順は次のとおりです。Elementorをインストールして有効化すると、WordPressの管理画面の左カラム下に「Elementor」と表示されます。

固定ページから「新規追加」を選択して、タイトル、パーマリンク、テンプレートを決め、「下書きとして保存」します。そのうえで、下書き保存した記事の「Elementorで編集」をクリックする手順です。これで、ドラッグ＆ドロップするだけで、自由にメニューをカスタマイズできるようになります。なお、Elementorでメニューを表示させるためには、アドオンプラグイン「Header Footer Elementor」と「NavMenu Addon For Elementor」も必要になりますので、合わせてインストールしておきましょう。

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

「Responsive Menu」は、モバイルメニューをカスタマイズできるプラグインです。スマホサイトなどでは、メニューの数が増えてくると、メニューだけで画面を占めてしまい見にくくなってしまいます。Responsive Menuを利用すれば、アコーディオン形式のメニューが設置できるので、スマホサイトのユーザビリティ向上にも役立ちます。Responsive Menuの基本的な機能は無料版で利用できますが、15ドルの有料版にするとカスタマイズの幅を広げることが可能です。有料版では、画面上部に追従するヘッダーバーの設置、タッチジェスチャー、ページをスクロールするとメニューが閉じる、などの機能が使えるようになっています。

Responsive Menuでメニューをカスタマイズする手順は次のとおりです。Responsive Menuをインストールして有効化すると、WordPressの管理画面の左カラム下に「WPR Menu」と表示されます。「Initial Setup」のBreakpointでレスポンシブメニューを表示させるサイトの最大幅を指定し、Menu to useでどのメニューセットを使うかを選択しましょう。「Container」のSizingでメニュー幅を設定します。レスポンシブデザインなので、画面に対して何％で表示するか指定するのがおすすめです。「Menu」のStylingで、フォントのサイズやメニューの高さなどを指定します。この他にも、さまざまなカスタマイズ設定ができますので、ぜひ一度試してみましょう。

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

「Menu Image」は、メニューにアイコン画像を表示することができるユニークなプラグインです。WordPressでサイトを運営していて、メニューにアイコン画像を表示させたいと思った人も多いのではないでしょうか。適切なアイコンを使用すると、一目でどんな情報なのかを把握することができます。しかし、ほとんどのWordPressテーマは、メニューにテキストしか表示させることができません。Menu Imageを利用すれば、好きな画像をアイコンとしてメニューに表示させることができます。menuファイルを編集する必要もないので、専門的なスキルも必要ありません。

表示するアイコンのサイズは、「24×24」「36×36」「48×48」ピクセルの3種類から選ぶことができ、メニューの大きさに合わせてのサイズ選択が可能です。Menu Imageでメニューをカスタマイズする手順は次のようになります。Menu Imageをインストールして有効化すると、「メニューを編集」画面のメニュー構造のなかにアイコンの設定が追加されます。ここで、アイコンとして使用する画像の登録、画像サイズ、テキストの表示位置を指定しましょう。また、アイコン画像の表示については、通常の状態とマウスがオンしたhover状態の2種類が指定できます。メニューの背景が白の場合を除いて、PNGやGIF形式の背景を透過した画像を使用すると違和感のないすっきりしたメニューになります。

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

「Max Mega Menu」は、メニューレイアウトを自由自在にカスタマイズできるプラグインです。WordPressでメニューを自在に変更するのは簡単なことではありません。ほとんどのテーマでは、CSSやPHPのスキルがなければ、カスタマイズするのは難しいでしょう。しかし、Max Mega Menuを利用すれば、メニューの表示方法、メニュー項目の幅の変更、アイコン画像表示などが簡単に行えるようになります。サイトのデザイン性を大幅に広げ、ユーザビリティを向上させることができます。

Max Mega Menuでメニューをカスタマイズする手順は次のとおりです。Max Mega Menuをインストールして有効化すると、WordPressの管理画面の左カラム下に「Mega Menu」と表示されます。ここから「Menu Themes」を開くと、さまざまな設定を行うことができます。メニューの高さ、背景色、角丸設定、フォント、アイコン画像の指定など、メニューのデザインを細かく指定することが可能です。この他にも、多彩なカスタマイズ設定ができますので、ぜひ一度試してみるのがおすすめです。

【おすすめプラグイン】5.Widget Icon

「Widget Icon」は、ウィジェットのデザインをカスタマイズできるプラグインです。ウィジェットもメニューと同様に、サイトにアクセスしたユーザーを効率的にナビゲートするために重要なものです。多くのWordPressテーマでは、ウィジェットにテキストしか表示できません。しかし、Widget Iconを利用すれば、ウィジェットに指定したアイコンを表示させることが可能になります。サイトのデザイン性も大きく向上し、ユーザビリティの高いサイトにすることができます。

ウィジェットのタイトルの左側または右側にアイコンを表示でき、HTMLを記述すれば好きな位置にアイコンを表示させることも可能です。640種類以上のアイコンが利用でき、アイコンのサイズ、カラー、表示位置、余白などを詳細に指定できます。Widget Iconでウィジェットをカスタマイズする手順は次のとおりです。Widget Iconをインストールして有効化すると、WordPress管理画面のウィジェットの下に設定項目が追加されます。「Select icon library」でアイコンのライブラリを選択し、「Select widget icon」で使用するアイコンを選びます。そのうえで、アイコンの表示サイズや表示位置、余白の大きさ、カラー指定など詳細を設定することが可能です。

メニューをドロップダウン型式にしたい場合

使用しているテーマがドロップダウン型式のメニューに対応していない場合、header.phpをコーディングすれば、プラグインを利用しなくてもメニューを階層化することができます。まず、header.phpをテキストエディタなどで開いて、下記のコードが書かれている箇所を探しましょう。

<nav class="smanone clearfix">
    <?php
    $defaults = array(
        'theme_location'  => 'navbar',
    );
    wp_nav_menu( $defaults );
    ?>
</nav>

コードがみつかったら、この部分を下記のコードとそっくり入れ替えます。

<nav class="smanone clearfix">
    <?php
    wp_nav_menu(
        array(
            'container' => false,
            'items_wrap' => '<ul id="menu">%3$s</ul>'
        )
    );
    ?>
</nav>

phpファイルは、文字コードUTF-8でないと正しく動作しませんので、必ずUTF-8で保存しましょう。次に、使用しているテーマのjsフォルダ内にあるbase.jsに下記のコードを追加します。

/*---------------------------
ドロップダウンメニュー
------------------------------*/
$(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
    $('li').has('ul').mouseover(function(){
        $(this).children('ul').css('visibility','visible');
        }).mouseout(function(){
        $(this).children('ul').css('visibility','hidden');
        })
  }
});

さらに、style.cssを編集します。

/*--------------------------------
メニュー
---------------------------------*/

と書かれている箇所をみつけ、下記のコードに差し替えます。

#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu {
    width: 100%;
    margin: 60px auto;
    border: 1px solid #222;
    background-color: #111;
    background-image: linear-gradient(#444, #111);
    border-radius: 6px;
    box-shadow: 0 1px 1px #777;
}

#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}

#menu li {
    float: left;
    border-right: 1px solid #222;
    box-shadow: 1px 0 0 #444;
    position: relative;
}

#menu a {
    float: left;
    padding: 12px 30px;
    color: #999;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
 font-size:12px;
}

#menu li:hover > a {
    color: #fafafa;
}


#menu ul {
    margin: 20px 0 0 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1;   
    background: #444; 
    background: linear-gradient(#444, #111);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
    border-radius: 3px;
    transition: all .2s ease-in-out;
}

#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    box-shadow: -1px 0 0 rgba(255,255,255,.3);     
}

#menu ul li {
    float: none;
    display: block;
    border: 0;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child { 
    box-shadow: none;   
}

#menu ul a {   
    padding: 10px;
    width: 130px;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#menu ul a:hover {
    background-color: #0186ba;
    background-image: linear-gradient(#04acec, #0186ba);
}

#menu ul li:first-child > a {
    border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3;
    border-bottom-color: transparent; 
}

#menu ul li:last-child > a {
    border-radius: 0 0 3px 3px;
}

これで、メニューを階層化するための設定は完了です。きちんとドロップダウン型式で表示されるか、サイトにアクセスして確認してみましょう。紹介したコーディングは、難易度の高いものではありませんが、WordPress初心者には難しいかもしれません。また、各ファイルは変更する前に必ずバックアップを取っておきましょう。万一、正しく稼働しない場合にすぐに元の状態に戻すことができます。

まとめ

メニューやウィジェットをカスタマイズすると、見やすくなるだけでなく、サイトのユーザビリティを向上させることができます。探している情報がすぐに見つけられるので、サイトの回遊率もアップするでしょう。また、アクセス増やコンバージョンアップの効果も期待できます。プラグインを使えば、簡単にメニューのカスタマイズができるのは、WordPressならではのメリットです。