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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

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

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

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

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

スポンサーリンク
レクタングル(大)広告

主な手順

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

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

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

フッターメニューで、サブメニュー表示をさせているようなサイトは見かけたことがないので、今回のカスタマイズ方法は、サブメニュー表示に対応していません。

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

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

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

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

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

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

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

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

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

CSSでスタイルを調整する

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

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

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

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

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

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

Wordpressにログオンしてメニュー設定を表示する

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

メニュー画面で「新規メニューを作成」をクリック

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

フッターメニューのメニュー名をつけて作成

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

メニューを配置して「メニューを保存」ボタンをクリック

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

フッターメニューに作成した「フッターメニュー」を適用

動作確認

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

フッターメニューカスタマイズが完了した状態

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

トヨタ自動車のフッターメニュー

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

まとめ

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

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