Simplicity2に標準で実装されている ソースコードのハイライト機能の highlight.js
この highlight.js を全ての記事で読み込まないようにした結果、とても幸せに気持ちになりました。
少し動作が軽くなったかも？
という程度の自己満足に近いですが、最近、WordPress（ワードプレス）が思いと感じるならば、試してみては、いかがでしょうか。
私がカスタマイズしたコードを紹介しますので、参考にしてみてください。
Simplicity2.1.6 以上が必要です。
Simplicityのバージョンは、2.1.6 以上で、highlight.js が標準で実装されています。
自作したhighlight.jsの呼び出し方法を公開
Simplicity2に標準実装されている highlight.js を <pre>～</pre> の入った記事のみ読み込ませる方法です。
- Simplicity2の親テーマの場合は
themes/simplicity2/functions.php - Simplicity2の子テーマの場合は
themes/simplicity2-child/functions.php
functions.php に下記のコードを挿入します。
if( !is_admin() ) {
function child_add_highlightjs() {
// 記事の本文を取得する
$the_content = get_the_content();
// 記事本文からパターン検索を実行
$is_highlight = preg_match( '!<pre[^>]*>[^<]+</pre>!i', $the_content );
if ( $is_highlight ) {
// highlightjs CSSの呼び出し
wp_enqueue_style( 'code-highlight-style', get_template_directory_uri() . '/highlight-js/styles/default.css' );
// highlightjs スクリプトの呼び出し
wp_enqueue_script( 'highlight-js', get_template_directory_uri() . '/highlight-js/highlight.min.js', array(), false, true );
$data =
'<script type="text/javascript">' . PHP_EOL
. '(function($){'
. '$(\'' . get_code_highlight_css_selector() . '\').each(function(i, block) {'
. 'hljs.highlightBlock(block);'
. '});'
. '})(jQuery);' . PHP_EOL
. '</script>' . PHP_EOL
;
wp_add_inline_script( 'highlight-js', $data, 'after' );
}
}
add_action( 'wp_print_scripts','child_add_highlightjs' );
}
functions.php のファイルは、FTPで転送することをオススメします。
管理画面からコードを挿入することも可能ですが、この方法で書き込んだ場合は、間違ったコードを挿入した場合、WordPress（ワードプレス）全体が動作しなくなります。
管理画面のhighlight.jsは無効にする
標準で実装されている管理画面の設定では無効にする必要があります。
管理画面の設定を有効にしていると、highlight.js が二重に読み込まれてしまうからです。
管理画面からの設定は、無効にする必要があります。
Simplicity2標準機能のhighlight.jsを無効にする方法
「外観」 → 「カスタマイズ」 → 「ソースコード」
↓
「ソースコードをハイライト表示」にチェックが入っていれば、チェックを外す
↓
「公開」ボタンを押す
動作確認
最後に動作確認します。
このようなHTMLを挿入して、ソースコードのハイライト表示ができれば、成功です。
<pre class="php">
<?php
echo 'Hello WordPress';
</pre>
まとめ
PHPの処理は少し増えることになりますので、サーバー側の負荷は少し増えると思いますが、ブラウザの負荷は減ると思います。
サーバー側の負荷を大きくするか、クライアント側の負荷を大きくするか、どちらが良いかは、好みではないでしょうか。
私は、WordPress（ワードプレス）に関しては、サーバー側の負荷を大きくして、クライアント側の負荷を減らす方式が好みです。
WordPress（ワードプレス）というよりも今回の処理に関してはという言い方が近いかもしれません。
実際に、ソースコードのハイライト機能を必要としていない記事でも、このJavaScriptが読み込まれるというのは、なんとなく嫌で、なるべく避けたいと思っています。
今回は、highlight.js をやってみました。
私が良く使う機能のひとつが、highlight.js です。
ですので、highlight.js のカスタマイズに着手してみましたが、他にも同様にカスタマイズ可能な個所があれば、やっていこうと思います。