wp.Vicuna グローバルナビを導入

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のカスタムメニューを使用してグローバルナビゲーションを作成する

コメントを残す コメントをキャンセル

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