コピペで簡単！WordPressでグローバルメニューの他にフッターメニューを追加するカスタマイズ方法

大抵のWordpressテーマならヘッダーにグローバルメニューがあります。

グローバルメニューは、メインのメニューを表示させるのに、適しています。

ただ、そこまで目立たせたくない「問い合わせ」とか「サイトマップ」とかは、フッターメニューに載せたいなんて場合もあると思います。しかし、大抵のテーマはフッターメニューを実装していません。

そこで、今回は「Wordpressテーマにフッターメニューを追加するカスタマイズ方法」を紹介したいと思います。

主な手順

フッターメニューを追加するのに必要な主な手順は以下です。

1. functions.phpにコードを追加する
2. フッターにコードを追加する
3. CSSでスタイルを調整する
4. 管理画面からフッターメニューを作成する

これらはコードを編集する必要がなく、すべてコピペのみで行うこともできるので、比較的簡単にカスタマイズできると思います。

functions.phpにコードを追加する

まずは、functions.phpに以下のように追記します。

register_nav_menu( 'footer-menu', 'フッターメニュー' );

「footer-menu」と書かれている部分は、メニューのID（識別子）になります。

「フッターメニュー」と書かれている部分は、メニュー名になります。ここは、好きなテキストに変更してもOKです。

フッターにコードを追加する

次に、フッターにフッターメニューを表示するためのコードを記述します。

記述する場所は、大抵のテーマの場合は、footer.php等になるかと思います。

functions.phpで設定したフッターメニューを表示するコードは以下になります。

<div id="footer-menu">
    <?php wp_nav_menu( array ( 'theme_location' => 'footer-menu' ) ); ?>
</div>

上記をフッターの表示させたい部分に挿入してください。

CSSでスタイルを調整する

あとは、フッターメニューに対してスタイルを書きます。

style.cssなどに、以下のコードを貼り付けてください。

/************************************
** フッターメニュー
************************************/
#footer-menu ul{
  text-align: center;
  margin: 10px 0;
}

#footer-menu ul li {
  display: inline;
  list-style: outside none none;
}

#footer-menu ul li::before {
    content: "|";
    padding: 0 0.6em;
}

#footer-menu ul li:first-child::before{
  content: "";
  padding: 0;
}

#footer-menu ul .sub-menu{
  display: none;
}

上記のコードは、使用しているテーマなどに合わせて、微調整する必要はあるかもしれません。

管理画面からフッターメニューを作成する

最後に、管理画面からメニューを作成してフッターメニューに割り当ててやる必要があります。

WordPressにログオンして、「外観 → メニュー」を選択してください。

「メニュー」画面が表示されるので「新規メニューを作成」リンクをクリックしてください。

フッターメニューの「メニュー名」をつけて「メニューを作成」ボタンをクリックしてください。

そして、自由にメニューを配置して「メニューを保存」ボタンをクリックしてください。

最後に「位置の管理」タブを選択し、フッターメニュー項目に作成した「フッターメニュー」を割り当てて、「変更を保存」ボタンを押せば設定完了です。

動作確認

全ての設定を終えると以下のような、フッターメニューが表示されます。

このフッターメニューのスタイルは、以下のトヨタ自動車のもの参考に書いてみました。

スタイルシート編集すれば、様々な見た目に変更できるかと思います。

まとめ

フッターメニューがあると「メインメニューに表示させるほどのものでもないけど、ページのどこかに必ず表示させておきたい」なんてものを載せておくのに便利です。

「フッターメニューを使いたいけど、自分の使っているテーマには機能が実装されていない」なんて場合は、結構簡単にできるので試してみると良いかもしれません。