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



関連記事

2017最新版:SNS等の公式ロゴ(アイコン)素材のまとめ(Facebook, Instagram, Youtube, Twitter, Line etc.)


一度サイトを作ってしまうとなかなか更新せず使い回してしまうのが、この『SNSのロゴ(アイコン)』だと思うのですが、サイト…

記事を読む▷


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


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

記事を読む▷


Macで不過視ファイル(隠しファイル、フォルダ)を表示させる方法(ターミナルを使って)


突然?いや、おそらく何かしらのアップデートの段階で不過視ファイル(隠しファイル)が可視化された状態になってしまった。。と…

記事を読む▷


お名前.comで “Whois情報公開代行” の設定にチェックを入れ忘れて登録した時の対処方法


先日、こちら で少し書いたのですが、お名前.comでドメインを取った時に、 "Whois情報公開代行" の設定にチェック…

記事を読む▷


wordmork.itの画像3

wordmark.it でフォントを選ぶ方法


フォント選びって結構大変ですよね。使用するフォントによって、そのサイトなりデザインの印象が変わってくるので、色選びもそう…

記事を読む▷


z-index が効かない時の対処方法


z-index が効かない時がちょくちょくあります。でも、仕事でそういう場合に遭遇すると、その場しのぎで対処法を見つけて…

記事を読む▷


WP Social Bookmarking Lightを好きな場所に設置、移動する方法


WP Social Bookmarking Lightを好きな場所に設置、移動する方法です。 以前、自分で管理している…

記事を読む▷


2015最新版:PING送信先リスト20(WordPress Ping Optimizerへ登録するPingのURL)


色々と設定の見直し中なのですが、PingはSEO対策では大切なんですよね?正直まだイマイチPingは把握しきれていません…

記事を読む▷


複数の横に並ぶブロック要素をセンタリングさせる!!


よく複数の画像をfloatで並べることありますよね?でも、それを括ったDivタグとかをセンタリングしようとしたら、なかな…

記事を読む▷


URLwwwありなし

URLの正規化:wwwあり、なしのドメインを統一する記述方法(エックスサーバー(XSERVER) にて)


前回のブログ で.htaccessに301リダイレクトをするための記述方法について書きましたが、ついでにwwwあり、なし…

記事を読む▷


Message

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

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

Error: Feed has an error or is not valid

PAGE TOP