WordPressでは、特定の固定ページでだけCSSやJavaScriptを読み込みたい場面があります。たとえば「キャンペーン系ページ」や「年次イベント系ページ」など、スラッグの一部に共通の文字列が含まれるページだけにファイルを読み込みたいことがあります。
この記事では、スラッグに文字列が「含まれる」「先頭が一致する」などの条件や、正規表現を使った判定方法を用いて、CSSやJSを読み込む方法を詳しく紹介します。
1. is_page() は完全一致にしか対応していない
WordPressでは、次のように is_page() を使ってCSSを読み込む方法がよく使われます：
<?php if ( is_page('special2024') ) : ?>
<link rel="stylesheet" href="/assets/css/style-special.css">
<?php endif; ?>この方法では special2024 というスラッグに完全一致するページにしか適用されません。
しかし special2025 や special-preview のようなページをまとめて扱うことはできません。
2. $post->post_name を使った柔軟な文字列判定
● スラッグに特定の文字列が「含まれている」場合
<?php
global $post;
if ( isset($post) && strpos($post->post_name, 'campaign') !== false ) :
?>
<link rel="stylesheet" href="/assets/css/style-campaign.css">
<script src="/assets/js/script-campaign.js"></script>
<?php endif; ?>✅ 読み込まれるスラッグの例
| スラッグ名 | 読み込まれる？ | 解説 |
|---|---|---|
| campaign2024 | 〇 | 含まれている |
| new-campaign | 〇 | 含まれている |
| test-campaign-preview | 〇 | 含まれている |
| mypage | ✕ | 含まれていない |
● スラッグが「特定文字列で始まる」場合
<?php
global $post;
if ( isset($post) && strpos($post->post_name, 'event') === 0 ) :
?>
<link rel="stylesheet" href="/assets/css/style-event.css">
<?php endif; ?>✅ 読み込まれるスラッグの例
| スラッグ名 | 読み込まれる？ | 解説 |
|---|---|---|
| event2024 | 〇 | event で始まっている |
| event-special | 〇 | event で始まっている |
| my-event-page | ✕ | event は途中にあるだけ |
3. 正規表現を使ったスラッグ判定
もっと柔軟なマッチングを行いたい場合は、preg_match() を使用します。
<?php
global $post;
if ( isset($post) && preg_match('/^info/', $post->post_name) ) :
?>
<link rel="stylesheet" href="/assets/css/style-info.css">
<?php endif; ?>このコードでは、スラッグが info で始まるページにだけCSSが読み込まれます。
● 他の正規表現の例
| 条件 | 正規表現パターン | 説明 |
|---|---|---|
スラッグに news を含む | /news/ | どこにあってもマッチ |
report-数字4桁 で終わる | /report-\d{4}$/ | report-2024 のような末尾を検出 |
entry で始まる | /^entry/ | entry-form, entry-complete など |
4. 条件によって複数ファイルを分岐読み込みする
<?php
global $post;
if ( isset($post) ) {
if ( strpos($post->post_name, 'campaign') !== false ) {
echo '<link rel="stylesheet" href="/assets/css/style-campaign.css">';
}
if ( preg_match('/^info/', $post->post_name) ) {
echo '<script src="/assets/js/script-info.js"></script>';
}
}
?>複数のパターンに応じてファイルを読み込むことで、無駄なCSSやJSの読み込みを防ぎ、パフォーマンス改善にもつながります。
まとめ
| 方法 | 柔軟性 | 条件 | 使用関数 |
|---|---|---|---|
is_page('slug') | 低 | 完全一致 | is_page() |
strpos($post->post_name) | 中 | 含まれる、先頭一致など | strpos() |
preg_match() | 高 | 正規表現による複雑な判定 | preg_match() |
さいごに
スラッグの一部を利用して条件分岐を行うことで、WordPressテーマにおけるCSSやJSの読み込み制御を柔軟に行えます。特に、共通の接頭辞やキーワードでグループ化されたページがある場合は、今回紹介した方法を活用するとメンテナンス性が向上し、無駄なリソースの読み込みも防げます。
定期イベントやキャンペーン、ランディングページなどにもぜひ活用してみてください。
コメント