WordPressにソースコードを埋め込むならCrayonがおすすめ!

WordPressでの記事作成中にソースコードを埋め込みたい!と思ったことはありませんか?

コードを記事内にそのまま貼りつけても、テーマによっては空白や改行がうまく反映されなかったり、単なる文字の羅列は味気なかったり。

プラグイン「Crayon Syntax Highlighter」を使うと、記事内のソースコードをそのままコピーすることができるので便利になります。

今回は私自身が実際に使ってみて、使い勝手の良かったプラグイン「Crayon Syntax Highlighter」でのソースコードの埋め込み方をご紹介していきます。

Crayon Syntax Highlighterの設定方法

ではまず、Crayon Syntax Highlighterをインストールしていきましょう。

ダッシュボート「プラグイン」→「新規追加」で、「Crayon Syntax Highlighter」をインストール&有効化します。

次に「設定」→「Crayon」をクリックして設定を行っていきましょう。

とここで、表記が英語になっているのがわかるかと思います。

英語のままだとわかりづらいので、日本語表記にしてしまいましょう!

Crayon Syntax Highlighterを日本語表記に変更する方法

FTPソフトを使っていきます。

自身のサイトのサーバーにFTPソフトでアクセスしましょう。

『publin_html』直下から『wp-content』→『languages』というフォルダをクリック。その中に『themes』と『plugins』という2つのフォルダがあります。

フォルダの場所
/自身のサイトURL/public_html/wp-content/languages/plugins

ここで『plugins』を選択すると、下の画像のようにファイルがたくさん出てくると思います。

この中から、以下2つの翻訳ファイルを削除します。

削除するファイル
crayon-syntax-highlighter-ja.mo
crayon-syntax-highlighter-ja.po

ファイルを削除したら、Crayon Syntax Highlighterの設定画面に戻り、表記が日本語になっているか確かめましょう。

下のように日本語表記になっていたら成功です。

Crayon Syntax Highlighterでコードを埋め込む方法

Crayon Syntax Highlighterの設定が終わると、記事投稿画面に上記のように「Crayon」ボタンが出現します(テキストエディタの場合)。

ビジュアルエディタの場合は、「<>」のアイコンがあります。

「Crayon」ボタンをクリックすると、コードを入力するポップアップが開きます(下記参照)。

コードの項目に、①埋め込みたいコードをコピペして、②「挿入」をクリックします。

記事内には下のようにソースコードが埋め込まれます。

Crayon Syntax Highlighterのカスタマイズ

読み込み速度を改善する方法

Crayon Syntax Highlighterは便利な反面、ページの読み込み速度が遅くなると言われています。

そこで、少しでも改善できるカスタマイズ方法をご紹介しますね。

ダッシュボード→「設定」→「Crayon」をクリックして、設定画面を開きます。

上から、テーマ、フォント、サイズ。。。と続きますが、下の方へいくと「その他」という項目が出てきます。

その中の「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」にチェックを入れておきましょう。

英語表記のままであれば、「Attempt to load Crayon’s CSS and JavaScript only when needed」にチェック。

最後に「変更を保存」ボタンをクリックします。

ツールバーを表示させない方法

Crayon Syntax Highlighterを設置すると、デフォルトのままではツールバーが表示されてちょっと邪魔だと感じます。

そこで、簡単に非表示にできる方法をご紹介します。

ダッシュボード→「設定」→「Crayon」をクリック。ツールバーの項目を「マウスオーバー時」から「表示しない」に変更します。


最後に「変更を保存」ボタンをクリックするのを忘れないようにしましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です