【WordPress】投稿や固定ページ内のコード表示をプラグインなしで変更する方法（prism.jsの使用方法）|Knowledge Base

公開日：2018(平成30)年7月29日／最終更新日： 2018(平成30)年7月31日

WordPressでプログラムの紹介などをするサイトでは、本文に「このコードをコピペしてね」的に挿入することが多いですよね？

通常はきれいに表示するためにシンタックスハイライト系プラグインを使ったりすることが多いのですが、経験上ではこの系統のプラグインは余分な装飾機能やオプション機能が備わっているため結構表示速度に影響があります。

そこでpreタグを使って表示してみると・・・

// 管理画面サイドバーメニュー非表示 
function remove_menus () {
    if (current_user_can('administrator')) { //管理者権限のユーザー
	remove_menu_page('edit-comments.php'); // コメント
	remove_menu_page('link-manager.php'); // リンク
    }
}
add_action('admin_menu', 'remove_menus');

こんな風に表示されます。いくら表示速度のためとはいえちょっと残念な感じですよね？そしてこの表示だとコピーしたときに改行がエスケープ（無効）になる場合があって、貼り付け先では改行がなしになる＝きちんと動作しなくなることがあるのでちょっと問題。

そこで何かいい方法はないかなぁと探していたら、とっても軽いハイライト表示機能を発見しました。名前は【Prism】といいます。百聞は一見に如かずということで、上のコードをprismを使って表示すると・・・

【WordPress】投稿や固定ページ内のコード表示をプラグインなしで変更する方法（prism.jsの使用方法）|Knowledge Base

行番号が表示できたり、マウスオーバーするとコピーボタンが登場したり・・・ちょっと格好よくないですか？？

今回はWordPressの投稿や固定ページの本文内にコードを挿入する際きれいに、かつ、コピーしたときの問題が発生しにくくする【Prism】の導入方法を紹介します。

実はこれを簡単に使用できるプラグインに

https://wordpress.org/plugins/ank-prism-for-wp/

というのがあるんですけど、今回は頑張ってプラグインなしでやってみました。

ちょっと脱線してプラグインを使うと何が違うのか？？というと

【Prism】をダウンロードする前の設定が管理画面からできる（後から変更できる）
【Prism】のファイルをアップロードする作業がない
【Prism】の読み込みをさせる（動作設定を行う）必要がない

つまりはここから説明することがすべてできちゃうってことなんですね。ここでプラグインを使おう！！と判断した方はそちらを、手作り魂のある方はこの先を読み進めてくださいね。

実際にやってみたら意外や意外、プラグイン導入よりも簡単かもと思ってしまう位でしたヨ。

【Prism】の入手

公式ページから入手します。英語のサイトなのでGoogle Chromeなど自動翻訳してくれるブラウザを使うといいでしょう。サイトへ行くと

という画面（この記事の公開時点）が出ますので、「ダウンロード」をクリックします。

設定画面が出てきますので、

テーマ・・・後でCSSの編集をすれば独自のものにできるので何でもいいと思います（そうでなければ選んでください）
言語・・・これもそのままでいいかと思います（理由は後述）
プラグイン・・・私は「行番号」と「クリップボードにコピーするボタン」のみ追加しました

※プラグインをたくさん入れると当然ファイルも動作も大きくなりますので最小限にしておくことをおすすめします

設定が終わったら画面の一番下にある「JSのダウンロード」「CSSのダウンロード」をそれぞれクリックしてパソコンのデスクトップなど適当な場所に保存しましょう。

※後で「あれを追加しておけばよかった・・・」となったら、もう一度このサイトで設定をしてダウンロードした後、次項で説明する方法でサーバーへ上書きアップロードすればいつでも変更可能です（変更した場合にはpreタグやcodeタグに追加した項目の属性を追加しなければならないこともありますから確定させた方がいいですが、これも後述する方法で一括変更できますので特に問題はないでしょう）。

以上で【Prism】の入手は完了です

【Prism】の設置

【Prism】を入手したら、FTPを使ってファイルをサーバー内に転送します。FTPが使える環境がない！という方は

WordPressのプラグイン「File Manager」を使ってサーバー内へファイルを転送する方法

を参考にプラグインを１つ使うとサーバー内にファイルを転送できます（使わないときはこのプラグインは停止しおいてOKです）。

手順は以下の通りです

サーバーに接続し、「WordPressのindex.phpのある場所」→「wp-content」→「themes」と開き、現状有効化されているテーマのフォルダを開きます。
そこに新しく「prismjs」というフォルダを作ります
作成した「prismjs」前項でダウンロードした「prism.js」「prism.css」を転送します
サイトの管理画面から「外観」→「テーマの編集」をクリックし、「functions.php」を開いて以下を追記します

/* Prism.jsの呼び出し */
add_action( 'wp_enqueue_scripts', 'my_prismjs' );
function my_prismjs() {
//Prism.jsのスタイルシートとJSの呼び出し
wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prismjs/prism.css' );
wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prismjs/prism.js');
}

これで設置は完了です。簡単簡単！！試しにコード表示のある記事を開いてみてください。・・・・あれ？？何も変わってない・・・その通りです。

【Prism】を使って表示するには独自のコードを使う必要があります。基本となるのは

<pre class="line-numbers"><code class="language-markup">
コードの内容
</code></pre>

です。つまりpreタグの入れ子にcodeタグを使って初めて動作してくれます。

※language-markupの部分は厳密に言えばいろいろ変更するのが望ましいんでしょうけど・・・これでほとんど事足りるので私はあえて（平たく言えば面倒なので）すべてこのコードにしてます。

それじゃあ今までのpreタグに適用できないじゃん！！まあまあ安心してください。そんなときには

本文などに書かれている文字やコードを置き換えるプラグイン「Search Regex」

を使って一気に書き換えてしまいましょう！

上の検索窓に「<pre>」と入れて「Search」をクリックすると下にずらっとpreタグの使われている記事が表示されます

そこで下の窓に「<pre class=”line-numbers”><code class=”language-markup”>」と入れて「Search&Replace」をクリックすると、置き換えられたイメージを含めた一覧がずらっと表示されます。

それでよければ「save」をクリックすると・・・一気に書き換えられます。

続けて</pre>に対しても同じように</code></pre>へ置き換えれば・・・修正完了です。

※必ず書き換えた内容を保存する前に確認してください（一度置き換えると元には戻せません）

※コード表示が少ない場合には手作業で修正した方がいいと思います

※より確実にpreタグの入った記事を修正したい場合は↓の「専用ショートコードを使う」を参照ください

どうでしたか？？案外簡単にできて私自身もびっくりしました。ちなみに当サイトのテーマは【Simplicity2】で子テーマを使用していますが、それ以外のテーマでも同じだと思われます（実際にやってないから不明）のでチャレンジしてみてくださいね

参考にさせていただいたサイト：

WordPressでシンタックスハイライトならPrism.jsが軽量＆多機能でベストチョイス

更に使いやすくするために

専用ショートコードを使いましょう

前述したようにPrismを使ってコード表示するには通常のpreタグとcodeタグを組み合わせた上で属性を含めないといけないので、表示を切り替えるには本文内のpreタグを置き換えていく必要があります。

まだサイトを作りたてでこれからpreタグでコード表示をしよう！数が少ないから手作業で修正しよう！という場合にはいいのですが、多数ある場合にはいったいどれが？？になってしまうと思います。

そこで「Search Regex」プラグインを使った置き換え方法を紹介したのですが、一気にすべてのpreタグを置き換えて終了！！という処理をするならいいものの、検出された結果から１つ１つ修正しようとすると途中でやめることができません（同じpreタグを使うので修正前のものと修正後のものがずらっと検出されてしまう）。

これを解消するためにできる方法は・・・オリジナルのショートコードを使うのです。

テーマのfunctions.phpへ以下のコードを追加してオリジナルショートコードを追加します

/* Prismを使ったpreタグのショートコード */
function oripre_shortcode( $atts, $content = null ) {
$content = preg_replace('/\<p\>|\<\/p\>|\
/', '', $content);
return '</p\>
<pre class="line-numbers"><code class="language-markup">' . $content . '</code></pre>
';
}

add_shortcode( 'prismpre', 'oripre_shortcode' );

このコードは

[prismpre]から[/prismpre]

で囲まれた部分はPrismのコード表示機能を使って表示してくださいというものです。

これに置き換えて行けば、「Search Regex」でpreタグの入っている記事を検出して１つ１つ確認しながら修正ができ、かつ、再検索しても修正済の記事が出てこないようになります。

これでより確実にpreタグの置き換え作業ができますね。

※紹介しているコードではショートコードで囲んだ部分に２重改行がある場合（エディタで見ると空白行がある場合）、空白を詰めて表示するようにしています。

また、一旦このショートコードに変換しておいて、もう一度このショートコードを変換して元のタグに戻せば最終的にショートコードを使わないようにする・・・なんてこともできます（ちょっと面倒ですからそのままショートコードを使った方がいいでしょう）。

クイックタグを使ってコードをボタン化しましょう

通常のpreタグなら投稿編集画面に最初からボタンがありますが、今回紹介するコードはちょっと違いますし、何より長いので毎回どこかからコピーして・・・というのも大変ですよね？

そんなときに役立つのが投稿編集画面に独自のボタンを設置する方法。これをクイックタグといいます。今回の件と同様にfunctions.phpへ追記して表示する方法もあるのですが、クイックタグはとても便利ですのでプラグインを使いましょう。おすすめは

定型タグや定型文をボタン１つで挿入できるプラグイン「AddQuicktag」

です。このプラグインはボタンをいくつも追加できるほか、カスタム投稿タイプを使っているサイトで作成したクイックタグを表示するかしないかが選べ、初期状態で設定されているボタンを非表示にすることもできる便利なプラグインです。今回のようにpre、codeタグが不要になれば非表示にすることができます。

設定等は上の紹介記事を見てくださいね。

デザインを変更する

もしも設置してみてデザインが気に入らなかったら、もう一度【Prism】のサイトへ行き、テーマを選択し直したうえで「CSSのダウンロード」をしてください。その後サーバー内の「prism.css」と入れ替えれば簡単に着せ替えすることができます。

また、そのテーマの一部だけ変えたい時には通常のデザイン変更と同じくデベロッパーツールで調整した後テーマのCSSへ追記すれば自由に変更することができます（このサイトの場合もCSSで調整しています）。

キャッシュをクリアしても反映されない（後述）場合は追記したCSSの末尾に「!important」を付けて最優先に適用されるようにしてみてください

例）color:#000000!important;

コードが表示されず実行されてしまうときは

これは今回のprismに限ったことではありません。WordPressでは本文内にhtmlだと判断できる文がある場合には実行結果を表示しようとします。それを回避しないとコードではなく結果そのものが表示されてしまいます。

つまりこれを回避するためには・・・・自動で実行されない形にすることが大事です。

回避するために「文字実体参照」というのを使います。文字実体参照一覧で詳しく紹介されています。

また、貼り付けて変換するだけでコードの中で文字実体参照にした方がいい部分を自動的に変えてくれるTECH-UNLIMITEDというツールがありますからそちらを使ってもいいかと思います（私はこちらを使っています）。

※１つ注意事項として、このコードを自身で使う場合、投稿編集画面でコピーすると当然文字実体参照のままになってしまい、動作してくれません。そんなときには一度フロントエンド（「表示」をクリック）を表示してそのコードをコピーすればいいでしょう。

最後に・・・つまづきそうなところなど

多分【Prism】に関してググるといろいろな記事が出てきて、分かりやすそうなサイトのここを使って、別のサイトのここを使って・・・なんてことをされるかもしれません。そんなとき躓くのがファイルの転送場所とファイルの読み込み先の不一致です。

今回紹介した方法ではテーマフォルダの中に「prismjs」というフォルダを作って２つのファイルを転送するように紹介しましたが、このフォルダに対してfunctions.phpで「prismjs」の中を読みなさいとしているので、このどちらかを変えれば当然読み込まれなくなります。複数のサイトから情報を得て設定する場合にはここでまず躓きますから気を付けてくださいね。

例えばテーマファイルの中に存在する「js」フォルダへ「prism.js」を、「css」フォルダへ「prism.css」を転送したら、functions.phpへ追記する内容は先ほど紹介した

/* Prism.jsの呼び出し */
add_action( 'wp_enqueue_scripts', 'my_prismjs' );
function my_prismjs() {
//Prism.jsのスタイルシートとJSの呼び出し
wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prismjs/prism.css' );
wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prismjs/prism.js');
}

ではなく、

/* Prism.jsの呼び出し */
add_action( 'wp_enqueue_scripts', 'my_prismjs' );
function my_prismjs() {
//Prism.jsのスタイルシートとJSの呼び出し
wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/css/prismjs/prism.css' );
wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/js/prismjs/prism.js');
}

となります。どこが違うのかは、よーーーく見てみてくださいね。

これさえわかれば適用されなくなることはありません。

また、きちんと適用したのに一向に表示が変わらない・・・ということがあります。原因としては