WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【WhiteTiger】テーマへコードをきれいに表示するために「Prism.js」を入れてみた

公開日: 使い方など

言いたいことを忌憚なく・・なんて言いながら初めて使うテーマなので仕様が固まるまではしようがない(笑)ということでWordpressネタですがご勘弁ください。

WordPressにはもともとコード表示用のhtmlタグがボタンになっていて、それで囲めば表示されるんですけど、コピーしたときに段組みが崩れたり文字が化けたりして、コピペしたら不具合が出た!なんてことも多いですから、きちんと表示され、きちんとコピーができるようになる「Prism.js」などのシンタックスハイライター(要はコードを表示するための機能ね)は必須だと思います。

しかーーーし!!なかなかこれが実装されているテーマは少ない(需要がない)ので、プラグインで実装するか、私のように手動で導入するかのいずれかをしておくことをお勧めします。

それでは早速「Prism.js」を設定してみましょう!!

【WhiteTiger】テーマで「Prism.js」を使う方法

「Prism.js」の入手と設置

「Prism.js」は無料で機能の追加ができるスクリプトなので
[blogcard link=”https://prismjs.com/”]
から設定して入手することもできるのですが、手っ取り早く設定したいという方はこちらからダウンロードしてください(本記事もダウンロードした前提ですすめます)

ダウンロードしたらちゃちゃっと解凍しておいてください。

解凍した「Prismjs」というフォルダを有効化しているテーマフォルダの中へアップロードします
※この1行で??となっている方は不向きですので「Prism.js」で検索して出てくるプラグインを使いましょう

使っているテーマで「Prism.js」を使えるようにする

テーマの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タグのショートコード */
function oripre_shortcode( $atts, $content = null ) {
  $content = preg_replace('/\<p\>|\<\/p\>|\<br \/\>/', '', $content);
    return '<pre class="line-numbers"><code class="language-markup">' . $content . '</code></pre>';
}
add_shortcode( 'prismpre', 'oripre_shortcode' );

このコードは

  • 上半分が「Prism.js」が動作するようにしてちょーだい
  • 下半分がショートコードで囲んだところを「Prism.js」を使って表示してちょーだい

というものになります(設置の案内記事なので詳細は割愛します)

基本的にはこれで「Prism.js」を使ったコード表示ができるようになります。

コード挿入の方法と注意

使い方の基本はコードをエンコードして本文に書いたら下のショートコードで囲みます

[prismpre]
ここにコードを入れる
[/prismpre]

簡単ですね!クイックタグなどを使ってボタン化しておけばなお使いやすくなります。おすすめのクイックタグ作成プラグインは
[blogcard link=”https://www.momosiri.info/wppi/addquicktag/”]
です。

コードを表示するにあたって1つ注意点があります。

これはシンタックスハイライターに限らずどんな場合でも当てはまることですが、コード挿入する際には、プログラムやhtmlとして動作してしまうことがないようエンコードを行いましょう。やらないとコードの表示ではなく動作した結果が表示されてしまいますよ!!

エンコード?という方は
[blogcard link=”https://tech-unlimited.com/escape.html”]
を開き、左の窓にコードを入力して変換ボタンを押せば簡単にエンコードできます!

以上、【WhiteTiger】テーマへコードをきれいに表示するために「Prism.js」を入れてみたでした

WAFは便利でうっとおしい!?

ウェブサイトの改ざんを防止するために多くのサーバーで実装されているWAF(うぇぶあぷりけーしょんふぁいやーうぉーる)。Wordpressのような汎用のCMS(こんてんつまねーじめんとしすてむ)が多く使われるようになって導入されたものなのですが・・・何とも便利で使いにくい。

今回発生したのは本文内にエンコードしたPHPコードを入れて下書き保存したら・・いきなり403エラーが出て終了!!ブラウザの戻るボタンで戻ると前の下書き後に追加した部分はなしのつぶてになっていました(笑)。

あれ?何で?

当然同じサーバーにある親サイトの

[blogcard link=”https://www.momosiri.info/”]

では普通に使えたのに・・・でテストしてみたら・・・やっぱりだめでした。そういえばしばらくコードの紹介なんかしてなかったなーってオチです(笑)。

で、いろいろ調べたところ、どうやらWAFの仕業だったようです。このサイトが入っているカラフルボックスというサーバーには「ModSequrity」というWAFアプリケーションが入っていて、それをOFFにしたらきちんとコードの記述ができました。

いざという時の改ざん対策としてはすごい機能ですが、書き手からするとちょっと面倒な機能でもありますね。

とは言ってもサーバーの機能で、しかも無料で防衛してくれるんだから、今後はコードを記述するような記事を書くときは必ずOFFにしようと思います。

よくテーマ編集などで「何かがうまくいかなかったようです・・・」みたいな警告が出て更新できないときありますよね?これもほとんどがWAFのブロックによるものですから、もしもそんなケースに遭遇したらWAF機能を疑ってみてくださいな。

自分だけ「ModSequrity」をオフにできます

上のようにエラーが出そうな投稿時だけ「ModSequrity」をオフにすればいい話なんですけど、いちいち判断してもねぇ・・という方におすすめの方法です。

WordPressのインストールフォルダ内にある.htaccessファイルに以下のコードを入れれば、いつも接続する場所からのみ「ModSequrity」をオフにできます。
※この文章で??となった方はこの方法を利用するのはちょっとやめておいた方がいいと思います

SetEnvIfNoCase Remote_Addr ^208.113.183.103$ MODSEC_ENABLE=Off

※IPアドレスは自身のものに書き換えてください

この情報は

[blogcard link=”https://www.askapache.com/htaccess/modsecurity-htaccess-tricks/#Disabling_mod_security_conditionally_IP”]

に掲載されていました(英語のページです)。なんでも載ってるインターネットですが、コピペでどうのっていうのは元に戻せる人のみ許される方法ですので気を付けて設定してみてくださいね。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】