＜コンセプト＞
WordPressで記事内にソースコードを表示したいと思い、「Crayon Syntax Highlighter」というプラグインを導入したけど、英語表記で使い方がわからない。
導入すると、ページの読み込み速度が遅くなるって聞いたけど、高速化する方法はあるの？
そこで今回は、「Crayon Syntax Highlighter」を
- ・日本語化
- ・高速化
にする、超簡単な方法を紹介します。
注意：今回の記事では、「Crayon Syntax Highlighter」の使い方は説明していません。
「Crayon Syntax Highlighter」とは
「Crayon Syntax Highlighter」とは、WordPressで記事内にソースコードを表示するためのプラグインです。
使い方は非常に簡単で、プラグインをインストールし有効化すると、記事編集エディタに専用のボタンが追加されます。
そのボタンから、表示したいソースコードを入力すると、記事内にソースコードをキレイに表示することができます。
記事でHTML/CSSやプログラミングのコードを解説する際に、非常に役に立つプラグインです。
しかし、問題点として
「英語表記でわかりにくい」
「ページの読み込み速度が急に遅くなる」
などが挙げられます。
日本語化
個人で日本語パッチを配布しているサイトを利用するなど、ネットで日本語化する方法をいろいろ調べてみた結果、もともと「Crayon Syntax Highlighter」は日本語に対応していることが判明。
方法はとても簡単で、サーバー内の指定ファイルを削除するだけです。
削除するファイルはこの2つ
crayon-syntax-highlighter-ja.mo
crayon-syntax-highlighter-ja.po
「Xserver」を使っているなら、ログイン→ファイルマネージャログインから、
ドメイン名/public_html/wp-content/languages/plugins/
のフォルダまで行こう。
pluginsフォルダにいくと、ファイルがいろいろ入っているので、その中から、先ほどの２つのファイルを見つけ、チェックをいれて「ファイルの削除」をクリックしよう。
すると、このように日本語表記されるようになります。
高速化
速度が気になるようでしたら、プラグインを使わず「highlight.js」を使うというのも、
1つの方法ですが、設定が少し大変です。
プラグインの「Crayon Syntax Highlighter」なら、特に設定をせずにすぐに使えるので、初めての方におすすめです。
「Crayon Syntax Highlighter」の高速化はとても簡単
この2つにチェックを付けるだけ！
ダッシュボードの設定→Crayonの設定画面にいき、「その他」の項目にある印の所のチェックをつけよう。
上は文字通り「必要なときだけ読み込む」というもので、
これにチェックを入れることで、プラグインを使っていないページの表示を高速化します。
下は英語ですが、スクリプトをフッターで読み込むというものです。
いわゆるレンダリングストップの回避です。（わからない場合は読み流してください）
まとめ
「Crayon Syntax Highlighter」の日本化・高速化する方法はもっといろいろあるけど、ここで紹介した方法が、初心者でも簡単に設定できるのでおすすめです。
ぜひ、試してみてね。
