Pickupニュース

WordPressのCodePenで埋め込みエラー
コラム

WordPressのCodePenで埋め込みエラー

読み込みjsを変更しよう
本サイトでは、HTML / CSS / JSのデモを表示のために、CodePenでソースコードを記述して記事中に挿入していました。ところが、最近挿入したCodepenが表示されない状況が続いていました。一時的なエラーかと思いましたが復旧する様子が無いので自身で修正することにしました。

CodePenが表示されない!

本記事では、CodePenをCodePen Embedded Pens Shortcodeプラグインを使用して、ショートコード形式で埋め込み表示をしています。
ところが最近、本来であれば下のように表示されなければならないのですが、
下のようにリンクに置き換わってしまっていることに気づきました。
ブラウザのコンソールを確認してみると、ei.jsが404エラーを起こしており、埋め込み用のjavaScriptファイルが正しく読み込めていないことがわかりました。

解決策

原因がJavaScriptファイルということで、解決策を探してみたところ、stackoverflowで同様にCodePenが表示されない相談が投稿されていました。
How do I embed a CodePen in my web page?
I tried adding a CodePen (from codepen.io) to my web page, but it does not show up the way I want it to. It only shows the text: ‘See the Pen … on CodePen’. The picture I added shows the embed window on CodePen.
その解決策として、読み込むjavaScriptを以下のように変更することを提案されていました。
HTMLCopy
<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>

プラグインの修正

そこで、CodePen Embedded Pens Shortcodeプラグイン内のcodepen.phpを開いて、72行目を以下のように修正します。
PHPCopy
$embed .= '<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>';

このファイルを更新することで、無事CodePenが表示出来るようになりました。
いずれプラグインの方でアップデート修正がされるかもしれませんが、早めに対応しておいても問題無かろうと思います。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください