WordPress の投稿内で javascript がようやく動きました

Wordpess はブログを書く分には非常に優れたツールではあるものの、javascript で作ったコンテンツを公開しようとなると途端にうまくいきません。今回ちょっとしたツールを公開したのですが、この程度のささいなコードをいちいち外部ファイルとして書くのも馬鹿げていて、投稿内にコードを入れることができないものかと試行錯誤。その結果、何とかブログの記事内でコードを動かすことができたので、参考までに書いておきます。

結局、改行を切るだけ

まず、エディターはビジュアルモードではなくテキストモードにします。今回作ったツールでは投稿内にフォームなどの必要な部品を配置して、その下に <script> ～ </script> を入れています。

ところがこれではさっぱり動作しません。色々情報収集したところ、改行が入ると WordPress 側が勝手にゴニョゴニョして動かなくなるとのことだったので、コードの改行を全部カット。つまり、<script> ～ </script>を１行にしてみました。

これで、あっさり解決。無事動作しました。

JS Minifier で圧縮

とは言え、コードの改行をいちいち手作業でカットしていたら手間がかかります。そこで、JS Minifier というコードを圧縮するツールを拝借します。このツールを使えば自動でコードを圧縮してくれるので、読み込みも速くなる上、改行を自動でカットしてくれるので、今回こちらがやりたいことにぴったり合います。

注意点は、他の圧縮してくれるサイトのコードではうまく動作しない点です。どうも、コードに & が入ると動かなくなるようで、自分が作った限りでは JS Minifier でうまくいったので、こちらをおすすめします。

ブログ全体で動作させるならウィジェットを使う手もある

今回紹介した方法では、コードはその投稿のページの中でしか動作しませんが、複数のページにまたがって同一のコードを動かしたい場合、ウィジェットを使う方法があります。

管理画面から「外観」→「ウィジェット」と進んで、「カスタムHTML」を「コンテンツ下部」に入れます。そして「内容」のところに、同様に<script>～</script>で囲んだコードを入れることで、複数のページでコードを動かすことができるようになります。

動作確認は別途行う

これで WordPress の投稿内で javascript のコードは動きましたが、実際にコードを記述して動作確認をする段階では、いったん Visual Studio Code などのテキストエディタなどでコードを書いて、html ファイルとして出力した上で動作確認をした方がいいでしょう。改行なしのコードを編集するのは現実的ではありません。できあがったコードを最終的に圧縮して WordPress の投稿に流し込むと良いです。

投稿内で javascript を動かすメリット

ブログの記事内でプログラムを動かすということはめったにないことかもしれません。しかし、今回実際にコードを動かしてみて分かったことですが、それなりにメリットはあります。

一つはインタフェースのデザインに悩まなくて良いこと。Wordpress のテーマのデザインをそのまま拝借するので、配置したフォームのデザインをどうしようかというようなことを考えなくてよい。もちろんその分デザインに制限も出ますが、ちょっとしたものであれば余計なことを考えずにコードの記述に集中できるので、案外こっちの方が生産的。実際、今回作ったツールも作業時間で言えば２時間くらいです。

もう一つは、ブログとツールがシームレスであること。例えば、javascript で動作するツールやゲームを作ってそれを世間に広めようとすれば、ツールやゲームが動作するページとそれを紹介するページを別々に用意する必要があります。もちろんある程度の規模のものであればそれでよいのでしょうが、本当にちょっとしたものであれば、わざわざそんなことをするのも馬鹿げています。ブログの記事内でツールを紹介しながら、そのツールが同じページで直接使えるなら、そちらの方がより魅力的です。