WordPressでナビゲーションバーの追加

WordPressでテーマの作成/その3

今日は、ナビゲーションバーを挿入したいと思います。ナビゲーションバーはカスタムメニューの機能を利用して表示します。

カスタムメニューとは、WordPress3.0から取り入れられた機能で、固定ページの順番を変えたり、サブメニューを作成したり、ナビゲーションメニューにカテゴリーを指定することで、、複数の記事を表示することができるようになりました。

カスタムメニューの設定

カスタムメニューを利用するには、『functions.php』ファイルが必要ですので、『wp-content/themes/winroad theme』フォルダに『functions.php』ファイルを作成し、下記のコードを入力します。

<?php
//カスタムメニュー
register_nav_menus(array(
	'navigation' => 'ナビゲーションバー'
	));

?>

『header.php』にも、下記のコードを追加します。

<div id="nav">
<?php wp_nav_menu(array(
	'theme_location' => 'navigation'
	));?>
</div>

次に、管理画面で、『外観』→『メニュー』と選択し、メニューの名前を『topmenu』として、『メニューを作成する』ボタンをクリックします。固定ページの全て表示タブをクリックし、下の全て選択して、メニューに追加をクリックします。

ブラウザで確認してみます。

ナビゲーションバーのデザインを指定する

『style.css』を開き、ナビゲーションバーの設定を追加します。

/* ナビゲーションバー */
div#nav	{font-size: 0.75em;		/*文字サイズを0.75emに指定*/
	height: 30px;				/*バーの高さを30pxに指定*/
	background-color: #ffffff;	/*背景色を白色に指定*/
	border: solid 1px #aaaaaa;	/*バーの周りに1pxのグレーの罫線を表示*/
	margin-bottom: 8px}			/*バーの下の余白を8pxに指定*/

div#nav ul	{margin: 0;			/*ulの周りの余白を削除*/
	padding: 0}

div#nav li	{list-style-type: none;	/*リストマークを削除*/
	float: left}					/*リンクを横並びに指定*/

div#nav li a	{display: block;	/*リンクをブロック要素として表示*/
	width: 150px;					/*リンクの横幅を150pxに指定*/
	line-height: 30px;				/*リンクの高さを30pxに指定*/
	border-right: solid 1px #aaaaaa;	/*リンクの区切りを1pxのグレー線に指定*/
	color: #000000;					/*リンクの文字色を黒色に指定*/
	text-align: center}				/*リンクの文字を中央揃えに指定*/

div#nav li a:hover	{background-color:#00F;	/*リンクにカーソルを重ねたときの背景色を青色に指定*/
	color:#FFFFFF}					/*リンクの文字色を白色に指定*/

それでは、ブラウザで確認してみましょう。

本日のWordPress関数

register_nav_menus()

カスタムメニューを使うための関数です。パラメータとして連想配列を渡し、個々の要素のキーは、カスタムメニューを識別する名前を指定します(名前は英数字やアンダースコアで指定)。また、要素の値として、管理画面上に表示するカスタムメニューのラベルを指定します。連想配列に複数の要素を入れれば、その数だけカスタムメニューを登録でき、ページの種類に応じて、複数のカスタムメニューを使い分けることができます。

wp_nav_menu()

登録したカスタムメニューをページに出力するための関数です。パラメータで動作をカスタマイズすることができます。パラメータが多いので、連想配列で指定します。パラメータを下記に表示します。

  • ‘memu’=>名前  出力するメニューの名前(メニューの設定ページで設定した値)
  • ‘theme_location’=>名前  register_nav_menus関数で登録した名前
  • ‘container’=>タグ名  メニューのul要素を囲む要素のタグ名。標準では、『div』か『nav』のどちらかを指定
  • ‘container_id’=>ID  メニューのul要素を囲む要素に割り当てるID
  • ‘container_class’=>クラス名  メニューのul要素に割り当てるクラス名
  • ‘before’=>文字列  リンクの前に出力する文字列
  • ‘after’=>文字列  リンクの後に出力する文字列
  • ‘link_before’=>文字列  リンク対象文字列の前に出力する文字列
  • ‘link_after’=>文字列  リンク対象文字列の後に出力する文字列
  • ‘depth’=>深さ  出力するメニューの階層の上限。0を指定すると全階層を出力
  • fallback_cb’=>関数名  メニューが存在しないときに出力する関数名
  • ‘echo’=>trueまたはfalse  falseにすると、結果のHTMLを出力せずに、戻り値として返す

 

本日は以上です。

タグ

このページの先頭へ