前提・実現したいこと

Wordpressでjavascriptを使いレスポンシブ時にハンバーガーメニューを実装したい。

HTMLの段階ではハンバーガーメニューをクリックすれば正常に起動しますが、Wordpress化するためにPHPに変換した後にハンバーガーメニューをクリックしても何も反応してくれません。

独学で始めたばかりなので、知識が浅くて申し訳ありませんが、アドバイスいただけたら幸いです。

発生している問題・エラーメッセージ

デベロッパーツールのConsoleを見るとUncaught ReferenceError: $ is not definedというエラーが発生しています。

エラーメッセージ
Uncaught ReferenceError: $ is not defined

該当のソースコード

##header.php

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <!-- css -->
    <link href="<?php echo get_template_directory_uri(); ?>/css/test.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <?php
    wp_head();
    wp_enqueue_script("/https://code.jquery.com/jquery-3.3.1.js");
    wp_enqueue_script('test', get_template_directory_uri() . '/test.js');
    ?>
  </head>

 

  <body>
    <header>
        <nav>
          <div class="drawer">
            <a class="navbar_brand" href="#">Navbar</a>
            <div class="navbar_toggle">
              <span class="navbar_toggle_icon"></span>
              <span class="navbar_toggle_icon"></span>
              <span class="navbar_toggle_icon"></span>
            </div>
          </div>
          <div class="menu">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Service</a></li>
              <li><a href="#">access</a></li>
            </ul>
          </div>
        </nav>
    </header>

##test.css

nav{
 width: 100%;
 height: 70px;
 position: relative;
 background: #F6F6F6;
}

.drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: 70px;
 padding: 0 1em;
}


.navbar_toggle{
 z-index:9999;
}

.navbar_toggle_icon {
 position: relative;
 display: block;
 height: 2px;
 width: 30px;
 background: #5c6b80;
 -webkit-transition: ease .5s;
 transition: ease .5s;
}

.navbar_toggle_icon:nth-child(1) {
 top: 0;
}

.navbar_toggle_icon:nth-child(2) {
 margin: 8px 0;
}

.navbar_toggle_icon:nth-child(3) {
 top: 0;
}
/*OPEN時の動き*/
.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
 top: 10px;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}

.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 opacity: 0;
}

.navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
 top: -10px;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}


.menu{
 -webkit-transform: translateX(-100%);
 transform: translateX(-100%);
 -webkit-transition:ease .5s;
 transition:ease .5s;
 z-index:1000;
}

.menu ul li{
 padding: 2em;
 border-bottom: 1px solid #CCC;
}
/*OPEN時の動き*/
.menu.open {
 -webkit-transform:translateX(0);
 transform:translateX(0);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}


@media screen and (min-width: 720px) {
nav{
 display: flex;
 flex-direction: row;
}

.navbar_toggle{
 display: none;
}

.menu{
 width: 100%;
 -webkit-transform: translateX(0);
 transform: translateX(0);
}

.menu ul{
 height: 70px;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
}

.menu ul li{
 padding: 0 1em;
 border-bottom: none;
}

}

##test.js

window.addEventListener('DOMContentLoaded', function () {
  $('.navbar_toggle').on('click', function () {
    $(this).toggleClass('open');
    $('.menu').toggleClass('open');
  });
});

試したこと

ググったらWordpressでは$は定義されていない？とのことなのでtest.jsの一行目を下記のように修正しました。修正後も同じようなエラーが出てしまいます。何かアドバイスいただけると幸いです。
参考にしたサイト　https://pisuke-code.com/jquery-is-not-defined-solution/

修正前

$(function () {
  $('.navbar_toggle').on('click', function () {
    $(this).toggleClass('open');
    $('.menu').toggleClass('open');
  });
});

修正後

window.addEventListener('DOMContentLoaded', function () {
  $('.navbar_toggle').on('click', function () {
    $(this).toggleClass('open');
    $('.menu').toggleClass('open');
  });
});

行動規範の内容に同意します

回答2件

php
1wp_head();
2wp_enqueue_script("/https://code.jquery.com/jquery-3.3.1.js");
3wp_enqueue_script('test', get_template_directory_uri() . '/test.js');
4↓
5wp_enqueue_script('test', get_template_directory_uri() . '/test.js',['jquery']);
6wp_head();

wp_enqueue_scriptの使い方が違います、第一引数にハンドル名、第二引数にjsのファイルです
実行のタイミングが遅いです、wp_enqueue_scriptしたスクリプトはwp_head()で出力されます、

wp_head以降にwp_enqueue_scriptされた場合はwp_foot()で出力されますが、

<head>内に<script>を出力したいならwp_head()より前にwp_enqueue_scriptしてください。 1. WordPress内蔵のjQuery使った方が無難です、他のプラグインとかがjqueryを呼び出すとコンフリクトします。WordPress内蔵のjQueryを使う場合は第三引数の依存ライブラリにjqueryを加えるだけで事足ります。

追記

js
1$(function(){
2↓
3jQuery(function($){

WordPress内蔵のjQueryは基本noconflictしてるので
最初は$()ではなくjQuery()で表記

投稿2020/09/10 18:29

編集2020/09/10 23:34

KazuhiroHatano

総合スコア7819

monblane

2020/09/10 18:44

ご回答ありがとうございます。 wp_enqueue_scriptの使い方や実行のタイミングなど参考になります。 wp_head(); wp_enqueue_script("/https://code.jquery.com/jquery-3.3.1.js"); wp_enqueue_script('test', get_template_directory_uri() . '/test.js'); ↓ wp_enqueue_script('test', get_template_directory_uri() . '/test.js',['jquery']); wp_head(); このように変更させていただきました。しかし、ハンバーガーメニューは動かないようです。 SourcesにはまだUncaught ReferenceError: $ is not definedとエラーが出ているので、まだエラーの原因が残っているのでしょうか。

行動規範の内容に同意します

PHP
1<?php
2    wp_head();
3    wp_enqueue_script("/https://code.jquery.com/jquery-3.3.1.js");
4    wp_enqueue_script('test', get_template_directory_uri() . '/test.js');
5    ?>