WordPress調(diào)用產(chǎn)品到指定位置的技巧與方法

來自：素雅營銷研究院

方知筆記

2025年06月21日 17:06

在WordPress網(wǎng)站開發(fā)中，如何將產(chǎn)品調(diào)用到指定位置是一個常見的需求。無論是電商網(wǎng)站、產(chǎn)品展示頁面，還是其他類型的網(wǎng)站，合理的產(chǎn)品調(diào)用方式不僅能提升用戶體驗，還能增強頁面的功能性。本文將詳細介紹如何在WordPress中調(diào)用產(chǎn)品到指定位置，幫助開發(fā)者更好地實現(xiàn)這一功能。

1. 使用短代碼調(diào)用產(chǎn)品

WordPress的短代碼功能非常強大，可以通過簡單的代碼將產(chǎn)品調(diào)用到頁面的任何位置。首先，確保你的主題支持短代碼功能。然后，可以通過以下步驟實現(xiàn)產(chǎn)品調(diào)用：

安裝插件：如果你使用的是WooCommerce插件，它已經(jīng)內(nèi)置了短代碼功能。你可以使用[products]短代碼來調(diào)用產(chǎn)品。例如，[products limit="4" columns="4" category="electronics"]可以調(diào)用電子產(chǎn)品類別下的4個產(chǎn)品，并以4列顯示。
自定義短代碼：如果你需要更復雜的調(diào)用方式，可以通過編寫自定義短代碼來實現(xiàn)。在主題的functions.php文件中添加以下代碼：

function custom_product_shortcode($atts) {
$atts = shortcode_atts(array(
'limit' => 5,
'category' => ''
), $atts);

$args = array(
'post_type' => 'product',
'posts_per_page' => $atts['limit'],
'product_cat' => $atts['category']
);

$products = new WP_Query($args);

if ($products->have_posts()) {
$output = '<ul>';
while ($products->have_posts()) {
$products->the_post();
$output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
}
$output .= '</ul>';
} else {
$output = 'No products found';
}

wp_reset_postdata();
return $output;
}
add_shortcode('custom_products', 'custom_product_shortcode');

在頁面或文章中使用[custom_products limit="3" category="electronics"]來調(diào)用電子產(chǎn)品類別下的3個產(chǎn)品。

2. 使用頁面模板調(diào)用產(chǎn)品

如果你需要在特定的頁面模板中調(diào)用產(chǎn)品，可以通過編輯主題的頁面模板文件來實現(xiàn)。以下是一個簡單的示例：

創(chuàng)建頁面模板：在主題目錄下創(chuàng)建一個新的頁面模板文件，例如page-products.php。在文件頂部添加以下代碼：

<?php
/*
Template Name: Products Page
*/
get_header();
?>

<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => 6,
'product_cat' => 'electronics'
);

$products = new WP_Query($args);

if ($products->have_posts()) {
while ($products->have_posts()) {
$products->the_post();
// 輸出產(chǎn)品信息
echo '<div class="product">';
echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
echo '<div class="product-excerpt">' . get_the_excerpt() . '</div>';
echo '</div>';
}
} else {
echo 'No products found';
}

wp_reset_postdata();
?>
</main>
</div>

<?php
get_sidebar();
get_footer();

應用頁面模板：在WordPress后臺創(chuàng)建一個新頁面，選擇“Products Page”作為頁面模板。保存后，訪問該頁面即可看到調(diào)用的產(chǎn)品。

3. 使用插件調(diào)用產(chǎn)品

如果你不想編寫代碼，可以使用一些現(xiàn)成的插件來實現(xiàn)產(chǎn)品調(diào)用。以下是一些常用的插件：

WooCommerce Product Table：這個插件允許你以表格形式顯示產(chǎn)品，并支持自定義列、排序和過濾功能。
Product Slider for WooCommerce：這個插件可以將產(chǎn)品以輪播圖的形式展示在頁面的任何位置。
Custom Product Tabs for WooCommerce：這個插件允許你在產(chǎn)品頁面中添加自定義標簽，方便用戶查看更多產(chǎn)品信息。

4. 使用自定義查詢調(diào)用產(chǎn)品

如果你需要更靈活的產(chǎn)品調(diào)用方式，可以使用WordPress的自定義查詢功能。以下是一個示例：

$args = array(
'post_type' => 'product',
'posts_per_page' => 5,
'orderby' => 'date',
'order' => 'DESC',
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => 'electronics'
)
)
);

$products = new WP_Query($args);

if ($products->have_posts()) {
while ($products->have_posts()) {
$products->the_post();
// 輸出產(chǎn)品信息
echo '<div class="product">';
echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
echo '<div class="product-excerpt">' . get_the_excerpt() . '</div>';
echo '</div>';
}
} else {
echo 'No products found';
}

wp_reset_postdata();

通過這種方式，你可以根據(jù)不同的條件調(diào)用產(chǎn)品，并將其顯示在頁面的任何位置。