نمایش آخرین محصولات ووکامرس در صفحه اول وردپرس با استفاده از کد

برای نمایش آخرین محصولات ووکامرس در صفحه اول وردپرس با استفاده از کد، می‌توانید از کدهای PHP در فایل‌های قالب (مانند functions.php یا front-page.php) و همچنین شورت‌کدهای وردپرس استفاده کنید. در ادامه چند روش مختلف برای نمایش آخرین محصولات آورده شده است با مجله رادیب تا پایان این آموزش همراه باشید

1. استفاده از شورت‌کد در برگه صفحه اصلی

اگر از ویرایشگر وردپرس برای ساخت صفحه اصلی استفاده می‌کنید، می‌توانید از شورت‌کد زیر برای نمایش آخرین محصولات ووکامرس استفاده کنید:

[recent_products per_page="8" columns="4"]

توضیحات:

• per_page="8" → تعداد محصولات نمایش داده‌شده را مشخص می‌کند.
• columns="4" → تعداد ستون‌ها در هر ردیف را مشخص می‌کند.

2. استفاده از کد PHP در فایل قالب (front-page.php یا index.php)

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

خرید هاست پرسرعت cPanel و DirectAdmin با بهترین قیمت از رادیب، کلیک کنید

<?php
// آرگومان‌های مربوط به کوئری محصولات
$args = array(
    'post_type'      => 'product',  // نوع پست محصولات ووکامرس
    'posts_per_page' => 8,          // تعداد محصولات قابل نمایش
    'orderby'        => 'date',     // مرتب‌سازی بر اساس تاریخ
    'order'          => 'DESC'      // نمایش جدیدترین محصولات
);

// اجرای کوئری محصولات
$loop = new WP_Query($args);

if ($loop->have_posts()) :
    echo '<ul class="latest-products">';
    while ($loop->have_posts()) : $loop->the_post();
        global $product;
        ?>
        <li>
            <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail('medium'); ?>
                <h2><?php the_title(); ?></h2>
                <span class="price"><?php echo $product->get_price_html(); ?></span>
            </a>
        </li>
        <?php
    endwhile;
    echo '</ul>';
    wp_reset_postdata();
else :
    echo __('هیچ محصولی یافت نشد');
endif;
?>

توضیحات کد:

• نوع پست product برای نمایش محصولات ووکامرس.
• posts_per_page برای تعداد محصولات قابل نمایش.
• the_post_thumbnail() برای نمایش تصویر محصول.
• the_permalink() لینک به صفحه محصول.
• get_price_html() برای نمایش قیمت محصول.
• wp_reset_postdata() بازنشانی داده‌های وردپرس پس از اجرای کوئری.

3. استفاده از کد PHP در ویجت وردپرس (functions.php)

برای نمایش آخرین محصولات به‌عنوان یک ابزارک در سایت، می‌توانید کد زیر را در فایل functions.php قالب خود اضافه کنید:

خرید سرور مجازی با بهترین قیمت از رادیب، کلیک کنید

function latest_woocommerce_products_widget() {
    $args = array(
        'post_type'      => 'product',
        'posts_per_page' => 6,
        'orderby'        => 'date',
        'order'          => 'DESC'
    );

    $products = new WP_Query($args);
    
    if ($products->have_posts()) {
        echo '<ul class="latest-woocommerce-products">';
        while ($products->have_posts()) : $products->the_post();
            global $product;
            echo '<li>';
            echo '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
            echo '<p>' . $product->get_price_html() . '</p>';
            echo '</li>';
        endwhile;
        echo '</ul>';
    } else {
        echo '<p>محصولی موجود نیست.</p>';
    }

    wp_reset_postdata();
}

// ثبت ابزارک
function register_latest_products_widget() {
    wp_add_dashboard_widget('latest_products_widget', 'آخرین محصولات', 'latest_woocommerce_products_widget');
}
add_action('wp_dashboard_setup', 'register_latest_products_widget');

نحوه استفاده:

• این ابزارک پس از اجرای کد، در داشبورد وردپرس نمایش داده می‌شود.
• شما می‌توانید از این ابزارک برای نمایش آخرین محصولات در صفحه اصلی سایت خود استفاده کنید.

4. نمایش آخرین محصولات در صفحه اصلی با استفاده از ویجت ووکامرس

اگر نمی‌خواهید از کدنویسی استفاده کنید، می‌توانید از ویجت‌های پیش‌فرض ووکامرس استفاده کنید:

ادمین اختصاصی وبسایت، افزایش ترافیک سایت و سئو در رادیب، کلیک کنید

1. به پیشخوان وردپرس بروید.
2. به بخش نمایش > ابزارک‌ها بروید.
3. ابزارک "آخرین محصولات ووکامرس" را انتخاب کنید و آن را به ناحیه موردنظر اضافه کنید.
4. تعداد محصولات و تعداد ستون‌های نمایش را تنظیم کنید.

5. نمایش محصولات در قالب با استفاده از تابع WooCommerce

شما می‌توانید از توابع داخلی ووکامرس برای نمایش آخرین محصولات در قالب سایت استفاده کنید:

<?php
echo do_shortcode('[products limit="8" columns="4" orderby="date" order="DESC"]');
?>

این کد را می‌توانید در هر قسمتی از قالب خود قرار دهید تا محصولات به نمایش درآید.

6. استایل‌دهی به نمایش محصولات با CSS

پس از افزودن کدهای فوق، برای بهبود ظاهر نمایش محصولات می‌توانید از CSS زیر استفاده کنید:

.latest-products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
}

.latest-products li {
    width: calc(25% - 20px);
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
}

.latest-products li img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.latest-products li h2 {
    font-size: 18px;
    margin: 10px 0;
}

.latest-products li .price {
    font-weight: bold;
    color: #e91e63;
}

جمع‌بندی

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

برای رشد بیشتر در اینستاگرام از ربات هوشمند رادیب استفاده کنید. ثبت نام رایگان

1. شورت‌کد ساده [recent_products] در برگه‌ها.
2. استفاده از کد PHP در قالب سایت.
3. ایجاد ابزارک‌های سفارشی در وردپرس.
4. استفاده از ابزارک‌های آماده ووکامرس در داشبورد وردپرس.

اگر به دنبال راه‌حلی سریع و ساده هستید، شورت‌کد بهترین گزینه است، اما برای انعطاف‌پذیری بیشتر و نمایش سفارشی، استفاده از کد PHP توصیه می‌شود اگر نیاز به راهنمایی بیشتر دارید با کارشناسان رادیب در بخش پشتیبانی در ارتباط باشید..