Q&A
Web ブラウザのデベロッパーツールなどで、確認するとエラーメッセージが表示されていたりしないでしょうか？
WordPressの問い合わせ機能を埋め込んだHTML（ファイルとしては.php）に、ハンバーガーメニューを実装したくJavaScriptを入れています。メニューは表示されているのですが、クリックしても反応がありません。
wpフォルダ配下のfunction.phpに書いた.jsの呼び出しが間違っているのでしょうか？
※尚、WordPressを実装していないHTMLファイルのハンバーガーメニューは正常に機能しています。
初歩的な質問で恐縮ですが、よろしくお願いします。
<contact.php（body最下部でjsファイル呼び出し）>
php
1<?php require_once('./wp/wp-load.php'); ?> 2<!DOCTYPE HTML> 3<html lang="ja"> 4<head> 5 <!-- 中略 --> 6 <?php wp_head(); ?> 7</head> 8<body id="top"> 9 <div id="wrapper"> 10 <header id="header" class="pc cf"> 11 <!-- 中略 --> 12 </header> 13 <div id="main_contents" class="cf"> 14 <!-- 中略 --> 15 </div> 16 <footer id="footer" class="cf"> 17 <!-- 中略 --> 18 </div> 19 </div> 20<!-- ハンバーガーメニュー --> 21 <div class="menuSp tbl sp"> 22 <div class="menu-trigger" href=""> 23 <span></span> 24 <span></span> 25 <span></span> 26 </div> 27 <nav class="navSp tbl sp"> 28 <ul class="navSpUL"> 29 <li><a class="drawer-brand" href="./index.php">Top</a></li> 30 <li><a class="drawer-brand" href="./hoge.html">Service</a></li> 31 <li><a class="drawer-menu-item" href="./hoge-a.html">Ordermade Aroma</a></li> 32 <li><a class="drawer-menu-item" href="./hoge-b.html">Aroma Tea</a></li> 33 <li><a class="drawer-brand" href="./fuga.html">Access</a></li> 34 <li><a class="drawer-brand" href="./contact.php">Contact</a></li> 35 </ul> 36 </nav> 37 <div class="overlay"></div> 38 </div> 39 <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/spMenu.js"></script> 40 <?php wp_footer(); ?> 41</body> 42</html> 43
<spMenu.js（試してみたこと）>
javascript
1var element = document.getElementsByClassName('menu-trigger')[0]; 2element.addEventListener("click", function(e) { 3 if($(this).hasClass('active')){ 4 $(this).removeClass('active'); 5 $('.navSp').removeClass('open'); 6 $('.overlay').removeClass('open'); 7 } else { 8 $(this).addClass('active'); 9 $('.navSp').addClass('open'); 10 $('.overlay').addClass('open'); 11 } 12} 13var element = document.getElementsByClassName('overlay')[0]; 14element.addEventListener("click", function(e) { 15 if($(this).hasClass('open')){ 16 $(this).removeClass('open'); 17 $('.menu-trigger').removeClass('active'); 18 $('.navSp').removeClass('open'); 19 } 20}
<正常にハンバーガーメニューが起動したscript記述（HTML一部抜粋）※本来spMenu.jsでやりたいこと>
html
1 <script> 2 $('.menu-trigger').on('click',function(){ 3 if($(this).hasClass('active')){ 4 $(this).removeClass('active'); 5 $('.navSp').removeClass('open'); 6 $('.overlay').removeClass('open'); 7 } else { 8 $(this).addClass('active'); 9 $('.navSp').addClass('open'); 10 $('.overlay').addClass('open'); 11 } 12 }); 13 $('.overlay').on('click',function(){ 14 if($(this).hasClass('open')){ 15 $(this).removeClass('open'); 16 $('.menu-trigger').removeClass('active'); 17 $('.navSp').removeClass('open'); 18 } 19 }); 20 </script> 21
>CHERRYさん
jsファイルの呼び出しは修正できました。ところが、spMenu.jsの中身がうまくいかず、メニューを押下しても無反応で、コンソールに下記エラーが出ていました。
Uncaught TypeError: Cannot read property 'addEventListener' of undefined at spMenu.js:2
上記コードを最新版に修正したので、spMenu.jsの誤りについてご指摘あれば宜しくお願い致します。
>CHERRYさん
jQueryのファイル定義を書いたらできました。
javascript＆jQuery未経験で前提の仕組みが分かっておらず、お手数おかけしました。
ありがとうございました。
回答2件
0
自己解決
jQueryのファイル定義を書いたらできました。
投稿2019/11/05 09:17
総合スコア9
0
ソース上では指定したJSファイルは正しく呼び出されていますか？
ブラウザのコンソールログを確認して、何かエラーメッセージが出ていれば、それも追加していただければ回答がつきやすいですよ。
投稿2019/11/01 13:42
総合スコア247
>mkskさん
ご回答ありがとうございます。
functions.phpに書いたコードでは呼び出せてないんですか？
初歩的な質問ですみません。
問題の切り分けとして、まずはfunctions.phpに記載したフJSァイルがきちんと出力されているかを確認する必要があります。
ソースを開いて`spMenu.js`で検索して該当するものがあれば、JSファイルは出力されているのでJSの記述に問題がある。
もし該当するものがないのであれば、functions.phpの記述に問題がある。
その際は、参考にされたサイトや本があるかと思いますので、まずは参考通りに記述して、ファイルが呼び出せていることを確認する。
もし、出力されていないのであれば、参考にしたものが間違っている可能性があるので、別のもので試してみる。
Wordpressはバージョンの違いでコードが動かないということも往々にしてあります。
まずは一つずつ問題を解決していきましょう。
>mkskさん
ご指摘のとおり、呼び出しがそもそも誤っていたようで、修正しました。
それとは別にspMenu.jsにおいて、getElementByClassNameの使用がおかしいのか、外部jsファイル自体もうまくいきません。。。
疑問なのですが、正常に動いた時のjQueryをそのまま使わないんですか？
jQueryではうまく動いたけど、どうせならvanillaなjavascriptで書き直したいとか？
>mkskさん
おっしゃる通り、jQueryのファイル定義を書いたらできました。
javascript＆jQuery未経験で前提の仕組みが分かっておらず、お手数おかけしました。
ありがとうございました。
あなたの回答
tips
プレビュー
