WordPress テーマをゼロから作成する方法がわかったので、テーマにカスタム ナビゲーション メニューを作成する方法について見ていきましょう。 このメニューは、WordPress ダッシュボードから制御できる機能を備えている必要があります。 つまり、ダッシュボードにアクセスして、好きなページ、投稿、カテゴリへのリンクを追加したり削除したりできるようにする必要があります。 このチュートリアルの終わりには、まさにそれが実現されています。
Open header.php
Go ahead and open up the header.php file from the theme we have been working on. 私たちの目標は、メインサイトのコンテンツの上に、サイト名とキャッチフレーズ領域の下にあるメニューを追加することです。 これを行うには、以下のコードを追加します：
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php wp_nav_menu() ?> </nav> </header>WordPress が提供する wp_nav_menu() という特別な関数を使用することに注意してください。 この関数は、カスタムメニューを作成するためのすべての作業を代行してくれます。 自分ですべてのhtmlを手入力する必要がないので、非常に便利です。 
wp_nav_menu() 関数に引数を渡す
WordPress のほとんどの関数と同様に、wp_nav_menu() 関数にオプション引数を渡すことができます。 ここでは、配列を設定して、オプションを1つだけ設定します。 将来的に複数のオプションを渡したい場合に備えて、配列を使用しています。
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php $args = ; ?><?php wp_nav_menu( $args ) ?> </nav> </header>このオプションは、テーマ内の特定のメニューに名前を付ける方法を提供します。 複数のメニューを持つこともできますし、これは複数のメニューを区別するための方法です。
Register Menu Location in functions.php
先ほど header.php ファイルで作成したメニューを WordPress 管理ダッシュボードから使用するには、テーマの functions.php ファイルにそのメニューの場所を登録する必要があります。 では、どのようにすればWordPressに新しいメニューを登録できるのでしょうか？ WordPressに組み込まれているregister_nav_menus()という関数を使えばいいんです。
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Configure our custom menu in WordPress Dashboard
これで新しいメニューがWordPressコアに登録されたはずです。 WordPress は、メニューとそれがテーマ内にあることを認識しています。 これで、ダッシュボードに移動して、新しいメニューを作成し、その位置を管理することができます。 具体的には、wp_nav_menu()関数を使用した場所に表示させたいと思います。 外観->メニュー
このメニューには、好きな名前を付けることができます。 
この次のステップでは、すべてのカテゴリにリンクされます。 そのため、[カテゴリ]、[すべてを選択]、[表示場所]を[プライマリ メニュー]に更新し、[メニューの保存]をクリックできます。 試してみましょう。
サイトにアクセスすると、作成した新しいメニューで各カテゴリへのリンクが表示されていることがわかります。 現時点では順序なしリストのみで、まだ最も美しいとは言えませんが、機能しています！
カスタム メニューを登録する利点は何ですか
I know, I know. 自分のサイトに表示されるいくつかのカテゴリへのハイパーリンクを得るために、こんな大騒ぎをするのは意味がないと思っていることでしょう。 ある意味、その通りです。 自分で手作業で作ればいいじゃないですか。 しかし、今回のようにメニューを作成すると、WordPressのダッシュボードを利用して、テーマに含まれるコードをコントロールすることができます。 ダッシュボードからリンクの順序などを簡単にドラッグ＆ドロップできるようになりました。 WordPress、PHP、JavaScriptの順番から、JavaScript、WordPress、PHPの順番に変更してみましょう。 とても簡単です！
これで、サイトにアクセスしたときに、メニューのリンクの順序が更新されます。 このアプローチでは、基本的なコードをいじくる必要はありません。
Style that custom menu
That unordered list is just going to cut it! それよりももう少しスマートなものを作る必要があります。 少し時間をかけてカスタム CSS を適用し、メニューを少しきれいにしてみましょう。 まず、縦書きの順不同リストを横書きのメニューに変更します。 また、各リスト要素の箇条書きを削除し、パディングとマージンを追加し、リンクのアンダーラインを削除したいと思います。
/* Nav Menu */.navigation-menu ul { margin: 0; padding: 0;}.navigation-menu ul:before, .navigation-menu ul:after { content: ""; display: table;}.navigation-menu ul:after { clear: both;}.navigation-menu ul { *zoom: 1}.navigation-menu ul li { list-style: none; float: left; margin-right: 3px;}.navigation-menu ul li a:link,.navigation-menu ul li a:visited { display: block; padding: 12px 17px; border: 2px solid #ecf0f1; border-bottom: none; text-decoration: none;} 上に挙げた CSS では、多くのことが行われています。 それを見て行きましょう。 最初の .navigation-menu ul セレクタで、順序なしリストからすべてのパディングとマージンを削除しています。 次に、順番なしリストがリスト項目の子供のフロートをクリアすることを確認しています。 .navigation-menu ul li セレクタでは、リストから箇条書きを削除し、リスト項目を左にフロートさせ、右に少しマージンを追加しています。 最後に、リンクをターゲットにしています。 まず、リンクをブロックレベル要素に変換し、パディングを垂直方向に12px、水平方向に17pxに設定します。 そして、美しいボーダー効果を追加し、リンクの下線を削除します。 ブラウザで確認してみましょう。
素晴らしい! そのメニューは、最初に見たときよりもずっと良くなっています。
How to add a custom color on hover to the menu
The basic styling ins in place. 各リンクにマウスを移動させたときに、ちょっとしたホバー効果があるとよいかもしれません。 これは、次のスニペットを使用して非常に簡単に設定できます。
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
かなりよさそうですね。 これは、単純なホバー効果とは異なります。 この場合、メニューから特定のリンクにアクセスしたときに、WordPress が、これが現在表示されているアクティブなページであることを認識し、アクティブなリンクを反映するように視覚表現を更新するようにしたいのです。 そのためには、WordPressに組み込まれている特別なクラスを利用することができます。 これがcurrent-menu-itemクラスです。
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}今、私たちのサイトにアクセスし、カスタム メニューのさまざまなリンクにアクセスしてみると、とてもきれいに表示されていることがわかります。 ホバー状態には特定の外観があり、メニュー内のリンクのアクティブ状態には別の外観があります。 これは、いわばアクティブなメニューが点灯し続けることによって、サイト訪問者が現在どこにいるのかを知るための素晴らしい方法です。 
How To Create A Custom Menu In WordPress Summary
このチュートリアルでは、WordPress のカスタム テーマにカスタムメニューを追加する方法をよく見てきました。 WordPressの関数をいくつか利用しています。 最初に使用したのは、wp_nav_menu()です。 この関数は、自動的に順序なしリストと子要素を構築して、スタイリングを適用できる素敵なメニューの構造を作成することができます。 この関数に渡すことができる引数はたくさんありますが、ここでは基本的なものだけに焦点を当てました。 次に利用したのは、register_nav_menus()という関数です。 この関数によって、WordPress に新しいメニューについて知らせ、WordPress ダッシュボードでそのメニューにフックすることができます。 いったん新しいメニューがWordPressに登録されると、WordPressのダッシュボードから、テーマファイルのコードを編集することなく、メニューに好きなものを追加したり削除したりすることが簡単にできることがわかりました。 最後に、いくつかのカスタム CSS スタイルを使用して、メニューの外観を改善するために時間をかけました。