閉じる

WordPressで特定のページのみCSS・JSを読み込む方法：効率的な高速化テクニック

広告

WordPressのパフォーマンスを最大限に引き出すためには、不要なリソースの読み込みを最小限に抑えることが不可欠です。

特にCSSやJavaScriptファイルは、サイト全体で一律に読み込まれる設定になっていることが多く、これがページ速度低下の大きな原因となります。

本記事では、特定のページや投稿タイプでのみ必要なアセットを読み込むための実践的なテクニックを紹介します。

サイト高速化とCore Web Vitalsの改善を目指す開発者にとって、リソースの最適化は避けて通れない課題です。

目次 [ close ]
  1. なぜ特定のページだけで読み込む必要があるのか
  2. wp_enqueue_scripts アクションフックの活用
    1. 条件分岐タグによる制御の基本
  3. 特定の固定ページでのみ読み込む実装例
  4. カスタム投稿タイプに応じて読み込み分ける方法
  5. プラグインが自動で読み込む不要なファイルを削除する
  6. ブロックエディタ時代のアセット最適化
  7. まとめ

なぜ特定のページだけで読み込む必要があるのか

多くのWordPressプラグインやテーマは、利便性を優先してすべてのページでスクリプトを読み込む傾向にあります。

しかし、お問い合わせフォーム専用のスクリプトをトップページで読み込む必要はありません。

不必要なファイルの読み込みを排除することで、ブラウザのレンダリングブロックを回避し、LCPやCLSといった重要指標のスコアを改善できます。

2026年現在の検索エンジンは、ページの表示速度だけでなく、実際にユーザーが操作可能になるまでの時間を厳格に評価しています。

適切な条件分岐を行うことで、サーバーの転送量を削減し、ユーザーにストレスのないブラウジング体験を提供することが可能です。

wp_enqueue_scripts アクションフックの活用

WordPressでCSSやJSを読み込む際は、wp_enqueue_scriptsというアクションフックを使用するのが標準的なルールです。

functions.phpに直接リンクを記述するのではなく、このフックを経由することで、ファイルの重複読み込みを防ぎ、依存関係を管理できます。

基本的な構造は、関数内で条件分岐を行い、特定の条件に合致した場合のみwp_enqueue_styleやwp_enqueue_scriptを実行する流れになります。

条件分岐タグによる制御の基本

WordPressには、現在のページがどのような種類かを判別するための「条件分岐タグ」が豊富に用意されています。

以下の表は、よく使用される条件分岐タグをまとめたものです。

タグ名用途
is_front_page()サイトのフロントページを表示している場合に真となります。
is_single()個別の投稿ページを表示している場合に真となります。
is_page()固定ページを表示している場合に真となります。
is_category()カテゴリーアーカイブを表示している場合に真となります。

特定の固定ページでのみ読み込む実装例

例えば、IDが「10」の固定ページでのみ、特定のCSSとJavaScriptを読み込みたい場合を想定します。

この場合、is_page()関数にページIDやスラッグを引数として渡すことで、ターゲットを絞り込むことができます。

PHP
/**
 * 特定の固定ページでのみアセットを読み込む
 */
function my_custom_assets() {
    // ページIDが10、またはスラッグが 'contact' の場合のみ実行
    if ( is_page(10) || is_page('contact') ) {
        // CSSの読み込み
        wp_enqueue_style( 'contact-style', get_template_directory_uri() . '/css/contact.css', array(), '1.0.0' );
        // JavaScriptの読み込み（依存関係にjQueryを指定し、フッターで読み込む）
        wp_enqueue_script( 'contact-script', get_template_directory_uri() . '/js/contact.js', array('jquery'), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_assets' );

このコードをテーマのfunctions.phpに記述することで、指定したページ以外ではこれらのファイルはロードされなくなります。

実行結果として、他のページ（トップページや通常の投稿）のソースコードを確認しても、contact.cssやcontact.jsのリンクが含まれないことが確認できます。

実行結果
<!-- ID 10のページでの出力結果 -->
<link rel='stylesheet' id='contact-style-css' href='https://example.com/wp-content/themes/mytheme/css/contact.css?ver=1.0.0' media='all' />
<script src='https://example.com/wp-content/themes/mytheme/js/contact.js?ver=1.0.0' id='contact-script-js'></script>

<!-- その他のページでの出力結果 -->
（上記のタグは出力されません）

カスタム投稿タイプに応じて読み込み分ける方法

ニュースやお知らせ、制作実績などのカスタム投稿タイプを使用している場合、その投稿タイプ専用のデザインや機能が必要になることがあります。

is_singular('投稿タイプ名')を使用することで、特定のカスタム投稿タイプに限定したリソース管理が可能になります。

PHP
/**
 * カスタム投稿タイプ 'portfolio' の詳細ページでのみ読み込む
 */
function my_portfolio_assets() {
    if ( is_singular('portfolio') ) {
        wp_enqueue_style( 'portfolio-css', get_template_directory_uri() . '/css/portfolio.css' );
        wp_enqueue_script( 'portfolio-js', get_template_directory_uri() . '/js/portfolio.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'my_portfolio_assets' );

このように投稿タイプごとに最適化することで、サイト全体のトータルページサイズを大幅に削減できます。

また、テンプレートファイル名で条件分岐を行いたい場合は、is_page_template('templates/custom-template.php')といった指定方法も有効です。

プラグインが自動で読み込む不要なファイルを削除する

自作のコードだけでなく、導入しているプラグインが強制的に読み込むファイルを制御することも高速化には欠かせません。

例えば、人気のあるプラグインが全ページで読み込んでいるスタイルを、特定のページ以外で解除するにはwp_dequeue_styleを使用します。

PHP
/**
 * 不要なプラグインアセットを特定のページ以外で解除する
 */
function remove_unused_plugin_assets() {
    // お問い合わせページ以外では Contact Form 7 のスタイルとスクリプトを読み込まない
    if ( ! is_page('contact') ) {
        wp_dequeue_style( 'contact-form-7' );
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_script( 'google-recaptcha' );
    }
}
// 優先度を高く設定して、プラグインの読み込み後に実行させる
add_action( 'wp_enqueue_scripts', 'remove_unused_plugin_assets', 100 );

この手法は、PageSpeed Insightsで指摘される「使用していない CSS の削減」に対する直接的な解決策となります。

既存のプラグインの影響範囲を限定することで、複雑なサイトでも高いパフォーマンスを維持できます。

ブロックエディタ時代のアセット最適化

2026年現在のWordPress開発では、フルサイト編集（FSE）やブロックベースの構築が主流となっています。

WordPressのコア機能には、各ページで使用されているブロックに必要なCSSのみを自動的に読み込む設定があります。

以下のコードをテーマのサポート設定に追加するだけで、劇的な改善が見込める場合があります。

PHP
/**
 * ページ内のブロックに必要なCSSのみを読み込む設定を有効化
 */
add_filter( 'should_load_separate_core_block_assets', '__return_true' );

これにより、ページで使用されていない標準ブロック（引用、ギャラリー、ボタンなど）のスタイルが読み込まれなくなります。

独自のカスタムブロックを作成している場合も、register_block_typeのstyle属性やscript属性を適切に指定することで、この自動最適化の恩恵を受けられます。

まとめ

WordPressで特定のページのみCSSやJavaScriptを読み込む方法は、サイト高速化における最も基本的かつ強力なテクニックの一つです。

wp_enqueue_scriptsと条件分岐タグを組み合わせることで、必要な場所で必要な分だけのリソースを提供できます。

また、自作のコードを制御するだけでなく、wp_dequeue_styleを活用してプラグインによる不要な読み込みを排除することも忘れてはなりません。

徹底したリソース管理は、SEOの向上だけでなく、モバイルユーザーへの配慮としても極めて重要です。

まずは現在運営しているサイトをPageSpeed Insightsで分析し、無駄なファイルが読み込まれていないかチェックすることから始めてみましょう。

URLをコピーしました！