今回は、ナビゲーションメニューを表示させてみます。
本ブログでは、ヘッダー画像下に表示をしている ↑ コレ ですね。
(一般的には？) この位置のメニューは、グローバルナビ と言われる
ことが多いのではないかと思います。
まず、function.php にナビゲーションメニューを登録するコードを追加します。
//--- ナビゲーションメニュー追加
register_nav_menus(array('navbar' => 'ナビゲーションバー'));
register_nav_menus 関数は、テーマにナビゲーションメニューを
登録 (追加) してくれます。
パラメータには、メニューの slug を key に、説明を value にした連想配列の
配列 (二次元配列) を渡してやります。
複数のナビゲーションメニューを登録する場合は、以下のようになります。
//--- ナビゲーションメニュー追加 register_nav_menus( array( 'navbar1' => 'ナビゲーションバー１' , 'navbar2' => 'ナビゲーションバー２' ) );
register_nav_menus でメニューを登録すると、
管理画面 [外観 - メニュー] で メニューを編集する際に、「テーマの位置」 で
ここで作成したメニューを指定することができるようになったり、
「位置の管理」 タブで登録したナビゲーションにメニューを設定できる
ようになります。
次に、登録したナビゲーションメニューを実際に表示する HTML 要素を
テンプレートに記述します。
今回はヘッダー画像下に表示しますので、 header.php に
ナビゲーションメニュー表示を追記します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title>
<?php
if (is_archive()) {
wp_title('|', true, 'right');
} elseif (is_search()) {
wp_title('-', true, 'right');
} elseif (is_404()) {
echo '404 Not Found - ';
}
if (is_front_page()) {
bloginfo('name');
} elseif (is_single() || is_page()) {
wp_title('');
} else {
bloginfo('name');
}
global $page, $paged;
if ($paged >= 2 || $page >= 2) {
echo '-' . sprintf('%sページ', max($paged, $page));
}
?>
</title>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="container">
<div id="header">
<div id="header-image">
<?php if (get_header_image()) : ?>
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
</div>
<div id="header-text">
<p class="sitename"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></p>
<h1 class="descr"><?php bloginfo('description'); ?></h1>
</div>
</div>
<div id="navi">
<ul>
<li><a href="<?php echo home_url();?>" title="トップページ">TOP</a></li>
<?php wp_nav_menu(array('theme_location' => 'navbar')); ?>
</ul>
<div class="clear"></div>
</div>
<div id="wrapper">
<div id="side-left">
<?php get_sidebar('left'); ?>
</div>
<div id="main">
ハイライト表示している部分が今回の追記箇所です。
ここでは、固定で TOP へのリンクを表示し、その横に続けて
ナビゲーションメニューを表示するように配置しています。
ナビゲーションメニューの表示には、wp_nav_menu 関数を使用します。
> テンプレートタグ/wp nav menu – WordPress Codex 日本語版
パラメータには、「どのナビゲーションメニューを表示するか」 や
「ナビゲーションメニューを囲むタグ」 等々の挙動を指定する
連想配列を渡します。 ( 連想配列の各値はリファレンスを参照して下さい )
「どのナビゲーションメニューを表示するか」 というのは、
テーマ内の位置を示す theme_locaution に
register_nav_menus で登録した slug (key) を設定して指定します。
「ナビゲーションメニューを囲むタグ」 に関するパラメータを
指定しなかった場合、デフォルトでは
<div class=”menu”><ul><li> [メニュー1] </li>li>< [メニュー2] </li></ul></div>
のようなタグ構成で出力されます。
では、ナビゲーションメニュー用のスタイルを style.css に追記します。
/*-----------------------------
ナビゲーションメニュー
------------------------------*/
#navi {
position: relative;
font-size: 12px;
line-height: 16px;
}
#navi ul {
position: relative;
margin: 0px;
padding: 0px;
}
#navi li {
position: relative;
float: left;
display: inline;
padding: 5px 10px 5px 10px;
border-left: dotted 1px #cccccc;
}
#navi li li {
border: none;
}
#navi li a {
color: #333333;
text-decoration: none;
}
#navi li a:hover {
text-decoration: underline;
}
追記する場所はどこでも問題ありませんが、
HTML 要素の位置的にはヘッダー領域の直後なので、
ヘッダーのスタイル設定の直後にでも
追記しておくのが分かりやすくていいでしょう。
これで、管理画面 [外観 - メニュー] で設定した
ナビゲーションメニューが表示できるようになりました。
やっぱりグローバルナビがあった方がカッチョいいですよね。
SEO 対策的にも良いはずですしね。
では今回はここまで。
SmartStyle