在WordPress網(wǎng)站中添加側(cè)邊欄產(chǎn)品目錄，不僅能提升用戶體驗(yàn)，還能幫助訪客快速找到所需內(nèi)容。本文將詳細(xì)介紹如何通過(guò)插件或手動(dòng)代碼的方式為WordPress添加側(cè)邊欄產(chǎn)品目錄。

方法一：使用插件添加側(cè)邊欄產(chǎn)品目錄

1. 安裝并激活插件

推薦使用以下插件：

• Table of Contents Plus：自動(dòng)生成目錄，支持側(cè)邊欄顯示。
• Easy Table of Contents：適用于文章和頁(yè)面，可自定義樣式。

在WordPress后臺(tái)進(jìn)入 插件 > 安裝插件，搜索并安裝上述插件，然后激活。

2. 配置插件

以 Easy Table of Contents 為例：

1. 進(jìn)入 設(shè)置 > Easy Table of Contents。
2. 在 常規(guī) 選項(xiàng)卡中，啟用目錄功能，并選擇適用的文章類型（如產(chǎn)品頁(yè)面）。
3. 在 外觀 選項(xiàng)卡中，調(diào)整目錄樣式（如顏色、字體等）。
4. 在 位置 選項(xiàng)卡中，選擇 側(cè)邊欄 作為顯示位置。
5. 保存設(shè)置后，目錄將自動(dòng)出現(xiàn)在側(cè)邊欄中。

方法二：手動(dòng)添加產(chǎn)品目錄（適合開發(fā)者）

1. 創(chuàng)建自定義小工具

進(jìn)入 外觀 > 小工具，在側(cè)邊欄區(qū)域添加一個(gè) 自定義HTML 或 文本 小工具，然后輸入目錄代碼：

<div class="product-toc">
<h3>產(chǎn)品目錄</h3>
<ul>
<li><a href="#product1">產(chǎn)品1</a></li>
<li><a href="#product2">產(chǎn)品2</a></li>
<li><a href="#product3">產(chǎn)品3</a></li>
</ul>
</div>

2. 使用短代碼或PHP動(dòng)態(tài)生成目錄

如果產(chǎn)品較多，可以使用PHP代碼動(dòng)態(tài)生成目錄。在主題的 functions.php 文件中添加以下代碼：

function custom_product_toc() {
$products = get_posts(array('post_type' => 'product', 'numberposts' => -1));
if ($products) {
echo '<div class="product-toc"><h3>產(chǎn)品目錄</h3><ul>';
foreach ($products as $product) {
echo '<li><a href="#' . esc_attr($product->post_name) . '">' . esc_html($product->post_title) . '</a></li>';
}
echo '</ul></div>';
}
}
add_action('widgets_init', function() {
register_widget('WP_Widget_Custom_TOC');
});

然后在側(cè)邊欄小工具中調(diào)用該函數(shù)。

優(yōu)化建議

• 樣式調(diào)整：使用CSS美化目錄，使其與網(wǎng)站風(fēng)格一致。
• 錨點(diǎn)跳轉(zhuǎn)：確保產(chǎn)品頁(yè)面有對(duì)應(yīng)的 id 或 name 屬性，以便目錄鏈接生效。
• 緩存更新：修改后清除緩存，確保更改生效。

通過(guò)以上方法，你可以輕松在WordPress側(cè)邊欄添加產(chǎn)品目錄，提升網(wǎng)站導(dǎo)航體驗(yàn)！