WordPressサイトを運営していると、ページごとやカテゴリーごとに異なるデザインを適用したくなることがあります。
例えば、特定の固定ページだけ背景色を変えたり、カテゴリーごとに異なるフォントを設定したりする場合です。
本記事では、WordPressでページやカテゴリーごとに異なるCSSを適用する方法を初心者向けにわかりやすく解説します。
CSSやJavaScriptの正しい読み込みかたはこちらの記事で詳しく解説しています。
ページやカテゴリーごとにCSSを変更する基本の考え方
WordPressでは、特定のページやカテゴリーごとに異なるCSSを適用するために「条件分岐タグ」と「wp_enqueue_style」を活用できます。
WordPressの条件分岐タグを活用する
WordPressには、特定のページやカテゴリーを判別できる「条件分岐タグ」が用意されています。
例えば、is_page() や is_category() を使うことで、それぞれのページやカテゴリーを判別可能です。
wp_enqueue_style で特定のページ・カテゴリーにCSSを適用
wp_enqueue_style を使うことで、必要なCSSファイルを適切に読み込むことができます。
特定のページやカテゴリーのみで読み込むように設定することで、不要なCSSの読み込みを防ぎ、サイトのパフォーマンスを向上させることができます。
CSSやJavaScriptの正しい読み込みかたはこちらの記事で詳しく解説しています。
ページごとに異なるCSSを読み込む方法
特定の固定ページだけにCSSを適用する方法
特定の固定ページにのみCSSを適用したい場合、is_page() を利用します。
function add_ccs_js() {
if (is_page('contact')) { // 固定ページ「お問い合わせ」に適用
wp_enqueue_style('contact-style', get_template_directory_uri() . '/css/contact.css');
}
}
add_action('wp_enqueue_scripts', 'add_ccs_js');投稿ページ（シングルページ）ごとにCSSを変更する方法
投稿ページごとに異なるCSSを適用する場合は、is_single() を使用します。
function add_ccs_js() {
if (is_single('123')) { // 投稿IDが123の場合
wp_enqueue_style('single-post-style', get_template_directory_uri() . '/css/single-123.css');
}
}
add_action('wp_enqueue_scripts', 'add_ccs_js');カテゴリーごとにCSSを変更する方法
is_category() を使ってカテゴリー別にCSSを適用
カテゴリーごとに異なるCSSを適用する場合、is_category() を使います。
function add_ccs_js() {
if (is_category('news')) { // カテゴリー「news」に適用
wp_enqueue_style('news-category-style', get_template_directory_uri() . '/css/category-news.css');
}
}
add_action('wp_enqueue_scripts', 'add_ccs_js');子テーマの category-スラッグ.css を活用する
テーマの category-スラッグ.css を自動的に読み込む方法もあります。
function add_ccs_js() {
if (is_category()) {
$category = get_queried_object();
wp_enqueue_style('category-style', get_template_directory_uri() . '/css/category-' . $category->slug . '.css');
}
}
add_action('wp_enqueue_scripts', 'add_ccs_js');その他の便利なカスタマイズ方法
投稿タイプ（カスタム投稿）ごとにCSSを切り替える
カスタム投稿タイプごとに異なるCSSを適用する場合、is_singular('custom_post_type') を使用します。
function add_ccs_js() {
if (is_singular('portfolio')) { // カスタム投稿タイプ「portfolio」に適用
wp_enqueue_style('portfolio-style', get_template_directory_uri() . '/css/portfolio.css');
}
}
add_action('wp_enqueue_scripts', 'add_ccs_js');特定のユーザーやログイン状態でCSSを変える
管理者のみ異なるCSSを適用する場合は is_user_logged_in() を使います。
function add_ccs_js() {
if (current_user_can('administrator')) {
wp_enqueue_style('admin-style', get_template_directory_uri() . '/css/admin.css');
}
}
add_action('wp_enqueue_scripts', 'add_ccs_js');まとめ
ページやカテゴリーごとに適切なCSSを読み込むことで、より柔軟なデザイン変更が可能になります。
ポイントまとめ
- 固定ページごとにCSSを適用 →
is_page() - 投稿ページごとにCSSを適用 →
is_single() - カテゴリーごとにCSSを適用 →
is_category() - カスタム投稿タイプごとにCSSを適用 →
is_singular() - 特定のユーザーに適用 →
current_user_can()
適切な方法を選んで、効率よくWordPressのデザインをカスタマイズしましょう！
