このサイトはWordPressを使って作成していますが、表示速度の向上やSEO対策のためにAMP化しました。

WordPressのAMP化

AMP化は、以下のWordPress公式プラグインを使って簡単に実現できました。

AMP

またGoogle Analyticsの設定は、「AMP → 設定 → アナリティクス」の「種類：」に「googleanalytics」と入力します。すると「JSON構成：」が自動入力されるので、「UA-」で始まるトラッキングIDを設定すればOKです。

しかし、AMP化によって一つ問題が発生しました。AMP化したことにより、Gistの埋め込みコードが表示されなくなってしまったのです。

GistのAMP対応

Gistの埋め込みコードを、AMP化したWordPressに表示する方法として、ショートコードを使う方法を紹介します。そのために、JetpackというこれまたWordPress公式プラグインを使います。

Jetpack – WP セキュリティ、バックアップ、高速化、成長

Jetpackの「設定 → 執筆」にある「ショートコードを使って作成し、人気サイトからメディアを埋め込む」にチェックを入れます。これにより、ショートコードの機能が使えるようになります。

AMP化前は、カスタムHTMLで以下のコードを記載すればGistを埋め込めました。

<script src="https://gist.github.com/shoarai/a98cf027914d43139f4dbe579f726b8b.js"></script>

AMP化後は、ショートコードで以下のテキストを記載すればGistを埋め込めます。

[gist]a98cf027914d43139f4dbe579f726b8b[/gist]

ちなみに、ショートコードはGist以外にも、Facebookの投稿やTwitterのツイートなども埋め込めます。利用可能なショートコードは以下で確認できます。
https://jetpack.com/support/shortcode-embeds/