带有回退作为背景图片的 Wordpress 特色图片

Question

这是我第一次涉足 Wordpress，我正在尝试创建一个 post 页面。我已插入特色图片，但如果没有特色图片，我会尝试将其换成后备图片。

目前看起来像这样（循环内的 obvs）：

<?php $thumb = get_the_post_thumbnail_url(); ?>

<div class="news-hero" style="background-image: url('<?php echo $thumb;?>')">
     <div class="page-title"><h1><?php the_title(); ?></h1></div>
</div>

这很棒，因为它拉动了 url，然后我在其中放置了 echo $thumb 位。

我想我需要以某种方式将 $thumb 定义为缩略图 url 或另一个 URL 但不确定如何定义？

我已经设法将其作为列表页面的图像标签，但如果可以的话，我更希望能够将其作为背景图像（只需引入 URLs）。

这是列表目前使用的内容 - 但仅适用于 img 标签。

<div class="news-collation-img">
    <?php if ( has_post_thumbnail() ) {
          the_post_thumbnail();
          } else { ?>
          <img src="<?php bloginfo('template_directory'); ?>/img/news/fallback-image.jpg" alt="<?php the_title(); ?>" />
    <?php } ?>
</div>

设计漂亮的图片比让它工作容易得多:-p

感谢任何人的帮助。

Answer 1

试试这个：

<?php 
//define fallback image path
$thumb = bloginfo('template_directory').'/img/news/fallback-image.jpg';
if ( has_post_thumbnail() ) {  
//override  fallback image if post has any thumbnail
$thumb = get_the_post_thumbnail_url();
 }
 ?>

<div class="news-hero" style="background-image: url('<?php echo $thumb;?>')">
     <div class="page-title"><h1><?php the_title(); ?></h1></div>
</div>

Answer 2

出于某种原因，上面的代码在页面上将模板目录生成为纯文本。如果我回显 $thumb = bloginfo('template_directory').'/img/news/fallback-image.jpg'; 它会显示正确的 URL.

然而，当在背景图像中作为 URL 回调时 <div class="news-hero" style="background-image: url('<?php echo $thumb;?>')"> 它不起作用。

当我将 $thumb = bloginfo('template_directory') 更改为 $thumb = get_template_directory_uri() 时，一切正常。不知道为什么我会相信他们做同样的事情。 (bloginfo('template_directory') 然后执行 get_template_directory_uri).

但它奏效了，所以我同意...

带有回退作为背景图片的 Wordpress 特色图片

Wordpress featured image with fallback as a background image

php

wordpress

fallback

image

wordpress-featured-image