【WordPress】JavaScriptを実行するクッソ簡単な方法(個別ページ用)

WordPressでJavaScriptを動かしたいと思い、「WordPress JavaScript」とかで検索すると、「wp_enqueue_script()が～」みたいな記事がたくさん出てくると思います。

そこで私はふと疑問に思いました。

疑問に思った私は頑張って3秒ほど調べました。

結論から言うとJS実行するだけならそんな面倒なことをする必要はないです。

表示するのは所詮ただのHTMLなのですから、そんな面倒な訳がないのです。

と言うことで今回は、WordPressでクッソ簡単にJavaScriptを実行する方法をご紹介します。

１．ちょっとしたJavaScriptを実行するだけの場合

この場合は、HTMLの<script>タグの中にJSを書くだけの簡単なお仕事です。

例えば、WordPressのブロックエディターであれば、カスタムHTMLのブロックを選んでその中に<script>～</script>を書くだけです。

では早速サンプルを見てみましょう。

サンプル(ボタンの表示をON/OFFするだけ)

以下のコードをカスタムHTMLにぶち込むだけです。
はい。簡単ですね。

コードのサンプル

<!-- よくあるボタンです。ただの描画要素なので説明は省略します。 -->
<input id="button1" type="button" value="OFF" onclick="buttonClick()">

<!-- scriptタグ内にJS書くだけです。 -->
<script>
function buttonClick(){
    var button1 = document.getElementById("button1");
    if (button1.value == "OFF") {
        button1.value = "ON"
    } else {
        button1.value = "OFF"
    }
}
</script>

このコードを書くと、以下のようなボタンができます。
クリックするとON/OFFが切り替わるだけの何の意味もないコードですね。

上記のコードで生成されるJSのギミック

２．JavaScriptファイルを読み込む場合(★オススメ)

一応１．を紹介しましたが、実際のJavaScriptの使い方としては、「○○.jsのファイルをどこかに置いてそれをWordPressの投稿ページで実行したい」、という方が多いのではないかと思います。

「で、どうすればいいの？」、って話なのですが、ぶっちゃけここで大事なのは、ファイルをどこに置くか、だけです。

ファイルを置く場所

ファイルはユーザがHTMLページからアクセス可能な場所に置く必要があります。

個人サイトであれば、ドメイン直下に○○.jsを置けば大体動くと思います。
例：public_html/mathkuro.com/

また、ファイルはドメイン直下で問題ないのですが、散らかるとアレなので、個人的にはフォルダを分けることをお勧めします。
例：public_html/mathkuro.com/scripts

ファイルを指定する際は、
"https://www.mathkuro.com/scripts/sample1.js"
のようにフルのURLで指定するか、
“/scripts/sample1.js“
のようにドメインの後ろからの相対パスで指定します。
^{(後者の場合、先頭の”/”が抜けてて表示されないとかいうポカミスをやらかしがちなので注意)}

置く場所と指定方法さえ分かれば難しいことは特に無いので、後はサンプル中で説明します。

サンプル①(ボタンの表示をON/OFFするだけ)

例えば１．同様にボタンのonclickをトリガーにJavaScriptを実行したい場合は以下のようなコードになります。

コードのサンプル(WordPress側に書くHTML)

<!-- よくあるボタンです。ただの描画要素なので説明は省略します。 -->
<input id="button1" type="button" value="OFF" onclick="buttonClick()">

<!-- 実行したいJavaScriptファイルを読み込みます。 -->
<!-- srcにJavaScriptファイルを指定します。 -->
<script type="text/javascript" src="https://www.mathkuro.com/scripts/sample1.js"></script>

コードのサンプル(JavaScript)

function buttonClick(){
    var button1 = document.getElementById("button1");
    if (button1.value == "OFF") {
        button1.value = "ON"
    } else {
        button1.value = "OFF"
    }
}

上記で生成されるJSギミック

サンプル②(何か関数を呼び出す)

サンプル①は簡単のためにonclickの例だけ書きましたが、実際には好きな関数を呼び出したい、という用途の方が多いかと思います。
その場合は以下のように記述します。

サンプル(WordPress側に書くHTML)

<!-- これはただの描画要素なので説明は省略します。 -->
<svg id="mySVG"></svg>

<!-- 実行したいJavaScriptファイルを読み込みます。 -->
<!-- srcにJavaScriptファイルを指定します。 -->
<script type="text/javascript" src="https://www.mathkuro.com/scripts/sample2.js"></script>

<!-- 実行したい関数を呼び出します。　※上のscriptタグで呼び出すとバグる -->
<script type="text/javascript">
myFunction();
</script>

上記のコードで生成されるJSのギミック

※ボールはキーボードの→・←で加速・減速します。

サンプル(JavaScript)
※思ったより長くなった＆今回の説明の本質ではないので下に置いています。

// HTML側で呼び出す関数
function myFunction() {
    // その中で別の関数を呼び出しても当然問題ないです
    draw();
};


// グローバル変数も普通に使えます
const viewWidth = 400;
const viewHeight = 200;
const svg = document.getElementById('mySVG');
svg.setAttribute("width", viewWidth);
svg.setAttribute("height", viewHeight);
svg.setAttribute("viewbox", "0,0," + viewWidth + "," + viewHeight);
svg.setAttribute('style', 'background-color:#87cefa;');

const ballRadius = 10;
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('r', ballRadius);
svg.appendChild(circle);

var dx = 2;
var dy = -2;
var x = viewWidth / 2;
var y = viewHeight - 30;

function draw() {
    if(x + dx > viewWidth - ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }

    if(y+ dy > viewHeight - ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }

    x += dx;
    y += dy;
    circle.setAttribute('cx', x);
    circle.setAttribute('cy', y);
    requestAnimationFrame(draw);
}

// イベントリスナーも普通に使えます
document.addEventListener("keydown", keyDownHandler, false);
function keyDownHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        dx = dx * 2;
        dy = dx * 2;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        if (Math.abs(dx) > 1 && Math.abs(dy) > 1) {
            dx = dx / 2;
            dy = dx / 2;    
        }
    }
}

参考

https://codex.wordpress.org/Using_Javascript
https://qiita.com/yousan/items/f967f4e8e1e7f912be8a