(cache)3.メニューを有効化して、リンクを動的に出力する

こんにちは！フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。

この記事は、Web制作初心者のかた向けに『実務で使えるWordPressを使ったサイト制作手法』ついて解説していく連載です。

前回の記事はこちら↓

3rdステップであるこの記事では、メニューを有効化し、リンクを動的に出力していきます。

1. 1.メニューを有効にするための記述をfunctions.phpに追加
2. 2.メニュー項目を設定する
3. 3.ロゴ / サブタイトルを動的に表示する
4. 4.メニューを動的に表示する
5. 演習課題：フッターに「フッターメニュー」を表示する

1.メニューを有効にするための記述をfunctions.phpに追加

まず、メニューを有効にするための記述をfunctions.phpに追加していきます。

実務でよく作るパターンとしては、ヘッダーメニュー、フッターメニュー、そしてスマホ閲覧時に表示させるドロワーメニューの3パターンなので、このレッスンでもその3つを作ることにします。

※フッターメニュー作成に関するコードは、演習課題にするため、あえて削除しています。最後に自力で作れるように、調べて理解しながら進めてくださいね👍

コピー

/**
* メニューの登録
*
* 参考：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_nav_menus
*/
function my_menu_init()
{
register_nav_menus(
array(
'global' => 'ヘッダーメニュー',
'drawer' => 'ドロワーメニュー',
)
);
}
add_action('init', 'my_menu_init');

メニューを登録すると、管理画面の「外観」に「メニュー」が表示されるようになったはずです。

これが出ていれば、正しく設定できています。

2.メニュー項目を設定する

『外観 > メニュー』から新規追加してみると、「メニューの位置」に先ほどfunctions.phpに追加したメニュー名が表示されているはずです。

表示させたいメニュー項目を追加して、どのメニュー位置で表示させたいのかを選択しましょう。

選択したら、メニューを保存してください。

3.ロゴ / サブタイトルを動的に表示する

それではグローバルメニュー全体を動的に表示していきます。

まずはロゴとサブタイトルの表示を動的に変えていきましょう！

管理画面の『設定 > 一般』で設定されている項目を表示していきます。

キーワード

is_home( )
is_front_page( )
esc_url( )
home_url( )
bloginfo( )

コピー
<!--
<h1 class="header-logo"><a href="/">blog title</a></h1>
<div class="header-sub">サブタイトルが入りますサブタイトルが入ります</div>
ここを動的に置き換える
-->
<?php if (is_home() || is_front_page() ) : //トップページではロゴをh1に、それ以外のページではdivに。 ?>
<h1 class="header-logo"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1><!-- /header-logo -->
<?php else : ?>
<div class="header-logo"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></div><!-- /header-logo -->
<?php endif; ?>
<div class="header-sub"><?php bloginfo('description'); //ブログのdescriptionを表示 ?></div><!-- /header-sub -->

これでブログのタイトルとサブタイトルが表示されるようになりました。

ちゃんと設定できているか、『一般』から変更して確認してみてくださいね。

4.メニューを動的に表示する

次はヘッダーメニューとドロワーメニューを動的にしていきます。

wp_nav_menu( ) にfunctions.phpで記述したメニュー名を引数として渡します。

キーワード

wp_nav_menu( )

ドロワーメニューのコード

コピー
<!-- drawer-content -->
<div class="drawer-content">
<?php
//.drawer-navを置き換えて、スマホ用メニューを動的に表示する
wp_nav_menu(
array(
'depth' => 1,
'theme_location' => 'drawer', //ドロワーメニューをここに表示すると指定
'container' => 'nav',
'container_class' => 'drawer-nav',
'menu_class' => 'drawer-list',
)
);
?>
</div><!-- /drawer-content -->

ヘッダーメニューのコード

コピー
<!-- header-nav -->
<nav class="header-nav">
<div class="inner">
<?php
wp_nav_menu(
//.header-listを置き換えて、PC用メニューを動的に表示する
array(
'depth' => 1,
'theme_location' => 'global', //グローバルメニューをここに表示すると指定
'container' => 'false',
'menu_class' => 'header-list',
)
);
?>
</div><!-- /inner -->
</nav><!-- header-nav -->