WordPress | CodePenの埋め込みショートコードを有効にする拡張機能「CodePen Embedded Pens Shortcode」

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タイプのいずれかを使う事になります
この3つで、おすすめなのはHTMLタイプかショートコードタイプ、理由はAMP
※ショートコードタイプで出力されるコードはHTMLタイプと同じです
新エディタ「Gutenberg」でのブロックエディタで「カスタムHTML」ブロックを出すか、「ショートコード」ブロックを出すか、もう好みですね
AMPページについて
今はAMPに対応しているWordPressブログも多いと思いますが、どのAMP化を使っているかで考慮しなくてはなりません
当ブログではテーマ機能のAMP化を利用していますが、AMP表示時は記事中のJavaScriptを取っ払って整形してくれており、HTMLタイプかショートコードタイプではAMPエラーは発生しません
iframeタイプの埋込みコードもテーマのAMP化機能が自動でamp-iframeに書き換えてくれるのですが、属性値でエラーが出てしまいます
例:タグ「amp-iframe」の属性「frameborder」に無効な値「no」が設定されています。
ソースコードを載せる様な記事は訪問者はPCユーザーが多く、スマホ検索をそこまで意識しなくても良いと思いますがAMPエラーは極力避けたいところですね
ディスカッション
コメント一覧
まだ、コメントがありません