WordPress カスタムメニュー

設定・出力

方法①:管理画面にメニューを実装

※functions.php
add_theme_support( 'menus' );
管理画面にメニューが表示されるので手動で設定(設定方法略)

方法②:ロケーションを作成する

メニュー設定
※functions.php
register_nav_menu( 'navigation', 'ナビゲーション' );

custom_menu1
画面下部に第二引数の説明文が表示されるのでチェックを入れて保存

メニュー出力
※header.php
<?php
 wp_nav_menu(
  array(
   ロケーションを指定
   'theme_location'=>'navigation',
   
   <div>タグでなく、<nav>タグで出力する
   'container'=>'nav'
  )
 );
?>

※出力結果(html)
<nav class="menu-top-container">
 <ul id="menu-top" class="menu">
  <li id="menu-item-~" class="~"><a href="http://~">TOP</a></li>
  <li id="menu-item-~" class="~"><a href="http://~">ブログ</a></li>
  <li id="menu-item-~" class="~"><a href="http://~">はじめての方へ</a></li>
  <li id="menu-item-~" class="~"><a href="http://~">リンク</a></li>
  <li id="menu-item-~" class="~"><a href="http://~">お問い合わせ</a></li>
 </ul>
</nav>

※出力結果(ブラウザ)
custom_menu3

装飾

custom_menu2

※style.css
nav ul {
 list-style-type: none;
 margin-top: 0;
 margin-bottom: 0;
 margin-left: 0;
 font-size: 0;
}
nav li {
 display: inline;
 font-size: 12px;
 border-right: solid 1px #aaaaaa;
 padding-left: 10px;
 padding-right: 10px;
}
nav li:first-child {
 border-left: solid 1px #aaaaaa;
}
nav {
 margin-left: auto;
 margin-right: auto;
 text-align: right;
 margin-bottom: 10px;
}
nav a {
 color: #000000;
 text-decoration: none;
}
nav ul li a:hover {
 color:#999;
 text-decoration:none;
}
.current-menu-item a {
 font-weight: bold;
}

コメントを残す

メールアドレスが公開されることはありません。