PRISM.JS＋カスタムフィールド

Prism.jsでシンタックス・ハイライト

2020年4月、WordPressで特定のページのみPrism.jsによりシンタックス・ハイライトしました。

Prism.jsは、軽量なシンタックス・ハイライトです。しかし、コードを掲載しないブログページもたくさんあり、すべてのページにPrism.jsを組み込むのは無駄です。そこで、Wordpressのカスタムフィールドという機能を利用して特定のページのみに限定して組み込みました。

WordPressのカスタムフィールド

WordPressは、記事のタイトルや本文以外に別の情報を追加するカスタムフィールドという機能があります。
この機能を利用して、Prism.jsによるシンタックス・ハイライトを使用するページにマークを付けます。

WordPressの管理画面からブログ投稿ページを開きます。下の方にカスタムフィールドというブロックがあります。

カスタムフィールドの登録

pre_codeというカスタムフィールドを登録します。
[新規追加]を押して名前に「pre_code」、値に「Prism」と入力して、[カスタムフィールドを追加]を押します。
次回以降は、「－選択－」を押すと登録済みのカスタムフィールドを選べます。

限定ページにPrism.jsを組み込む

WordPress 素晴らしいシンタックス・ハイライト Prism.js

前回は、テーマのための関数（functions.php）ですべてのページにPrism.jsを組み込みました。今回は、カスタムフィールドpre_codeのあるページのみにPrism.jsを組み込みます。

<?php
function my_enqueue_scripts() {
    theme_enqueue_styles();
    $pre_code = get_post_meta( get_queried_object_id(), 'pre_code', true);
    if ( $pre_code == 'Prism' ) {
        prism_enqueue_scripts();    /* Prism */
    }

/*=======================================================
 *   子テーマ    Style.css
 *=======================================================*/
function theme_enqueue_styles() {
  $theme_uri = get_template_directory_uri();
  $style_uri = get_stylesheet_directory_uri();
  wp_enqueue_style(
        'parent-style', $theme_uri . '/style.css' 
  );
  wp_enqueue_style( 
        'child-style',  $style_uri . '/style.css', 
        array('parent-style')
  );
}
/*=======================================================
 *   Prism.js   (prism.css + prism.js)
 *=======================================================*/
function prism_enqueue_scripts() {
  $style_url = get_stylesheet_directory_uri();
  wp_enqueue_style( 
         'prism-css', $style_url . '/css/prism.css'
  );
  wp_enqueue_script( 
         'prism-js' , $style_url . '/js/prism.js', 
                      array('jquery'), false, true 
  );
}

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
?>

Prism.jsを設定する関数prism_enqueue_scripts()をカスタムフィールドpre_codeのあるページのみに限定して呼び出します。

関数get_post_meta()で’pre_code’の値を取得して、値’Prism’ならPrism.jsを組み込みます。

get_post_meta( $post_id, $key, $single );

このような仕組みにすると、カスタムフィールドpre_codeが別の値の場合に他のシンタックス・ハイライトを組み込むことも簡単にできますね。

ツイート