WordPressは高いカスタマイズ性を持っていますが、特にカスタムメニューはその一例です。 今回は、さまざまなカスタマイズをカスタムメニューに適用する方法を詳しく見ていきましょう。

 

メニュー項目の説明を表示する

まず、WordPressのメニュー項目に説明を表示する方法について見てみましょう。これはカスタムウォーカーを作成することで可能です。以下にそのコードを示します。


/* カスタムメニューの説明を表示する */
class Description_Walker extends Walker_Nav_Menu {
  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    global $wp_query;
    $indent = ($depth) ? str_repeat("\t", $depth) : '';

    $class_names = $value = '';

    $classes = empty($item->classes) ? array() : (array) $item->classes;

    $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item));
    $class_names = ' class="' . esc_attr($class_names) . '"';

    $output .= $indent . '<li id="menu-item-' . $item->ID . '"' . $value . $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) . '"' : '';

    $description = !empty($item->description) ? '<span class="menu-walker">' . esc_attr($item->description) . '</span>' : '';

    $item_output = $args->before;
    $item_output .= '<a' . $attributes . '>';
    $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID);
    $item_output .= $description . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

    $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
  }
}

このコードは新しいカスタムウォーカーを作成し、各メニュー項目のHTMLをカスタマイズします。具体的には、各メニュー項目の説明（設定した場合）を、<span class="menu-walker">タグで囲んで表示します。

 

メニューのリンクにクラスを追加する

次に、メニューの各リンクに特定のクラスを追加する方法を見てみましょう。これはフィルターフックを使用して達成できます。


function add_class_menulink($item_output, $item) {
  return preg_replace('/(<a.*?)/', '$1' . ' class="menu-link"', $item_output);
}
add_filter('walker_nav_menu_start_el', 'add_class_menulink', 10, 4);

このコードはフィルターフックを使用して、メニューの各リンクにmenu-linkクラスを追加します。

 

タイトル属性を利用する

最後に、メニュー項目に設定されたタイトル属性を利用する方法を見てみましょう。これもカスタムウォーカーを使用して達成できます。


$attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';

このコード行は、メニュー項目にタイトル属性が設定されている場合のみ、その属性をリンクに追加します。

以上が今回紹介した主要なカスタマイズ方法です。これらのコードは、WordPressサイトのカスタムメニューを強力にカスタマイズするための一例で、これらを参考に自分だけのカスタムメニューを作成してみてください。