wordpressの記事に埋め込んだjavascriptが正しく動かないときの対処法

前回、AI(Claude)に作ってもらったクイズゲームを公開しました。
アレはHTMLとjavascriptを使って作られています。

通常、wordpressのブロックエディタでブログの投稿の中にHTMLを埋め込みたい場合は「カスタムHTML」というブロックを使うかと思います。

しかしAIが作ったHTMLを張り付けてみたところ、動作しません!

動作しない理由をこれまたAIに聞いてみたところ

このエラーはHTMLやJavaScriptの構文に問題があることを示しています。WordPressのエディターが特定の文字をエスケープしたり、コードの一部を変更したりしている可能性があります。
より確実な解決策を提案します: 解決策: WordPressプラグインを使用する
WordPressのGutenbergエディタは時々HTMLコードを変更することがあります。より確実な方法として、プラグインを使うアプローチを試しましょう。

WordPressのエディタは勝手にHTMLコードを変更したりすることがあり、それが原因ではないかとのこと。解決方法としてプラグインの使用を提案してきました。

Claudeが提案してきたプラグインはInsert PHP Code Snippetというやつだったんですけど、これはちょっと目的とは違いました。いろいろ調べた結果、オススメは「Shortcoder」。シンプルで使いやすいです。

一応備忘録を兼ねて使い方を記載しておきます。

インストール

まず管理ページの新規プラグインのインストール画面でShortcoderと検索。一番最初に出てきますのでインストールして有効化します。

ショートコードの作成

インストールして有効化されると左のメニューにShortcoderという項目ができてるはずです。

クリックして、「ショートコードを作成」へ。

名前(半角英数字記号のみ)を入れて、AIが書いたコードをそのままぶち込みます。

「公開」ボタンを押すと記事に挿入できる状態になります。

記事にショートコードを挿入

ブロック追加ボタンを押すと、選択肢の中にShortcoderがあるはずです。

▼するとこのようなブロックが挿入されます。

「Select shortcode」を押すと作成済みのショートコードの一覧が表示されるので、先ほど作ったやつを選択し「挿入」を押します。

空欄だった部分に選択したショートコードの名前が出てれば挿入完了です!

前回の記事のクイズ部分は実際にShortcoderで埋め込んでいて、問題なく動作してるかと思います。

このブログには他にもHTML(とjavascript)を埋め込んでいる記事がいっぱいあり、いつのまにやらその大部分が動いてないっぽいので時間を見つけてShortcoderに置き換えていきたいと思っております!

それからShortcoderは元のコードを書き換えればちゃんと記事の内容が置き換わるので、複数の記事に同じ文言などを入れたい場合なんかにも便利そうです。