ブログ プログラミング

【2019年版】プラグイン不要!WordPressでソースコードを表示する方法 → Gistが最強です。

更新日:

自分のブログにソースコードを綺麗に表示して共有したい!!

そう思っている方多いのではないでしょうか?

今回は主にWordPressを導入後、

これから記事内でプログラミングのソースコードを書いていきたいなあという方に向けて

ソースコードの表示方法を紹介していきます。

 

今回使用するのは、外部サービスであるGistというのを使用します。

Gistについては、様々なサイト様でご紹介されているので説明を省略しますが、

ざっくりいうとソースコードを保管しておけるサービスみたいな感じです。

 

ちなみに、最終形としては下記のような表示なります。

見本

どうでしょう?シンプルで且つめちゃくちゃ見やすくないですか??

くらいん

シンプル且つ手軽が1番良いよね

個人的にはもうGist一択です。

では早速なぜGistを使うと良いのかという理由を含め手順を説明していきます!

 

ググると表示方法が色々出てきてよく分からない

まずはじめに、

WordPressで作成したサイトにソースコードを表示する方法としては下記のいずれかになります。

ソースコードを表示する方法

  • プラグインを導入して表示する
  • 外部のサービスを使用してソースコード風に見せる(今回はこっち)

 

おそらく、この記事を見ていただいている方の多くは

「WordPress ソースコード」とか「ワードプレス プログラミング 表示」

なんていうワードで検索したことがあるのではないでしょうか?

実際に検索してみると様々な方法が出てきてどれが正解か分からなくなると思います。

なぜなら、それぞれみんなどの方法を使うかの基準が違うからです。

大きく上記2パターンがあると言いましたが、それぞれにメリットがあります。

例えば、こんな感じです。

プラグインを使用して表示するメリット

  • 見た目がとにかく派手で綺麗!
  • コピペボタンなどが付いていて高機能だったりする

外部のサービスを使用してソースコード風に見せるメリット

  • ページ表示の動作などが重くならない
  • 使用しているWordPressテーマの依存によるプラグインの面倒な作業がない

今回、私がGistを選択したのは

大前提として表示速度が遅くなる可能性があるプラグインを

使用したくなかったというのがあります。

(他にもいっぱい導入したいプラグインありますから。。)

その中でGistがよかった理由としては、

Why Gist?

  1. 面倒なのは最初の登録だけで、後はめちゃくちゃ楽
  2. WordPressで使用したソースコードがGist上に一元管理できる
  3. 少しCSSいじると見た目がシンプルでかっこいい

こんな感じです。

この辺りに共感できた方は以下、続けて見ていってください笑

1. Gistアカウントの作成

なにはともあれ、はじめにGistのアカウントを作成します。

GistGithubというサービスの中のサービスになりますので

厳密にはGithubのアカウントを作成することになります。

(わかりづらくてすいません。。)

アカウント作成に関しては、下記のQiitaが大変わかりやすいので参考にしてください。

https://qiita.com/okumurakengo/items/848f7177765cf25fcde0

2. 表示したいソースコードをGistに書く(作成する)

Githubのアカウントが作成できたら、マイページからGistの作成を行います。

1ソースコードにつき1Gist作るイメージ

くらいん

マイページ右上の+(プラスマーク)から「New Gist」を選択してください。

 

成功すると、下記のような画面が表示されます。

こちらに、表示したいソースコードを入力していきます。

入力項目

  • Gist description(ソースコードの説明文です。不要な場合は空欄でもOKです)
  • Filename including extension(拡張子を含めたファイルのタイトルを入力します)
  • 大きい四角(ソースコード を書きます)

入力が完了したら、右下の「Create Public Gist」を選択したら完了です。

3. WordPressで表示する

最後に、WordPressで表示してみます。

記事内に表示するには、Gistの共有用のタグを入力します。

と言ってもワンクリックのコピペで終了です笑

 

ソースコード右上のプルダウンが「Enabled」になっていることを確認して、

その右にあるコピペボタンを押してください。

コピーができたら、そのままWordPressの記事に入れちゃいます。

ここで注意点として、必ず入力はテキスト入力モードで行ってください。ビジュアル入力モードだとうまくいきません。

テキスト入力モードにコピーした後ビジュアル入力モードで確認し、

このようなマークになって入れば成功です。

そのまま実際のページを確認して見てください。

おそらくこのような感じで、表示されると思います。

くらいん

あれ、さっき見たのと違う。。

はい、ここからはCSSをいじって見た目を整える作業になります。

このままの見た目がいい!

という方もいらっしゃると思いますので、

CSSのカスタマイズに関してはこちらの記事で紹介します!

オシャレにする
コピペでOK!Gistから読み込んだソースコードをおしゃれにカスタマイズする方法

今回は、プログラミングのソースコードをかっこよく、オシャレに表示したい!! という方に向けて、デフォルトの表示からCSSでカスタマイズする方法を紹介します。 完全コピペでOKですので、ぜひ参考にしてみ ...

続きを見る

まとめ

今回は、WordPressでプログラミングのソースコードを表示したい方に向けて

プラグインを使わずに表示速度を落とさないで表示する方法をご紹介しました!

管理面も含め、現状はGist一択だと本気で思ってます。

良かったら参考にしてみてください!

 

よく読まれている記事

1

  現在5年目のエンジニアで26歳です。 今回は20代の現役エンジニアとして、自分も含め転職について考えている方に向けて20代エンジニア転職に完全特化したおすすめのサービスを3つ紹介していき ...

2

これからエンジニアになりたい、プログラミングを使えるようになりたいという方に向けて 山のようにあるプログラミングスクールの中から、特におすすめなスクールをタイプ別に逆引きで3つ紹介します。 &nbsp ...

3

みなさんはを使っていますでしょうか。   本記事を見ていただいているということは、   プログラミングの勉強でを使うことに興味がある、 もしくはこれから動画を購入したいけどどれを買 ...

-ブログ, プログラミング
-, , ,

Copyright© クラインの備忘壺 , 2019 All Rights Reserved.