WordPress怎么制作產(chǎn)品側(cè)邊欄，詳細圖文教程

來自：素雅營銷研究院

方知筆記

2025年07月04日 06:45

一、為什么要為產(chǎn)品頁面添加側(cè)邊欄

在WordPress網(wǎng)站中，產(chǎn)品側(cè)邊欄是一個極其實用的功能區(qū)域，它可以幫助你：

展示相關(guān)產(chǎn)品或促銷信息
提供快速導航功能
增加用戶停留時間和轉(zhuǎn)化率
優(yōu)化頁面布局和用戶體驗

二、準備工作

在開始制作產(chǎn)品側(cè)邊欄前，請確保：

已安裝并激活WordPress
使用支持小工具(widgets)的主題
如果是WooCommerce商店，確保已安裝WooCommerce插件

三、通過主題自定義器添加側(cè)邊欄

方法1：使用默認主題功能

登錄WordPress后臺
進入”外觀” > “小工具”
找到”產(chǎn)品側(cè)邊欄”或”WooCommerce側(cè)邊欄”區(qū)域
拖拽所需小工具到側(cè)邊欄區(qū)域
配置小工具內(nèi)容并保存

方法2：使用頁面構(gòu)建器插件

如果主題不支持直接添加側(cè)邊欄，可以使用以下插件：

Elementor Pro
Beaver Builder
SiteOrigin Page Builder

安裝后，在編輯產(chǎn)品頁面時可以直接添加側(cè)邊欄模塊。

四、創(chuàng)建自定義產(chǎn)品側(cè)邊欄

步驟1：注冊新的側(cè)邊欄

在主題的functions.php文件中添加以下代碼：

function custom_product_sidebar() {
register_sidebar( array(
'name'          => '產(chǎn)品側(cè)邊欄',
'id'            => 'custom-product-sidebar',
'description'   => '這是專門為產(chǎn)品頁面設計的側(cè)邊欄',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget'  => '</div>',
'before_title'  => '<h3 class="widget-title">',
'after_title'   => '</h3>',
) );
}
add_action( 'widgets_init', 'custom_product_sidebar' );

步驟2：在產(chǎn)品頁面顯示側(cè)邊欄

在產(chǎn)品模板文件(通常是single-product.php)中添加：

<?php if ( is_active_sidebar( 'custom-product-sidebar' ) ) : ?>
<div id="secondary" class="widget-area">
<?php dynamic_sidebar( 'custom-product-sidebar' ); ?>
</div>
<?php endif; ?>

五、推薦的產(chǎn)品側(cè)邊欄小工具

產(chǎn)品分類導航：方便用戶瀏覽相關(guān)產(chǎn)品
特色產(chǎn)品展示：突出顯示熱銷或促銷商品
購物車摘要：顯示當前購物車狀態(tài)
篩選器：價格、顏色、尺寸等篩選選項
相關(guān)產(chǎn)品：基于當前瀏覽產(chǎn)品的推薦
促銷橫幅：展示特別優(yōu)惠信息
客戶評價：展示產(chǎn)品好評

六、樣式優(yōu)化技巧

為了讓側(cè)邊欄更美觀，可以添加一些CSS樣式：

#secondary.widget-area {
width: 300px;
float: right;
padding: 20px;
background: #f9f9f9;
border: 1px solid #eee;
margin-left: 30px;
}

.widget-title {
font-size: 18px;
color: #333;
border-bottom: 2px solid #ddd;
padding-bottom: 10px;
}