در بسیاری از پروژه‌های طراحی سایت فروشگاهی، نیاز داریم که تنها محصولات یک شاخه یا دسته‌بندی خاص (مثلاً محصولات تخفیف‌دار، لوازم جانبی یا دسته‌بندی موبایل) را در صفحه‌ای خاص نمایش دهیم. در این آموزش از سون ریپلای، یاد می‌گیرید که چگونه با استفاده از یک کوئری ساده، محصولات دلخواه خود را فیلتر کرده و به نمایش بگذارید.

چرا نمایش محصولات بر اساس دسته اهمیت دارد؟

فیلتر کردن محصولات و نمایش آن‌ها در دسته‌بندی‌های هدفمند، به کاربر کمک می‌کند تا سریع‌تر به کالای مورد نظر خود برسد. این کار باعث:

• افزایش نرخ تبدیل (Conversion Rate): نمایش محصولات مرتبط به نیاز کاربر.

• بهبود تجربه کاربری (UX): جلوگیری از شلوغی صفحات و سردرگمی مشتری.

• سئوی داخلی بهتر: ایجاد صفحات فرود (Landing Pages) تخصصی برای دسته‌بندی‌های مختلف.

کد نمایش محصولات یک دسته خاص در ووکامرس

برای این کار ما از کلاس قدرتمند WP_Query استفاده می‌کنیم. شما باید نامک (Slug) دسته مورد نظر خود را جایگزین کنید.

کد زیر را در فایل مورد نظر خود (مثلاً index.php یا یک برگه سفارشی) قرار دهید:

<?php
$args = array(
    'post_type'      => 'product',
    'posts_per_page' => 4,
    'product_cat'    => 'mobile-accessories', // نامک (Slug) دسته بندی را اینجا وارد کنید
    'orderby'        => 'date',
    'order'          => 'DESC'
);

$loop = new WP_Query( $args );

if ( $loop->have_posts() ) {
    echo '<ul class="products">';
    while ( $loop->have_posts() ) : $loop->the_post();
        wc_get_template_part( 'content', 'product' );
    endwhile;
    echo '</ul>';
} else {
    echo __( 'هیچ محصولی در این دسته بندی یافت نشد.' );
}

wp_reset_postdata();
?>

چگونه نامک (Slug) دسته را پیدا کنیم؟

کافیست در پیشخوان وردپرس به مسیر محصولات > دسته‌بندی‌ها بروید. در ستون “نامک”، عبارتی که روبروی هر دسته نوشته شده است (مثلاً digital-gadgets) همان چیزی است که باید در کد بالا در مقابل 'product_cat' قرار دهید.

روش جایگزین: استفاده از شورت‌کد (Shortcode)

اگر نمی‌خواهید مستقیماً وارد فایل‌های قالب شوید، ووکامرس این امکان را از طریق شورت‌کد زیر در ویرایشگر وردپرس به شما می‌دهد:

• limit: تعداد محصولات.

• category: نامک دسته‌بندی مورد نظر.

نکات کلیدی برای سئو

1. استفاده از تگ‌های Heading: قبل از نمایش محصولات، از یک تگ H2 شامل نام دسته استفاده کنید (مثلاً: جدیدترین اکسسوری‌های موبایل).

2. بهینه‌سازی تصاویر: مطمئن شوید تصاویر محصولات در این بخش دارای تگ alt مناسب هستند.

3. لینک به صفحه اصلی دسته: در انتهای لیست محصولات، دکمه‌ای برای “مشاهده همه محصولات این دسته” قرار دهید تا لینک‌سازی داخلی شما تقویت شود.

سوالات متداول (FAQ)

۱. چطور محصولات چندین دسته را همزمان نشان دهم؟ کافیست در کد بالا، نامک‌ها را با کاما از هم جدا کنید؛ مثلاً: 'product_cat' => 'mobile, tablet'.

۲. آیا این کد با المنتور هم کار می‌کند؟ بله، شما می‌توانید این کد را در یک المان “کد کوتاه” یا “HTML سفارشی” در المنتور قرار دهید تا محصولات نمایش داده شوند.

آیا تمایل دارید نحوه نمایش محصولات یک برند خاص (اگر از افزونه‌های برند استفاده می‌کنید) را هم برایتان آماده کنم؟