Learning site for website creation

010:メニュー機能を使用可能にする

公開日:2020年11月06日 更新日:2020年11月09日

メニュー機能を有効にする

管理画面「外観」内に「メニュー」の項目がありません。

管理画面「外観」に「メニュー」機能を追加するには「functions.php」を使用します。メニュー機能を有効にする命令を記述します。

functions.php

/*********************************
 メニュー機能追加
**********************************/
// メニュー機能追加
// メニューに位置指定チェックボックス作成
function register_menu() {
  register_nav_menus( [
    'header-nav' =>'ヘッダーメニュー',
  ] );
}
add_action( 'init', 'register_menu' );

管理画面「外観」に「メニュー」機能が追加されます。

また「メニュー構造」の下部に「メニューの位置」と「ヘッダーメニュー」のチェックボックスが追加されています。

このチェックボックスは作成したメニューの表示位置を指定する際に使用します。

メニュー表示用関数

管理画面「外観」>「メニュー」で作成したメニューを表示するにはwp_nav_menu関数を使用します。

Googleの検証ツールで確認したHTMLコードをもとにCSSを変更します。

<?php
wp_nav_menu( [
  'container' => false,
  'theme_location' => 'header-nav',
]);
?>

公式サイトでどのような引数を設定できるか調べてみましょう。

wp_nav_menu()

メニュー以外でリンク先を指定する方法

WordPressではURLをスラッグで管理しているため、該当ページのスラッグをリンク先の値に設定します。

外部ファイルと同様リンク先も絶対パスで指定します。

その際、WordPressのトップディレクトリURLを取得できるのがhome_url関数です。出力する際はecho命令を忘れないようにしましょう。

<?php echo home_url(); ?>

「ブログ一覧 >」に投稿一覧へのリンクを設定します。

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

register_nav_menus()

add_action()