iframeを使わずにPhaserゲームをWordPress記事に埋め込む方法

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

あわせて読みたい
【WordPress】記事内にJavaScriptのゲームを埋め込む方法 どうもです。タドスケです。 https://tadosuke.com/game/959/ Phaserチュートリアルの記事で、作成したゲームを記事内に埋め込んでいます。 この埋め込み方法について、...

以前に上げたこの記事について、進展がありましたので報告します。

目次

これまでの課題

上記記事の内容は、
iframeを使ってPhaserのゲームを貼り付けた別のhtmlを記事内に埋め込む
というものでした。

これでも見た目上は十分に動作しますが、できれば記事内に直接貼り付けたいと思っていました。

WordPress用プラグイン『pg4wp』

情報を探していたところ、以下のWordPress用プラグインを見つけました。

GitHub
GitHub - sdardour/pg4wp: A WordPress Plugin inserting a phaser.io-based game into individual posts a... A WordPress Plugin inserting a phaser.io-based game into individual posts and pages using a simple shortcode. - GitHub - sdardour/pg4wp: A WordPress Plugin inse...

プラグインの説明によれば、
プラグインがインストールされた状態で記事内にショートコードを含めることで、ゲームを埋め込める
とのこと。

試してみた

先に結論から言いますと、確かに埋め込むことができました。

埋め込んだところ

手順は以下です。

  1. GitHubからプラグインをzipでDLする
  2. WordPressのプラグイン設定ページからプラグイン(zipファイル)をインストールする
  3. 記事内にショートコードを入れる

GitHubからプラグインをzipでDLする

GitHubページを開き、Code ボタンを押してDownload ZIP を選択します。

WordPressのプラグイン設定ページからプラグイン(zipファイル)をインストールする

WordPressのプラグイン設定ページから新規追加を選択し、

プラグインのアップロードファイルを選択し、ダウンロードしたzipファイルを選択するとインストールされます。

インストールが完了したら、プラグインを有効化します。

記事内にショートコードを入れる

あとは記事の編集画面から、ショートコードを選択して入力するだけです。

問題点

この方法の問題点は、埋め込むゲームを指定できないことです。

プラグインエディタでソースコード(phpファイル)を覗いてみると…

zip内にあるassetsフォルダ以下のjsファイルを指定しているようです。

指定しているjsファイルの中身を見てみると…

Phaserのゲームコードが書いてありました。

つまり、プラグインのassetsフォルダ以下のjsを差し替えれば、任意のゲームを貼り付けられると考えられます。

しかしこのやり方の場合、プラグイン一つにつき一つのゲームしか貼り付けることができません。

対策案

考えられる対策は以下です。

  1. 貼り付けたいゲームごとに内部のショートコードタグを書き換え、別々にプラグインをリネームしてインストールする
  2. プラグインを改造し、ショートコードにゲームIDを追加で指定できるようにする([pg4wp:game1]とか)
  3. プラグインの内部でやっていることをよく理解し、必要な処理だけを抜き出す

いずれにせよ、WordPressプラグイン、PHPに関する知識が必要になります。

まとめ

以上、iframeを使わずにPhaserゲームをWordPress記事内に貼り付ける方法についてまとめました。

プラグインを改造する知識は必要になりますが、「頑張ればできる」ことはわかりました。

PHPに詳しい人にとっては、この方法が有効な解決策になるのではないかと思います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (1件)

コメントする

目次