ヘッダーロゴ

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

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

WordPress,コード,表示

更に

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

と、コスパも最強です。

Gistの設定方法を詳しく見る

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

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

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

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

WordPress,コード,表示

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

 

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

  1. ソースコードのバージョン管理が出来る
  2. 公開が目的であれば無料で使える
  3. 他の人のソースコードも閲覧出来る

アヒルン
ん?GistってWordPressと全く関係ないじゃん。[st-kaiwa2]

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

 

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

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

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

[st-kaiwa2]おお、なんだかメリットしかなさそうに見えてきた。Gist使ってみようかな・...


うちゅうじん
うん。まずはGithubへアカウント登録をするんだ[/t-kaiwa1]

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

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

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

という手順を踏みます。

 

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

Githubへアカウント登録する

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

WordPress,コード,表示

[st-under-t color="#178038"]

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

WordPress,コード,表示

[st-under-t color="#178038"]

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

WordPress,コード,表示

[st-under-t color="#178038"]

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

WordPress,コード,表示

[st-under-t color="#178038"]

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

WordPress,コード,表示

[st-kaiwa2]Githubアカウントの登録は簡単だね![/st-kaiwa2]
[st-kaiwa1]この操作は最初のみだ。次はWordpressに表示するソースを登録しよう。

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

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

 

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

WordPress,コード,表示

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

WordPress,コード,表示

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

WordPress,コード,表示

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

① カテゴリを入力
② 名前を記入
③ ソースコードを入力
④ 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化!設定方法とか手順だよ

次のページへ >

  • この記事を書いた人
  • 最新記事

OYAKUN

30代半ば♂妻・子3人の5人で日々激戦中。Google app script&VBA初心者が自分の備忘録を兼ねて「スプレッドシート、Excel、WordPress、plugin」の設定等、主にブログやアフィリエイト周辺のtipsを背伸びしながらご紹介しています。

© 2021 OYAKUDACHI.XYZ