CodePenの埋め込みショートコード「CodePen Embedded Pens Shortcode」

2020-06-05WordPress プラグイン,WordPress,CodePen

CodePenはHTML・JS・CSSのWEB上でテストできる開発環境であり、ソースコードの動作サンプルやコードの紹介などをブログ記事やWEBサイトに手軽に埋め込める事できる事で人気のWEBツール


「CodePen Embedded Pens Shortcode」はWordPressのショートコードに対応し埋め込みコードを有効にするプラグインです

有効インストール数3,000+
日本語あり
ユーザー評価☆☆☆☆☆
マルチサイト対応済み

CodePen埋め込みサンプル

See the Pen 埋め込みコード記事、サンプル用 by yochans (@yochans) on CodePen.

どの埋め込みコードがおすすめか

現在、CodePenの埋め込み用コードはWordPressのショートコード、HTML、iframe、APIを介した処理ができるPrefillの4タイプがあります

Prefill Embedsでも埋め込みは問題ありませんが、特にそのまま埋め込むだけに使うのであればショートコードタイプ、HTMLタイプ、iframeタイプのいずれかを使う事になります

この３つで、おすすめなのはHTMLタイプかショートコードタイプ、理由はAMP

※ショートコードタイプで出力されるコードはHTMLタイプと同じです

新エディタ「Gutenberg」でのブロックエディタで「カスタムHTML」ブロックを出すか、「ショートコード」ブロックを出すか、もう好みですね

AMPページについて

今はAMPに対応しているWordPressブログも多いと思いますが、どのAMP化を使っているかで考慮しなくてはなりません

当ブログではテーマ機能のAMP化を利用していますが、AMP表示時は記事中のJavaScriptを取っ払って整形してくれており、HTMLタイプかショートコードタイプではAMPエラーは発生しません

iframeタイプの埋込みコードもテーマのAMP化機能が自動でamp-iframeに書き換えてくれるのですが、属性値でエラーが出てしまいます

例：タグ「amp-iframe」の属性「frameborder」に無効な値「no」が設定されています。

ソースコードを載せる様な記事は訪問者はPCユーザーが多く、スマホ検索をそこまで意識しなくても良いと思いますがAMPエラーは極力避けたいところですね

2020-06-05WordPress プラグイン,WordPress,CodePen

Posted by Yousuke.U