目次
はじめに
先日、デモをCodePenからJSFiddleに変えるという記事を書きました。
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だけにしか使えないので、安心して使うことができます。
今日はこの辺でー