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

wp.Vicuna.Extにはグローバルナビが搭載されていますが
WordPress純正のものを使いたいので導入してみます。

functions.php

まず、functions.phpに以下のコードを追加

<?php
//G-Navi
register_nav_menus();
?>

各ページにコードを追加

index.php
page.php
single.php
archive.php
category.php
.etc
にグローバルナビを表示したい位置に以下のコードを追加。

<?php wp_nav_menu(); ?>

標準のメニューを新規作成

WordPress標準のメニューをwordpressコントロールパネルにて新規作成(外観→メニュー)

cssを追加

cssでお好みに装飾
以下style-flat用

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;
}

参考リンク
WordPressのカスタムメニューを使用してグローバルナビゲーションを作成する

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