WordPressでオリジナルのメニューを作りたい

ヘッダーやサイドバーに固定ページの一覧を表示する形式をよく見かけますが
固定ページが多かったり、特定のページだけをメニューに表示したいとき
全ての一覧が表示されてしまうと困ります。。が、
WordPressにはカスタムメニューといって、
自分で自由にメニューを作れる機能が備わっています。

さっそくカスタムメニューを使ってオリジナルのメニューを作ってみましょう。

テーマ内の functions.phpを作成、編集する

テーマファイル内に functions.php がなければ、同名ファイルを作成します。

管理画面でメニュー機能を使えるようにする

<?php

add_theme_support('menus');

?>

上のソースを functions.php に追加します。

これで管理画面に「メニュー」が追加されました！

管理画面からメニューを作成する

メニュー設定画面です。まずは右側にあるメニューの新規作成をします。

メニュー名を入力して保存します。
この名前は後にclass名にもなるので、なるべく英数字を使ったほうがいいかもしれません。

メニューが登録されたので、
次はメニューに入れたい自由なURLや固定ページ、カテゴリーを登録します。

登録しました！メニューにページが追加されましたね。
実はこの画面でドラッグ＆ドロップで順番を入れ替えることもできます。

最後に「メニューの保存」をクリックして完成です。

作ったメニューを表示してみる

<?php wp_nav_menu(); ?>

メニューを表示したい場所にこの１行を追加します。
表示も簡単ですね。

もし複数メニューを追加した場合は、下記のように引数で名前を指定してあげましょう。

<?php wp_nav_menu( array('menu' => 'header_menu' )); ?>

メニューはリスト形式で出力されます。

<div class="menu-header_menu-container">
	<ul id="menu-header_menu" class="menu">
		<li id="menu-item-223" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-223"><a href="https://site-manage.net/management/">運営サポート</a></li>
		<li id="menu-item-224" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-224"><a href="https://site-manage.net/flow/">導入までの流れ</a></li>
		<li id="menu-item-225" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-225"><a href="https://site-manage.net/price/">価格・プラン</a></li>
		<li id="menu-item-226" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-226"><a href="https://site-manage.net/company/">会社概要</a></li>
	</ul>
</div>

自作メニューの完成です！
あとはお好みでCSSを使って調整をしていきましょう。