在WordPress网站上展示产品列表是电商网站、作品集或服务展示的重要环节。无论是使用WooCommerce还是其他插件，制作一个专业的产品列表页都能提升用户体验。本文将详细介绍几种常见的制作方法，帮助您快速搭建高效的产品展示页面。
方法一：使用WooCommerce插件（适用于电商网站）
- 安装并激活WooCommerce插件
- 在WordPress后台进入“插件”>“安装插件”，搜索“WooCommerce”并安装激活。
- 添加产品信息
- 进入“产品”>“添加新产品”，填写标题、描述、价格、图片等详细信息。
- 创建产品列表页
- WooCommerce会自动生成默认的产品列表页（通常为
/shop/）。 - 如需自定义布局，可通过“外观”>“小工具”调整侧边栏，或使用页面构建器（如Elementor）设计模板。
- 优化显示效果
- 通过“WooCommerce”>“设置”>“产品”调整每页显示数量、排序方式等。
方法二：使用页面构建器插件（如Elementor）
- 安装Elementor Pro
- Elementor Pro提供“产品网格”等高级模块，支持拖拽式设计。
- 创建新页面
- 进入“页面”>“添加新页面”，使用Elementor编辑。
- 添加产品列表模块
- 搜索“Products”或“Posts Grid”模块，选择数据源（如WooCommerce产品），调整列数、样式和分页。
- 保存并发布
- 设计完成后保存，将页面设置为产品主页（可在WooCommerce设置中绑定）。
方法三：手动调用产品（适合开发者）
通过自定义代码调用产品数据，适合需要高度定制的用户：
// 在主题文件中插入以下代码（如page-products.php）
$args = array(
'post_type' => 'product',
'posts_per_page' => 12
);
$products = new WP_Query($args);
while ($products->have_posts()) : $products->the_post();
// 输出产品标题、图片等内容
the_title('<h2>', '</h2>');
the_post_thumbnail();
endwhile;
wp_reset_postdata();
优化技巧
- 分页与筛选
- 添加分类筛选器（如WooCommerce的“产品属性”功能）。
- 性能优化
- 使用缓存插件（如WP Rocket）加速产品页加载。
- 移动端适配
- 确保列表页在手机端显示为单列布局。
通过以上方法，您可以根据需求灵活创建WordPress产品列表页。对于初学者，推荐从WooCommerce或Elementor开始；高级用户则可结合自定义代码实现独特效果。
