CSS HTML JavaScript Web Wordpress

CodePenのコードをWordPressに表示する方法

こんにちは!シミダイ(@shimidai2100)です。

CodePenを使うことでブログ内やWebページに簡単サンプルコードを埋め込んで表示することができるようになります。

※CodePenとはWebブラウザ上でWebページをコーディングすることができるサービスです。

今回はCodePenで作成したWebページをWordPress上で表示する方法を紹介したいと思います。


CodePen Embedded Pens Shortcodeをインストール&有効化

まずはWordPressのプラグイン「CodePen Embedded Pens Shortcode」をインストールします。

WordPressの「プラグイン」⇒「新規追加」で「CodePen Embedded Pens Shortcode」を追加します。

「CodePen Embedded Pens Shortcode」でプラグインを探して、インストール

次には「CodePen Embedded Pens Shortcode」を有効化します。

「有効化」をクリックする。特に設定は必要ない

これでWordPressの側の準備は終了です。特に設定などもありません。

CodePenでサンプルを作成

次にCodePenのサンプルを作成します。

CodePenを利用すればインターネットに繋いだ環境さえあれば、いつでもどこでもフロントページをコーディングすることができます。

以下の記事にCodePenの始め方をまとめておきましたので参考にしてみてください。

オススメCodePenのはじめかたとコーディング作成手順

CodePenでWordPressのショートコードを取得

作成したCodePenのページのショートコードを取得します。

以下のように「Embed」をクリックします。

Embedをクリックして埋め込みようコードを取得

WordPress ShortCode」を選択して、赤枠のショートコードをコピーします。

WordPress ShortCodeを選択してコピーする

以下が今回使用したショートコードです。

[codepen_embed height="265" theme_id="0" slug_hash="bOKxbK" default_tab="html,result" user="shimidai2100-the-bold"]See the Pen <a href='https://codepen.io/shimidai2100-the-bold/pen/bOKxbK/'>Accordion Menu</a> by shimidai2100 (<a href='https://codepen.io/shimidai2100-the-bold'>@shimidai2100-the-bold</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]

そして出力結果になります。

[codepen_embed height="265" theme_id="0" slug_hash="bOKxbK" default_tab="html,result" user="shimidai2100-the-bold"]See the Pen <a href='https://codepen.io/shimidai2100-the-bold/pen/bOKxbK/'>Accordion Menu</a> by shimidai2100 (<a href='https://codepen.io/shimidai2100-the-bold'>@shimidai2100-the-bold</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]

関連記事

-CSS, HTML, JavaScript, Web, Wordpress

Copyright© shimidai2100 , 2020 All Rights Reserved.