在我自己的wordpress主题中添加the_post_thumbnail作为CSS背景

我正在尝试设置我的博客主页以显示特色图片和标题, 到目前为止, 一切都很好, 但出于某种原因, 我添加到图片中的代码遇到了问题, 甚至试图遵循此处的许多其他帖子回答。这是我的代码：

<div class="blogContainer">
<?php
  while(have_posts()) {
    the_post();?>
    <?php $thumb = get_the_post_thumbnail_url(); ?>
    <div class="blogItems" style="background-image: url('<?php echo $thumb;?>')">
      <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
    </div>
<?php } ?>

我尝试了几个小变化, 例如：

    <?php
  while(have_posts()) {
    the_post();?>
    <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
    <div class="blogItems" style="background-image: url('<?php echo $url; ?>')">
      <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
    </div>
<?php } ?>

和这个

    <?php
  while(have_posts()) {
    the_post();?>
    <?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); ?>
    <div class="blogItems" style="background-image: url('<?php echo $backgroundImg[0]; ?>');">
      <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
    </div>
<?php } ?>

所有这些都出现了相同的问题, 即在”检查”选项卡中将URL设为空白。如果有人有答案, 将不胜感激！

#1

请尝试以下代码：

<?php
$args = array(
    'post_type' => 'post', //change with your post type
    'posts_per_page' => -1
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();
    $thumb = get_the_post_thumbnail_url(); ?>
        <div class="blogItems" style="background-image: url('<?php echo $thumb;?>');">
            <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
        </div>
<?php endwhile; endif; ?>

#2

在第一个示例中, 尝试将get_the_ID()添加到get_the_post_thumbnail_url()：

<div class="blogContainer">
<?php
  while(have_posts()) {
    the_post();?>
    <?php $thumb = get_the_post_thumbnail_url(get_the_ID()); ?>
    <div class="blogItems" style="background-image: url('<?php echo $thumb;?>')">
      <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
    </div>
<?php } ?>

#3

我正在尝试设置我的博客主页以显示特色图片和标题, 到目前为止, 一切都很好, 但出于某种原因, 我添加到图片中的代码遇到了问题, 甚至试图遵循此处的许多其他帖子回答。这是我的代码：

<div class="blogContainer">
<?php
  while(have_posts()) {
    the_post();?>
    <?php $thumb = get_the_post_thumbnail_url(); ?>
    <div class="blogItems" style="background-image: url('<?php echo $thumb;?>')">
      <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
    </div>
<?php } ?>

我尝试了几个小变化, 例如：

    <?php
  while(have_posts()) {
    the_post();?>
    <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
    <div class="blogItems" style="background-image: url('<?php echo $url; ?>')">
      <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
    </div>
<?php } ?>

和这个

    <?php
  while(have_posts()) {
    the_post();?>
    <?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); ?>
    <div class="blogItems" style="background-image: url('<?php echo $backgroundImg[0]; ?>');">
      <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
    </div>
<?php } ?>

所有这些都出现了相同的问题, 即在”检查”选项卡中将URL设为空白。如果有人有答案, 将不胜感激！

#4

请尝试以下代码：

<?php
$args = array(
    'post_type' => 'post', //change with your post type
    'posts_per_page' => -1
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();
    $thumb = get_the_post_thumbnail_url(); ?>
        <div class="blogItems" style="background-image: url('<?php echo $thumb;?>');">
            <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
        </div>
<?php endwhile; endif; ?>

#5

在第一个示例中, 尝试将get_the_ID()添加到get_the_post_thumbnail_url()：

<div class="blogContainer">
<?php
  while(have_posts()) {
    the_post();?>
    <?php $thumb = get_the_post_thumbnail_url(get_the_ID()); ?>
    <div class="blogItems" style="background-image: url('<?php echo $thumb;?>')">
      <a href="<?php the_permalink(); ?>"><h4><?php the_title();?></h4></a>
    </div>
<?php } ?>