WordPressは非常に柔軟なCMSで、カスタムメニューに対してさまざまなカスタマイズを行うことが可能です。その一つが独自のWalkerクラスを設定し、メニュー項目に「タイトル属性」や「説明」を反映させる方法、そして任意のクラスを反映させるカスタマイズです。これを実現するためには、以下のようなステップが必要となります。
ステップ1: 独自のWalkerクラスを設定する
まず、functions.phpファイルに独自のWalkerクラスを作成します。このWalkerクラスは、メニュー項目に対して任意のクラスを反映させ、さらに「タイトル属性」や「説明」を反映させる機能を持つように設計されています。
/* メニューに独自のWalkerクラスを設定する */
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth=0, $args=array(), $id = 0) {
$classes = empty($item->classes) ? array() : (array) $item->classes;
$classes［］ = 'menu-item-' . $item->ID;
if(isset($args->item_class)) {
$classes［］ = $args->item_class;
}
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
!empty ($class_names)
and $class_names = ' class="' . esc_attr($class_names) . '"';
$output .= "<li id='menu-item-$item->ID' $class_names>";
//タイトル属性が設定されている項目に対してのみ、タイトル属性を反映させる
$attributes = ! empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) .'"' : '';
$attributes .= ! empty($item->target) ? ' target="' . esc_attr($item->target ) .'"' : '';
$attributes .= ! empty($item->xfn) ? ' rel="' . esc_attr($item->xfn ) .'"' : '';
$attributes .= ! empty($item->url) ? ' href="' . esc_attr($item->url ) .'"' : '';
//カスタムメニューに任意のクラスを反映させる
$attributes .= isset($args->link_class) ? ' class="' . esc_attr($args->link_class) .'"' : '';
//説明を<a>タグの内部に表示されるようにする
$description = !empty($item->description) ? '<span class="menu-description">'.esc_attr($item->description).'</span>' : '';
$item_output = $args->before
. "<a $attributes>"
. $args->link_before
. apply_filters('the_title', $item->title, $item->ID)
. $description // Add the description here
. $args->link_after
. '</a> '
. $args->after;
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
}
ここでは、WordPressの内蔵関数Walker_Nav_Menuを継承したカスタムクラスCustom_Walker_Nav_Menuを作成しています。
ステップ2: カスタムメニューに任意のクラスを反映させる
次に、カスタムメニューに任意のクラスを反映させるためのコードを追加します。
// (既存のコードは省略)
$attributes .= isset($args->link_class) ? ' class="' . esc_attr($args->link_class) .'"' : '';
// (既存のコードは省略)
このコードは、メニュー項目に任意のクラスを反映させるためのものです。
ステップ3: カスタムメニューをショートコードで表示する
最後に、ショートコードを使用してカスタムメニューを表示するためのコードを追加します。
/* カスタムメニューをショートコードで表示出来る様にする */
/* ［cmenu menu="メニュー名" container_class="nav-headmenu1" menu_class="menu-headmenu1" item_class="item-headmenu1" link_class="link-headmenu1"］ */
function custom_menu_nav($atts, $content = null) {
extract(shortcode_atts(
array(
'menu' => '',
'container' => 'nav',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'item_class' => '', //追加
'link_class' => '', //追加
'walker' => new Custom_Walker_Nav_Menu(),
'theme_location' => ''
),
$atts
));
return wp_nav_menu(array(
'menu' => $menu,
'container' => $container,
'container_class' => $container_class,
'container_id' => $container_id,
'menu_class' => $menu_class,
'menu_id' => $menu_id,
'echo' => false,
'fallback_cb' => $fallback_cb,
'before' => $before,
'after' => $after,
'link_before' => $link_before,
'link_after' => $link_after,
'depth' => $depth,
'item_class' => $item_class, //追加
'link_class' => $link_class, //追加
'walker' => $walker,
'theme_location' => $theme_location
));
}
add_shortcode("cmenu", "custom_menu_nav");
/* ［ulmenu menu="メニュー名" menu_class="menu-headmenu1" item_class="item-headmenu1" link_class="link-headmenu1"］（※コンテナ＝ false） */
function custom_menu_list($atts, $content = null) {
extract(shortcode_atts(
array(
'menu' => '',
'container' => false,
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'item_class' => '', //追加
'link_class' => '', //追加
'walker' => new Custom_Walker_Nav_Menu(),
'theme_location' => ''
),
$atts
));
return wp_nav_menu(array(
'menu' => $menu,
'container' => $container,
'container_class' => $container_class,
'container_id' => $container_id,
'menu_class' => $menu_class,
'menu_id' => $menu_id,
'echo' => false,
'fallback_cb' => $fallback_cb,
'before' => $before,
'after' => $after,
'link_before' => $link_before,
'link_after' => $link_after,
'depth' => $depth,
'item_class' => $item_class, //追加
'link_class' => $link_class, //追加
'walker' => $walker,
'theme_location' => $theme_location
));
}
add_shortcode("ulmenu", "custom_menu_list");
/* ［limenu menu="メニュー名" item_class="item-headmenu1" link_class="link-headmenu1"］（※コンテナ＝ false、ul削除） */
function custom_menu_list_item($atts, $content = null) {
extract(shortcode_atts(
array(
'menu' => '',
'container' => false,
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '%3$s',
'depth' => 0,
'item_class' => $item_class, //追加
'link_class' => $link_class, //追加
'walker' => new Custom_Walker_Nav_Menu(),
'theme_location' => ''
),
$atts
));
return wp_nav_menu(array(
'menu' => $menu,
'container' => $container,
'container_class' => $container_class,
'container_id' => $container_id,
'menu_class' => $menu_class,
'menu_id' => $menu_id,
'echo' => false,
'fallback_cb' => $fallback_cb,
'before' => $before,
'after' => $after,
'link_before' => $link_before,
'link_after' => $link_after,
'items_wrap' => $items_wrap,
'depth' => $depth,
'item_class' => $item_class, //追加
'link_class' => $link_class, //追加
'walker' => $walker,
'theme_location' => $theme_location
));
}
add_shortcode("limenu", "custom_menu_list_item");
ここでは、「cmenu」「ulmenu」「limenu」というショートコードを作成しています。このショートコードは、カスタムメニューを表示します。
まとめ
以上のように、WordPressのカスタムメニューは非常に柔軟なカスタマイズが可能です。この機能を活用して、ユーザーエクスペリエンスを向上させることが可能です。自分だけのオリジナルなカスタムメニューを作成してみてはいかがでしょうか。
