プラグイン不要！WordPressにswfを埋め込む方法/Ruffle

めもめも

簡単でした

html CanvasをWordPressに表示する際にはiframeを利用していたため、swfもプラグインやiframeが必要かと思っていましたが、簡単に設定できました。

WordPressの『カスタム HTMLブロック』にRuffleで表示するコードを入れるだけです。

カスタム HTML ブロックとは　WordPress公式サイトhttps://wordpress.com/ja/support/wordpress-editor/blocks/custom-html-block/

設定方法

swfをサーバーにアップする（WordPressのメディアに追加するのではなく、ご自身が利用されているサーバーにアップします）
WordPressの記事に「カスタムhtml」を挿入し以下のコードを記入。必要箇所を書き換える。

<div>flashContent</div>//ここにswfが表示される
<script>
    window.RufflePlayer = window.RufflePlayer || {};
    window.addEventListener("load", (event) => {
        const ruffle = window.RufflePlayer.newest();
        const player = ruffle.createPlayer();
        const container = document.getElementById("flashContent");//場所のid
        container.appendChild(player);
        player.load("pass/to/swf");//swfへのパス
    });
        player.style.width = "600px";//横サイズ
        player.style.height = "400px"; //高さサイズ   });
</script>
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script> //ruffleへのパス

上記は基本の形です。

CDNリリースを利用すれば、ruffleへのパスを記入するだけで利用できます。

より詳しい設定方法などは以下の記事をご覧ください。