WordPress

プラグインを使わずにGistのコードをWordPressに埋め込む方法

投稿日:

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の本文に埋め込む方法をご紹介します。

https://gist.github.com/ottanxyz/1d87a31d81b26db857f1fed436a3db95

WordPressの本文にGistのコードを埋め込むためには、以下のコードをテーマのfunctions.phpに追加します。

https://gist.github.com/ottanxyz/1d87a31d81b26db857f1fed436a3db95#file-functions-php

あとは、WordPressの本文にGistのURLを貼り付けるだけで上記のように自動的にソースコードが埋め込まれるようになります。

Bootstrap4を使用している場合の注意点

CSSフレームワークとして、Bootstrap4を使用している場合には注意が必要です。GistのCSSとBootstrap4のCSSが競合し、Gistのソースコードが正常に表示されません。そのため、style.css、もしくは独自のCSSに以下のコードを追加してください。

https://gist.github.com/ottanxyz/bf6cb78f08c9b567c22043d7330bdc2b

まとめ

Gistのソースコードを公開することで、

  • ソースコードの修正が楽
  • ソースコードのHTMLエンティティの変換が不要
  • シンタックスハイライトは勝手にGistが対応してくれる
  • レスポンシブデザインに対応してくれる

と、様々なメリットがありました。弊サイトではこれまでシンタックスハイライターとして、highlight.jsを使用していたのですが、これを機にGistに乗り換えも検討してみようと思います。

参考リンク

今回、functions.phpにコードを追加するにあたり、以下のリンクを参考にさせていただきました。ただし、以下で公開されているコードをそのまま使用したところ、正常に動作しなかったため改変させていただきました。

Insertar un Gist de Github en WordPress o Genesis

-WordPress
-

執筆者: