WordPressでソースコードを表示するPrism.jsを導入してみた

当サイトのブログはソースコードを記述するのがメインなので記事本文にソースコードが記述できる方法を探してみました。

プラグインでも良かったんですけど、なるべくプラグインを入れずに運用したいので評判の良さそうなprism.jsを導入することにしました。

prismファイルの作成

まずは下記のページにアクセスし、prismファイルを作成してダウンロードしてください。

prism ダウンロード

「テーマ」
好きなテーマにチェック

「圧縮タイプ」
minified verにチェック

「言語」
デフォルトで選択しているものにプラスするだけ。このブログではPHPのソースコードを記述するので「PHP」の言語にチェックを入れて追加しました。PHPの項目が3つあったので分からないから3つともチェック。

「プラグイン」
ここではコピーボタンだけ欲しかったのでコピーボタンにだけチェックを入れて追加。

あとはprism.jsとprism.cssをダウンロードしておわり。
※prism.jsの詳しい作成方法は詳しく書かれているブログを参照してください。

prismファイルを組み込む

ダウンロードした「prism.js」と「prism.css」をテーマディレクトリーにアップロードし、出力させたいheader.phpやfooter.phpなどのテーマファイルに記述します。

prism.cssのタグ

<link rel='stylesheet' id='prism-style-css' href='ドメイン/prism.css?ver=1.0' media='all' />

prism.jsのタグ

<script src="ドメイン/prism.js?ver=1.0" id="prism-script-js"></script>

このブログはデフォルトテーマを使用していて、header.phpがないので、functions.phpに追加してます。必ずバックアップを取ってから試してください！！

// prismファイル読み込み 
function enqueue_prism_scripts() {
    wp_enqueue_style('prism-style', get_template_directory_uri() . '/prism.css', array(), '1.0', 'all');
    wp_enqueue_script('prism-script', get_template_directory_uri() . '/prism.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_prism_scripts');

これでファイルが読み込まれるのでソースコードが記事に記述できます。

ソースコードを書いてみる

ソースコードは

<pre><code class="language-xxx">
ここにソースコードを記述
</code></pre>

このように「pre」と「code」で囲む必要がある。そして、ソースコードに応じて「code class」で言語を指定する。language-xxxのxxxにコードの言語を記述します。

htmlを記述するなら
language-markup

phpを記述するなら
language-php

jsを記述するなら
language-Javascript

cssを記述するなら
language-css

他は使う言語に合わせてください。

例えば

<p>
ここにPHPコード
</p>

この場合の言語はlanguage-phpで表示してます。

そして、注意すべきはhtmlの、「<」と「>」の記述は「&lt;」と「&gt;」で記述しなくてはいけない。

これでソースコードの記述方法は一通り完了。ただ、このままだとソースコードが折り返されない！調べたところ、デフォルトでは折り返し機能はないみたいなので参考ページからCSSで実装する方法を拝借。

Prism.js はデフォルトでは行を折り返さない設定となっています。
行を折り返すためには prism.css の設定を上書きします。
code[class*=’language-‘] と pre[class*=’language-‘] に対して設定しないと行番号がズレます。

code[class*='language-'],
pre[class*='language-'] {
  white-space: pre-wrap !important;
}

これで無事にソースコードを記事に記述できるようになりました！

僕は目が見えないので行番号や文字ハイライトなどはあっても識別できないのでコピーボタンだけ付けました。あとはソースコードに変な空白が出来たり半角全角が目視できないから心配ではあります･･･。ちゃんと、ここでコピーしたコードを貼り付けてテストはしてますが絶対ではないので･･･。

あとは、応用編です。

指定したカテゴリーで読み込む

ウェブ関連以外のカテゴリーにprismファイルが読み込まれるとサイト高速化の妨げになるかもしれないので、指定したカテゴリーにだけprismファイルを読み込ませる方法をチャット君に作ってもらったので備忘録。

// prismファイル読み込み
function enqueue_prism_scripts() {
    // 現在の投稿がカテゴリーID 777に属しているかどうかをチェック
    if (has_category(777)) {
        // カテゴリーID 777に属している場合のみスタイルシートとスクリプトを読み込む
        wp_enqueue_style('prism-style', get_template_directory_uri() . '/prism.css', array(), '1.0', 'all');
        wp_enqueue_script('prism-script', get_template_directory_uri() . '/prism.js', array(), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_prism_scripts');

このコードでは、has_category() 関数を使用して現在の投稿が指定したカテゴリーに属しているかどうかを確認し、カテゴリーID 777に属している場合にのみスタイルシートとスクリプトを読み込みます。
※カテゴリーIDは自身の環境に変更してください。

カスタムフィールドで管理

このブログはソースコードを記述することが多いと思うので、普段からprismファイルを読み込んでても大丈夫ですが、たまにしか記述しないのにずっとprismファイルが読み込まれてると高速化の妨げになるかも？

次の2パターンをチャット君に作ってもらったので備忘録。

1、通常は読み込ませず値が「オン」の時だけ読み込ませる。
2、通常は読み込んでいて値が「オフ」の時だけ読み込ませない。

まずは新規カスタムフィールドを作成する。
キー　「prism_file_get」

カスタムフィールドがオンの時だけ読み込む

カスタムフィールドの値が “オン” の場合にのみスタイルシートとスクリプトを読み込むようにしています。通常はファイルを読み込みません。

// prismファイル読み込み
function enqueue_prism_scripts() {
    // カスタムフィールドの値を取得
    $prism_file_get = get_post_meta(get_the_ID(), 'prism_file_get', true);
    
    // カスタムフィールドが "オン" の場合のみスクリプトを読み込む
    if ($prism_file_get === 'オン') {
        wp_enqueue_style('prism-style', get_template_directory_uri() . '/prism.css', array(), '1.0', 'all');
        wp_enqueue_script('prism-script', get_template_directory_uri() . '/prism.js', array(), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_prism_scripts');

カスタムフィールドがオフの時は読み込まない

以下のコードでは、カスタムフィールドの値が “オフ” の場合にはスタイルシートとスクリプトが読み込まれないようになります。通常は読み込まれた状態です。

// prismファイル読み込み
function enqueue_prism_scripts() {
    // カスタムフィールドの値を取得
    $prism_file_get = get_post_meta(get_the_ID(), 'prism_file_get', true);
    
    // カスタムフィールドが "オフ" の場合のみスクリプトを読み込まない
    if ($prism_file_get !== 'オフ') {
        wp_enqueue_style('prism-style', get_template_directory_uri() . '/prism.css', array(), '1.0', 'all');
        wp_enqueue_script('prism-script', get_template_directory_uri() . '/prism.js', array(), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_prism_scripts');

以上です。お疲れ様でした(^^)