新WordPressテーマ「THE THOR(ザ・トール)」へ改装完了!
Gist

WordPressでソースコード表示をプラグインなしで表示する方法「Gist」

WordPressで記事内にソースコードを表示させる方法として、【Crayon Syntax Highlighter】WP Code Highlight.js】というプラグインを紹介しました。

関連記事

このブログのある記事を書いている時にソースコードを載せる場面があり、まあ普通にテキストで書いても良かったのですが、どうせならカッコ良く載せたいな~とネットで表示させる方法を探していたら有りました! それが【Crayon Syntax […]

関連記事

以前、WordPressでソースコードを表示させるプラグインの紹介で、【Crayon Syntax Highlighter】の記事を書きました。 柚子 rayon Syntax Highlighterの紹介記事はこちら! […]

WP Code Highlight.js

しかし、やはりプラグインはなるべく少ない方が良いということで、プラグインに頼らない方法を探してみました。

そこで見つけたのが「Gist」というサービスを使う方法です。

タケ坊
タケ坊
Gistというツールは、「Github」というソフト開発者向けの管理サービスのうちの1つです。
柚子
柚子
海外のサイトなので気後れしちゃうかもだけど、この記事の通りに進めたら簡単にできるので、チャレンジしてみてね。

Gistとは?

Gistとは

Gistとは、Githubというソフト開発のために作られた管理サービスから無料で提供されているソースコードの管理ツールのことです。

Gistのメインの使い方は、プログラムやソースコードの断片を保存して共有するサービスで、プログラムの開発時のバージョン管理を行うツールです。

その機能の一部を利用してブログなどにソースコードを張り付けることができるのです。

タケ坊
タケ坊
Githubはソフト開発を手掛けるエンジニアの人たちには馴染みの深いサービスだそうです
柚子
柚子
アタチの様な素人にはあまり縁のないサービスだと思ってた!

Gistを利用するメリット・デメリット

メリットデメリット

色々なサービスを提供しているGithubのGistですが、エンジニアではない僕がソースコードをブログサイトに貼り付ける機能だけに絞って考えるメリットやデメリットを見ていきたいと思います。

メリット

考えられるメリットとしては、

 

  • 動作や表示速度低下の原因になりがちなプラグインを使用しなくて良い
  • プラグインの不具合による表示崩れがない
  • 自身のサーバー負担がない

と、こんなところでしょうか。

あまりプラグインを増やしたくない人には便利なサービスとなっています。

デメリット

物事にはメリットもあればデメリットもあります。考えられるデメリットとしては、

 

  • アカウントを作成しなくては使えない
  • ソースコードのデータはGithub側で保存・管理されるのでサービスが終了したら表示されなくなる

 

外部サービスを利用するということは、サービス終了とともに使えなくなってしまうということが最大のデメリットでしょう。

柚子
柚子
そのあたりのメリット・デメリットを考えて利用してね!

Gistの使い方

Gistの使い方

それでは、実際にGistを利用してみましょう。

海外のサイトなので、基本的には英語表記なのですが、Googleの翻訳機能を使えば何となく分かると思います。

Githubへ登録

Gistを利用するためには、GitHubでアカウントを作成しなければいけません。

まずは下のリンクからGitHubのサイトにアクセスしましょう。

GistHub.com

必要事項を登録

トップページから「ユーザー名」「Eメールアドレス」「任意のパスワード」を入力して「サインアップ」をクリックします。

トップページ

次にプランを選択します。

無料プランで十分なので、「Unlimited public repositories for free.」にチェックを入れて「Continue」をクリックします。

フリープランを選択

登録したメールアドレスにメールが届くので、アドレス確認をクリックしましょう。

アドレス確認

画面上部に「Your email was verified.」と表示されたら登録完了です。

登録完了

柚子
柚子
1回アカウント登録したら、あとは何回でも利用できるよ!

Gistで貼り付けコードを取得

それではいよいよ貼り付けコードを取得しましょう。

トップページからサインインします。

サインイン

「ユーザー名かEメールアドレス」と「パスワード」を入力して「サインイン」をクリックします。

必要事項を入力してサインイン

画面右上部の「+」マークをクリックして、「New gist」をクリックします。

New gistをクリック

すると、ソースコード入力画面に移りますので、コードを入力します。

 

  1. コードの登録名を入力(なくても利用できます)
  2. ソースコードを入力
  3. 最後に「Create public gist」をクリックして保存します。

ソースコード入力画面

すると埋め込みコードが生成されるので、これをコピーします。

埋め込みコードをコピー

補足

埋め込みコードをコピーする時は、「Embed」になっているのを確認してください。

Embedになっている

これがなっていないとWordPressにソースコードを張り付けることができません。

貼り付けコードの使用方法

張り付けコードの使用方法は簡単です。

コピーした張り付けコードをテキストエディターで張り付けるだけです。

張り付けコードをテキストエディターへ張り付け

プレビューでどの様に表示されたか見てみましょう。

張り付けコード表示例

柚子
柚子
特に問題はないようね!
シンプルだけどソースコードが見やすい感じ!コメント

Gistのまとめ

まとめ

以上でプラグインを使わずにWordPressにソースコードを表示させる方法を解説しました。

Githubのツールは無料で利用できるので、ぜひ活用してください。

タケ坊
タケ坊
ちょっとしたソースコードを紹介したい時に重宝しそうです。
柚子
柚子
プラグインは少ない方が良いから、このようなサービスは積極的に活用しちゃいましょー!
Gist
最新情報をチェックしよう!