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

  1. 公開日:2016/05/08
  2. 更新日:
  3. WordPress
  4. , ,
  5. 0

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に追加します。

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

あとは、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/
この記事が気に入ったらいいねしよう!
関連記事
ご意見ボード
匿名で管理人に送信されます。※送信専用です。返信はできません。
ご指摘・ご意見
Top