ChatGPTの回答

では、最短で動く構成をいきましょう👇

🌟 ① p5.jsサンプルコード（コピペOK）

まずはこれをそのまま使えます👇

function setup() {
  createCanvas(400, 400);
}function draw() {
  background(220);
  
  fill(100, 150, 255);
  ellipse(mouseX, mouseY, 50, 50);
}

👉 マウスに追従する丸が動きます
👉 「動いた！」が一番分かりやすいサンプル

🌐 ② p5.js Web Editorで公開

① ここにアクセス
https://editor.p5js.org/

② 「New Sketch」

③ 上のコードを貼る

④ ▶️（再生）で動作確認

⑤ 「Share」ボタン → URLコピー

🔥 ③ WordPressに埋め込む（これが本命）

記事で👇

👉「カスタムHTMLブロック」を追加

そしてこれを貼る👇

<iframe 
  src="ここにさっきのURL"
  width="420" 
  height="420" 
  style="border:1px solid #ccc;">
</iframe>

✨ 完成イメージ

<iframe 
  src="https://editor.p5js.org/satsukidou-syujin/full/aj3ufqjVZ"
  width="420" 
  height="420">
</iframe>

📝 記事構成（おすすめ）

① 説明
👉「マウスで動く円を作ってみました」

② コード掲載
（そのまま載せる）

③ 実行デモ👇
（iframe）

👉 これで
読む → 試す →理解する が一気にできる

💡 ワンポイント（大事）

• iframeにする理由
  👉 WordPressの中でJSを直接動かすと壊れやすい
• p5.jsは
  👉 Processingの「現代版ブラウザ版」みたいな立ち位置

🚀 次の一手（ここが面白い）

もしよければ次👇

• 色をランダムに変える
• クリックで増える
• 軌跡を残す
• 音と連動

このへん、紗月堂の記事にするとかなり強いです

Processing版はこちらの記事で解説しています