WordPressのページに外部ファイルのJavaScriptを埋め込み表示する(Reactを表示する)

WordPressで技術備忘録としてフロント系の記事を書くときに、本当にそのコードが動いている様子を体験してもらいたいならば、実際に触れてもらうのが一番早いのかもしれません。そこで、WordPress内にReactなどのJavaScriptのコードを埋め込もうと思い、調べたのですが、外部ファイルのJavaScriptをWordPress全体に適用する方法ばかりが検索で出てきて、個々の記事に個別に埋め込む方法がうまいこと見つかりませんでした。今回は個々のページに外部ファイルのJavaScriptを読み込み、表示するやり方についてまとめます。

全体の構成

ここではReactのコードを埋め込んで表示する方法を解説しますが、他のJavaScriptファイルでも同様の手順となると思います。

WordPressでJavaScriptを読み込み表示するためには、

記事内に操作対象となるDOM要素があること
<script>タグを使って外部のJavaScriptファイルを読み込むこと
読み込み対象のJavaScriptファイルを適切な場所にアップロードすること

が必要です。

ここでは、WordPressのカスタムHTMLの機能を使って1,2を実現します。また、JavaScriptファイルのアップロード方法はこの記事ではサーバに直接SSHプロトコルで送信してアップロードしますが、WordPressへのJavaScriptのアップロード方法はプラグインを使ったFTPによるものもあるそうなので、各自が好きな方法でアップロードを行えばよいと思います。

カスタムHTMLを記事に埋め込む

WordPress内の編集画面上の機能であるカスタムHTMLを使って以下のコードを書きこみます。

なお、/wp-content/uploads/js/app.jsはJavaScriptファイルのアップロード先です。

このようなコードを入れることによって、記事内に、id="root"というdiv要素が追加されます。

<div id="root"></div>
<script src="/wp-content/uploads/js/app.js"></script>

なお、app.jsはReactで以下のようなコードにしています。Reactを書いたことがあればわかると思いますが、DOM内のrootというidを持つ要素をAppで定義したものに書きかえています。

import React, {useState} from 'react'
import ReactDOM from 'react-dom'

const App = () => {
    const [count, setCount] = useState(0)
    const onClick = () => {
        setCount(count + 1)
    }
    return (
        <div style={{backgroundColor: 'rgb(71, 172, 255)'}}>
            <div>
                This is generated by React code!!
            </div>
            <button onClick={onClick}>click me!!</button>
            <div>{count}</div>
        </div>
    )
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

WordPressへのJavaScriptファイルのアップロード

私のWordPressの環境は、Amazon Lightsail上で動いています。

Amazon Lightsailでのデフォルトの構築方法であれば、画像等のファイルのアップロード先は、サーバ内の/opt/bitnami/apps/wordpress/htdocs/wp-content/uploadsとなります。

JavaScriptはセキュリティーの都合上、管理者画面の「メディア」から通常のアップロードを行うことはできないため、サーバ上に何らかの形で直接アップロードする必要があります。この記事では直接サーバにSSHプロトコルでアクセスしてアップロードを行います。

サーバにSSHで接続したら、

$ cd /opt/bitnami/apps/wordpress/htdocs/wp-content/uploads
$ mkdir js

でJavaScriptアップロード用のディレクトリを作成します。作成できたら一度サーバからexitして、表示したいJavaScriptファイルをscpコマンドで送信します。

送信したら、ブラウザ上でhttps://{ドメイン}/wp-content/uploads/js/app.jsにアクセスして、JavaScriptが表示されるかを確認しましょう。確認出来たら準備完了です。

実際のページ内での見え方

以下が作成したJavaScriptを基に生成されたUIです。

WordPressだけでは実装できないようなボタンのクリックも実現できていることがわかります。

(WordPress内の背景と区別しやすいよう、React側の背景を青にしています。)

これで自分で作成する便利ツールなどもWordPress上で公開することが出来そうです。

便利ツール

実際にReactで便利ツールを作ったものを公開しているので試してみてください。

PDF翻訳アシストツール