以前、WordPressでソースコードを表示させるプラグインの紹介で、【Crayon Syntax Highlighter】の記事を書きました。
このブログのある記事を書いている時にソースコードを載せる場面があり、まあ普通にテキストで書いても良かったのですが、どうせならカッコ良く載せたいな～とネットで表示させる方法を探していたら有りました！ それが【Crayon Syntax […]
でも、このCrayon Syntax Highlighterは機能が豊富という反面、サイト表示が重くなるという話しが出ていますので、今回は別のソースコードを表示させるプラグインWP Code Highlight.jsを紹介します。
WP Code Highlight.jsとは？
WP Code Highlight.jsとは、Crayon Syntax Highlighterと同様にWordPressの記事にプログラムやソースコードを表示させるプラグインです。
外部サービスを使って表示させることもできますが、外部に頼るとサービス終了になったら使うことができなくなります。
やはりここはプラグインに頼ることにしましょう。
WP Code Highlight.jsのメリットとデメリット
メリット
それでは、WP Code Highlight.jsを使うメリットを見てみましょう。
- 外部サービスに頼らずにソースコードを表示させることができる
- Crayon Syntax Highlighterより断然軽い
- 操作が簡単
- 豊富なデザイン
- 表示がシンプル
一番のメリットは、動作が軽いことでしょう。
いくら便利なプラグインとは言っても、Crayon Syntax Highlighterのようにサイトの表示速度が低下してしまっては、訪問者の離脱率が上がってしまう可能性があります。
なので、シンプルな表示でも良いから動作の軽いプラグインを使いたい人はWP Code Highlight.jsを利用しましょう。
もちろん、機能的・見た目的にはCrayon Syntax Highlighterの方が上手なので、表示速度に影響しないサイトの場合や、見た目にこだわる人はCrayon Syntax Highlighterを使ってみてください。
このブログのある記事を書いている時にソースコードを載せる場面があり、まあ普通にテキストで書いても良かったのですが、どうせならカッコ良く載せたいな～とネットで表示させる方法を探していたら有りました！ それが【Crayon Syntax […]
デメリット
WP Code Highlight.jsにはメリットもありますが、やはりデメリットもあります。
- 動作が軽いとはいえ、やはりプラグインを増やす以上、サイト表示速度には影響はある
- 表示がシンプル過ぎる（行数などが表示されない）
個人的には行数表示などの機能がないのは大きなデメリットですね。
やはり見た目と機能重視のプラグインではCrayon Syntax Highlighterの方が断然上なので、ちょっと迷うところですが、やはり動作の軽い方がユーザビリティが良いですよね。
WP Code Highlight.jsをインストール
プラグインの新規追加から【WP Code Highlight.js】をインストールして有効化します。
プラグインの追加方法はこちらを参考にしてください。
タケ坊 今回はWordPressの基本の1つ、プラグインのインストール方法について話しましょうか。 柚子 そーだね！ところで、そもそもプラグインが分からないって人はいないかな？ タケ坊 […]
または、下のWordPress公式サイトからダウンロードしてインストールしてください。
WP Code Highlight.jsの設定
メニューの設定⇒WP Code Highlight.jsをクリックします。
CDNの設定を選択します。
CDN（コンテンツデリバリーネットワーク）の詳しい説明は長くなるので省きますが、簡単に言えば画像や動画などの大容量デジタルコンテンツをWEB上に大量配信するためのネットワークのことです。
ここは、
Public CDN:cdnjs(highlightjs.org recommend)
を選択しましょう。
※１ 配色サンプルサイトの赤枠部分のStylesでソースコードのデザインを選べるので、デモ画面を見ながらお好みで選択してください。
WP Code Highlight.jsの使い方
それでは実際にWP Code Highlight.jsの使い方を見ていきます。
使い方は２通りあって、お好みの方法で使用してください。
使い方① タグで表示させる
表示させたいソースコードを下記のタグで囲う方法です。
<pre><code>ソースコード</code></pre>
例）PHPコード
テキストエディターで、このPHPコードの前後に赤文字のタグを追記します。
[aside type=”boader”]<pre><code>// Create the custom image attachments used as post thumbnails for pages.
‘attachments’ => array(
‘image-espresso’ => array(
‘post_title’ => _x( ‘Espresso’, ‘Theme starter content’, ‘twentyseventeen’ ),
‘file’ => ‘assets/images/espresso.jpg’, // URL relative to the template directory.
),
‘image-sandwich’ => array(
‘post_title’ => _x( ‘Sandwich’, ‘Theme starter content’, ‘twentyseventeen’ ),
‘file’ => ‘assets/images/sandwich.jpg’,
),
‘image-coffee’ => array(
‘post_title’ => _x( ‘Coffee’, ‘Theme starter content’, ‘twentyseventeen’ ),
‘file’ => ‘assets/images/coffee.jpg’,
</code></pre>[/aside]
WEBではこんな感じで表示されたのが、
このように表示されます。
行間が少し詰まった感じに表示されました。ソースコードの行数が多い時はこちらが良いかもですね。
使い方② ショートコードで表示させる
次はショートコードで表示させる方法です。
先ほどの設定で、こちらにチェックを入れていれば、[code]ソースコード[/code]で囲んであげれば表示されます。
しかし、なぜか表示が崩れてしまいました。
調べてみると、どうやらショートコードで表示させるには、「HTML表示文字変換」をしないとダメらしい。
一応こちらのサイト⇒で文字変換してみます。
でもやっぱり表示が崩れてしまいました。
言語を指定する場合
ちなみに言語を指定する場合は、例えばHTMLを指定する場合
<pre><code class=”html”>HTMLコード</code></pre>
CSSを指定する場合
<pre><code class=”css”>CSSコード</code></pre>
と記述しますが、プラグインの方で自動判別してくれるので必要ないでしょう。
WordPressプラグイン「WP Code Highlight.js」のまとめ
ブログサイトにソースコードを表示させるWordPressプラグイン「WP Code Highlight.js」のインストールから使い方までを解説しました。
このプラグインは速度重視のシンプルなものですが、必要な機能は備えているので困ることはないでしょう。