WordPress のテーマをゼロから作ってみます。3回目です。今回はメニューを作成します。1回目、2回目は下のリンクからご覧ください。

• WordPress：テーマをゼロから作ってみる

• メニューの登録
• メニューの作成
• メニュー項目を追加
• メニューの表示

01メニューの登録

すでに第1回目で functions.php にメニュー登録を済ませていますので管理画面を開けばメニューを作成することができますが、再度登録から整理してみます。

メニューを登録しませんと下の画像のように管理メニューの外観にメニュー項目が現れません。

functions.php に次のように追加します。

register_nav_menus( array(
    'primary-nav' => 'Primary Nav',
    'secondary-nav' => 'Secondary Nav') 
);

これでメニュー項目が現れ、2つのメニューが登録されました。「メニューの位置」に Primary Nav と Secondary Nav がみえています（スクショを忘れたようです。次の項目の画像を参照してください）。これからメニューを作成し、そのどちらかに登録することになります。

• 関数リファレンス/register nav menus

02メニューの作成

外観 -> メニュー と進みます。メニューの作成は項目をみれば直感的にわかると思います。

まず、「メニュー名」を入れ、「メニューの位置」を選択し、「メニューを保存」をクリックしますと下の画像のように「メニュー項目を追加」が選択可能になります。

新しいメニュー、この場合は Secondary Nav に登録するメニューを作成する場合は、一番上の「新しいメニューを作成しましょう」をクリックし上の作業と同じことをします。メニューの位置は Secondary Nav を選びます。

03メニュー項目を追加

左の項目、固定ページ、投稿、カスタムリンク、カテゴリーからメニューにするものを選択し、「メニューに追加」をクリックするだけです。

メインメニューに各カテゴリーを追加しています。現在サンプルデータとして使っているのは映画のレビューサイトのデータですので記事が五十音順のカテゴリーに登録してあります。サンプルですので記事は30件ほどしか登録してありませんので五十音すべては揃っていない状態です。

各項目の位置はドラッグすれば変えられます。

というように各メニューを追加していけばいいのですが、今回は各カテゴリーに親アイテムを追加し各カテゴリーはその下の副項目とします。メニューとしては「カテゴリー」を表示し、マウスオーバー、またはクリックで各メニューを表示するようにします。

Secondary Nav には「ページトップへ戻る」と「ホーム」を追加します。

カスタムリンクを使い、「ページトップ」は URL にとりあえず 「#pagetop」としておき、後に body タグなどに id=”pagetop” を指定します。「ホーム」の URL は「/」としておきます。

04メニューの表示

メニューはできましたが、これだけでは表示はされません。メニューを表示するには、wp_nav_menu() 関数を使い、

<?php wp_nav_menu( $args ); ?> 

などと好きな場所に挿入します。

今回は、Main Menu の primary Nav は index.php の header と main 要素の間に挿入します。

略

<header>
	<?php echo (is_home()) ? '<h1>' : '<p>'; ?>
        <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
	<?php echo (is_home()) ? '</h1>' : '</p>'; ?>
    <p><?php bloginfo('description'); ?></p>
</header>
<nav>
	<?php wp_nav_menu( array( 'theme_location' => 'primary-nav' ) ); ?>
</nav>
<main>
	<nav>パンくずリスト</nav>

略

デフォルトで id や class がたくさん追加されます。パラメーターがたくさんありますので細かく設定することも可能です。

• テンプレートタグ/wp nav menu

こうなります。後は CSS で整形するだけです。

Sub Menu はフッターの下に入れておきます。

略

</main>
<aside>サイドバー</aside>
<footer>フッター</footer>
<nav>
	<?php wp_nav_menu( array( 'theme_location' => 'secondary-nav' ) ); ?>
</nav>
</body>
</html>

こうなります。こちらも後は CSS の領域です。

これでメニューが出来ました。次はサイドバーです。