【问题标题】:Wordpress thumbnail as background image, with a defualt fallbackWordpress 缩略图作为背景图像,具有默认后备
【发布时间】:2021-02-24 09:25:40
【问题描述】:

我是 php 新手。开发 WordPress 网站。

我想在每个帖子/页面上提取一张特色图片作为英雄背景图片。如果没有特色图片,我想使用默认图片。

我找到了可以单独执行上述每个操作的工作代码,但不确定如何组合它们。

特色图片作为背景图片:

<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div id="post" class="hero-image" style="background-image: url('<?php echo $thumb['0'];?>')">
</div>

后备默认图片:

    <?php if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'full' );
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/img/default-img.jpg" alt="<?php the_title(); ?>" />
<?php } ?>

编辑:我就是这样做的:

<?php if ( has_post_thumbnail() ) { ?>
    <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
    <div class="hero-image" style="background-image: url('<?php echo $thumb['0'];?>')"></div>
<?php } else { ?>
    <div class="hero-image" style="background-image: url('<?php bloginfo('template_directory'); ?>/img/default-img.jpg') "></div>
<?php } ?>

【问题讨论】:

    标签: php wordpress


    【解决方案1】:

    这就是方法。

    <figure>
      <?php if (has_post_thumbnail()) { ?>
        <?php echo wp_get_attachment_image(get_post_thumbnail_id($post->ID), 
       'full'); ?>
     <?php } else { ?>
        <img src="<?php echo get_stylesheet_directory_uri() 
        .'/components/assets/images/blog-placeholder.png'; ?>">
     <?php } ?>
    </figure>
    

    【讨论】:

    • 谢谢,能够以此为基础来解决我需要将图像设置为背景图像的情况。
    【解决方案2】:

    我会创建一个包含所有逻辑的函数,然后只需传入帖子 ID。将该函数添加到您的 functions.php 文件中,然后在您的页面中使用它。

    <?php 
    function get_feat_image_or_default($id=false){
    $path = "https://picsum.photos/800";
    if($id){
        $path = get_the_post_thumbnail_url(id,"large") ?: $path;
    }
    return $path;  
    }
    // Then call it like this:
    echo ?> <img src="<?= get_feat_image_or_default($post->ID); ?>" />
    

    【讨论】:

      猜你喜欢
      • 2015-07-15
      • 2015-09-28
      • 1970-01-01
      • 1970-01-01
      • 2022-06-12
      • 1970-01-01
      • 1970-01-01
      • 2016-04-06
      • 2016-11-14
      相关资源
      最近更新 更多