php - 获取 woocommerce 商店页面帖子缩略图
问题描述
我对 woocommerce 有疑问。我正在使用woocommerce_before_main_content
钩子添加.jumbotron
页面封面。我能够显示需要出现在背景图像上的页面标题和类别等内容,但是显示的图像是磨损的,我不知道为什么但是 wordpress 会显示第一个产品图像缩略图和图像我在 woocommerce 的商店页面中选择的特色是不同的。有解决办法吗?我正在使用这段代码:
function btheme_woocommerce_before_main_content()
{
if( has_post_thumbnail() ):
?>
<div class="jumbotron jumbotron-fluid shop-page-cover" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');">
<!-- <div class="parallax" data-parallax-image></div> -->
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h1 class=""><?php woocommerce_page_title(); ?></h1>
<?php $categories = get_terms( array('taxonomy' => 'product_cat') ); ?>
<?php foreach( $categories as $category ): ?>
<h4 class="category-name d-inline"><?php echo $category->name; ?></h4>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<?php endif; ?>
<div class="container-fluid content-wrapper" id="uptheme-woocommece-wrapper">
<?php
}
add_action( 'woocommerce_before_main_content', 'btheme_woocommerce_before_main_content', 10 );
解决方案
首先你需要通过 id 获取帖子缩略图
<?php
$shop_page_id = wc_get_page_id('shop');
function btheme_woocommerce_before_main_content()
{
if( has_post_thumbnail($shop_page_id) ):
?>
<div class="jumbotron jumbotron-fluid shop-page-cover" style="background-image:url('<?php echo get_the_post_thumbnail_url($shop_page_id,'full'); ?>');">
<!-- <div class="parallax" data-parallax-image></div> -->
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h1 class=""><?php woocommerce_page_title(); ?></h1>
<?php $categories = get_terms( array('taxonomy' => 'product_cat') ); ?>
<?php foreach( $categories as $category ): ?>
<h4 class="category-name d-inline"><?php echo $category->name; ?></h4>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<?php endif; ?>
<div class="container-fluid content-wrapper" id="uptheme-woocommece-wrapper">
<?php
}
add_action( 'woocommerce_before_main_content', 'btheme_woocommerce_before_main_content', 99 );
推荐阅读
- elasticsearch - 如何使用 elasticsearch.net/nest 6.x 更新 _doc 类型的设置
- apache - Magento 2:traefik 反向代理背后的重定向太多
- reactjs - 如何在 docker 容器中从我的 react 构建中提供静态文件
- python - 文本中的日期识别 - 拉丁语
- javascript - 用 JS 设置元素高度,然后用 JS 将子元素高度设置为百分比
- javascript - 如何使用手写笔在 HTML5 画布上绘图
- python - 没有全局状态的异步循环的时间单次迭代
- javascript - 00、0.0 和 0,0 的 jQuery 测试
- delimiter - 如何使变量非分隔文件成为分隔文件
- html - 响应式电子邮件:移动端的反向块堆叠设计