WordPressでソースコードを表示するには「Gist」一択！プラグインでの埋め込みはもう古い！

こんにちは！
今月から無職になり、ブログをひたすら書き続けているひでほいです。

今日は、WordPressでプラグインを使わずにソースコードをきれいに埋め込んで表示する方法をご紹介したいと思います。

スポンサードリンク

ソースコードの埋め込みにプラグインを使わない理由

WordPressにソースコードを埋め込む場合、一般的にはプラグインが使われていることが多いです。

例をあげると、

• Crayon Syntax Highlighter
• SyntaxHighlighter Evolve

このあたりがメジャーですよね。使っている方も多いのではないでしょうか？

僕も実際使っていたことがあります。

ただ、これが結構使いづらい。

その主な理由がこちら。

あとは個人的に、導入するプラグインをやみくもに増やしたくないということもあります。

ということで、プラグインを使わずにWordPressへソースを埋め込む方法をご紹介していきます！

WordPressへのソース埋め込みはGistがおすすめ

僕がおすすめするのは、「Gist」というサービスを利用した方法です。

このGistというサービスは、「GitHub」という開発者向けのソースコードを管理するためのツールから派生したサービスになります。

難しそうに聞こえるかもしれませんが、専門的な知識などが無くても誰でも手軽に使うことができるで安心してください。

早速、使い方を解説していきます。

Gistの使い方

アカウントの開設

まずは、GitHubのページを開き、アカウントを作成します。

• ユーザー名
• メールアドレス
• パスワード

を入力して「Sign up for GitHub」をクリックします。

続いてプラン選択の画面に移動します。
「フリープラン」を選択して「Continue」をクリックします。

これでアカウントの開設ができました。

それでは、実際にGistを使ってみましょう。
画面右上のドロップダウンリストから「New gist」をクリックします。

画面の各項目の説明

こちらがGistのトップページです。
各項目をみていきましょう。

各項目ごとに解説していきます。

Gistの作成方法

では、実際にGistを作成してみましょう。

今回は「文章にマーカーを引くためのコード」をGistに作成してみます。
「ファイル名」や「コードの内容」を入力したら「Create public gist」をクリックします。

Gistが保存され、画面が移動しました。

これでGistの作成は完了です！

WordPressにGistを埋め込む

続いて、WordPressへGistのコードを埋め込む方法を解説していきます。

まずは画面右上の「Embed」の右にあるアイコンをクリックします。
すると、Gist埋め込み用のタグがコピーされます。

あとは、これをWordPressのエディタをテキストモードにして、貼り付けたい場所へペーストするだけです。

今回の場合は、このようなタグになっています。

<script src="https://gist.github.com/lifoolgh/b8178ce0de773a9a9af8afebcd2e9024.js"></script>

そして、実際にWordPressに埋め込んだ際の表示がこちら。

いかがでしょう？
シンプルで、すっきりしていて見やすいですよね。

これでGistを使ったコードの埋め込みは完了です！

お疲れ様でした！

最後まで読んでいただきありがとうございました。
この記事が少しでもお役に立ちましたらシェアしてくれると嬉しいです。