jsfiddleは、Webのフロントエンド技術であるHTML、CSS、JavaScriptをWebで作成してすぐにテストし、ソースを保存共有することができるサービスです。 jsfiddleの埋め込み機能を使用して WordPressでjsfiddleコードを表示することができます。
WordPressにjsfiddleコードを表示する（jsfiddleコードを共有）
WebでHTML、CSS、Javascriptを作成してテストし、ソースを共有したい場合は、jsfiddleサービスを使用すると便利です。 次のライフコーディング動画で基本的な使い方を見ることができます。
2012年に作成されたビデオで最新 jsfiddle インターフェースとは違いがありますが、基本的な使い方を理解できるはずです。
WordPressでjsfiddleコードを共有する
プラグインを使用せずに WordPress私のウェブでjsfiddleコードを共有したい場合は、jsfiddleの埋め込み機能を使用してください。
ソースを共有するjsfiddleページの上部 埋め込む メニューをクリックします。
タブ セクションで表示した要素を選択/解除できます。 たとえば、JavaScriptがないコードスニペットの場合は、JavaScriptを無効にします。
ビジュアル セクションでは、ライトモード（明るい色）とダークモード（暗い色）を選択できます。 メニューフォントの色などをカスタマイズできます。
Embed snippetでは埋め込みコード形式を選択できます。 デフォルトでは、次のスクリプトコードが表示されます。
<script async src="//jsfiddle.net/learningforever/9rL16s1q/embed/html,css,result/dark/"></script>Prefer iframe?をクリックすると、iFrame形式でコードを共有できます。
<iframe width="100%" height="300" src="//jsfiddle.net/learningforever/9rL16s1q/embedded/html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>WordPressでiframeコードを共有するには、カスタムHTMLブロックにコードを追加するだけです。 古典エディタを使用している場合は、エディタでテキストモードに切り替えた後にiframeコードを適切な場所に貼り付けてください。
次の画像を参照して、カスタムHTMLブロックを目的の場所にドラッグアンドドロップしてください。
または、 時間と効率を向上させる WordPress Gutenberg キーボードショートカット 記事を参考にキーボードショートカットを使用することも可能です。
以下は、iframe形式でjs-fiddleコードを共有した例です。
ダークモードとして指定し、JavaScriptタブを除外しました。 HTML タブ、 CSS タブ、 結果 タブを選択してソースコードと結果を確認できます。
JSFiddle Shortcodeプラグイン
JSFiddleショートコードというjsfiddleをショートコードとして追加できるプラグインがあります。 このプラグインを使用すると、簡単なショートコードでFiddleを挿入できます。
例：
[jsfiddle url="http://jsfiddle.net/wvega/UupFu/" height="300px" include="result,html,js,css" font-color="39464E" menu-background-color="FFFFFF" code-background-color="f3f5f6" accent-color="1C90F3"]上記のショートコードを追加すると、次のiframeに変換してjs-fiddleソースコードをフロントエンドに表示します。
<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/wvega/UupFu/embedded/result,html,js,css/?fontColor=39464E&menuColor=FFFFFF&bodyColor=f3f5f6&accentColor=1C90F3"></iframe>このプラグインをダウンロードして見てみると約2年前にアップデートされましたね。 最新 WordPress バージョンで問題なく動作するかどうかは確認していません。 うまくいかない場合は、プラグイン開発者に連絡してください。
コメントを残す