WordPress カスタムメニュー

  Code Tips minimum Theme

作成中の「Code Tips minimum Theme」でカスタムメニューを表示するようにします。

カスタムメニューとはナビゲーションメニューをダッシュボードの「外観」から追加・編集できるようにする仕組みです。

 

作成中の「Code Tips minimum Theme」でダッシュボードの「外観」>「メニュー」を開くと

現在お使いのテーマはカスタムメニュー機能に対応していませんが、ウィジェット画面でサイドバーに「カスタムメニュー」を追加できます。

とメッセージが表示されているので、これを対応するようにします。

 

カスタムメニューの登録

【functions.php】に register_nav_menu() を使ってカスタムメニューを登録します。

function register_my_menu() {
  register_nav_menu('primary', 'Primary Menu');
}
add_action('after_setup_theme', 'register_my_menu');

 

register_nav_menu()

1つのカスタムナビゲーションメニューをカスタムメニューエディタへ登録します(WordPress 3.0 以上で使えます)。管理者はこれを使ってテーマで使用するカスタムメニューを作成できます。

WordPress Codex : 関数リファレンス/register nav menu

register_nav_menu( $location, $description )

 

パラメータ
引数 説明
$location
文字列
必須
メニュー位置の識別子。スラッグに似ています
初期値:なし
$description
文字列
必須
メニューの説明。ダッシュボードでメニューを識別するのに使います
初期値:なし

 

以上で、先ほどの「外観」>「メニュー」に表示されていたメッセージは表示されなくなりました。

しかし、まだ登録したカスタムメニューを表示させるための「テンプレートタグ」を設置していないので表示させる場所がありません。

 

カスタムメニューの表示

登録したカスタムメニューを表示させるための「テンプレートタグ」 wp_nav_menu() を設置します。

【header.php】のサイトタイトルの下に wp_nav_menu() を設置してみます。

・・・略・・・
<body>
  <h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
  <?php wp_nav_menu(); ?>

 

wp_nav_menu()

このタグは、ナビゲーションメニューを表示します。メニューは 管理画面 > 外観 > メニュー で作成できます。
theme_location パラメーターが与えられた時、このタグは theme_location が示す位置へ割り当てられたメニューを表示します。その位置がない、またはメニューが割り当てられていない場合は、fallback_cb パラメーターで与えられた関数を呼び出してメニューを表示します。
theme_location パラメーターが与えられなかった場合、このタグは次の規則に従います。
menu パラメーターが与えられている場合、それ(ID、スラッグ、または名前)に一致するメニュー;
さもなくば、最初の空でないメニュー;
さもなくば(ひとつもメニューが定義されていない場合)、fallback_cb パラメーターで与えられた関数を呼び出す(デフォルトでは  wp_page_menu() );
さもなくば( fallback_cb が関数ではない)、何も表示しない。
注: WordPress 3.5 以降、メニュー項目がない場合は、HTML マークアップはなにも出力されなくなりました。

WordPress Codex : テンプレートタグ/wp nav menu

wp_nav_menu( $args );
$args = 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>',
);

 

パラメータ
引数 説明
$args
配列
オプション
パラメータを要素とする配列
初期値: 空の配列
パラメータ 説明
menu
文字列
オプション
望ましいメニュー。 id, slug, name をこの順で受け入れる
初期値: なし
menu_class
文字列
オプション
メニューを構成する ul 要素に適用するCSS クラス名
初期値:'menu'
menu_id
文字列
オプション
メニューを構成する ul 要素に適用するID
初期値:'{メニューのスラッグ}-{連番}'
container
文字列
オプション
ul をラップするか、ラップする場合は何でラップするか。使えるタグは、divnav。コンテナをなしにする場合は false
例: 'container' => false
初期値:div
container_class
文字列
オプション
コンテナに適用されるクラス名
初期値:'menu-{メニューのスラッグ}-container'
container_id
文字列
オプション
コンテナに適用されるID
初期値: なし
fallback_cb
文字列
オプション
メニューが存在しない場合にコールバック関数を呼び出す
初期値:wp_page_menu
before
文字列
オプション
リンクテキストの前のテキスト
初期値: なし
after
文字列
オプション
リンクテキストの後のテキスト
初期値: なし
link_before
文字列
オプション
リンクの前のテキスト
初期値: なし
link_after
文字列
オプション
リンクの後のテキスト
初期値: なし
echo
真偽値
オプション
メニューをHTML出力する( true )か、PHPの値で返す( false )か
初期値:true
depth
整数
オプション
何階層まで表示するか。0 は全階層。
初期値: 0
walker
オブジェクト
オプション
使用するカスタムウォーカーオブジェクト
注: You must pass an actual object to use, not a string
初期値:Walker_Nav_Menu
theme_location
文字列
オプション
タイトルの直後に出力する HTML テキスト
初期値:</h2>\n
items_wrap
文字列
オプション
Sprintf() 関数の引数として評価される書式の文字列です。 フォーマット文字列には番号付きトークンによって他のパラメーターが組み込まれています。 %1$s'menu_id' のパラメーターの値が展開され、 %2$s'menu_class' のパラメーターの値が展開され、 そして %3$s はリスト項目が値として展開されます。番号付きトークンをフォーマット文字列から省略すると、メニューのマークアップから関連するパラメーターは省略されます。
注: メニュー項目をかこむタグを除外したい場合(もし現在のテーマにメニュー項目をかこむタグが含まれている場合など)でも 、パラメータとして %3$s を渡す必要があります. もし空の文字列を渡してしまいますとメニューは表示されません。
初期値:<ul id="%1$s" class="%2$s">%3$s</ul>

 

wp_nav_menu() を設置したら、管理画面の「外観」>「メニュー」からメニューを作成します。

「メニューの位置」に先ほどの「カスタムメニューの登録」で【functions.php】に登録した register_nav_menu('primary', 'Primary Menu') の Primary Menu が選択できるようになっているのでそれを選択します。

primary-menu

 

以上でカスタムメニューが表示されます。

 

Code Tips minimum Theme

【functions.php】

<?php
// css
function register_style() {
  wp_register_style('style', get_stylesheet_uri(), array(), false, 'all');
}
function add_stylesheet() {
  register_style();
  wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

// sidebar
function my_widgets_init() {
  $my_widgets_param = array(
    'name' => 'Sidebar',
    'id' => 'sidebar-1'
  );
  register_sidebar( $my_widgets_param );
}
add_action( 'widgets_init', 'my_widgets_init' );

// custom menu
function register_my_menu() {
  register_nav_menu('primary', 'Primary Menu');
}
add_action('after_setup_theme', 'register_my_menu');

// search-form >> html5
add_theme_support('html5', array('search-form'));
?>

 

【header.php】

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<body>
  <h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
  <?php wp_nav_menu(); ?>