ファイルマネージャーを使用してWordPressの投稿画面にp5.jsの実行画面を表示する方法の覚え書きです。
目次
プラグイン「WP File Manager」をインストール
まず、ブログ管理画面の左側メニューの「プラグイン」→「新規追加」ページでプラグイン「WP File Manager」を検索し、インストール後有効化する。
p5.jsのフォルダをアップロード
ブログ管理画面の左下にある「WP File Manager」をクリックすると、サーバー 内のファイルが表示される。下の画像のように、wp直下にp5.jsのフォルダ（画像内ではcows_4_blog）を丸ごとアップロードする。
index.htmlファイルのリンクを調べる
p5.jsのフォルダ内のindex.htmlファイルのリンクを調べるため、index.htmlファイルの上にカーソルを合わせて右クリックし、出てきたメニューから「Get info & Share」を選択する。
Link: の右側の「index.html」を右クリックし、URLをコピーする。
投稿作成画面に移動
「投稿」→「新規追加」より、投稿作成画面に移動し、＋ボタンをクリックすると、追加するブロックの内容を選択することができる。
「カスタム HTML」内に実行画面の大きさとindex.htmlファイルのリンクを指定するコードを記入する
「フォーマット」内の「カスタム HTML」を選択し、ブロック内に
<iframe width="100%" height="600" src="先ほどコピーしたindex.htmlのURL"></iframe>と記述する（widthとheightの値は任意）。width=”100%”とすると投稿画面の幅いっぱいに表示される。元のsketch.js内でcreateCanvas(700, 600);と横幅を600にしていたので、heightは600にしておいた。
前回の方法との比較
前回の方法ではp5.jsの実行画面の大きさを指定する方法が分かりませんでしたが、今回の方法では大きさを指定することができました。
