フッターのメニュー

|Published on: 4月 18, 2013|Categories: Wordpress| コメント0件

フッターのメニュー

WordPressでは、
外観　→　メニュー で　メニューというかナビゲーションバーが作れる。

メニュー自体は、何個でも作れるんだけど、メニュー自体を表示するコードが無いと、当たり前だけど表示されない。

どのテーマを選んでも、大体一個はメニューを表示する箇所がある。
普通はヘッダー(header.php)部分にあるけど、

ヘッダーには、いわゆる目次をおいて、
フッターに、サイトマップとか　連絡先とか　違うメニューを表示したい場合。

導入したテーマに、フッターにメニューを表示する機能が無い場合、どうするかって話。

2.png

この部分で設定したいっていう場合は、結構面倒な作業がいるんだけど、そのメリットが分からないので、やらない方向で。

3.png

この部分で、フッターに表示したいメニューを作成して、メニューの名前をつける。

メニューの名前はアルファベットで作成する。

仮に、Footer　ってつけた場合、

フッターメニューに

<!--?php wp_nav_menu( array('menu' =--> 'Footer' )); ?>

って表示したい位置に入れれば終わり。

ただ、そのままだと、 UL LIを使ったリスト構造の都合上、縦表示になるから、
横表示に変えて、ちょっとボックス風なんかにしてみたり・・・

とかいう場合

4.png

#menu-footer ul{
margin: 0; 
padding: 0; 
list-style: none;
}
#menu-footer li{ 
display: inline; 
padding: 0; 
margin: 0; 
float: left;
}
#menu-footer a{
display: block; 
border: 1px solid #474655;
background-color: #fff;
font-size: x-small;
padding: 3px;
text-decoration: none;
color: #333;
width: 100px; 
margin: 1px;
text-align: center;
}
#menu-footer a:hover{
background-color: #2664a2;
color: #fff;
}

みたいにいれればOK。

コードをfooter.phpに一行いれただけで
勝手にCLASS も　IDも設定されているので、 #menu-footer 　って　いれてid指定すれば大丈夫だと思います。