我们用非产品主题开发产品展示网站，如果只是纯文本展示，多少有点单调，现在我们通过小工具栏，扩展一些额外参数，比如产品详细规格，产品相册等，有没有办法实现呢，先看成品效果图

左边是我们正常的发布文章效果，右侧是前台展示效果，这样的话看起来就更像是一个产品页面了，如何实现的呢，以下是大概的操作步骤。

一、自定义一个小工具

自定义的工具，直接在小工具管理处添加到文章右侧的第一个，在wp-content/themes/ripro-v5/inc/options/widget-options.php里，找到一个合适位置，添加一段类似这样的

///////////////////////////////////////// 侧边栏产品信息展示 /////////////////////////////////////////
CSF::createWidget('ri_sidebar_product_widget', array(
    'title'       => $name_prefix . '【飞来网边栏】1.产品信息展示',
    'classname'   => 'sidebar-product-info',
    'description' => '产品信息展示',
    'fields'      => array(
        array(
            'id'      => 'title',
            'type'    => 'text',
            'title'   => '产品标题',
            'default' => '产品信息',
        ),

    ),
));
function ri_sidebar_product_widget($args, $instance) {
    if ($args['id'] != 'single-sidebar') {
        return false; //非首页模块页面不显示
    }

    $instance = array_merge(array(
        'title'      => '产品标题',
    ), $instance);
    echo $args['before_widget'];
    get_template_part('template-parts/widget/sidebar-product-info', '', $instance);
    echo $args['after_widget'];
}

添加代码后，就能在小工具这里拖动过去了。

二、安装搜索「Advanced Custom Fields」或者 “ACF”插件

安装插件是为了增加我们需要扩展的一些自定义字段，默认的也有自定义字段，但是会比较多比较杂乱，用它这个插件，就只显示你增加的字段，后台就比较整洁了。

这时候编辑文章或发布文章时会多出四个位置

把需要扩展的内容在这里面编辑就可以了，有些常用的可以直接在插件那里设置默认值。

三、制作小工具模板并添加显示内容

在前面我们设置的小工具文件名称是sidebar-product-info，找到模板的目录创建同名称的PHP文件为 template-parts/widget/sidebar-product-info.php，内容如下，我们添加了产品目录，点赞数量，浏览量，评论数量几个参数，不用判断是否开启，直接显示就行，因为后台可以开启或关闭，我这里无论开启与否，都默认显示出来。

<?php
if (empty($args)) {
return;
}
?>
<!--飞来网 FLYING.WANG 详情页小功具扩展产品功能 START-->
<?php
//要加入这句，不然读取不了所属分类
$metaOption = _cao('single_top_title_meta', array(
'date', 'cat', 'views', 'likes', 'fav',
));
?>
<h5 class="widget-title"><?php echo $args['title']; ?></h5>
<strong style="font-size:15px;line-height:2;"><?php echo get_the_title($post->ID); ?></strong>
<br />
<hr />
<div class="img_right2">
<span style="display: block;">
<div class="article-meta">
<?php
//if (in_array('cat', $metaOption)):
?>
<span class="meta-cat-dot" title="产品分类" style="margin-right:5px;"><i class="far fa-folder me-1"></i><?php zb_meta_category(2);?></span>
<?php
//endif;
?>
<?php
//if (in_array('likes', $metaOption)):
?>
<span class="" title="点赞数" style="margin-right:5px;"><i class="far fa-heart me-1"></i><?php echo zb_get_post_likes();?></span>
<?php //endif;
?>
<?php //if (in_array('views', $metaOption)):
?>
<span class="meta-views" title="产品浏览量" style="margin-right:5px;"><i class="far fa-eye me-1"></i><?php echo zb_get_post_views();?></span>
<?php //endif;
?>
<?php if (in_array('comment', $metaOption) && comments_open() && is_site_comments()): ?>
<span class="meta-comment" style="margin-right:5px;"><a href="<?php echo esc_url(get_the_permalink() . '#comments'); ?>"><i class="far fa-comments me-1"></i><?php echo get_comments_number();?></a></span>
<?php endif;?>
<?php if (false && is_site_shop() && post_is_pay($post_id)) :?>
<span class="meta-price" style="margin-right:5px;"><i class="<?php echo get_site_coin_icon();?> me-1"></i><?php echo $post_price;?></span>
<?php endif;?>
</div>
</span>
<br />
<a class="btn btn-sm btn-info-soft post-share-btn" href="javascript:void(0);"><i class="fas fa-share-alt me-1"></i>分享</a> ·
<a class="btn btn-sm btn-success-soft post-fav-btn" href="javascript:void(0);" data-is="1"><i class="far fa-star me-1"></i>收藏</a> ·
<a class="btn btn-sm btn-danger-soft post-like-btn" href="javascript:void(0);" data-text="已点赞"><i class="far fa-heart me-1"></i>点赞(<span class="count">2</span>)</a>
</div>
<br />
<div class="card2222" style="margin-top:10px;">
<article class="post-content post-705 post type-post status-publish format-standard hentry category-fangaitiehe">
<?php
//我要它显示它才显示，比如在自定义字段里加个判断2025年4月18日, PM 12:53:17
$zdybt = get_post_meta($post->ID, "product_info", $single = true);
if($zdybt !=NULL){?>
<!--div style="width:100%;margin:0px auto;height:650px;border:1px solid red;">
<img src="https://aokiao.com/wp-content/uploads/2025/04/78805a221a988e7-4.png" />
</div-->
<?php
$xiangce = get_post_meta($post->ID, "product_info", $single = true);
echo do_shortcode($xiangce);
?>
<?php
}else{;}
?>
<?php
//如果有产品参数就显示出来
$zdybt = get_post_meta($post->ID, "product_canshu", $single = true);
if($zdybt !=NULL){
$xiangce = get_post_meta($post->ID, "product_canshu", $single = true);
echo $xiangce;}else{;}
?>
<?php
//按钮
$zaixianzixun = get_post_meta($post->ID, "zaixianzixun", $single = true);
echo do_shortcode($zaixianzixun);
?>
</article>
</div>
<!--飞来网 FLYING.WANG 详情页小功具扩展产品功能 END-->
<?php wp_reset_postdata();?>

保存更新之后，我们前台页面就有这个版块和内容了。

这些在后台都可以自定义的，非常简单的操作。

以上就完成了这次的功能扩展。