ブログ

プラグイン「Crayon Syntax Highlighter」の日本語化・高速化の簡単設定

<コンセプト>

WordPressで記事内にソースコードを表示したいと思い、「Crayon Syntax Highlighter」というプラグインを導入したけど、英語表記で使い方がわからない。
導入すると、ページの読み込み速度が遅くなるって聞いたけど、高速化する方法はあるの?

そこで今回は、「Crayon Syntax Highlighter」

  1. ・日本語化
  2. ・高速化 

にする、超簡単な方法を紹介します。

注意:今回の記事では、「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/
のフォルダまで行こう。

WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』

 

pluginsフォルダにいくと、ファイルがいろいろ入っているので、その中から、先ほどの2つのファイルを見つけ、チェックをいれて「ファイルの削除」をクリックしよう。

 

すると、このように日本語表記されるようになります。

高速化

チー

チーは走ると速いのよ

速度が気になるようでしたら、プラグインを使わず「highlight.js」を使うというのも、
1つの方法ですが、設定が少し大変です。
プラグインの「Crayon Syntax Highlighter」なら、特に設定をせずにすぐに使えるので、初めての方におすすめです。

テンパ

「highlight.js」が気になる人はネットで調べてね。

 

「Crayon Syntax Highlighter」の高速化はとても簡単
 この2つにチェックを付けるだけ!

ダッシュボードの設定→Crayonの設定画面にいき、「その他」の項目にある印の所のチェックをつけよう。

上は文字通り「必要なときだけ読み込む」というもので、
これにチェックを入れることで、プラグインを使っていないページの表示を高速化します。

下は英語ですが、スクリプトをフッターで読み込むというものです。
いわゆるレンダリングストップの回避です。(わからない場合は読み流してください)

テンパ

これだけなんて、簡単すぎたかな

まとめ

「Crayon Syntax Highlighter」の日本化・高速化する方法はもっといろいろあるけど、ここで紹介した方法が、初心者でも簡単に設定できるのでおすすめです。
ぜひ、試してみてね。

こんな記事もおすすめ