WordPressでdrawer.js実装

2024年5月16日

WordPress

CDN読み込み

▼一部参考

【jQuery】簡単にドロワーメニューを実装できる「Drawer」の使い方

公式サイトよりCDNの記述をコピーしてheadタグ内に張り付け

▼functions.php

<?php
add_action('wp_head', function () {
?>
<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<!-- jquery & iScroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<!-- drawer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
<!-- bootstrap（ドロップダウンメニューにするなら必要） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<?php 
});

各ファイルマークアップ

▼header.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="<?php bloginfo( 'description' )?>">
  <title><?php bloginfo( 'name' ); ?></title>
  <?php wp_head(); ?>
</head>
<body class="drawer drawer--right drawer--navbarTopGutter">
    <header class="drawer-navbar drawer-navbar--fixed" role="banner">
    <div class="drawer-container">
      <div class="drawer-navbar-header">
        <a class="drawer-brand" href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
        <button type="button" class="drawer-toggle drawer-hamburger">
          <span class="sr-only">toggle navigation</span>
          <span class="drawer-hamburger-icon"></span>
        </button>
      </div>
    </div>    
    <nav class="drawer-nav" role="navigation">
      <!-- メニューの読み込み -->
      <?php wp_nav_menu( array( 
        'theme_location' => 'my-drawer', 
        'menu_class' => 'drawer-menu', 
        'container' => false, 
        'depth' => 1,
        'add_li_class' => 'nav-item', // liタグへclass追加
        'add_a_class' => 'drawer-menu-item' // aタグへclass追加 
        ) ); ?>
    </nav>
    </header>
    <main role="main">

下記サイトを参考にナビゲーションメニューの要素にクラス付与

▼functions.phpに追記

ナビゲーションメニューの要クラス付与のためのフィルターイベント
スタイル調節のためのCSS
Drawerを動かすために、jQueryのコード

// wp_nav_menuのliにclass追加
function add_additional_class_on_li($classes, $item, $args)
{
if (isset($args->add_li_class)) {
$classes['class'] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);

// wp_nav_menuのaにclass追加
function add_additional_class_on_a($classes, $item, $args)
{
if (isset($args->add_li_class)) {
$classes['class'] = $args->add_a_class;
}
return $classes;
}
add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 1, 3);

add_action('wp_head', function () {
?>
<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<!-- jquery & iScroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<!-- drawer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
<!-- bootstrap（ドロップダウンメニューにするなら必要） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.drawer-navbar {			
left: 0;
}
.drawer-hamburger {
padding: calc(1.875rem - 13px) .75rem;
}
</style>
<script>
jQuery(function ($) {
$(document).ready(function() {
$('.drawer').drawer();
});
});
</script>
<?php 
});

参考サイト）wp_nav_menuでliやa要素にclassを追加する方法：
https://zenn.dev/minnanowp/articles/823e3eabd24f20

▼footer.php

</main>
<?php wp_footer(); ?>
<script>
jQuery(function ($) {
$(document).ready(function() {
$('.drawer').drawer();
});
});
</script>
</body>
</html>