記事一覧

ナビゲーションメニューを追加する

 posted by suzu
テンプレート作成のススメ

今回は、ナビゲーションメニューを表示させてみます。
navimenu
本ブログでは、ヘッダー画像下に表示をしている ↑ コレ ですね。
(一般的には?) この位置のメニューは、グローバルナビ と言われる
ことが多いのではないかと思います。
 

まず、function.php にナビゲーションメニューを登録するコードを追加します。

//--- ナビゲーションメニュー追加
register_nav_menus(array('navbar' => 'ナビゲーションバー'));

register_nav_menus 関数は、テーマにナビゲーションメニューを
登録 (追加) してくれます。
パラメータには、メニューの slug を key に、説明を value にした連想配列の
配列 (二次元配列) を渡してやります。
複数のナビゲーションメニューを登録する場合は、以下のようになります。

//--- ナビゲーションメニュー追加
register_nav_menus(
	array(
		'navbar1' => 'ナビゲーションバー1' ,
		'navbar2' => 'ナビゲーションバー2'
	)
);

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 対策的にも良いはずですしね。
では今回はここまで。

関連記事

eyecatch_template

一覧ページネーション を表示する

実は、今回から次のテンプレート作成 (の解説) に取り掛かろうと 思っていたので...

記事を読む

eyecatch_template

header.php / footer.php を作成する

前の記事 「index.php を作成する – [2]」 で、 メイ...

記事を読む

eyecatch_template

HTMLをデザインする [カラム装飾]

今回は、先の記事 「HTMLをデザインする [カラム]」 で カラムレイアウトを...

記事を読む

カレンダー

2019年5月
« 7月    
 1234
567891011
12131415161718
19202122232425
262728293031  
PAGE TOP ↑