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

こんにちは、mapomapoです！

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

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

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

エラー文言を確認してみると、「Uncaught TypeError: Cannot set properties of null (setting 'onclick')」とのこと。
![スクリーンショット 2023-03-16 13.17.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3286294/39f6ef4b-8d37-d405-f595-f914fd675750.png)


## エラー時のソースコード

header.php
```rb
<!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
```rb
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
```rb
// 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
```rb
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変更前
```rb
// JavaScriptファイルを読み込み
function add_script_files(){
  wp_enqueue_script("myscript", get_template_directory_uri() . "/assets/js/main.js");
}
```

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

参考記事に記載してありましたが、コードの意味は以下の通りらしいです。
```rb
wp_enqueue_style('任意の名前', 関数 . '/ディレクトリ/ファイル名.js', このファイル以前に読み込むスクリプトファイル, '任意のバージョン', footerで読み込むか); 
```

## 結果

「自作JSファイル読み込みOK!!」と出力され、ハンバーガーメニューがちゃんと開閉されるようになった。
![スクリーンショット 2023-03-16 14.00.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3286294/5daf0798-cd4a-abf8-1bff-88dfa00dc6df.png)

## さいごに

以上になります。

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




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