B2主题功能十分丰富,可扩展性强,比如商城功能就十分强大,但是有些细节需要完善。本文就是老白应评论区站友邀请开发,目的就是给B2主题前台和后台的商品列表界面,增加一个商品类型筛选和价格排序功能,详细代码教程如下。

1.B2主题后台商品筛选
1.1 代码
十分简单,把下面的代码添加到主题或子主题中,function.php文件中即可
// 7B2主题商品列表添加筛选-https://www.dzw6.com/33516.html
add_action('restrict_manage_posts', 'add_shop_type_filter');
function add_shop_type_filter($post_type) {
if ('shop' !== $post_type) return;
$filter_value = isset($_GET['zrz_shop_type_filter']) ? $_GET['zrz_shop_type_filter'] : '';
$options = array(
'normal' => '出售',
'lottery' => '积分抽奖',
'exchange' => '积分兑换'
);
echo '<select name="zrz_shop_type_filter">';
echo '<option value="">所有商品类型</option>';
foreach ($options as $key => $value) {
printf(
'<option value="%s"%s>%s</option>',
$key,
$key == $filter_value ? ' selected="selected"' : '',
$value
);
}
echo '</select>';
}
add_filter('parse_query', 'apply_shop_type_filter');
function apply_shop_type_filter($query) {
global $pagenow, $typenow;
if ($typenow === 'shop' && $pagenow === 'edit.php' && !empty($_GET['zrz_shop_type_filter'])) {
$filter_value = sanitize_text_field($_GET['zrz_shop_type_filter']);
$query->set('meta_query', array(
array(
'key' => 'zrz_shop_type',
'value' => $filter_value,
'compare' => '='
)
));
}
}
// 7B2主题商品列表添加筛选-https://www.dzw6.com/33516.html
1.2 效果演示
(看筛选功能,积分我取消了)
2.商品价格显示及后台排序
2.1 效果演示
后台商品列表:

2.2 实现代码
3.前端商品页面多种筛选
3.1 效果演示
如图,在前台商品购买界面,显示三种筛选模式

3.2 实现代码
位置/TempParts/shop,shop-buy.php文件,替换为下面的代码
css样式代码,加到style.css文件
/* 排序按钮样式-https://www.dzw6.com/33516.html */
.topic-type-menu ul {
display: flex;
gap: 15px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.topic-type-menu ul li {
margin: 0;
}
.topic-type-menu ul li a {
display: block;
padding: 8px 15px;
border-radius: 4px;
background: var(--b2-background-light);
color: var(--b2-text-color);
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid var(--b2-border-color);
}
.topic-type-menu ul li a:hover {
background: var(--b2-main-hover);
border-color: transparent;
}
4.相关推荐
B2主题可扩展的东西很多,老白以后会结合自己的使用情况发布相关教程或者插件
如有特殊定制化需求可微信联系老白
B2主题通用美化:https://www.dzw6.com/tag/b2-theme-beautify
B2主题圈子美化:https://www.dzw6.com/tag/b2_theme_circle
WordPress顶级优化教程:https://www.dzw6.com/tag/wordpress_optimization




