Q&A###前提・実現したいこと
プラグイン「drawer」公式サイトやブログを参考に
Wordpressにおけるドロワーメニューの作成を行なっています。
プラグイン:drawer
公式サイト：http://git.blivesta.com/drawer/
CDNが用意されていたのでそちらを利用しています。
##用意されていたCDN
<!-- 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>
###発生している問題・エラーメッセージ
drawer関数が機能しない。
エラーメッセージ
Uncaught TypeError: $(...).drawer is not a function at HTMLDocument.<anonymous> ((index):206) at j (jquery.js:3148) at Object.fireWith [as resolveWith] (jquery.js:3260) at Function.ready (jquery.js:3472) at HTMLDocument.J (jquery.js:3503)
###該当のソースコード
header.phpに公式サイトよりコピペ。
php
1 2<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 3<script> 4$(document).ready(function() { 5 $(".drawer").drawer(); 6 }); 7</script> 8<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> 9<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> 10<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> 11 12</head> 13<body id="top" <?php body_class('drawer drawer--left'); ?>>
header.layout.phpに公式サイトよりコピペ。
php
1<div class="header"> 2 <header role="banner"> 3 <button type="button" class="drawer-toggle drawer-hamburger"> 4 <span class="sr-only">toggle navigation</span> 5 <span class="drawer-hamburger-icon"></span> 6 </button> 7 <nav class="drawer-nav" role="navigation"> 8 <ul class="drawer-menu"> 9 <li><a class="drawer-brand" href="#">Brand</a></li> 10 <li><a class="drawer-menu-item" href="#">Nav1</a></li> 11 <li><a class="drawer-menu-item" href="#">Nav2</a></li> 12 </ul> 13 </nav> 14 </header>
###補足情報(言語/FW/ツール等のバージョンなど)
Wordpressテーマ：Emanon free
他にもこういった情報がないと始まらないなどあればおっしゃってください。
回答2件
0
スクリプトの読み込み順序の問題ではないでしょうか。以下のようにして試してみてください。
HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> 3<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> 4<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> 5<script> 6$(document).ready(function() { 7 $(".drawer").drawer(); 8 }); 9</script>
投稿2017/10/08 21:14
退会済みユーザー
総合スコア0
0
ベストアンサー
別名定義に起因するエラーだったようで、
下記のように再定義したところ問題なく表示されました。
HTML
1<script> 2jQuery(function($){ 3 $(document).ready(function() { 4 $(".drawer").drawer(); 5 }); 6}); 7</script>
投稿2017/10/10 00:58
編集2017/10/10 01:00退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/10/10 01:01