2021年9月10日

メニューの作り方　実装編【WordPress自作テーマ作成の道】

こんにちは！　けんじ　です

今回はWordPressのメニュー実装方法について記事にします。管理画面側で設定が完了しましたら、画面に表示させる為に実装を行なっていきましょう。

もし管理画面側での設定が完了されていなければ、こちらの記事よりご確認ください。
>>メニューの作り方　管理画面編【WordPress自作テーマ作成の道】

本記事の目次

1.メニューの作り方　実装編

1-1WordPressのメニューの実装とは何をするのか
1-2具体的な実装方法　「wp_nav_menu」
1-3具体的な実装方法　「wp_get_nav_menu_items」
1-4まとめ

メニューの作り方　実装編　【WordPress自作テーマへの道】

WordPressの管理画面でメニューの設定は出来たのですが、画面で表示される様にする為に実装はどうやってやるのでしょうか。実装は難しそうで気が重いです。どうやってやるのか簡単に教えてください。

この様な疑問にお答えします

WordPressのメニュー実装とは何をするのか

Word Pressのメニュー実装とは管理画面で設定したメニューをコーディングを行う事によって画面上に表示させるという事になります。

なぜこの実装を行うかというと、管理画面で設定したメニューと画面上に表示させるメニューを連携させる為ですね。連携させる事でWordPressの管理画面でメニューの管理が出来るので運用しやすいWEBサイトになります。

例えばここで管理画面上でメニューを設定していなかった場合、HTML/CSS　等でコーディングされたメニューのみになり、編集する際はエディーターからコードを修正する必要が出てきてしまうのです。なのでWordPressのメニューの実装は管理画面で設定を行う方が編集も管理しやすいですね。

具体的な実装方法　「wp_nav_menu」

「wp_nav_menu」　のテンプレートタグで実装する場合は、制限がある中でHTMLを使います。こちらの方が簡単ではありますが、カスタマイズ性は低くなるかと思います。なぜかというと、パラメーターが制限されているからです。具体的には下記の様なパラーメーターがCODEXに記述されています。

<?php
$defaults = array(
	'menu'            => '',
	'menu_class'      => 'menu',
	'menu_id'         => '{メニューのスラッグ}-{連番}',
	'container'       => 'div',
	'container_class' => 'menu-{メニューのスラッグ}-container',
	'container_id'    => '',
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'echo'            => true,
	'depth'           => 0,
	'walker'          => '',
	'theme_location'  => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
);
wp_nav_menu( $defaults );
?>

これらのパラメーターを任意で変更していきます。例えば、メニューを構成する ul 要素に適用したいクラス名が「menu_list」であれば下記の通り記載します。

<?php wp_nav_menu( array(
　　'menu_class' => 'menu_list',
) ); ?>

wp_nav_menu　にはカスタマイズ性に限りがありますが、こちらで十分なメニュー構成であれば問題ないかなと思いますね。

具体的な実装方法　「wp_get_nav_menu_items」

「wp_get_nav_menu_items」で実装する場合は、少々ややこしいですが割と自由度が高いです。やり方としてはリファレンスのサンプルプログラムを見ながらコーディングをするのが良いです。

>>wp_get_nav_menu_items　関数リファレンス

この様にまずはphpをコーディングします。リファレンスを参考にしつつですね。

<?php
    // メニューIDを取得する（term_id）
    $menu_name = 'global_nav';
    $locations = get_nav_menu_locations();
    $menu = wp_get_nav_menu_object($locations[$menu_name]);

    $menu_items = wp_get_nav_menu_items($menu->term_id);
?>

※コードの内容を少し解説

５行目：$menu = wp_get_nav_menu_object($locations[$menu_name]);

wp_get_nav_menu_items を使って　＄menu_name（global_navの内容）の内容を取り出す。

７行目：$menu_items = wp_get_nav_menu_items($menu->term_id);

$menuのterm_idを取り出し、メニューの設定の準備が完了！

これを行うことでメニューの内容を取得する事ができます！これはお決まりのコードなので、定型で覚えておくと良いかなと思います。

次にメニュー部分の作成ですが下記の様な感じです。(シンプルな構成にしています)

<ul class=" navbar-nav ">
    <?php foreach ($menu_items as $item) : ?>
      <li class="nav-item">
　　　　　　　　　　　　　　　<a class="nav-link" href="<?php echo $item->url; ?>">
　　　　　　　　　　　　　　　　　<?php echo $item->title; ?>
　　　　　　　　　　　　　　</a>
　　　　　　　　　　　</li>
    <?php endforeach; ?>
</ul>

ポイント

2行目〜8行目：
foreach 構文を使い繰り返しながらメニューを作成していきます。
2行目の「$menu_items」　が配列になっていて「$item」に１つずつ値を渡していって配列の内容がなくなるまで繰り返します。

4行目のaタグのhrefにはurlを入れたいですよね。なので「$item」の中から「url」を抜き出します。 5行目にはメニューのタイトルを入れたいので、「$item」から「title」を抜き出しています。

上記をグルグルと繰り返して配列がなくなるまで続ける事で「li」タグが生成され、無くなった時点で繰り返しが終わるという事になります。

これで「wp_get_nav_menu_items」を使いメニューを表示させる事ができます。デザインはCSSで調整してみてください！