ITつれづれなるままに

WordPressでプラグインもライブラリも使わずにソースを表示させる

2016/08/31

スポンサーリンク

WordPressサイト上でphpのソースなどを表示させるときによく使われているのが、

◇Crayon Syntax Highlighter(プラグイン)
◇Highlight.js(ライブラリ)

だと思いますが、どちらも一長一短ありますね。

【Crayon Syntax Highlighter】
良いところ:お手軽で綺麗にソースを表示させることができる
良くないところ:重い

【Highlight.js】
良いところ:軽い
良くないところ:head内にjsの呼び出しコードを記述してソースをHTMLエスケープさせる必要がある。テーマを変えると再度js呼び出しコードを記述する必要がある。

私はCrayon Syntax Highlighter(クレヨン)を使ってましたが、あるときふと思いたってプラグインの読み込み速度を測ってみたところ、

pluginspeed

クレヨンだけで全体の3分の1くらい時間かかってるー(´;ω;`)

高機能なのはいいけど重すぎんだろ。クレヨン。。

そもそもサイト上でソースを表示させることはめったにないだろうからクレヨンはなんとしても外したい。けど、このサイト右クリック禁止にしてるからHighlight.jsだとソースだけをコピーさせるような設定が難しそう。

WordPressテーマのソースもできるだけいじりたくないし。

ってことで見つけたのが

GitHub

いいわこれ。簡単お手軽で速い。こんなサービスあったんだね。

前フリ長すぎたけど、んなわけでGitHubの紹介。

GitHub(ギットハブ)とは

アメリカのGitHut社が開始した、プログラムのソースコードをインターネット上で共有するためのサービスで、ユーザーは軽く1000万人を超えとるそうな。

ネットのいろんなソースを見ただけだから詳しいことは分からんけど、IT業界ではもはや常識とか書いてあるサイトもあった。。

知らなくてごめんなさい(・ω・`)

GitHubの使い方

GitHubサイトでアカウント(無料版あり)を作ってソースコードを登録し、登録したソースコードにアクセスするためのスクリプトコードを記事内に貼り付けるだけ。至って簡単です。

GitHubアカウント作成方法

GitHubサイト

◇アカウント名
◇メールアドレス
◇パスワード

を入力してSign Up for GitHubボタンを押すだけ。入力したメールアドレス宛に登録用のURLが記載されたメールが送信されるので、URLをクリックすれば登録完了です。

GitHub

GitHubへのソースコード登録方法

ログインしたらサイト最上部にあるGistをクリックgist

アカウント名とソースコードを入力したら

Create Secret gist か Create Public gist

ボタンを押します。ソースを共有する場合はきっとCreate Public gistの方なんだろうけど、サイトからリンクできさえすればいいので、私はCreate Secret gistで登録してみました。

gist-save

登録するとアクセス用のURLが生成されるので、そのURLをコピーして記事内にテキストモードで貼りつければ完了です。gist-url

これ以外にもプロジェクトを作成していろいろできるようですが、その他機能は分かりましぇん。。

表示イメージ

下記記事のソース表示をGitHubに変更してみたのでこちらで確認ください。

STINGER5カスタマイズ アドセンス最大数貼ってみた!iPhone6等ワイド画面対応だよ。

WordPressサイトを全SSL化したよ♬ IT技術者が実施した手順とポイントと苦労話と将来について ━Stinger対応━

Crayon Syntax Highlighterを外したらサイト速度はどうなった?

そもそもの目的はGitHubを利用することではなくて、Crayon Syntax Highlighterを外して少しでもサイトの速度を向上させたかったので、Page Speed Insightsでサイト速度を測ってみました。

【Crayon Syntax Highlighterあり】

mobile_before

【Crayon Syntax Highlighterなし】mobile_after

おぉーー!PCはほとんど変化なかったけど、プラグイン1個外しただけでモバイル8Pのアップは結構効果あったんじゃないかと。

ってか、このサイト結構遅かったのね。。そろそろサイト整理したいのだ。

スポンサーリンク

-ITつれづれなるままに
-,

このボタンをクリックすると記事タイトルとURLがコピーされます。
メールやメモ帳などに貼り付けてご利用ください。
TOP