为网站内容头部设置条件背景图：搜索页及自定义文章类型单页需求

Got it, let's tweak your existing code so it adds custom background images to your .single__header element on search results pages and specific custom post type (CPT) single pages, while keeping your original featured image logic intact.

Step 1: Revise the Conditional Logic #

We'll expand the condition to check for page types first, then fall back to your original featured image behavior. Here's the full, updated code:

<div class="single__header" <?php
// Initialize empty style string
$header_style = '';

// 1. Check if we're on a search results page
if ( is_search() ) {
    // Replace with your search page background URL
    $bg_url = 'https://your-domain.com/path/to/search-bg.jpg';
    $header_style = 'background-image: url(' . esc_url( $bg_url ) . ');';
}
// 2. Check if we're on a specific CPT single page (replace 'your-cpt-slug' with your actual CPT slug)
elseif ( is_singular( 'your-cpt-slug' ) ) {
    // Option A: Use a custom field for per-post background (e.g., field named 'custom_header_bg')
    $custom_bg = get_post_meta( get_the_ID(), 'custom_header_bg', true );
    if ( !empty( $custom_bg ) ) {
        $header_style = 'background-image: url(' . esc_url( $custom_bg ) . ');';
    }
    // Option B: Use a default background for all posts of this CPT
    // $header_style = 'background-image: url(' . esc_url( 'https://your-domain.com/path/to/cpt-default-bg.jpg' ) . ');';
}
// 3. Fallback to original featured image logic for other pages
elseif ( has_post_thumbnail() ) {
    $header_style = 'background-image: url(' . esc_url( get_the_post_thumbnail_url( get_the_ID(), 'post-background' ) ) . ');';
}

// Add shared background styles (move these to CSS if you want cleaner code!)
if ( !empty( $header_style ) ) {
    $header_style .= ' background-repeat: no-repeat; background-position: center center; background-size: cover;';
    echo 'style="' . esc_attr( $header_style ) . '"';
}
?>>

Key Notes & Customizations #

• Replace your-cpt-slug: Swap this with the actual slug of your custom post type (e.g., portfolio or event).
• Search Page Background: Update the $bg_url to point to your desired search page background image.
• CPT Background Options:
  • Use Option A if you want individual posts in the CPT to have unique backgrounds (add a custom field named custom_header_bg to your CPT posts, either via native WordPress custom fields or a plugin like Advanced Custom Fields).
  • Use Option B if you want all posts in the CPT to share the same default background.
• Cleaner CSS: For better maintainability, move the shared styles (background-repeat, background-position, background-size) to your theme's CSS file instead of keeping them inline:

  .single__header {
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
  }
  

  Then you can remove those lines from the PHP code, leaving only the background-image property in the inline style.

Why This Works #

• is_search() checks if we're on the main search results page.
• is_singular('your-cpt-slug') targets single posts of your specified custom post type.
• esc_url() and esc_attr() ensure your URLs are sanitized, preventing security issues like XSS.

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