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を選択してコピーする

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

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

See the Pen Accordion Menu by shimidai2100 (@shimidai2100-the-bold) on CodePen.0

スポンサードリンク

関連記事

-CSS, HTML, JavaScript, Web, Wordpress

Translate »

Copyright© shimidai2100 , 2019 All Rights Reserved.