カスタムメニューを作成する[add_theme_support][wp_nav

テーマを一から作成する　第9回目

前回は固定ページを作成しました。今回は、カスタムメニューを作成します。

第8回目

WordPressにはカスタムメニューという機能があり、ナビゲーションメニューを効率よく作成することができます。

カスタムメニュー機能を利用するには、まずfunctions.phpにadd_theme_support(‘menus’);を追記します。カスタムメニュー機能を利用するには他にも、register_nav_menuやregister_nav_menus関数もありますが、今回はadd_theme_support(‘menus’)を利用します。

functions.php

<?php

function sample_scripts(){
  wp_enqueue_style('style', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts', 'sample_scripts');
  

//カスタムメニュー
add_theme_support('menus');

<?php

function sample_scripts(){

wp_enqueue_style('style', get_stylesheet_uri() );

}

add_action('wp_enqueue_scripts', 'sample_scripts');

//カスタムメニュー

add_theme_support('menus');

10行目にてadd_theme_support(‘menus’);を追記している。

すると管理画面にメニューという項目が表示されます。

メニュー

メニュー画面ではメニュー項目の順番を変更したり、メニューのラベルを変更することができます。下記の画面では、メニュー名に「Menu 1」が設定されています。

メニュー初期画面

メニューを保存したら、実際にこの「Menu 1」カスタムメニューをヘッダー部分（header.php）に表示させます。

header.phpに下記のコード記述して下さい。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<?php wp_head(); ?>
</head>

<body>
<header>
  <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
  
  <?php
    $args = array(
      'menu' => 'Menu 1',
      'container' => 'nav',
    );
    wp_nav_menu( $args );
   ?>
  
</header>

<!DOCTYPE html>

<html>

<head>

<?php wp_head(); ?>

</head>

<body>

<?php

$args = array(

'menu' => 'Menu 1',

'container' => 'nav',

);

wp_nav_menu( $args );

</header>

14〜20行目

カスタムメニューを画面で表示させるには、wp_nav_menuタグを利用します。

menuパラメータにおいてメニュー名「Menu 1」を指定しています。containerパラメータに「nav」を指定すると、メニュー部分がnavタグで囲まれるようになります。初期値はdivです。パラメータについては参照ページをご覧下さい。今回は行いませんが、後はCSSで見た目を整えるだけです。

カスタムメニューを追加する

実験的にカスタムメニューをもう一つ追加してみます。メニュー画面にて新規メニューを作成して下さい。

新規メニュー

メニュー名にtestと指定し、メニュー項目は「お問い合わせ」と「自己紹介」の二つにしてみました。

作成したメニューの編集画面へは以下のように選択できます。

メニューの編集

作成した「test」という名前のカスタムメニューをフッター部分（footer.php）に表示させてみます。

footer.phpに下記のコード記述して下さい。

<footer>
  
  <?php
    $args = array(
      'menu' => 'test',
      'container' => 'nav',
    );
    wp_nav_menu( $args );
   ?>
  
</footer>

<?php wp_footer(); ?>
</body>
</html>