【WordPress高速化】HCBを必要な記事だけで読み込む

はじめに

「WordPress高速化」シリーズの第7回です。今回は、コードブロック用のプラグインHighlighting Code Block（以下「HCB」）のCSSとJavaScriptを、コードブロックがある記事だけで読み込むようにします。

HCBは、コードブロックがない記事やトップページでも、CSSとJavaScriptを読み込みます。当サイトでは、Cocoonを使っていたころに[HCB]プラグイン未使用ページではリソースを読み込ませない方法（以下「Cocoon時代の記事」）で、これを外す設定をしていました。SWELLに移行したときに、そのコードをブロックエディター向けに書き換えて使っていました。ところが、公開中のページを調べると、CSSは外れておらず、逆に、コードのある記事で必要なJavaScriptが外れていました。

この記事では、次の3つを解説します。

• HCBが、どのページで何を読み込んでいるか
• 外すコードが効かなかった2つの原因（ブロック名の間違いと、依存関係）
• コードブロックがある記事だけで読み込む、修正したコード

この記事のコードは、SWELLの子テーマの functions.php を使います。編集する前に、必ずバックアップを取ってください。HCBのバージョンは2.2.1、SWELLのバージョンは2.19で確認しています。

HCBが読み込んでいるファイル

HCBは、次の4つのファイルを読み込みます。HCBの設定で、色分けのCSSとJavaScript（Prism）を子テーマのファイルに変えている場合の例です。

ハンドル名は、WordPressがファイルを管理するための名前です。外すときは、この名前を指定します。HCBの設定で色分けを変えていない場合、hcb-coloring はなく、hcb-style に色分けを含んだCSSが読み込まれます。

合わせて約27KB（圧縮前は約68KB）です。特に大きいのは、色分けをするPrismのJavaScriptです。当サイトの記事399本のうち、コードブロックがない記事は107本（約27%）ありました。Excel関数の記事など、コードを載せない記事では、この4つは使われません。

以前のコードが効かなかった2つの原因

当サイトの functions.php には、SWELLに移行したときに書き換えた、次のコードが入っていました。

function dequeue_hcb_resources() {
    if ( is_admin() || is_front_page() || is_home() ) {
        return;
    }
    if ( is_singular() ) {
        global $post;
        if ( isset( $post->post_content ) && ! has_block( 'loopphase/highlighting-code-block', $post->post_content ) ) {
            wp_dequeue_style( 'hcb-style' );
            wp_dequeue_script( 'hcb-script' );
        }
    } else {
        wp_dequeue_style( 'hcb-style' );
        wp_dequeue_script( 'hcb-script' );
    }
}
add_action( 'wp_enqueue_scripts', 'dequeue_hcb_resources', 9999 );

テスト用の環境（Local）にHCBを入れて、本番と同じ状態で確かめると、次のようになりました（○は読み込まれる、×は外れる）。

外したかったCSSは残り、コードのある記事で必要な hcb_script.js が外れています。原因は2つありました。

原因1：ブロック名が違う

has_block() に指定している loopphase/highlighting-code-block は、HCBのブロック名ではありません。HCBのブロック名は loos-hcb/code-block です。

存在しないブロック名を指定したので、has_block() はどの記事でも「コードブロックなし」と判定します。そのため、コードのある記事でも外す処理が動き、hcb_script.js が外れていました。当サイトでは、本番の記事でコードブロックのコピーボタンが表示されていないことも確認しました。

ブロック名は、ブロックエディターの右上の「︙」→「コードエディター」で確認できます。コードブロックは、次のように書かれています。

<!-- wp:loos-hcb/code-block {"langType":"php"} -->

原因2：依存関係があるCSSは、dequeueしても戻ってくる

色分けのCSS（hcb-coloring）は、「先に hcb-style を読み込む」という依存関係付きで登録されています。WordPressは、読み込むファイルが依存しているファイルを、自動で出力します。

そのため、hcb-style だけを外しても、hcb-coloring が残っていると、hcb-style も一緒に出力されます。hcb-coloring と hcb-prism は、もともと外す対象に入っていませんでした。

ブロック名だけを直して確かめると、コードのある記事の hcb_script.js は戻りましたが、コードがない記事のCSSは残ったままでした。外すときは、依存しているファイルも含めて、すべて外す必要があります。

HCBを必要な記事だけで読み込む方法

Step1：ハンドル名を確かめる

記事を開いてページのソースを表示し（Ctrl＋U）、hcb で検索します。次のような行が見つかります。

<link rel='stylesheet' id='hcb-style-css' href='…/highlighting-code-block/build/css/hcb.css?ver=2.2.1' media='all' />
<link rel='stylesheet' id='hcb-coloring-css' href='…/swell_child/hcb/prism.css?ver=2.2.1' media='all' />
<script id="hcb-prism-js" src="…/swell_child/hcb/prism.js?ver=2.2.1"></script>

id の末尾の -css・-js を除いた部分が、ハンドル名です。hcb-script（hcb_script.js）は、外れていない記事のソースで確認できます。

Step2：functions.phpにコードを追加する

以前のコードがある場合は、先に削除してから、子テーマの functions.php に次のコードを追加します。

// コードブロック（HCB）がないページでは、HCBのCSSとJavaScriptを読み込まない
add_action('wp_enqueue_scripts', function () {
	if (is_singular()) {
		$content = do_shortcode(do_blocks(get_post_field('post_content', get_queried_object_id())));
		if (str_contains($content, 'hcb_wrap')) { return; }
	}
	wp_dequeue_style('hcb-style');
	wp_dequeue_style('hcb-coloring');
	wp_dequeue_script('hcb-prism');
	wp_dequeue_script('hcb-script');
}, 9999);

• do_shortcode(do_blocks(…))：記事の本文を、表示されるときと同じHTMLに展開します。再利用ブロックやブログパーツの中のコードブロックも、展開すると本文に入ります
• str_contains($content, 'hcb_wrap')：HCBのコードブロックは、必ず <div class="hcb_wrap"> で囲まれます。これがあれば、何もせずに終わります
• 4つの wp_dequeue_…：依存関係で戻ってこないように、4つすべてを外します
• 記事・固定ページ以外（トップページ、カテゴリー一覧など）は、判定せずに外します。一覧には記事の抜粋しか出ないので、コードブロックは表示されません
• 優先度の 9999：HCBがファイルを登録した後（HCBの優先度は20）に外すためです

ブロック名で判定しないのは、has_block() が本文に直接書かれたブロックしか見ないからです。ブログパーツや再利用ブロックの中にコードブロックがあると、見落とします。また、hcb_wrap で判定すれば、クラシックエディターで書いた古い記事のコードブロックも見つけられます。

Step3：ページのソースで確認する

1. コードブロックがない記事を開き、ページのソースで hcb を検索する → hcb-style-css などが見つからない
2. コードブロックがある記事を開き、同じように検索する → 4つとも見つかる
3. コードブロックがある記事で、色分けとコピーボタンが表示されていることを確かめる

キャッシュ系のプラグインやSWELLのキャッシュを使っている場合は、キャッシュを削除してから確かめてください。

検証結果

Localで、HCB（2.2.1）と子テーマの色分けのファイルを本番と同じように設定し、7種類のページで確かめました。

この記事のコードでは、コードブロックがあるページだけで4つのファイルが読み込まれ、色分け・行番号・コピーボタンも正しく動きました。

注意点

• 本文以外にコードブロックを置いている場合：サイドバーのウィジェットなど、本文の外にコードブロックがあると、判定できずに外れます。その場合は、そのページを対象外にしてください
• clipboard.min.js は外さない：コードがない記事でも読み込まれていますが、これはSWELLの共有ボタンの「URLをコピー」でも使われています
• HCBの更新でハンドル名が変わることがある：HCBを更新したら、Step3の方法で、外れているかを確かめてください
• 追加CSSでコードブロックを装飾している場合：.hcb_wrap などのCSSは、追加CSSに書いてあればそのまま残ります。コードブロックがないページでは、使われないだけです

よくある質問・エラー対処

Q. wp_dequeue_style() を書いたのに、CSSが消えません

→ そのCSSに依存しているファイルが、読み込まれたままになっていないか確認してください。依存関係は、プラグインのソースの wp_enqueue_style() の3つ目の引数（[ 'hcb-style' ] など）でわかります。依存しているファイルも一緒に外すと消えます。

Q. コードブロックの色分けやコピーボタンが表示されなくなりました

→ コードブロックがある記事で、ファイルが外れています。以前のコード（ブロック名で判定するコード）が残っていないか確認してください。2つのコードが両方あると、以前のコードが外してしまいます。

Q. トップページにもコードブロックを表示しています

→ トップページを固定ページにしている場合は、is_singular() に当てはまるので、本文に hcb_wrap があれば読み込まれます。最新の投稿の一覧をトップページにしている場合は、外れます。

おわりに（まとめ）

この記事が、少しでも誰かのお役に立てれば幸いです。

関連記事

• 【WordPress高速化】X・Instagramの遅延読み込み：XとInstagramの埋め込みを、Intersection Observerで投稿に近づくまで読み込まない方法（シリーズ第8回）
  【WordPress高速化】h3まで入れた目次の高さを自動設定：h2とh3を分けて数え、目次の高さを記事ごとに自動で確保する方法（シリーズ第6回）
• 【WordPress高速化】目次の高さを見出しの数で自動設定：PHPで見出しを数えてCSS変数に渡し、目次の高さを記事ごとに自動で確保する方法（シリーズ第5回）
• 【WordPress高速化】AdSenseを枠ごとに遅延読み込み：Intersection Observerで、画面に近づいた広告枠だけを読み込む方法（シリーズ第4回）
• 【WordPress高速化】YouTube埋め込みを遅延読み込み：Intersection Observerの基本と、画面外の動画の読み込みを0KBにした方法（シリーズ第3回）
• 【WordPress高速化】SWELLのCLSをCSSで改善：広告枠などに高さを確保して、CLSを0.14から0.0008に下げた実例（シリーズ第2回）
• 【WordPress高速化】CLSの原因を検証ツールで探す方法：検証ツールで、ずれた場所を見つけて高さを測る方法（シリーズ第1回）
• [HCB]プラグイン未使用ページではリソースを読み込ませない方法：Cocoonを使っていたころに、カスタムフィールドでHCBのファイルを外していた方法

WordPressテーマ「SWELL（スウェル）」

￥17,600（税込）

シンプルで美しいデザイン＋高速化機能まで最初から全部入り
※1回買えば複数サイトで使い回しOK

公式サイトを見る ▶SWELLの特徴を確認 ▶

当サイトの記事で使用したVBAなどのサンプルをDLできます

この記事のサンプルはありません！

ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください！

サンプルのダウンロードはこちらから

【Excel VBA】記事内サンプルファイルダウンロードのページ 【Excel VBA】の記事内で使ったサンプルファイルを（Zipファイルで）ダウンロードできるようにしました。記事内では細かい部分の解説が不十分ですが、実際にファイルをダウ…