WordPress でプログラムのソースコードをハイライトする方法はいくつかありますが、公開されているプラグインやシンタックスハイライターを使用せずに、手っ取り早く公開したい場合は、GitHub Gist が便利です。WordPress.comでは、デフォルトで Gist のコードの埋め込みに対応しているのですが、WordPress.orgで公開されている WordPress のプログラムは埋め込みに対応していません。
そこで、今回は外部のプラグインを使用せずに、Gist の URL をブログの本文に貼り付けるだけで Gist のコードを WordPress に埋め込む方法をご紹介します。この方法は、WordPress 4.5.2 で確認しています。
WordPress の本文に Gist のコードを埋め込む
通常、Gist のコードを WordPress の本文に埋め込むためには、Gist のページ上の「Embed」からリンクを取得し、それを WordPress の本文に貼り付ける必要があります。それだけでも十分に手軽なのですが、ここでは Gist の URL を貼り付けるだけで自動的に WordPress の本文に埋め込む方法をご紹介します。
WordPress の本文に Gist のコードを埋め込むためには、以下のコードをテーマのfunctions.phpに追加します。
あとは、WordPress の本文に Gist の URL を貼り付けるだけで上記のように自動的にソースコードが埋め込まれるようになります。
Bootstrap4 を使用している場合の注意点
CSS フレームワークとして、Bootstrap4を使用している場合には注意が必要です。Gist の CSS と Bootstrap4 の CSS が競合し、Gist のソースコードが正常に表示されません。そのため、style.css、もしくは独自の CSS に以下のコードを追加してください。
まとめ
Gist のソースコードを公開することで、
- ソースコードの修正が楽
- ソースコードの HTML エンティティの変換が不要
- シンタックスハイライトは勝手に Gist が対応してくれる
- レスポンシブデザインに対応してくれる
と、さまざまなメリットがありました。弊サイトではこれまでシンタックスハイライターとして、highlight.jsを使用していたのですが、これを機に Gist に乗り換えも検討してみようと思います。
参考リンク
今回、functions.phpにコードを追加するにあたり、以下のリンクを参考にさせていただきました。ただし、以下で公開されているコードをそのまま使用したところ、正常に動作しなかったため改変させていただきました。
http://targetimc.com/insertar-un-gist-de-github-en-wordpress-o-genesis/