WP スマホ メニューボタン

header.php

<header>

<div class="sitenav">
<button type="button" id="navbtn">
<i class="fa fa-bars"></i><span>MENE</span>
<?php wp_nav_menu(array(
'theme_location' => 'sitenav',
'container' => 'nav',
'container_class' => 'mainmenu',
'container_id' => 'mainmenu'
));
?>

</div>

</header>

------

style.css

 

@media(max-width:767px) {
/* ナビメニュー */
.mainmenu ul {margin: 0;padding: 0; list-style: none;}
.mainmenu li a{display: block; padding: 10px 5px; text-decoration: none; color: #fff; font-size: 13.8px;font-weight: 600;}
.mainmenu li a:hover {background-color: #eeeeee;}

/* トグル */
header .inner{position: relative;}
#navbtn{position: absolute;top:15px; right: 5px;padding: 6px 12px; border: solid 1px #aaaaaa; border-radius: 5px;
background-color: #fff; cursor: pointer;}

#navbtn i {color:#888888;font-size: 18px;}

#navbtn span {display: inline-block;text-indent: -999px;}
}

-----

functions.php

// カスタムメニュー
register_nav_menu('sitenav', 'サイトナビロケーション');

//トグルボタン
function navbtn_scripts() {
wp_enqueue_script('navbtn-script', get_template_directory_uri().'/navbtn.js', array('jQuery'));
}
add_action('wp_enqueue_script', 'navbtn_scripts');

 

wp_enqueue_script 引数1 => ハンドル名(名前規則は、任意なのでどんな名前でもOK)

引数2 =>スクリプトのURL

引数3 => 依存関係にあるスクリプト

--------

navbtn.js (テーマフォルダ index.php と同じ階層) jsフォルダに入れる場合は

functions.php の get_template_directory_uri() . 'js/navbtn.js'

// menu btn
jQuery(function(){
jQuery('#navbtn').click(function(){
jQuery('.mainmenu').slideToggle();
});
});