広告

早くて綺麗で文句なし!GistでWordPressにコードを表示してみよう

2018年7月4日

「Gist」ならプラグインを使わずにコードを表示出来ます

WordPress,コード,表示

更に

  • 無料で使える
  • 表示速度が早い
  • カスタマイズも可能

と、コスパも最強です。

今回はそんなGistを使って「WordPressにコードを表示する方法」をご紹介していきます(^^)

  • ソースコードをWordPressに表示したい人
  • Gistのソース表示をカスタマイズしたい人
  • プラグイン使わずにソースを表示したい人
  • ソースコードのバージョン管理したい人

以上のような悩みを持っている人は、必見です!

WordPressにコードを表示・Gistで早く綺麗に軽快に!

WordPress,コード,表示

「Gist」とはGithub社が提供しているプログラムのバージョン管理が出来るWEBサービスのことです。

Gistの主な特徴は以下3つ。

  1. ソースコードのバージョン管理が出来る
  2. 公開が目的であれば無料で使える
  3. 他の人のソースコードも閲覧出来る
あひる
あひる
ん?GistってWordPressと全く関係ないじゃん。

はい、特徴だけを見るとWordPressと何も関係なくメリットも感じません。

しかしGistの内容をWordPressから読み込ませることで

  • プラグイン不要でコードが表示出来る。
  • GistのURL読込処理は表示が高速。
  • CSSで見た目をカスタマイズも出来る。
  • 記事を開かずGist上でコード管理出来る。

と、様々な恩恵に授かれるんですね(^^)

あひる
あひる
おお、なんだかメリットしかなさそうに見えてきた。Gist使ってみようかな...

ううこ
ううこ
うん。まずはGithubへアカウント登録をするんだ

Githubアカウントを作成してGistを使おう

Gistを使ってWordPressにコードを表示するには具体的に

  1. Githubへアカウント登録
  2. Gistへソースコードを登録
  3. 登録したコードのURLを取得
  4. 取得したURLをテキストエディタに貼付

という手順を踏みます。

しかしGithubアカウント登録は最初だけなので、実質2~4の作業でコード表示が可能です

Githubへアカウント登録する

Githubへアクセスして下記画面を開きます。

WordPress,コード,表示

画面右側の入力フォームに「ユーザーネーム(任意の名前)、メアド、パスワード」を入力し「Sign up for Github」をクリック。

WordPress,コード,表示

「Unlimited public repositories for free.」(フリーの無制限リポジトリ)にチェックして「Continue」をクリック。

WordPress,コード,表示

下記ページに遷移するので各項目にチェック(任意)して、「Submit」をクリック。

WordPress,コード,表示

「Learn Git and GitHub without any code!」と画面に出てればGithubアカウントの登録は完了です。

WordPress,コード,表示

あひる
あひる
Githubアカウントの登録は簡単だね!

ううこ
ううこ
この操作は最初のみだ。次はWordpressに表示するソースを登録しよう。

Gistへソースコードを登録する

対象のソースコードをGistへ登録します。

先程のGithub画面を開き、右上の「+」箇所をクリック。

WordPress,コード,表示

プルダウンメニューの「New gist」をクリック。

WordPress,コード,表示

下記画面に変わるので、、

WordPress,コード,表示

画面左上から順に必要事項を入力します。

  1. カテゴリを入力
  2. 名前を記入
  3. ソースコードを入力
  4. Create public gistをクリック

WordPress,コード,表示

下記画面に遷移したらGistへのソースコード登録は完了です。

WordPress,コード,表示

あひる
あひる
少し手間だけど難しくはないね

ううこ
ううこ
カテゴリを統一し、名前を短くすると管理しやすい。次はソースコードのURLをコピーするのだ。

POINT!
コードをハイライト表示するにはソースコードの名前に「.拡張子(言語名)」を追加すればOKです↓
WordPress,コード,表示

拡張子の参考

  • Javascript = .java
  • JAVA = .JAVA
  • VBA = .vba

登録したソースコードのURLを取得する

登録した「ソースコードのURL」を取得します。

ソースコード登録完了画面の...

WordPress,コード,表示

下記アイコンをクリックするだけ。

WordPress,コード,表示

これでURLの取得(コピー)は完了です。

ペーストすれば以下のようなコードが取得出来ているはずです。

<script src="https://gist.github.com/OYAKUN/bccfa27bc71f13edd54f632e8a798830.js"></script>

アイコンクリックしてURLコピーを行う前に、以下内容を確認しておくとミスが出ません

下記箇所が「Embed(埋め込み)」以外に設定されていると、WordPressに表示されません。

WordPress,コード,表示

変更するには「Share」をクリック。

WordPress,コード,表示

プルダウンが開くので、「Embed」を選択してクリック。

WordPress,コード,表示

「Share」の箇所が「Embed」に変わればOK。クリップボードアイコンをクリックしてURLを取得出来ます。

WordPress,コード,表示

取得したURLをテキストエディタに貼付

いよいよ記事中にソースコードを表示します。

WordPressにてテキストエディタ画面を開いて、

WordPress,コード,表示

取得したURLを貼り付けます。

WordPress,コード,表示

ビジュアルエディタにて「再生アイコン」が表示されていればOK。プレビューしてみると...

WordPress,コード,表示

コードが記事中に表示されました。

WordPress,コード,表示

あひる
あひる
できた!けど...あれ?なんだか見づらいよ。

ううこ
ううこ
だね。CSSで見た目を変えてあげよう。

シンプル過ぎて可読性が落ちているので、CSSを追記して見た目を見易くしましょう。

HTTPS化WordPressをhttps化!設定方法とか手順だよ

次のページへ >