WordPress | shoarai.com

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

WordPressのAMP化

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

AMP

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

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

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/

回路図をdraw.ioで描く

draw.ioを開いたら「Create New Diagram」を選び、図のテンプレートを選びます。ここで「Engineering → Electrical 1」を選ぶと、抵抗やコンデンサ、オペアンプやトランジスタの図が左サイドバーに表示されるので、すぐに回路図を描き始められます。

図の描き方はここでは説明しません。わりと直感的に描けるので、そんなに困らないと思います。

回路図をWordPressで表示する

以下の手順で、draw.ioで作成した図をWordPressで表示できます。手順はdraw.io公式の記事にある通りです。

右クリックして「Select All」を選び、右サイドバーの「Text → Formatted Text」のチェックを外す。

右クリックして「Select Vertices」を選び、右サイドバーの「Text → Word Wrap」のチェックを外す。

「File → Embed → SVG…」を選ぶ。

「Lightbox」のチェックを外して、「Embed」を押し、「Copy」を押してSVGのコードをコピーする。

コピーしたSVGをWordPressにカスタムHTMLとして貼る。

以下のように回路図が表示できます。