忘れないように記録しとこ

カバの樹

JSFiddle Embed をWordPressに埋め込む方法

2019年5月14日

完全版を表示する

はじめに

先日、デモをCodePenからJSFiddleに変えるという記事を書きました。

https://www.kabanoki.net/3502/

 

JSFiddleのEmbed は、JS方式かiframe方式のどちらかしかありません。

どちらの方式もWordPressの記事に貼り付けて表示することができません（プラグインで解決はできる

 

今回は、Wordpress埋め込み用のショートコードを自作しようと思います。

 

環境

WordPress： 5.2

 

ショートコードの自作手順

[手順1] - WordPress用のショートコードを作成

iframeタグを参考にショートコードを作ります。

■iframe

<iframe width="100%" height="300" src="//jsfiddle.net/kabanoki/h7umzx8j/2/embedded/js,html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

↓

■ショートコード

[jsfiddleEmbed user="kabanoki" hash="h7umzx8j" count="2" tab="js,html,css,result" visual="dark" width="100%" height="300"]

[手順2] - functions.phpに関数を記述

function jsfiddleShortTag($atts) {
    extract(shortcode_atts(array(
        'user' => 'kabanoki',
        'hash' => '',
        'count' => '',
        'tab' => 'result,js,html,css,resources',
        'visual' => '',
        'width' => '100%',
        'height' => '300',
        'style' => ''
    ), $atts));

    return sprintf('<iframe id="jsfiddle-%2$s" class="jsfiddle" src="//jsfiddle.net/%1$s/%2$s/%3$s/%4$s/%5$s" width="%6$s" height="%7$d" style="%8$s" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>',
        $user,
        $hash,
        !empty($count) ? "{$count}/embedded" : 'embedded',
        $tab,
        $visual,
        $width,
        $height,
        $style
    );
}
add_shortcode('jsfiddleEmbed', 'jsfiddleShortTag');

 

まとめ

JSFiddleはCodePenとは違い公式がWordpress用のプラグインを出していません。

必然的にiframeを埋め込めるようにする必要があります。

iframeを埋め込めるようにするプラグインもありますが、iframeを許可するのは安全面を考慮すると気が引けます。

なので今回は自作しました。

これならJSFiddleだけにしか使えないので、安心して使うことができます。

 

今日はこの辺でー

 

  • B!