WordPressの設定

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

更新日:

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

WordPress,コード,表示

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

と、コスパも最強。

Gistカスタマイズ詳細はコチラ

今回はそんな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,コード,表示

🔽

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

①カテゴリを入力
②名前を記入
③ソースコードを入力
④Create public gistをクリック

WordPress,コード,表示

🔽

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

WordPress,コード,表示

アヒルン
少し手間だけど難しくはないね
カテゴリを統一し、名前を短くすると管理しやすい。次はソースコードのURLをコピーするのだ。
うちゅうじん

 

POINT!

コードをハイライト表示しよう

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

WordPress,コード,表示

各拡張子のsample
  • Javascript = .java
  • JAVA = .JAVA
  • VBA = .vba

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

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

 

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

WordPress,コード,表示

🔽

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

WordPress,コード,表示

 

これでURLの取得(コピー)は完了です。ペーストすれば以下のようなコードが取得出来ているはずです。

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

 

POINT!

URLコピーの前に確認!

アイコンクリックして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

oyakun

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

Copyright© OYAKUDACHI.XYZ , 2018 All Rights Reserved.