WordPress中如何将文章缩略图URL设置为背景图片？含代码场景

Hey there! Let's tackle your WordPress background image questions clearly and practically.

First things first: Make sure your WordPress theme supports post thumbnails (also called featured images). If it doesn't, add this line to your theme's functions.php file:

add_theme_support( 'post-thumbnails' );

Once that's set up, you can leverage WordPress built-in functions to fetch the featured image URL and apply it as a background image. Here are common use cases:

• Inside the WordPress loop (like on archive pages or home page post lists):
  Use the_post_thumbnail_url() to pull the URL directly. You can embed it inline in the style attribute like this:

  <div style="background-image: url(<?php the_post_thumbnail_url('full'); ?>);"></div>
  

  The 'full' parameter specifies the image size—you can swap it for predefined sizes like 'large', 'medium', or custom sizes you've registered in your theme.
• Outside the loop (like on a single post page where you're not in the loop structure):
  Use get_post_thumbnail_url() instead, passing the post ID (use get_the_ID() if you're already on the target post page). We’ll also add a check to avoid empty url() values if the post has no featured image:

  <?php 
  $thumbnail_url = get_post_thumbnail_url(get_the_ID(), 'full');
  if ($thumbnail_url) { ?>
    <div style="background-image: url(<?php echo esc_url($thumbnail_url); ?>);"></div>
  <?php } ?>
  

Your current code snippet is:

<div class="bg-img1 size-a-3 how1 pos-relative" style="background-image: url();">

Let’s adjust it to inject the dynamic thumbnail URL, with options for different scenarios:

Scenario 1: Inside the WordPress loop #

Simply replace the empty url() with the_post_thumbnail_url() to pull the URL directly:

<div class="bg-img1 size-a-3 how1 pos-relative" style="background-image: url(<?php the_post_thumbnail_url('full'); ?>);">

Scenario 2: Outside the loop (or with fallback support) #

First fetch the URL, check if it exists, and optionally add a fallback image for posts without featured images:

<?php
$featured_img_url = get_post_thumbnail_url(get_the_ID(), 'full');
// Use the featured image URL if available; else, use a fallback image
$bg_url = $featured_img_url ? esc_url($featured_img_url) : 'https://your-fallback-image-url.jpg';
?>
<div class="bg-img1 size-a-3 how1 pos-relative" style="background-image: url(<?php echo $bg_url; ?>);">

Quick best practices: #

• Always use esc_url() when outputting URLs to sanitize them and avoid security risks (this is handled automatically by the_post_thumbnail_url(), but it’s good practice for get_post_thumbnail_url()).
• Swap 'full' with your custom image size name if you’ve registered one (e.g., 'custom-hero-size').

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