ベストセラー人気 WordPress テーマTop 30 詳細

WordPressにjsfiddleコードを表示する

Last Updated:2021年11月1日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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ページの上部 埋め込む メニューをクリックします。

WordPressに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コードを適切な場所に貼り付けてください。

WordPress カスタムHTMLブロック

次の画像を参照して、カスタムHTMLブロックを目的の場所にドラッグアンドドロップしてください。

または、 時間と効率を向上させる WordPress Gutenberg キーボードショートカット 記事を参考にキーボードショートカットを使用することも可能です。

以下は、iframe形式でjs-fiddleコードを共有した例です。

ダークモードとして指定し、JavaScriptタブを除外しました。 HTML タブ、 CSS タブ、 Result タブを選択してソースコードと結果を確認できます。

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 バージョンで問題なく動作するかどうかは確認していません。 うまくいかない場合は、プラグイン開発者に連絡してください。

参照



コメントを残す

コメント