wp.Vicuna.Extにはグローバルナビが搭載されていますが
WordPress純正のものを使いたいので導入してみます。
functions.php
まず、functions.phpに以下のコードを追加
[sourcecode language="php"]<?php
//G-Navi
register_nav_menus();
?>[/sourcecode]
各ページにコードを追加
index.php
page.php
single.php
archive.php
category.php
.etc
にグローバルナビを表示したい位置に以下のコードを追加。
[sourcecode language="php"]<?php wp_nav_menu(); ?>[/sourcecode]
標準のメニューを新規作成
WordPress標準のメニューをwordpressコントロールパネルにて新規作成(外観→メニュー)
cssを追加
cssでお好みに装飾
以下style-flat用
[sourcecode language="php"]body.gt ul.menu {
margin-bottom: 0;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
body.eye-h ul.menu {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
ul.menu {
margin: 0 0 30px 0;
padding: 0;
border: 1px solid #eee;
line-height: 1;
list-style-type: none;
background-color: #fff;
}
ul.menu li {
margin: 0;
padding: 0;
float: left;
/*
width: 110px;
*/
text-align: center;
}
ul.menu li a {
border-right: 1px solid #eee;
padding: 8px 20px;
display: block;
position: relative; /* for IE6 */
color: #333;
background-color: #fff;
text-decoration: none;
}
ul.menu li a:hover,
ul.menu li.current a {
color: #fff;
background-color: #333;
}
ul.menu {
_height: 1px;
min-height: 1px;
/*
height: 1px;
overflow: hidden;
*/
}
ul.menu:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}[/sourcecode]
参考リンク
WordPressのカスタムメニューを使用してグローバルナビゲーションを作成する
コメントを残すコメントをキャンセル