【WordPress】記事内にJavaScriptのゲームを埋め込む方法

2021年5月11日2022年8月15日

どうもです。タドスケです。

Phaserチュートリアルの記事で、作成したゲームを記事内に埋め込んでいます。

この埋め込み方法について、やり方がわからずに詰まったポイントがあったので記事に残しておきます。

JavaScriptを利用して描画処理を行う場合にも当てはまるので、ゲーム以外のアプリを公開される方でも参考になる内容かと思います。

（※2022/08/15追記）

Phaserゲームについては、WordPressのプラグインを利用した方法もあることがわかりました。
PHPに詳しい方にとってはこちらの方が良いかもなので、ご参照ください。

カスタムHTMLブロックの問題点

WordPressにはカスタムHTMLブロックというものがあり、ここにコードを貼り付けることで広告などを挿入できます。

JavaScriptのゲームについても、同様にここに貼り付ければできそうに思えるのですが…

実際にやってみると、カスタムHTMLブロックの場所ではなくページの下部などの意図しない場所に出てしまいます。

詳しい理由は不明なのですが、友人から聞いた話によると JavaScriptあるある のようです。

ネット上で調べてもすぐにはわかりそうにありません。

解決策

この問題の手っ取り早い解決方法は、

ゲームだけを表示する単体のHTMLを用意して
WordPressのメディアライブラリにアップして
iframeで単体htmlを埋め込んでしまう

です。

単体実行htmlを作る

新しいhtmlファイルを作り、中身を以下のようにします。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
  <title>PhaserTutorial7</title>
</head>
<body>

<script src="//cdn.jsdelivr.net/npm/phaser@3.54.0/dist/phaser.js"></script>
<script>
// ここにゲームのコード(.js)をそのまま書きます
</script>

</body>
</html>

※phaserを使わない場合は //sdn～ の行は不要です。
　この行はネット上からphaserライブラリを読み込んでくるためにあります。

メディアライブラリにhtmlをアップする

WordPressのメディアライブラリを開き、画像をアップする時と同じようにhtmlファイルをアップします。

ファイルのURLの欄にhtmlファイルのURLが表示されるので、これをコピーしておきます。

https://tadosuke.com/wp-content/uploads/2021/04/phaser10.html

iframeで埋め込む

記事内の任意の位置にカスタムHTMLブロックを追加し、以下のコードを入力してください。

<iframe src="https://tadosuke.com/wp-content/uploads/2021/04/phaser10.html" width="300" height="400" frameborder="0" marginwidth="0" marginheight="0">
</iframe>

各パラメーターは以下の意味があります。

src	埋め込みたいhtmlのURL
width	埋め込み枠の幅
height	埋め込み枠の高さ
frameborder	埋め込み枠の太さ 0で非表示
marginwidth	枠内の余白（幅）
marginheight	枠内の余白（高さ）

必要に応じて値を調整してください。

これでゲームが任意の場所に表示されるようになります。