WordPressのメニューを、footer等用に作成して追加する方法

LINEで送る
Pocket

WorPressのデフォルトでは、gnavi(グローバルナビ)にメニューを追加し、表示させることはできますが、footer等に違うメニューを作って表示させたい!という事がちょくちょくありますが、一度作ってしまうともうそんなに同じような作業はしないので忘れてしまいます。
ので、いちいち作ったサイトの要素検証して、function.phpを弄って…、と少々やいこしいので、また次回同じようにfooter等にメニューを追加したい時のための覚書です。

new-menu00

ってことで、順を追って書いていきます。

WordPressのメニューを、footer等用に作成する

gnaviと同じものなら問題ないですが、footerにはもう少しいらないものは省いて、お問い合わせ、サイトマップ等だけを表示したい!ということがよくあるので、gnaviと違う、footer用メニューを作成します。

まずは、

1, wpの管理画面→外観→メニュー等から、メニューを作成する画面にいきます。

new-menu01

今回は フッターメニュー という名前で、“ホーム”,”サイトマップ”,”お問い合わせ” のみのメニューを作りました。
new-menu02

2, functions.phpにカスタムメニュー機能を追加します。

functions.phpに、

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

と書き込み、カスタムメニュー機能を追加します。

‘footer-menu’:この部分は半角英数字で。メニューを設置するときに使用します。
‘フッターメニュー’ :この部分はなんでもOKです。メニューの管理画面で表示されます。

3, footer.php等、メニューを表示させたい場所に記述を追加します。

footer.php等、新たなメニューを追加したい場所に、

<?php wp_nav_menu( array ( 'theme_location' => 'footer-menu' ) ); ?>

と記述します。

4, メニューの管理画面で位置の設定をします。

上記の準備ができていたら、メニューの管理画面の、“位置の管理” の画面でこのように “フッターメニュー” が現れるので、

new-menu03

同じ名前でちょっとやいこしいですが、“フッターメニュー”(作成したメニューの名前)を、フッターメニュー(function.phpに記載した名前)から選択します。

この設定を保存したら、このページ下部のように、新たなメニューがでてきますので、あとはcssで色や配置を調整してできあがり!です!!
FooterMenu

バナー468-80_iPad-MacBook



関連記事

WordPressのデータベースのテーブル接頭辞を、phpMyAdminで変更する方法


最近サーバーを変更してWordPressの引っ越しをしたのですが、引っ越し前のサーバーの初期設定でWordPressのデ…

記事を読む▷


お名前.com から脱出する!:ドメインの移管方法


『お名前.com』でドメイン取得してからは、『Whois情報公開代行』の件(詳細はこちら)で大変な思いをしたのですが、そ…

記事を読む▷


OPG設定_3

WordPressのプラグインなしで、Jetpackと共存してFacebookやTwitter CardのOGPの設定をする!


先日、ようやく気になっていたOGPの設定を、WP-OGPのプラグインを変更して使えるようにしたのですが(詳細は こちら …

記事を読む▷


Facebookでシェアした記事のサムネイル画像がおかしい時、表示されない時の解決方法


せっかく面白そうなネタを見つけたので、早速Wordpressに記事を投稿!でもいざFBでシェアしようとしたら、サムネイル…

記事を読む▷


RSSフィードを設置してすぐにエラーが…


恥ずかしながら、RSSフィードを管理している全てのサイトに設置していませんでした。やろうやろう。とは思ってたのですが、ど…

記事を読む▷


SyntaxHighlighter Evolved のサムネイル

WordPressで “SyntaxHighlighter” を使って、ソースコードをキレイに書く方法


よくwebデザイナーさんやクリエイターさん、プログラマーさんたちの書いてるwebサイトを見たら、ソースコードを、 …

記事を読む▷


画像やテキストを中央(上下左右真ん中)に配置する方法


普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…

記事を読む▷


OGPをWP-OGPのプラグインを改変して設定する!!2015年のOGP最新設定


今度こそ。。。OGPの設定で何時間、というより何日?何ヶ月?かかってるんや。。。という感じなのですが、もう最初の投稿から…

記事を読む▷


opacityの書き方 クロスブラウザ


今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…

記事を読む▷


スマホ、携帯からタップ(クリック)で電話を発信する、htmlの記述方法 コピペでOK!!


スマホ等のタブレット、また携帯で、電話番号をタップ(クリック)して直接かけるhtmlの記述方法です。 …

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

参考にさせていただいてるサイト

PAGE TOP