WordPress

Prism-jsをWordPressに導入する手順（function.phpから導入）

Prism-jsをWordPressに導入する手順

Prism-jsをfunction.phpから導入する方法について紹介します。

ブログで使えるようになるまでの手順をできる限り具体的に説明できればと思います。

今回は、function.phpからPrism.jsを読み出す方法を紹介します。

参考までに、WordPressのテーマはAffinger5を使用しています。

Prism.jsとは

最初に、「Prism.jsとは何か」から説明します。

Prism.jsは、ソースコードを綺麗に表示してくれるシンタックスハイライターです。

Prism.js を使うと、このように表示することができます。

for num in range(5, 10):
    print(num)

Prism.jsがお勧めな理由

  • 安定動作【超重要】
    →コテコテのプラグイン導入不要のため、WordPress周辺ソフトアップデートの影響を受けにくい
  • 軽い【重要】
  • かなり多くの言語に対応している（TypeScript, Matlab, etc…)
  • 行番号を表示できる
  • 行のハイライトができる
  • 言語名を表示できる
  • コピーボタンも簡単に設置可能

導入までの流れ

大きく次の流れで解説していこうと思います。

  1. Prism.js のダウンロード
  2. Prism.js のサーバーへのアップロード
  3. WordPressでPrism.jsが読み込めているかを確認
  4. Prism.jsの投稿時の使い方
  5. Prism.jsの追加機能の使い方

１．Prism.jsのダウンロード

Prism.jsのダウンロード手順

まず、手順の１つ目として、Prism.jsとPrism.cssの２つのスクリプトを入手する必要があります。

これらのファイルは、Prism.jsのウェブサイトからダウンロードできます。

Prism-jsウェブサイト_このサイトからスクリプトをダウンロードします

Prism.jsウェブサイト

ダウンロードページを開くと、チェックボックスが沢山羅列されているのが分かると思います。

この選択肢の中から、自分の好みに合わせて使いたい言語、デザイン、追加機能にチェックを付けていきます。

Prism-jsのダウンロード箇所

ダウンロード箇所

好みのチェックを付け終わったら、ページ下部の「DOWNLOAD JS」「DOWNLOAD CSS」からPrism.js, Prism.cssをそれぞれダウンロードします。

 

Prism.jsダウンロード時のチェック項目の概要とおすすめ

チェックボックスが非常に多く、所見で戸惑うかもしれませんが、選択肢を一つずつ確認していけばそこまで難しくないと思います。

大きく次の4つの項目から構成されています。中でも、追加機能の部分は少し難しいかもしれません。

最初何を選べばいいかわからない！という方は、私のおすすめを4つ載せておきますので、こちらも参考まで。

この4つがあるだけでも十分見た目が良くなると思います。

  • Compression level ソースコードの圧縮レベル
    ダウンロードしたコードに手を加えないなら、Minified ver.で問題なさそうです。
  •  Themes テーマ
    好きなものを選びましょう
  •  Languages 言語
    扱いたい言語を選択します。
  •  Plugins プラグインの選択
    追加機能を選択します。特に次の機能はおすすめです。
    - Line Numbers：行番号の表示
    - Line Highlight：行をハイライト
    - Show Language：言語名の表示
    - Copy to Clipboard Button：コピーボタンの設置

チェック内容を保存しておく方法

チェック項目が割と多いため、新たに別の機能を追加しようとしたときに、過去に何をチェックしたか思い出せなくなると勿体ないと思います。

prism.jsとprism.cssをダウンロードしたとき（必要なチェックを入れ終わった時）のURLには、どこにチェックを入れたのかの情報が加えられたものになっています。

このため、ダウンロードした際のURLを保存しておけば、チェックボックスの状態を復元することができます。

この機能を利用し、 最初の一回で完璧にチェックし切るろうと思わずに、チェック状態を保存しながら、徐々に機能を試していくことをおすすめします。

後日更新した際には、ダウンロードした設定ファイル（Prism.js, Prism.css）を差し替えるだけで設定を変更できるのも、Prism.jsの魅力ですね。

このウェブサイトで使っているPrism.jsの設定もこちらから見られます。参考にしたい方はどうぞ。

 

２．Prism.js のサーバーへのアップロード

続いて2つ目の手順として、Prism.jsをサーバーへアップロードします。

WordPressから読み込むには、先程ダウンロードしたファイル（Prism.js, Prism.css）をWordPressのデータが入っているサーバーに置く必要があります。

Prism.jsは、サーバーのどこに置くべきか

サーバーにアップロードするといっても、Prism.jsをどこに入れればいいの？という方もいらっしゃるかもしれません。

結論から言うと、動かす上ではどこに置いても問題ないと思います。

後にWordPressに参照先を正しく指示できればOKです。

Prism-jsスクリプトを置く場所

Prism.jsを置く場所の例

今回は、WordPressのテーマフォルダ内に置いてみようと思います。

私はAffinger5を使っており、Affinger5の子テーマフォルダにprism_jsというフォルダを作成し、prism.js, prism.cssのファイルを入れました。

他のテーマの場合も同様に、テーマフォルダ直下におけば、以降の参照方法も参考にしながら進められると思います。

アップロードする時は、FTPソフトまたはサーバーのサービスによっては、ブラウザからアップロートできるファイルマネージャ等で行いましょう。

function.phpにPrism.jsを読み込むためのコードを追記する

次に、WordPressからPrism.jsがどこにあるかを伝えて、読み込んでもらうための記述を書きます。

<?php
// prism.js の読み込み
function add_files_prism_js() {
	wp_enqueue_script( 'gohey_includes', get_stylesheet_directory_uri() . '/prism_js/prism.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'add_files_prism_js' );

// prism.css の読み込み
 function add_files_prism_css() {
 	wp_enqueue_style( 'gohey_includes', get_stylesheet_directory_uri() . '/prism_js/prism.css', '', '' );
}
add_action( 'wp_enqueue_scripts', 'add_files_prism_css' );</code></pre>

※function.phpに記載するコードの注意点

テーマディレクトリのURLを取得する際は、親テーマか子テーマかで使う関数が異なります。ご注意を！

親テーマ：$parent_theme_uri = get_template_directory_uri();

子テーマ：$child_theme_uri  = get_stylesheet_directory_uri();

 

 

３．WordPressでPrism.jsが読み込めているかを確認

３−１：HTMLソースコードにPrism.js読み込みの記述が正しく追記されているかを確認

3番目の手順としては、自分のウェブサイトでPrism.jsの読み込みスクリプトが追記されているかを確認します。

今回は、google chromeのブラウザを使っている場合を想定して説明します。（他のブラウザでも自分のウェブサイトのHTMLソースコードを確認できさえすれば問題ありません）

最初の手順としては、自分のwebサイトにアクセスして、google chrome の右クリックソースを表示で、サイトのHTMLソースコードを開きます。

Prism-js取り組みのコードが正しく動作しているかをgoogle chromeの右クリック→View Page SourceからHTMLソースコードを閲覧し確認する

function.php追記後のHTMLソースコード

goheyブログで導入した際の例（HTML)

<link rel='stylesheet' id='gohey_includes-css'  href='https://gohey.net/wp-content/themes/affinger5-child/prism_js/prism.css?ver=5.6' type='text/css' media='all' />

<link rel='stylesheet' id='gohey_includes-css'  href='https://gohey.net/wp-content/themes/affinger5-child/prism_js/prism.css?ver=5.6' type='text/css' media='all' />

Prism等のキーワードで検査し、上のようなスクリプトが追加されていれば、第一ステップは達成です。

表示されていない場合は、add_action()や今回作成した、add_files_prism_js(), add_files_prism_css()辺りに記述の問題がないかを確認してみてください。

３−２：Prism.js, Prism.cssのファイルを参照できるか確認

続いて、上の読み込みの記述が追記されていることを確認できたら、次に追記された記述の中にあるprism.jsのファイルの場所を示すURLをクリック見てみましょう。

goheyブログで導入した際の例（ファイルのパス）

https://gohey.net/wp-content/themes/affinger5-child/prism_js/prism.css?ver=5.6

https://gohey.net/wp-content/themes/affinger5-child/prism_js/prism.css?ver=5.6

上のようなURLをクリックしたときに、ファイルが開ければ参照も正しくできていることが分かります。

エラーが表示される場合は、ファイルの場所を正しく示せているか、URLの先に正しくファイルを置けているかの確認が必要です。

ここまでできていれば、置いたファイルがブラウザから正しく読み込めていることが分かります。

後は、ブログ投稿時に適切にPrism.jsを読み出すことができれば完成です。

 

４．Prism.jsの投稿時の使い方

4番目の手順は、投稿時にどのようにPrism.jsを呼び出してくるかを説明します。

HTMLの記述方法

HTML上は、<pre>タグと<code>タグでソースコードを囲うことで、Prism.jsの表示を呼び出すことができます。

<pre><code class="language-言語名">ソースコードはここに記述</code></pre>

 

上のHTMLをPrism.jsで表示した結果

ソースコードはここに記述

上のソースコードを表示するとこのようになります。

 

５．Prism.jsの追加機能の使い方

続いて、追加機能の使い方を見ていきましょう。

今回は、使用したい方も多いと思われる2つの追加機能の使い方を紹介します。

行番号を表示する場合

行番号を表示するには、line-nimbersクラスを指定します。

<pre class="line-numbers"><code class="language-言語名">ここにソースコードを記述</code></pre>

 

行をハイライトする場合

行をハイライトするには、data-line="行番号" で行番号を指定します。

<pre class="line-numbers" data-line="ハイライトする行"><code class="language-言語名">ここにソースコードを記述 </code></pre>

 

-WordPress

© 2024 Gohey Blog