JS♪WordPressでJavaScriptを動かす方法

JavaScriptをWordPressで動かすとき、どこにJSファイル入れればいいのでしょう。また、WordPressのブロックエディタではどんなふうに書けばいいのしょうか。これらはブロックエディタへの記述だけで完結しないのが難しいところです。

そこで、この記事では、実際に私がJavaScriptをWordPressで使えるようにするために行った設定方法について紹介したいと思います。

１．最初に困ったこと
２．WordPressのブロックエディタへの記述
３．JSファイル、CSSファイルの保存先
- (1) ロリポップへのログインと保存先
- (2) JSファイル、CSSファイルの保存
４．JS、CSSファイルの指定
- (1) サーバーの機能を使う
- (2) WordPressで編集
５．functions.phpへの記述コード
６．JavaScriptのコード編集はどこでする？
その他　レビューなど

１．最初に困ったこと

JavaScriptの記事を作成する上で、私はまずJavaScriptの参考書を読みながらJavaScriptのコードを作成しました。しかし、「どうすれば、WordPressにアップできるのか・・・」

完成したHTMLファイル、JSファイル、CSSファイルは自分のPCのハードディスクに保存してあり、もちろん、WordPress用の書式ではありません。この日が来るのはわかっていたけれど、考えるのを後回しにしていました。

さて、下のコードはWordPress用に書き換える前のHTMLファイルの例であり、以下の記事のベースとなるHTMLファイルです。

JS♪JavaScript絵本「おくびょう虫ゆうちゃんの冒険」

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JSの練習</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>JS♪「おくびょうむし ゆうちゃん のぼうけん」</h1>
  <p>おくびょうむしの「ゆうちゃん」は、いつも はっぱの したに かくれていました。</p>
  <p>でも、あるひ、ゆうきをだして はっぱのそとに とびだしました。でも、そとには なにもありません。</p>
  <p>しかも、どこから きこえるのか「うまそうな むし じゃ・・・」「しょうゆをつけて、たべたいのぉ」という こえが きこえてきます。</p>
  <p>ゆうちゃんは こわくて、こわくてたまりません。</p>
  <p>でも、ゆうちゃんは「まけるもんか！」とあきらめませんでした。</p>
  <p>そして、なんども、なんども かべ にたいあたりしました。</p>
  <p>なんども、なんども</p>
  <p>なんども、なんども、なんども・・・</p>
  <canvas id="canvas_test" width="400" height="400"></canvas>
  <p>すると、ついに、大きな おとがして かべ がやぶれました！</p>
  <p>そして、かべ のそとで、ゆうちゃんが みたものは・・・</p>
  <script src="js/canvas_stij.js"></script>
  <script src="js/JS002_caterpillar01.js"></script>
</body>
</html>

18行目のcanvas要素をJavaScriptによってコントロールしており、JavaScriptのコードはcanvas_stij.js、JS002_caterpillar01.jsの2つのファイルに記述してあります。

使用するJavaScriptのファイルは、21、22行目で指定しており、また、記事の書式を指定するファイルstyle.cssについては6行目で指定しています。

さて、これをどのようにWordPressに移植すればよいのか・・・。主な疑問点は以下の通りです。

WordPressのブロックエディタには、上記HTMLファイルをそのまま使えるのか。
JSファイル、CSSファイルはどのように保存すればよいのか。
使用するJSファイル、CSSファイルはどのように指定すればよいのか。
JSファイル、CSSファイルを必要としない記事では、起動時間の遅延を防ぐためにファイルを読み込まない設定にできるのか。

２．WordPressのブロックエディタへの記述

では、まずWordPressのブロックエディタへの記述方法について説明します。

実はHTMLファイルの内容をそのままコピペできれば楽なのですが、そのままというわけにはいきません。まず、6、21、22行目で行ったCSSファイル、JSファイルの指定はブロックエディタ内ではできません。

一方、9行目から20行目の部分は、そのままHTMLブロックにコピペできます。しかも、9～20行目の中でカスタムHTMLブロックを用いて記入する必要があるのは上記コードの18行目のcanvas要素の部分だけです。残りの部分はWordPressのブロックエディタでも編集できます。

つまり、最も楽な方法は9～20行目のうち、JavaScriptで操作するcanvas要素の部分(18行目)のみカスタムHTMLブロックを使い、残りはいつもどおりに記述する方法です。

３．JSファイル、CSSファイルの保存先

次にJSファイル、CSSファイルの保存先について説明します。なお、私はレンタルサーバーはロリポップ、テーマはCocoonの子テーマを使っているので、その前提で話を進めますが、他の環境であっても設定の流れは同じです。

結論として、JSファイル、CSSファイルの保存先は使用しているテーマ（子テーマ）のフォルダ内に保存するのが楽だと思います。なぜなら、保存先を指定するときにテーマ（子テーマ）の位置は「 get_stylesheet_directory() 」という関数を使って指定することができるからです。指定の具体的な方法は後述します。

なお、親テーマはテーマのバージョンアップのときに内容がクリアされてしまう可能性があるため、子テーマを使った方が無難です。

(1) ロリポップへのログインと保存先

JSファイル、CSSファイルの保存はWordPressからは行えないため、レンタルサーバーにログインする必要があります。

ロリポップの場合は、ロリポップにログインしたあとに[サーバーの管理・設定] >> [ロリポップ！FTP]と進み、FTP機能を使います。

そして、Cocoonの子テーマが保存されているフォルダは[wp-content] >> [themes] >> [cocoon-chile-master]ですので、この中にJavaScriptファイルを保存するフォルダ「JS」、CSSファイルを保存するフォルダ「CSS」を作成します。

フォルダの作成は「ロリポップ！FTP」では上部ツールバーのアイコンをクリックすることで操作可能です。なお、ファイルを保存するフォルダ名は「JS」「CSS」でなくてもかまいません。

(2) JSファイル、CSSファイルの保存

先ほど作成した「フォルダJS」「フォルダCSS」に、「JavaScriptファイル」「CSSファイル」を保存してみましょう。

保存は「ロリポップ！FTP」の機能を使って、自分のPCの中にあるファイルをアップロードしてもよいですし、サーバーの中にファイルを新規作成し、そのファイルにコードをコピペしてもかまいません。

ファイルを新規作成する場合に拡張子は自動では設定されないので、拡張子の.jsや.cssを忘れないようにしましょう。

４．JS、CSSファイルの指定

WordPressに移植する前は、使用するJS、CSSファイルの指定をHTMLファイルで行っていましたが、WordPressでは使用テーマのfunctions.phpファイルの中で指定します。

そして、functions.phpの内容を編集するのは以下の2つの方法があります。

(1) サーバーの機能を使う

テーマのfunctions.phpは、例えばロリポップの場合、Cocoonの子テーマのフォルダ[wp-content] >> [themes] >> [cocoon-chile-master]の中にありますので、「ロリポップ！FTP」で編集することが可能です。

(2) WordPressで編集

functions.phpの編集はWordPressからも可能です。手順は以下の通りです。

[外観] >> [テーマエディタ]
右上の「編集するテーマを選択：」において、Cocoon Child（自分が使用しているテーマ名）を選択。
右側の[テーマのための関数] >> [functions.php]を選択。
内容を変更し、下部の「ファイルの更新」ボタンをクリック。

簡単な文法エラーチェックも行われますし、WordPressで編集した方が楽だと思います。

なお、functions.phpを編集する前に、念のため内容をbackupしておきましょう。

５．functions.phpへの記述コード

以下、私のfunctions.phpを紹介します。8～26行目が追加した部分であり、このように記述することで、それぞれの記事で必要なJSファイル、CSSファイルを指定することができます。また、このファイルで設定した記事は以下の２つの記事です。

<?php //子テーマ用関数

//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();

//以下に子テーマ用の関数を書く

function add_script1() { 
  // JS001 単純梁の計算（任意範囲の等分布荷重）
  if (is_single(array(3633))) {
    wp_enqueue_script('mqn_p_p_stij', get_stylesheet_directory_uri() . '/js/mqn_p_p_stij.js', array(), '', true);
    wp_enqueue_script('canvas_stij', get_stylesheet_directory_uri() . '/js/canvas_stij.js', array(), '', true);
    wp_enqueue_script('JS001_mqn_p_p_w_stij', get_stylesheet_directory_uri() . '/js/JS001_mqn_p_p_w_stij.js', array(), '', true);
    wp_enqueue_style('style_JS001', get_stylesheet_directory_uri() . '/css/style_JS001.css');
  }
}
add_action('wp_enqueue_scripts', 'add_script1');

function add_script2() { 
  // JS002 JavaScript絵本「おくびょう虫 ゆうちゃんの 冒険」
  if (is_single(array(4199, 4208))) {
    wp_enqueue_script('canvas_stij', get_stylesheet_directory_uri() . '/js/canvas_stij.js', array(), '', true);
    wp_enqueue_script('JS002_caterpillar01', get_stylesheet_directory_uri() . '/js/JS002_caterpillar01.js', array(), '', true);
  }
}
add_action('wp_enqueue_scripts', 'add_script2');

?>

8と19行目の関数名や、17、26行目の引数の名前は設定ごとに変わりますので、うっかり同名にしないように注意しましょう。

(1) ファイルを読み込む記事の指定

10行目の「is_single(array(3633))」では記事のid番号を指定しています。つまり、ここで指定したJS、CSSファイルは、このid番号の記事を表示するときだけ呼び出されます。

なお、「is_single()」は投稿ページを指定する場合の関数であり、固定ページを指定する場合には「is_page()」を使います。

また、２つ以上の記事を指定する場合には、21行目「is_single(array(4199, 4208))」のように、id番号を列挙します。

(2) 記事のid番号

記事のid番号はそれぞれの記事の固有番号です。そして、id番号を調べるには、WordPressの「投稿一覧」や「固定ページ一覧」の上部の[表示オプション]を開き、[id]の項目にチェックを入れます。すると、「投稿一覧」や「固定ページ一覧」にid番号が表示されるようになります。

(3) JSファイル、CSSファイルの指定

JSファイルは「wp_enqueue_script()」によって読み込みます。また、CSSファイルは「wp_enqueue_style」によって読み込みます。

具体的な内容は以下のリファレンスを参照してください。

なお、関数の第２引数の「get_stylesheet_directory_uri().」の部分は、テーマ（子テーマ）のフォルダの位置を示す関数です。この関数を用いることでテーマまでの具体的な位置を記述する必要がなく、記述が簡潔になります。

(4) 共通で使用するファイルの指定

以下のようにif文の条件から「is_single()」を削除すると全てのページで使用可能なJSファイル、CSSファイルを指定することができます。

なお、3行目のif文の中の「!is_admin()」は、ダッシュボードや管理画面では、ファイルを読み込まないための記述です。管理画面でも使用するならばif文は不要となり、3、5行目は削除できます。

function add_script() { 
  // 共通
  if (!is_admin()) {
    wp_enqueue_script('xxxx', get_stylesheet_directory_uri() . '/js/xxxx.js', array(), '', true);
  }
}
add_action('wp_enqueue_scripts', 'add_script');

(5) 関数等の重複には要注意

上記「(4) 共通で使用するファイルの指定」で説明した方法は、共通で指定したJSファイルと、個別で指定したJSファイルとの干渉に注意しなければなりません。

ファイル名、JSファイルの関数名、アニメーション表示するためのrequestAnimationFrameなどの重複が原因で予期せぬエラーが発生する可能性があります。

私は複数の記事に共通の設定を行う場合、「(4) 共通で使用するファイルの指定」の方法ではなく、「is_single(array(4199, 4208))」のように、if文の中でid番号を列挙する方法をお勧めします。共通の設定を変更したときに過去の記事が知らないうちにフリーズしてしまう恐れがありますし、共通の設定との重複を避けなければならないという制限が生じてしまうからです。

６．JavaScriptのコード編集はどこでする？

JavaScriptで記述したコードは例えばサーバーの「ロリポップ！FTP」を使ってサーバー上のコードを直接編集することが可能です。

しかし、コードの記述はVisual Studio Codeとかを使った方が効率がいいので、結局、PCでJavaScriptの作成や修正を行い、WordPressやサーバーのファイルにコピペ（アップロード）という流れになるのではないでしょうか。

最初はレンタルサーバーへのアップロードやfunctions.phpの変更のときに緊張するかもしれませんが、きちんとbackupを行っておけば怖くありません。

WordPressでの設定方法がわかれば、動きがある新しい世界があなたを待っていますので、みんなでJavaScriptライフを楽しみましょう♪

その他　レビューなど

・Twitterへのリンクです。SNSもはじめました♪

以下、私が光回線を導入した時の記事一覧です。
　(1) 2020年「光回線は値段で選ぶ」では後悔する ←宅内工事の状況も説明しています。
　(2) NURO光の開通までWiFiルーターを格安レンタルできる
　(3) NURO光の屋外工事の状況をご紹介。その日に開通！
　(4) 光回線開通！実測するとNURO光はやっぱり速かった
　(5) ネット上のNURO光紹介特典は個人情報がもれないの？