WordPressのメニューを、footer等用に作成して追加する方法
WorPressのデフォルトでは、gnavi（グローバルナビ）にメニューを追加し、表示させることはできますが、footer等に違うメニューを作って表示させたい！という事がちょくちょくありますが、一度作ってしまうともうそんなに同じような作業はしないので忘れてしまいます。
ので、いちいち作ったサイトの要素検証して、function.phpを弄って…、と少々やいこしいので、また次回同じようにfooter等にメニューを追加したい時のための覚書です。
ってことで、順を追って書いていきます。
WordPressのメニューを、footer等用に作成する
gnaviと同じものなら問題ないですが、footerにはもう少しいらないものは省いて、お問い合わせ、サイトマップ等だけを表示したい！ということがよくあるので、gnaviと違う、footer用メニューを作成します。
まずは、
1, wpの管理画面→外観→メニュー等から、メニューを作成する画面にいきます。
今回は フッターメニュー という名前で、“ホーム”,”サイトマップ”,”お問い合わせ” のみのメニューを作りました。
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, メニューの管理画面で位置の設定をします。
上記の準備ができていたら、メニューの管理画面の、“位置の管理” の画面でこのように “フッターメニュー” が現れるので、
同じ名前でちょっとやいこしいですが、“フッターメニュー”（作成したメニューの名前）を、フッターメニュー（function.phpに記載した名前）から選択します。
この設定を保存したら、このページ下部のように、新たなメニューがでてきますので、あとはcssで色や配置を調整してできあがり！です！！
- ◀PREV
前の記事
- OGPをWP-OGPのプラグインを改変して設定する！！2015年のOGP最新設定
- NEXT▶
次の記事
- WP Social Bookmarking Lightを好きな場所に設置、移動する方法
関連記事
-
-
WordPressのデータベースのテーブル接頭辞を、phpMyAdminで変更する方法
最近サーバーを変更してWordPressの引っ越しをしたのですが、引っ越し前のサーバーの初期設定でWordPressのデ…
-
-
お名前.com から脱出する！：ドメインの移管方法
『お名前.com』でドメイン取得してからは、『Whois情報公開代行』の件（詳細はこちら）で大変な思いをしたのですが、そ…
-
-
WordPressのプラグインなしで、Jetpackと共存してFacebookやTwitter CardのOGPの設定をする！
先日、ようやく気になっていたOGPの設定を、WP-OGPのプラグインを変更して使えるようにしたのですが（詳細は こちら …
-
-
Facebookでシェアした記事のサムネイル画像がおかしい時、表示されない時の解決方法
せっかく面白そうなネタを見つけたので、早速Wordpressに記事を投稿！でもいざFBでシェアしようとしたら、サムネイル…
-
-
RSSフィードを設置してすぐにエラーが…
恥ずかしながら、RSSフィードを管理している全てのサイトに設置していませんでした。やろうやろう。とは思ってたのですが、ど…
-
-
WordPressで “SyntaxHighlighter” を使って、ソースコードをキレイに書く方法
よくwebデザイナーさんやクリエイターさん、プログラマーさんたちの書いてるwebサイトを見たら、ソースコードを、 …
-
-
画像やテキストを中央（上下左右真ん中）に配置する方法
普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…
-
-
OGPをWP-OGPのプラグインを改変して設定する！！2015年のOGP最新設定
今度こそ。。。OGPの設定で何時間、というより何日？何ヶ月？かかってるんや。。。という感じなのですが、もう最初の投稿から…
-
-
opacityの書き方 クロスブラウザ
今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…
-
-
スマホ、携帯からタップ（クリック）で電話を発信する、htmlの記述方法 コピペでOK!!
スマホ等のタブレット、また携帯で、電話番号をタップ（クリック）して直接かけるhtmlの記述方法です。 …
