特定のメニューをテーマ内の他のメニューの外観に変更したい

mosir はメニューが表示される位置（メニュー）によってメニューの外観が決まっています。

デフォルトで「パイプ区切り」となっているメニューを、テーマ内にすでにあるメニューに変更する場合は、以下の通り作業してください。

選択したメニューによっては大きく崩れることがあります。その場合は項目数や階層数を減らしてください。

1. メニューを含むテンプレートを複製する

変更したいメニューが含まれるテンプレートを、 mosir コアから利用中の子テーマに複製してください。メニューごとのテンプレートの場所は、下記リンク先を参照ください。

メニューに関する情報一覧

2. 変更したいメニューのCSSセレクタを調べる

「メニューに関する情報一覧」には、メニューの外観とCSSセレクタの対応表も記載されています。変更したいメニューのモジュール名を控えてください。

3. メニューを実行している関数を書き換える

例えば、冒頭のスクリーンショットの場合、ヘッダの上段右＝「ヘッダ: メニュー 3」となります。このメニューのIDは header_nav_03 で、 template-parts/header-top.php 内にあります。

header_nav_03 は、以下のようなコードで実行されているので

<?php
if( has_nav_menu('header_nav_03') ) {
  wp_nav_menu(
    array(
      'theme_location' => 'header_nav_03',
      'container'       => 'div',
      'container_class' => 'l-header__menu03 p-horizontalMenu',
      'menu_id' => 'header-nav-03',
      'menu_class' => 'menu p-horizontalMenu__nav c-nav',
      'link_before'      => '<span class="menu-label c-nav__item__label">',
      'link_after'      => '</span>',
    )
  );
}
?>

以下の通り、変更したいメニューのCSSセレクタに書き換えてください。

ここではボタンメニューにしたいので horizontalMenu を buttonMenu に書き換えます。配列内の container_class と menu_class の二箇所あります。

<?php
if( has_nav_menu('header_nav_03') ) {
  wp_nav_menu(
    array(
      'theme_location' => 'header_nav_03',
      'container'       => 'div',
      'container_class' => 'l-header__menu03 p-buttonMenu',
      'menu_id' => 'header-nav-03',
      'menu_class' => 'menu p-buttonMenu__nav c-nav',
      'link_before'      => '<span class="menu-label c-nav__item__label">',
      'link_after'      => '</span>',
    )
  );
}
?>

テンプレートを更新後、ページを再読込して表示を確認してください。