CodePenをwordpressの投稿記事に貼り付けよう!【簡単便利】

codepenで書いたソースを記事に埋め込む方法とかないの?

このような疑問に答えます!

CodePenとはHTML,CSS,JSをブラウザ上で書いて動作を確認,保存できるwebサービスです。本記事ではcodepenで保存したソースをwordpress投稿記事に簡単に埋め込む方法について解説します。

プラグインをダウンロードしよう。

まずはwordpressのプラグイン新規追加からキーワード検索でCodePen Embedded Pens Shortcodeと検索してインストールしよう。

codepenサイトで追加したいcodeのショートコードをコピペし記事に貼り付けよう

上記画像の通り貼り付けたいcodeの右下Embedを押し、wordpressshortcodeタブを押す。
でたショートコードを記事に貼り付ければOK!
ちょっとしたデモ付きのcodeを見るには最適です。

Ads

関連記事

WordPress

投稿記事をCSVで管理!CSVのエクスポート、インポートを簡単にできるプラグインを紹介【ワードプレス】

更新日:2019.11.28
314
WordPress プログラミング

【簡単】wordpressプラグインで投稿記事を非公開予約する方法

2022.01.05
248
HTMLCSS WordPress プログラミング

wordpressのメディアから任意の画像ファイルを素早く呼び出す方法【簡単】

2021.12.23
13
WordPress

【WordPress】自作で関連記事を実装する方法【プラグインなし】

2022.06.28
31