如何在WordPress中为所有文章添加自定义CSS且不影响首页样式

Got it, let's ditch that tedious manual post-by-post CSS editing. Here are three solid, time-saving solutions tailored to your needs:

1. Use Theme Custom CSS with Conditional Targeting #

Most modern WordPress themes have a built-in "Custom CSS" section (usually under Appearance > Customize > Additional CSS). You can target only single posts by leveraging WordPress's auto-generated body classes, which automatically exclude the homepage:

/* Apply styles ONLY to single posts (homepage is unaffected) */
.single-post .your-post-content-class {
  /* Replace with your custom CSS rules */
  font-size: 1.1em;
  line-height: 1.6;
  color: #2d2d2d;
  margin-bottom: 1.5rem;
}

• Tip: Right-click your post content and select "Inspect" to find the exact class of your post content container (common ones are .entry-content, .post-content).
• The .single-post body class only exists on individual post pages, so your styles won't touch the homepage at all.

2. Add Conditional CSS via Functions.php (Advanced) #

If you prefer code-level control, add this snippet to your child theme's functions.php (always use a child theme to avoid losing changes when your parent theme updates):

function apply_single_post_custom_css() {
  // Check if we're on a single post AND NOT on the homepage
  if (is_single() && !is_front_page() && !is_home()) {
    ?>
    <style type="text/css">
      /* Your custom styles here */
      .entry-content {
        font-size: 1.1em;
        line-height: 1.6;
        color: #2d2d2d;
      }
    </style>
    <?php
  }
}
// Hook the function to load in the site's head section
add_action('wp_head', 'apply_single_post_custom_css');

This code will only inject your CSS when viewing a single post, so the homepage stays completely untouched.

3. Switch to a More Efficient Plugin #

Instead of "WP Add Custom CSS", use a plugin that supports global conditional CSS out of the box:

• Simple Custom CSS and JS: Lets you add global CSS with targeting rules (just use the .single-post selector as shown in method 1).
• Custom CSS Pro: Offers visual targeting tools to apply styles only to single posts without writing complex selectors.

All these plugins let you update your CSS once, and it applies to every single post automatically—no more editing each post individually.

Quick Notes #

• Always clear your site cache after making CSS changes to see updates immediately.
• Test your styles on both single posts and the homepage to confirm the homepage isn't affected.

内容的提问来源于stack exchange，提问作者Dragoon Shimizu