ブログ

【正攻法】WordPressでJavaScriptを読み込ませる方法をプログラマーが解説する

ワードプレスで自作のJavaScriptを読み込ませる方法をお探しでしょうか?

いくつかやり方はありますが、今回は現役プログラマーの私も使っている正攻法を紹介したいと思います。

ファイルの作成から動作確認まで、下記のステップで説明するのでゆっくりついてきてくださいね~!

  1. JavaScriptをサーバーに上げる
  2. JavaScriptを読み込ませる
  3. JavaScriptを動作確認する

この記事ではエックスサーバーのファイルマネージャーを使って説明しますが、他のツール(FFFTPなど)でもほとんど同じ流れになります。

 

JavaScriptをサーバーに上げる

ワードプレスのページでJavaScriptを動かすためには、画像ファイルなどと同じようにサーバーにJavaScriptのファイルを配置します。

下記の手順で進めていくので、まずはそこを目指していきましょう!

  1. ファイルマネージャーを開く
  2. 子テーマのフォルダを開く
  3. JavaScriptのフォルダを作る
  4. JavaScriptのファイルを作る
  5. JavaScriptを編集する

 

ファイルマネージャーを開く

まず最初に、サーバーパネルなどからファイルマネージャーにログインしてください。

下画像のようなフォルダの一覧が表示されたらOK!

ファイルマネージャーのフォルダ一覧

 

子テーマのフォルダを開く

JavaScriptを保存する場所は、テーマの更新などで影響を受けないように、子テーマのフォルダにします。

以下のようなフォルダ構成になっているはずなので、子テーマのフォルダまで移動しましょう。

ルート/
├ .pki/
├ ssl/
├ xxxxxxx.xsrv.jp/
└ 該当ドメイン/
——└ public_html/
———└ wp-content/
————└ themes/
—————子テーマ/

 

お使いのテーマにもよりますが、子テーマのフォルダを開くとこんな画面になるかと思います。

ファイルマネージャーのフォルダ一覧

 

JavaScriptのフォルダを作る

子テーマのフォルダの中に、JavaScriptを保存するためのフォルダを作りましょう。

フォルダ名を入力し、フォルダ作成ボタンを押してください。

ファイルマネージャーでフォルダ作成

 

子テーマのフォルダの中に、新しいフォルダを作ることができました。

ファイルマネージャーでフォルダを作成した結果

 

JavaScriptのファイルを作る

先ほど作ったフォルダを開き、JavaScriptのファイルを作成します。

お好きなファイル名を入力し、ファイル作成ボタンをクリック!

ファイルマネージャーでファイル作成

 

JavaScriptのファイルを作ることができました。

ファイルマネージャーでファイルを作成した結果

 

JavaScriptを編集する

先ほど作ったファイルを開き、いよいよJavaScriptを書いていきます。

チェックボックスにチェックをつけて、編集ボタンを押すとファイルを開くことができます。

ファイルマネージャーでファイルを開く ファイルマネージャーでファイルを開く

 

最終的にみなさんが動かしたいプログラムはあると思いますが、まずは「JavaScriptが動いていること」を確認するために、簡単なプログラムを書いてみましょう。

alert(“test”);などにするとサイトの利用者がビックリするので、console.log(“test”);などがおすすめです。(一般の人には気づかれないところに表示されます)

JavaScriptファイルの編集

 


JavaScriptを読み込ませる

JavaScriptのファイルを準備できたら、そのファイルをページに読み込ませましょう。

一般的なサイトではscriptタグを使いますが、ワードプレスではJavaScriptを読み込ませる専用の関数が用意されています。

functions.phpを開く

まずは、子テーマのフォルダを開いてください。

フォルダの場所を忘れてしまった人のために、フォルダ構成をもう一度のせておきますね!

ルート/
├ .pki/
├ ssl/
├ xxxxxxx.xsrv.jp/
└ 該当ドメイン/
——└ public_html/
———└ wp-content/
————└ themes/
—————子テーマ/

 

次に、子テーマのフォルダの中にある「functions.php」を開きます。

functions.phpの場所

 

JavaScriptを読み込む関数

「functions.php」の末尾に、下にあるプログラムをコピーしましょう。

以下の部分は、みなさんのサーバーに合わせて変更してください。

  • ページID / パーマリンク
    →JavaScriptを読み込ませたいページ
  • JavaScript識別名
    →他のJavaScriptと重複しない名前
  • JavaScriptファイル名
    →サーバーに作成したファイルの名前
function load_scripts() {
    if( is_single( 'ページID / パーマリンク' ) ) {
        wp_enqueue_script('JavaScript識別名', get_stylesheet_directory_uri() . '/js/JavaScriptファイル名');
    }
}
add_action('wp_enqueue_scripts', 'load_scripts');

 

参考までに、このブログの functions.php は下記のようになっています。

パーマリンクが wordpress-js になっていることからお気づきかもしれませんが、この記事にもJavaScriptを読み込ませています。

functions.phpの内容

 

それから、「プログラムをしっかり理解した上で使いたい!」っていう方がいるかもしれないので、ポイントになるところをまとめておきますね。

is_single

すべてのページでJavaScriptを読み込ませると、サーバーに負荷がかかってしまいます。

プログラムの中にある is_single という関数を使うと、JavaScriptを必要とするページにのみ読み込ませることができます。

ちなみに、is_singleは投稿ページを判定するための関数なので、固定ページなど他の種類のページに読み込ませる場合は、下記のマニュアルを参照してください。

ワードプレス 条件分岐タグ

 

wp_enqueue_script

ひとつ目のパラメータには、JavaScriptファイルの識別名を入力します。

他の識別名と重複しなければ、お好きな名前にしていただいて問題ありません。

 

ふたつ目のパラメータには、先ほどつくったJavaScriptファイルのパスを入力します。

get_stylesheet_directory_uriで子テーマのパスを取得できるので、その後のパスをファイル名まで指定しましょう。

ワードプレス 関数リファレンス/wp enqueue script

 

JavaScriptを動作確認する

ここまでの手順が正しくできていれば、指定したページにのみJavaScriptが読み込まれるはず!

プログラマー的な観点から、簡単なテストをしてみましょう。

 

指定ページ以外でJavaScriptが読み込まれない

まずは、指定ページ以外(is_singleに指定していないページ)を開いてJavaScriptが動作していないことを確認します。

is_singleの条件があるので、もしもJavaScriptが動いていたらバグです。

サンプルページ

 

任意のページを開いたら、ブラウザの開発者ツールを表示します。(Google ChromeならキーボードのF12で開けます)

JavaScriptファイルの中身は console.log(“test”); なので、「test」という文字列が表示されていなければOK

JavaScriptの動作確認

 

指定ページでJavaScriptが読み込まれる

次に、JavaScriptを読み込ませるページ(is_singleに指定したページ)を開いてみましょう。

先ほどと同じように開発者ツールを開き、「test」という文字列が表示されていればOKです。

JavaScriptの動作確認

 

というわけで、下記のふたつを確認できればJavaScriptの読み込みはバッチリです。

  1. 指定ページ以外で読み込まれない
  2. 指定ページで読み込まれる

 

このブログにおいても、この記事では「test」という文字列が表示されますが、トップページなどでは表示されません。

もし興味があれば、他のページを開いて試してみてください。

 


WordPressにJavaScriptを読み込ませるのは簡単

というわけで今回は、ワードプレスでJavaScriptを読み込ませる正攻法を解説しました。

ざっくりとした流れは、以下の3ステップでしたね。

ぜひ参考にしてみてください。

  1. JavaScriptをサーバーに上げる
  2. JavaScriptを読み込ませる
  3. JavaScriptを動作確認する


こちらの記事もおすすめ!