WordPressには、ソースコードを表示するための様々なプラグインがあり非常に便利なのですが、バージョンアップのときに問題があったり、いわゆるコードスニペットみたいなものを表示している場合に編集が大変なことがあると思います。今回は、プラグインを利用せずにGistを利用してちょっとしたコードスニペットを記載して、それを埋め込んで表示するという方法を紹介したいと思います。

Gistって何?

GistとはGitHub社が提供しているソースコードなどを「バージョン管理することが出来るWebサービス」です。簡単に言うと、Gitのホスティングサービスです。その中にGistとよばれる機能も一緒に提供されていて、ソースコード1ファイル単位(複数可)でGit管理、公開できるサービスです。また、Gistは、ブログや他のWebサイトへ埋め込むためのスクリプトタグを生成してくれます。下記のような画面で下記に作成したGistの一覧やキーワードによる検索もできます。

git一覧表示画面

せっかくなので、作成済みのGistから一つ選択して表示してみます。

やってみます

GitHubに行き、ログインします。ログイン後は、下記のような画面が表示されます。

GitHubログイン後の画面

上記画像の番号が記載された場所を順番にクリックして「New Gist」という文字をクリックします。下記のような入力ができる画面が表示されます。

Gist入力画面

上記画面で入力します。ファイル名には、シンタックスをきかせたいものの拡張子を入力します。

入力後の画面

「Create public gist」として作成します。こちらで、Gistの一覧画面へ登録されます。

Gistに登録したソースコードの埋め込み方法を取得する

今度は、作成したGistを埋め込む方法について説明します。

1つ選択した画面

左上に共有方法があるのでそのあたりを拡大したものが下の画像になります。

共有方法の選択

今回は、embedを選択して、scriptタグをコピーします。カスタムHTMLとして編集して、そこにコピーしたものを下に表示します。

このような形で埋め込まれます。

まとめ

Gistを利用することで特別なプラグインをインストールせずに、簡単にソースコードが表示できることが分かりました。また、Gistでは、Markdown形式をサポートしていることもあり、手順などをGistで手軽に作成しておき、それを特定のサイトから見せるなど手軽に利用できるのも魅力だと思います。