wordpress テーマの作成「メニューバーの表示」moja.asia

wordpressではページが増えてからでも比較的自由にメニューを入れ替える事のできる「カスタムメニュー」と呼ばれる便利な機能があります。ここではそれを作って自分で作るテーマで使えるようにしていきます。

カスタムメニュー機能の追加

これから自分で作るテーマに色々な機能を追加していくのはすべて、「テーマのための関数（functions.php）」に追加していきます。
まずは管理画面のメニューから「外観」＞「テーマの編集」で右端の「テーマのための関数（functions.php）」を選択します。
ここまででは、まだ何も書かれていません。ここに「カスタムメニュー」機能を使えるためのコードを書いてみます。
[php]
<?php
// カスタムメニュー機能を有効にする
add_theme_support( 'menus' );
// カスタムメニューの「場所」を設定する
register_nav_menu( 'navigation', 'ヘッダーのメニュー' );
?>
[/php]

コードを書いて、「ファイルを更新」をクリックすると管理画面のメニューの「外観」のところに新しく「メニュー」が作成されました。これでカスタムメニューが使えるようになりました。さっそくメニューを作ってみます。

メニューの設定

管理画面のメニュー「外観」＞「メニュー」をクリックします。
このような画面が表示されました。「固定ページ」と書かれた下にある「最近」「すべて表示」「検索」タブの真ん中のタブ「すべて表示」をクリックします。「ホーム」と「サンプルページ」にチェックを入れて「メニューに追加」をクリック。右端の「メニューを保存」をクリックすると上部に「メニューを更新しました。」と表示されました。これでメニューができました。しかしこのままではまだ、サイトに何も表示されません。次にメニューを表示させるためのコードを書いて行きます。
メニューバーはすべてのページで共通に表示させるため、「home.php」ではなく「header.php」に記載します。

メニューを画面に表示させる

管理画面から「外観」＞「テーマの編集」で「ヘッダー（header.php）」を開きます。
一番最後の＜/div＞の1行前に以下のコードをコピーして貼り付け。
[php]

<div id="nav">
<?php wp_nav_menu(array(
'theme_location' => 'navigation'
)); ?>
</div>
[/php]
するとヘッダーの最後の部分が
[php]

<div id="header">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>

<div id="nav">
<?php wp_nav_menu(array(
'theme_location' => 'navigation')); ?>
</div>
</div>
[/php]
このようになると思います。

「ファイルを更新」してサイトを表示させます。
画面にメニューが表示されました。
後はスタイルシートで見た目を整えます。

ヘッダーメニューのスタイル指定

ワードプレスの管理画面・メニュー項目の中から「外観」＞「テーマの編集」を開きます。「スタイルシート（style.css）が選択されている事を確認して　”/* フッター */” と書かれた上に以下のコードをコピーして貼り付けます。
[css]
/* ナビゲーションバー */
div#nav {font-size: 0.75em;
height: 30px;
background-color: #baf1f9;
border: solid 1px #aaaaaa;
margin-bottom: 8px}
div#nav ul{margin: 0; padding: 0}
div#nav li{list-style-type: none; float: left}
div#nav li a {display: block;
width: 162px;
line-height: 30px;
border-right: solid 1px #aaaaaa;
color: #000000;
text-align: center}
div#nav li a:hover {background-color: #a6d8f6}
[/css]