![[HCB]コード無しなら CSSとjsを読み込まない](https://www.kurumico.com/wp-content/uploads/2023/03/hcb-set-01.jpg)
当サイトは、ソースコードを見やすく表示するために Highlighting Code Block（HCB）プラグインを使っています。ソースコードを表示していない記事では、CSSとJavaSctiptを読み込ませないように設定できたのでその方法を記録しておきます。
はじめに
以前の記事「Xserver Cocoon高速化とXPageSpeedの設定」の中で、XPageSpeed設定の[JavaScript最適化]設定をOFFにした経緯がありました。そのもとになったのが、Highlighting Code Block（HCB）が使用しているPrism.js を読み込む挙動でした。
これを何とかしたいと思ってやってみたことを書いていきます。
【この記事でわかることは】
・プラグインがデフォルトで書き込む CSS と JavaScript を使用しないページでは読み込まないようにする方法
※ 以降、Highlighting Code Block（HCB）を HCB と表記します。
プラグインを使わない方法を試してみた
プラグインを使わないで prism.css と prism.js を使う方法を最初に試してみました。
jsとcssの読み込みコードを貼るだけでなので簡単に表示させることができました。
でも、行数が多くて長いコードの場合、行番号やハイライトにズレが生じてしまったりするのでCSSの調整が必要です。また、今まで使ってきたHCBブロックから「カスタムHTML」に切り替えて次のように書き換えるという大変な作業をすることになるので断念しました。
プラグインを使わない場合は、行番号を付加する場合で言語がVBAなら次のように入力します。
<pre class="line-numbers"><code class="language-VBA">～1行目ソースコード～
～2行目のソースコード～
～3行目のソースコード～
</code></pre>※ <pre class=”プラグイン名”><code class=”language-言語名>のあとにコードを記載し、最後に</code></pre>を付けます。
プラグインを使わず prism.css と prism.js をロードする方法でも、ソースコードの表示を行っていない場合も含め全ページでリソースがロードされます。
使っているページだけにリソースをロードさせるには、ページごとに読み込むように設定をしないといけないこともわかりました。
ContactForm7 の例が参考になる
不要なページでは読み込まないように設定している Contact Form 7 を参考にしたいと思います。
設定しているコードは次のとおりです。CSS と JavaScript を「コンタクトフォーム」のページ番号39以外では読み込まない「!is_page(39)」ようにしています。
// コンタクトフォーム以外はCSSとjsを読み込まない
if( !is_page(39) ){
function de_wpcf7_styles() {
wp_dequeue_style( 'contact-form-7' );
}
add_action( 'wp_print_styles', 'de_wpcf7_styles', 100 );
function de_wpcf7_script() {
wp_deregister_script( 'google-recaptcha' );
wp_deregister_script( 'contact-form-7' );
}
add_action( 'wp_enqueue_scripts', 'de_wpcf7_script',100 );
}「!is_page(39)」の部分を変更すれば良さそうです。
HCBを使っているページの特定
HCBを使っているページを特定する方法をどうすればいいのかを検討しました。
- document.querySelector(‘dev.hcb_wrap’) でHCBブロックの使用を確認する方法
【結果】document.querySelector ではうまく動作しませんでした。
多分、実行するタイミングの問題だと思いますがこれはダメですね。 - 検討した条件分岐「in_category(‘カテゴリーID’) 」と「has_tag(‘タグID’)」
【結果】可能ですが、設定変更したり新たにタグを追加設定する必要があります。 - カスタムフィールドに「hcb」を追加設定して条件分岐する。
特定方法は「get_the_ID()」でページIDを取得して、カスタムフィールドは
「get_post_meta(get_the_ID(),’hcb’,true)」で「hcb」を取得して分岐します。
【結果】新たに設定する必要がありますが可能です。
【最終結果】3番目のカスタムフィールド「hcb」を新たに追加設定して条件分岐させる方法を採用することにしました。どうせ新たに設定するなら一番スッキリする方法にしました。
カスタムフィードを追加設定
「hcb」というカスタムフィードを追加設定した際の画像です。
全部の投稿に追加設定しました。「HCB」を使用している投稿では値にとりあえず「1」を入力しました。
functions.php にコードを設定
それでは、子テーマの functions.php にコードを記載設定します。
読み込む CSS と JavaScript のハンドル名
プラグインが読み込む JavaScript や CSS は、依存関係にある JavaScript や CSS も同時に読み込まれます。プラグインHCBが読み込む CSS と JavaScript のハンドル名は次のとおりでした。
CSS（hcb.css）= ‘hcb-style‘
JavaScript（hcb_script.js）= ‘hcb-script‘
JavaScript（prism.js）= ‘hcb-prism‘
functions.php に追加したコード
//HCB未使用の記事はデフォルトCSSとjsを読み込ませない
//カスタムフィールド「hcb」があっても空欄の場合は読み込まない設定
function hcb_deregister_styles() {
if(is_single()){
$pid = get_the_ID();
$hcb= get_post_meta($pid,'hcb',true);
if(empty($hcb)){
wp_deregister_style('hcb-style');
wp_deregister_script('hcb-script');
wp_deregister_script('hcb-prism');
}
}
}
add_action('wp_enqueue_scripts', 'hcb_deregister_styles', 100);4行目、is_single() 投稿ページだけ処理する設定
6行目、$hcb=get_post_meta($pid,’hcb’,true); で ‘hcb’ が未設定でも $hcb はempty
7行目、empty($hcb) → emptyなら実行、「1」なら実行しないという分岐
8～10行目、最初に wp_deregister でうまくいったのでそのまま使っています。
（wp_dequeue でもOKかもしれませんが）
動作確認
結果は、うまく動作できているようです。検証ツールを使って次のように確認しました。
HCBでコードを設置している投稿ページではきれいにシンタックスハイライトしています。
HCBでコードを設置している投稿ページで、わざと「hcb」カスタムフィールドの値を「空欄」にした場合はハイライトしませんし、リソースもロードされていないことを確認しました。
「hcb」カスタムフィールド自体を削除した場合もリソースがロードされないことが確認できました。
まとめ（おわりに）
HCBでコード表示しない投稿ページでは無駄なリソースの読み込みを抑えることができるようになったので良かったです。
コンタクトフォームの読み込み設定が参考になりました。
今回の事例を参考に今後は、プラグインがデフォルトで読み込んでしまうリソースをしっかり確認していくようにした方がよさそうですね。
以上、少しでも参考にしていただけたら幸いです。
★★★ ブログランキング参加中！ クリックしてね(^^)/ ★★★
過去記事のVBAサンプルファイルをダウンロードできます
この記事のサンプルはありません。記事内のコードをコピーしてご利用ください。
ダウンロードページへのトップリンクは下のカードクリックでジャンプできます。
よろしければご利用ください！
