コピペで簡単!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にログオンして、「外観 → メニュー」を選択してください。

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

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

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

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

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

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

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

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

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

動作確認

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

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

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

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

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

まとめ

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

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

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

  1. 名前:カナリア 投稿日:2017/06/09(金) 19:16:51 ID:7a6717799

    初めまして。
    普段ホームページの更新はビジュアル操作でほとんどやっていて、プログラムに対しては全くの無知な状態で、当サイトのようにコピーするだけのプログラミングに支えられて何とか良くしようとしています。
    今回『コピペで簡単!WordPressでグローバルメニューの他にフッターメニューを追加するカスタマイズ方法』を参考に、コピーペーストを進めていったのですが、フッターメニューがどうしても横に並ばずに困っております。
    テーマによって微調整が必要と記述がありますが、具体的にどの部分をいじれば良いのかアドバイスいただけますでしょうか?

  2. アバター画像 名前:わいひら 投稿日:2017/06/09(金) 20:23:18 ID:1ab2dbe68

    こちらのフッターメニューは、横に並んでいるようですけど、違うサイトのことでしょうか?
    http://earlysmart.main.jp/

    でしたら、テーマや設定状態によっても変わってくると思うので、サイトのURLを貼り付けていただいて問題点を見させていただければ、何か原因が分るかもしれません。

  3. 名前:斉藤 投稿日:2017/11/05(日) 23:45:02 ID:ff534e1b2

    説明の通りに指定したのですが、フッターメニューが出てきません!!

  4. アバター画像 名前:わいひら 投稿日:2017/11/06(月) 19:06:35 ID:a8c11349c

    テーマの中に以下のようなカスタムメニューを有効化するコードはありますか?

    // カスタムメニューを有効化
    add_theme_support( 'menus' );