【WordPress】【CSSのみ】レスポンシブ対応ドロップダウンメニューの作り方

以前，「CSSのみでの多階層ドロップダウンメニューを作成」という記事を投稿したが，このページは多数の方に読まれている人気のページとなっている．

ただし，これは通常の静的に作ったサイト用のもので，WordPress で使おうとすると少し工夫が必要だった．
工夫といっても，WordPress の管理画面で作るのではなく，プログラムとしてファイルで作成していた．

自分で触るにはこちらの方が都合がよいのだが，メニューだけ別物感が漂っていた．
まあ，そのままでもいいのだが一般的に WordPress を使っている方がサイトに適用するには少し面倒な部分があるので，WordPress のメニューで自在に変更できるように組み込んでしまう方法を説明することにする．

プラグインはなるべく使いたくないので，こちらで紹介するのはプラグインを使わない方法である．
「WP Responsive Menu」というようなプラグインが存在するようだが，そのようなものは使わない．
ちょっと説明を見た限り，背景色を変えるとか，いろいろ出来るようだがそれは CSS を使ったり，以下で紹介するスクリプトを変更・追加すれば実現できるだろう．
現在，本サイトのメニューは以下で説明する方法を使って WordPress で作成している．
見れば分かるようにアイコンの画像を出したり，やろうと思えば色々可能である．

しかし，これは多階層版ではない．一段だけにしている．前は多階層で作ったのは作ったが実際にはあまり使われるケースはないと思われるので一階層だけドロップダウンするものとなる．
スマホ時にはハンバーガーメニューとなる．

WordPress にドロップダウンメニューを組み込むには

管理画面のメニューに追加

まず，WordPress の管理画面において，外観→メニューという表示を出す必要がある．
これは以下のスクリプトを functions.php に追加する．

※) 参考ページ

参考ページのコードそのままである．

add_action( 'after_setup_theme', 'register_menu' );
function register_menu() {
  register_nav_menu( 'main_navigation', __( 'Primary Menu', 'theme-slug' ) );
}

HTML部分

CSS部分は「CSSのみでの多階層ドロップダウンメニュー」の一階層版をそのまま使ってもらえばよい．
つまり，CSS は nav.css を使えばよい．

HTML部分は自動で吐き出すようにしなければならない．
まず，メニューを表示したい場所に以下のコードを挿入する．

<?php wp_nav_menu( array(
    'theme_location'=>'main_navigation',
    'container'       => false,
    'menu_class'    =>'',
    'add_li_class' => 'menu-parent',
    'items_wrap'    =>'<ul class="menu" id="main_navigation">%3$s</ul>',
    'walker'        => new custom_walker_nav_menu
  ));
?>

functions.php には以下のようにコードを追加する．
要は HTML で作成した部分を自動で作るようにしただけである．
ついでに id とか class とか色々付加されるものも削除してスッキリさせた．
何かに利用している場合は rm_id とか，add_depth0_li の前半部分を削除するとよい．
※) 参考ページ

// 箇条書きでメニュー作成
$inSubMenuCnt = 0;
class custom_walker_nav_menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth = 0, $args = array()) {
    global $inSubMenuCnt;
    $output .= '<input type="checkbox" id="menu-parent' . strval($inSubMenuCnt) . '"><label for="menu-parent' . strval($inSubMenuCnt++) . '"><span class="pd"><i class="fas angletoggle"></i></span></label><ul class="menu-child">';
  }
  function end_lvl(&$output, $depth = 0, $args = array()) {
    $output .= '</ul>';
  }
}
// メニューの id を削除
function rm_id($id){ 
  return false;
}
add_filter('nav_menu_item_id', 'rm_id', 10);

// 深さ 0 の li に class を追加．余計な class を消す．
function add_depth0_li($classes, $item, $args, $depth) {
  if (!empty($classes[0])) {
    $classes = array(esc_attr($classes[0]));
  } else {
    $classes = array();
  }
  if ($item->current == true) {
    $classes[] = 'current';
  }
  if ($depth == 0 && isset($args->depth0_li_class)) {
    $classes[] = $args->depth0_li_class;
  }
  return $classes;
}
add_filter('nav_menu_css_class', 'add_depth0_li', 10, 4);