WordPressでコードを表示する方法にGitHubの「Gist」を使用することにしました

どーもこんにちは。ニシカワ(@icora_nishikawa)です。

WordPressカスタマイズの記事を書く時にコードを表示しますよね?

私が使うWordpressテーマ「SANGO」にもコードを表示する為のBOXが用意されているのですが使い勝手と見た目があまり好みではありませんでした。

そこでシンプルかつスタイリッシュにコードを表示出来る物はないかと探した所Gistに行き着いたのでご紹介します。

Gistとは

Gistはバージョン管理で有名なGitHubが提供しているコード管理サービスです。

GitHubと同じようにコードの作成やバージョン管理が出来る他、良い感じにブログに貼り付ける事が出来ます。

参考

GistGitHub Gist

こんな感じで表示されます

注意
当サイトではGistの表示用CSSをカスタマイズしていますので、デフォルトの表示とは異なります。

記事の後半でカスタマイズの方法もご案内します。

利用準備

アカウント作成

Gistを使用するにはGitHubのアカウントが必要となります。

もしアカウントを持っていない方はGitHubトップページからアカウントを作成してください。

参考

GitHubGitHub

①ユーザー名・メール・パスワードを入力しSign Upします。

②プランを選びます

フリープランとプライベート設定が出来る有料プランがありますが、今回はブログで公開するためにアカウント作成するのでフリープランでOKです。

その後使用目的や所属を聞かれる画面となりますがスキップで進めましょう、下のような画面が表示されたらアカウントの作成は終了です。

ログイン

GitHubのアカウントが作成出来ましたら、GitHubのページは閉じてGistのページを開きましょう。

参考

GistGitHub Gist

もしログインされていない場合、右上のSign inから先程作成したGitHubのアカウントでログインします。

実際に利用してみる

Gistの利用方法はとてもシンプルで面倒な設定などは必要無く簡単に投稿が可能です。

①内容説明の入力

Gist description…の部分に内容の説明を入力します。

入力は必須では無いですが、後々見返した時などにあったほうが分かりやすいですね。

②ファイル名の入力

ファイル名を半角英数で拡張子まで入力します。

拡張子を入力することによってエディタがコードを認識し、適切な色分けをしてくれます。

③コードの入力

紹介するコードを入力します。

Gistのエディタで直接タグ打ちする事も出来ますが、基本的には外部のテキストエディタで制作したものを貼り付けるのが良さそうです。

④保存する

全ての入力が終わりましたら右下にあるCreate public gistボタンで保存しましょう。

ブログで公開する

①公開用アドレスのコピー

右上のタブがEmbedになっている事を確認し、コピーします。

②Wordpressへ貼り付け

先程コピーしたアドレスをWordpressのテキストエディタに貼り付けします。

こんな感じで表示されたらOKです。ハートマークが可愛らしいですね。

おまけ:デザインのカスタマイズ

デフォルトでも十分綺麗なのですが、少しだけ手を加えてより見やすく・ブログのデザインに合うようにしましょう。

基本的にコメントを読んでいただいて変更したい箇所を変更して貰えれば大丈夫です。ちなみに例の通りにカスタマイズすると私のブログと同様のデザインになります。

まとめ

いかがでしたでしょうか。

SANGOのコードBOXは結構主張が強いのと、色付けしてくれないので敬遠していたのですが、Gistはシンプルで記事に馴染みやすいと思います。

気になった方は簡単なので試してみてくださいね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です