Word Pressでjsファイルを読み込む方法 - functions.php #JavaScript

こんにちは、mapomapoです！

半年前にWord Pressを本で学びはじめました。

オリジナルテーマを作成し、ハンバーガーメニューを実装しようとしたのですが…。うまくjsファイルが読み込まれず、解決策を探すのに苦労したので書いておこうと思います。

起こった事象

ハンバーガーメニューを実装するコードを書き、ハンバーガーメニューをクリックしたものの、開閉がされなかった。

エラー文言を確認してみると、「Uncaught TypeError: Cannot set properties of null (setting 'onclick')」とのこと。

エラー時のソースコード

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/reset.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/styles.min.css">
  <meta name="viewport" content=”width=device-width,initial-scale=1″>
  <?php 
  wp_enqueue_script('jquery');
  wp_head();
  ?>
</head>
<body>
  <?php wp_body_open(); ?>
  <header class="header">
    <div class="navbar">
      <div><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></div>
      <nav>
        <?php
          $args = array(
            'menu' => 'global-navigation', // 管理画面で作成したメニューの名前
            'menu_class' => 'navbar_menu', // メニューを構成するulタグのクラス名
            'container' => false, // <ul>タグを囲んでいる<div>タグを削除
          );
          wp_nav_menu($args);
          ?>
      </nav>
      <div class="hamburger sp" id="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </header>

main.js

const ele = document.getElementById('hamburger');
console.log(ele);

document.getElementById('hamburger').onclick = function() {
    console.log('クリックされたよ！');
    this.classList.toggle('active');
    document.querySelector('.navbar_menu').classList.toggle('active');
};

functions.php

// JavaScriptファイルを読み込み
function add_script_files(){
  wp_enqueue_script("myscript", get_template_directory_uri() . "/assets/js/main.js");
}

原因

エラー文言から、onclickにはnullが設定できないとのことなので、getElementById('hamburger')で要素（ハンバーガーメニューの部分）を取得できていないのではと考えた。

jsファイルを読み込みできていないのではと思い、main.jsの一番最初に「console.log("自作JSファイル読み込みOK!!");」と追記。

jsファイルの読み込みができていれば「自作JSファイル読み込みOK!!」と出るはずだが、案の定、出力されなかった。

main.js

console.log("自作JSファイル読み込みOK!!");
const ele = document.getElementById('hamburger');
console.log(ele);

document.getElementById('hamburger').onclick = function() {
    console.log('クリックされたよ！');
    this.classList.toggle('active');
    document.querySelector('.navbar_menu').classList.toggle('active');
};

解決するためにやったこと

functions.phpに書いていたjsを読み込むコードの末尾に「, '', '', true 」を追記した。

functions.php変更前

// JavaScriptファイルを読み込み
function add_script_files(){
  wp_enqueue_script("myscript", get_template_directory_uri() . "/assets/js/main.js");
}

functions.php変更後

// JavaScriptファイルを読み込み
function add_script_files(){
  wp_enqueue_script("myscript", get_template_directory_uri() . "/assets/js/main.js", '', '', true );
}

参考記事に記載してありましたが、コードの意味は以下の通りらしいです。

wp_enqueue_style('任意の名前', 関数 . '/ディレクトリ/ファイル名.js', このファイル以前に読み込むスクリプトファイル, '任意のバージョン', footerで読み込むか);

結果

「自作JSファイル読み込みOK!!」と出力され、ハンバーガーメニューがちゃんと開閉されるようになった。

さいごに

以上になります。

Word Press初学者ということもあり、なかなか「これだ！」という解決策を見つけられなかったので、この記事がかつての私と同じようにjsの読み込みができず困っている方のお役に立ちましたら幸いです。＾＾

参考記事
https://notes-de-design.com/website/wordpress/function-css-javascript-wordpress/#JavaScript