先日、このブログでも導入してみたシンタックスハイライト用のJavaScriptライブラリ「highlight.js」の導入方法について説明しました。
このブログでもプログラムのコードを紹介する際、コードをキレイに表示するためにJavaScriptライブラリを使ってシンタックスハイライトさせています。 シンタッ…
yosiakatsuki.net
…とはいえ、コード紹介などが無いページでjs,cssファイルを読み込んでも無駄なので、必要なページのみhighlight.jsを読み込むようにカスタマイズしてみます
highlight.jsを無駄に読み込んでページ読み込みを遅くしたくない
よっひー(@yosiakatsuki)です。
シンタックスハイライトの必要がないページでもhighlight.jsを読み込んでしまうとページ表示速度が（ほんの少し）遅くなる
…かもしれない対策のために、必要なページのみhighlight.jsを読み込むようにカスタマイズしてみます！
必要なページのみhighlight.jsを読み込むコード
CDNにホストされているhighlight.jsを使うサンプルコードです（functions.phpなどに追記してください。）
function load_higlight_js() {
global $post;
if( false !== strpos( $post->post_content, '<pre><code' ) ){
echo '<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css">';
echo '<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>';
echo '<script>hljs.initHighlightingOnLoad();</script>';
}
}
add_action( 'wp_footer', 'load_higlight_js');
どんなことをやっているかというと…
投稿本文内に<pre><codeが存在する場合のみwp_footerでhighlight.jsの動作に必要なファイルの読み込み＆JavaScriptの処理を行うタグを出力しています。
highlight.jsの処理をさせるタグを<pre><code>以外にカスタマイズしている場合は適宜変更が必要なのでご注意下さい！
さいごに
今回はざっくりとした説明…というかメモに近いエントリーでございました。
僕はWordPressで「投稿内に〜がある時に〜する」みたいなときはよくif(false !== strpos($post->post_content,'<pre><code'))に似たコードで対応することが多いです。
Twitterの埋め込みコードがある時のみ必要なスクリプトを読み込む…なんて時も同じパターンですね
ではまた。