新WordPressテーマ「THE THOR(ザ・トール)」へ改装完了!
WP Code Highlight.js

WordPressでソースコードをシンプルに表示させるプラグイン【WP Code Highlight.js】

以前、WordPressでソースコードを表示させるプラグインの紹介で、【Crayon Syntax Highlighter】の記事を書きました。

柚子
柚子
rayon Syntax Highlighterの紹介記事はこちら!
関連記事

このブログのある記事を書いている時にソースコードを載せる場面があり、まあ普通にテキストで書いても良かったのですが、どうせならカッコ良く載せたいな~とネットで表示させる方法を探していたら有りました! それが【Crayon Syntax […]

でも、このCrayon Syntax Highlighterは機能が豊富という反面、サイト表示が重くなるという話しが出ていますので、今回は別のソースコードを表示させるプラグインWP Code Highlight.jsを紹介します。

タケ坊
タケ坊
シンプルかつ必要十分な機能のプラグインです。
柚子
柚子
それではWP Code Highlight.jsの紹介です!

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インストール

または、下のWordPress公式サイトからダウンロードしてインストールしてください。

【公式サイト】WordPress.org

WP Code Highlight.jsの設定

メニューの設定⇒WP Code Highlight.jsをクリックします。

WP Code Highlight.js設定

CDNの設定を選択します。

CDN(コンテンツデリバリーネットワーク)の詳しい説明は長くなるので省きますが、簡単に言えば画像や動画などの大容量デジタルコンテンツをWEB上に大量配信するためのネットワークのことです。

ここは、

Public CDN:cdnjs(highlightjs.org recommend)

を選択しましょう。

WP Code Highlight.js設定画面

※1 配色サンプルサイトの赤枠部分のStylesでソースコードのデザインを選べるので、デモ画面を見ながらお好みで選択してください。

WP Code Highlight.js配色設定サイト

柚子
柚子
これで設定は完了です。

WP Code Highlight.jsの使い方

それでは実際にWP Code Highlight.jsの使い方を見ていきます。

使い方は2通りあって、お好みの方法で使用してください。

使い方① タグで表示させる

表示させたいソースコードを下記のタグで囲う方法です。

<pre><code>ソースコード</code></pre>

例)PHPコード

テキストエディターで、このPHPコードの前後に赤文字のタグを追記します。

[aside type=”boader”]<pre><code>
// Create the custom image attachments used as post thumbnails for pages.
‘attachments’ =&gt; array(
‘image-espresso’ =&gt; array(
‘post_title’ =&gt; _x( ‘Espresso’, ‘Theme starter content’, ‘twentyseventeen’ ),
‘file’ =&gt; ‘assets/images/espresso.jpg’, // URL relative to the template directory.
),
‘image-sandwich’ =&gt; array(
‘post_title’ =&gt; _x( ‘Sandwich’, ‘Theme starter content’, ‘twentyseventeen’ ),
‘file’ =&gt; ‘assets/images/sandwich.jpg’,
),
‘image-coffee’ =&gt; array(
‘post_title’ =&gt; _x( ‘Coffee’, ‘Theme starter content’, ‘twentyseventeen’ ),
‘file’ =&gt; ‘assets/images/coffee.jpg’,
</code></pre>[/aside]

WEBではこんな感じで表示されたのが、

PHPコード例

このように表示されます。

PHPコード例

行間が少し詰まった感じに表示されました。ソースコードの行数が多い時はこちらが良いかもですね。

使い方② ショートコードで表示させる

次はショートコードで表示させる方法です。

先ほどの設定で、こちらにチェックを入れていれば、[code]ソースコード[/code]で囲んであげれば表示されます。

WP Code Highlight.js設定チェック1

しかし、なぜか表示が崩れてしまいました。

調べてみると、どうやらショートコードで表示させるには、「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」のインストールから使い方までを解説しました。

このプラグインは速度重視のシンプルなものですが、必要な機能は備えているので困ることはないでしょう

タケ坊
タケ坊
個人的にはCrayon Syntax Highlighterの方が好みなんだけどなぁ
柚子
柚子
アンタの好みはどーでも良いから、ちゃんと訪問者の事を考えてサイト作成しなきゃダメ!
タケ坊
タケ坊
どーでも良いって酷くない?(泣)
WP Code Highlight.js
最新情報をチェックしよう!