この記事にはプロモーションが含まれています。

【WordPress】JavaScriptはどこに書けばいい？「３つの方法」を解説

2024-07-102024-10-16

ケケンタ

WordPressの場合、JavaScriptはどこに書けばいいの……？

WordPressの場合、HTMLサイトとは異なりJavaScriptを読み込ませる方法がいくつかあります。

そのためWordPressに触れ始めたばかりの方は手順などに迷うことが多々あるのではないかと思います。

そこでこの記事では

WordPressでJavaScriptを書く（読み込ませる）方法

をご紹介します。

WordPressはブログサイトなどを簡単に作成できる便利な仕組みですが、アニメーションなどを実装する際はJavaScriptの使用は避けられません。

この記事をご覧いただき、ぜひWordPressでもJavaScriptを使用できるようにしていただければと思います。

この記事で分かること

WordPressでJavaScriptを読み込ませる方法
WordPressで「特定のページ」でのみJavaScriptを読み込ませる方法

ケケンタ

最後の方の方法では、「固定・投稿編集ページ」自体にJavaScript入力用フォームを設置する方法もご紹介しています。
ご興味のある方はぜひ最後までご覧ください！

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

WordPressでJavaScriptを書く方法【３つ】

早速ですが、まずはWordPressにJavaScriptを読み込ませる３つの方法をザックリとご紹介します。

WordPressにJavaScriptを読み込ませる方法【３つ】

jsファイルを設置してfunctions.phpで読み込む
ヘッダーやフッターに<script>タグで記述する
固定ページや投稿ページの編集画面に直接記述する

ケケンタ

それでは各方法について具体的な手順やポイントなどをご説明します。

【方法①】jsファイルを設置してfunctions.phpで読み込む

WordPressでJavaScriptを読み込ませる方法３つの内、WordPressらしい読み込ませ方のひとつが

jsファイルを設置してfunctions.phpで読み込む

です。

あわせて読みたい

【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点 WordPressで機能カスタマイズをする際は、必ずと言っていいほどfunctions.phpを編集することになります。しかし、functions.phpを編集したことで何らかのエラーが発生…

ポイントは以下の２つです。

functions.phpでjsファイルを読み込む際のポイント

jsファイルを任意のディレクトリに配置する
任意のディレクトリに配置したjsファイルを読み込むための処理をfunctions.phpに記述する

例えば

「テーマディレクトリ」→「jsディレクトリ」→「sample.js」という構成

でsample.jsを配置した場合、functions.phpには下記の通りに記述をします。

function add_script_files(){
  wp_enqueue_script('sample-js', get_template_directory_uri().'/js/sample.js', array(), false, true);
}
add_action( 'wp_enqueue_scripts', 'add_script_files' );

第１引数 …… ハンドル名（他の処理でsample.jsを指定する際に使用。任意の名前）
第２引数 …… sample.jsまでのパス
第３引数 …… 読み込み順序の指定。ハンドル名を記述することで、そのjsファイルよりも後に読み込ませることが可能（詳しくは【補足①】特定のjsファイルの後に読み込ませたい場合にて解説）。省略可
第４引数 …… バージョン番号（未指定の場合は「false」とする）。省略可
第５引数 …… <head>と</body>直前のどちらで読み込むかを指定（trueの場合は「</body>直前」で読み込む）。省略可

上記の記述内容の場合、「第５引数」がtrueになっているため、「</body>直前でsample.jsを読み込む」という指定になります。

【補足①】特定のjsファイルの後に読み込ませる

場合によっては、「このjsファイルの後に読み込ませたい」ということもあるかと思います。

例えばjQueryを使用しているときは、

jQueryを読み込んでから
自作したjsファイルを読み込む

という順番にしないとエラーが発生してアニメーションなどが上手く機能しません。

jsファイルの読み込み順序を指定したいときは以下のように記述します。

（例）sample.jsをmain.jsよりも後に読み込む

function add_script_files(){
  wp_enqueue_script('main-js', get_template_directory_uri().'/js/main.js', array(), false, true );

  // ハンドル名「main-js」の後に読み込む
  wp_enqueue_script('sample-js', get_template_directory_uri().'/js/sample.js', array( 'main-js' ), false, true);
}
add_action( 'wp_enqueue_scripts', 'add_script_files' );

「sample.js」の読み込み記述の内、第３引数にarray( ‘main-js’ )と指定しているのがポイントです。

第３引数にハンドル名（ここではmain-js）を持たせることで、sample.jsはmain.jsの後に読み込まれるようになります。

また、array( ‘main-js’, ‘hoge-js’, …… )のように複数のハンドル名を指定することも可能です。

【補足②】特定のページでのみJavaScriptを読み込ませる

JavaScriptを特定のページでのみ読み込ませたいという状況もよくあると思います。

そのようなときはWordPressテンプレートタグのひとつである「条件分岐タグ」を使用しましょう。

（例）「スラッグがsampleの固定ページ」でのみJavaScriptを読み込ませる

function add_script_files(){

  // 「スラッグがsampleの固定ページ」でのみJavaScriptを読み込ませる
  if ( is_page( 'sample' ) ) {
    wp_enqueue_script('sample-js', get_template_directory_uri().'/js/sample.js', array(), false, true);    
  }

}
add_action( 'wp_enqueue_scripts', 'add_script_files' );

あわせて読みたい