プラグインを使わずに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の本文に埋め込む方法をご紹介します。

functions.php

No Description

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に以下のコードを追加してください。

style.css

No Description

まとめ

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

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

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

参考リンク

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

Insertar un Gist de Github en WordPress o Genesis – TargetIMC

Te mostraremos como insertar código en un post sin necesidad de un plugin a través de Github. Si queremos insertar código en un post, hay varios plugins que lo hacen desde dentro mismo de nuestra web, como por ejemplo SyntaxHighlighter Evolved que es gratuito, pero no siempre da buenos resultados, según nuestra experiencia.

この記事が気に入ったら
いいね ! しよう

Twitter で