WordPressでプラグインもライブラリも使わずにソースを表示させる
2016/08/31
WordPressサイト上でphpのソースなどを表示させるときによく使われているのが、
◇Crayon Syntax Highlighter（プラグイン）
◇Highlight.js（ライブラリ）
だと思いますが、どちらも一長一短ありますね。
【Crayon Syntax Highlighter】
良いところ：お手軽で綺麗にソースを表示させることができる
良くないところ：重い
【Highlight.js】
良いところ：軽い
良くないところ：head内にjsの呼び出しコードを記述してソースをHTMLエスケープさせる必要がある。テーマを変えると再度js呼び出しコードを記述する必要がある。
私はCrayon Syntax Highlighter（クレヨン）を使ってましたが、あるときふと思いたってプラグインの読み込み速度を測ってみたところ、
クレヨンだけで全体の３分の１くらい時間かかってるー(´；ω；｀)
高機能なのはいいけど重すぎんだろ。クレヨン。。
そもそもサイト上でソースを表示させることはめったにないだろうからクレヨンはなんとしても外したい。けど、このサイト右クリック禁止にしてるからHighlight.jsだとソースだけをコピーさせるような設定が難しそう。
WordPressテーマのソースもできるだけいじりたくないし。
ってことで見つけたのが
GitHub
いいわこれ。簡単お手軽で速い。こんなサービスあったんだね。
前フリ長すぎたけど、んなわけでGitHubの紹介。
Contents
GitHub（ギットハブ）とは
アメリカのGitHut社が開始した、プログラムのソースコードをインターネット上で共有するためのサービスで、ユーザーは軽く１０００万人を超えとるそうな。
ネットのいろんなソースを見ただけだから詳しいことは分からんけど、IT業界ではもはや常識とか書いてあるサイトもあった。。
知らなくてごめんなさい(・ω・`)
GitHubの使い方
GitHubサイトでアカウント（無料版あり）を作ってソースコードを登録し、登録したソースコードにアクセスするためのスクリプトコードを記事内に貼り付けるだけ。至って簡単です。
GitHubアカウント作成方法
◇アカウント名
◇メールアドレス
◇パスワード
を入力してSign Up for GitHubボタンを押すだけ。入力したメールアドレス宛に登録用のURLが記載されたメールが送信されるので、URLをクリックすれば登録完了です。
GitHubへのソースコード登録方法
ログインしたらサイト最上部にあるGistをクリック
アカウント名とソースコードを入力したら
Create Secret gist か Create Public gist
ボタンを押します。ソースを共有する場合はきっとCreate Public gistの方なんだろうけど、サイトからリンクできさえすればいいので、私はCreate Secret gistで登録してみました。
登録するとアクセス用のURLが生成されるので、そのURLをコピーして記事内にテキストモードで貼りつければ完了です。
これ以外にもプロジェクトを作成していろいろできるようですが、その他機能は分かりましぇん。。
表示イメージ
下記記事のソース表示をGitHubに変更してみたのでこちらで確認ください。
Crayon Syntax Highlighterを外したらサイト速度はどうなった？
そもそもの目的はGitHubを利用することではなくて、Crayon Syntax Highlighterを外して少しでもサイトの速度を向上させたかったので、Page Speed Insightsでサイト速度を測ってみました。
【Crayon Syntax Highlighterあり】
【Crayon Syntax Highlighterなし】
おぉーー！PCはほとんど変化なかったけど、プラグイン１個外しただけでモバイル８Pのアップは結構効果あったんじゃないかと。
ってか、このサイト結構遅かったのね。。そろそろサイト整理したいのだ。
メールやメモ帳などに貼り付けてご利用ください。