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

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

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

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

پیش‌نیازها: یه سایت وردپرسی با ووکامرس فعال و چند تا محصول ثبت‌شده. دسترسی به فایل‌های سایت از طریق مدیریت فایل هاست یا FTP. و آشنایی مقدماتی با PHP در حدی که بتونید کد رو در فایل درست بذارید.

قبل از شروع، آیا واقعاً به کدنویسی نیاز دارید؟

این سؤال رو صادقانه جواب می‌دیم چون ممکنه چند ساعت از وقتتون رو نجات بده.

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

ولی سه تا حالت هست که نوشتن افزونه‌ی اختصاصی واقعاً منطقیه. اول وقتی که می‌خواید کنترل کامل روی خروجی HTML داشته باشید، مثلاً برای هماهنگ کردن ظاهر با طراحی خاص سایتتون. دوم وقتی که نمی‌خواید به قالب وابسته باشید و می‌خواید با تعویض قالب، این قابلیت باقی بمونه. و سوم وقتی که دارید یاد می‌گیرید و می‌خواید بفهمید پشت صحنه چطور کار می‌کنه.

اگه یکی از این سه تا برای شما صدق می‌کنه، بریم سراغ کار.

چیزی که قراره بسازیم

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

ساختار پوشه‌ی افزونه هم این شکلیه.

wp-content/plugins/mihanwp-product-tabs/
├── mihanwp-product-tabs.php
└── assets/
    ├── css/
    │   └── style.css
    └── js/
        └── main.js

یه نکته‌ی مهم درباره‌ی نام‌گذاری. تو این آموزش همه‌ی توابع رو با پیشوند mwp_pt_ می‌نویسیم. این کار سلیقه‌ای نیست. وردپرس فضای نام مشترکی داره و اگه اسم تابع شما با تابع یه افزونه یا قالب دیگه یکی بشه، سایت با خطای مرگبار از کار می‌افته. پیشوند اختصاصی و غیرتکراری، ساده‌ترین راه جلوگیری از این اتفاقه.

گام ۱. ساخت اسکلت افزونه

اول از طریق مدیریت فایل هاست یا FTP وارد مسیر wp-content/plugins بشید. توجه کنید که این کار از پیشخوان وردپرس انجام نمی‌شه و باید مستقیم با فایل‌های سایت کار کنید.

یه پوشه‌ی جدید به اسم mihanwp-product-tabs بسازید و داخلش یه فایل با همون نام و پسوند php ایجاد کنید. بعد این کد رو داخلش بذارید.

<?php
/*
Plugin Name: MihanWP Product Tabs
Plugin URI:  https://mihanwp.com
Description: نمایش محصولات ووکامرس در قالب تب‌های جداگانه
Author:      MihanWP
Version:     1.0.0
Author URI:  https://mihanwp.com
Text Domain: mihanwp-product-tabs
*/

// جلوگیری از دسترسی مستقیم به فایل
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

دو تا نکته درباره‌ی این کد که در خیلی از آموزش‌ها جا می‌افته.

اول اینکه فایل حتماً باید با تگ <?php شروع بشه. اگه این خط رو جا بندازید، وردپرس محتوای فایل رو به‌عنوان متن ساده چاپ می‌کنه و افزونه‌تون کار نمی‌کنه.

دوم اینکه اون بررسی ABSPATH یه محافظت امنیتی ساده ولی مهمه. اگه کسی مستقیم آدرس این فایل رو در مرورگر باز کنه، اجرا شدنش متوقف می‌شه.

حالا به پیشخوان وردپرس برید، به بخش افزونه‌ها سر بزنید و افزونه‌ی جدید رو فعال کنید. فعلاً کاری نمی‌کنه ولی باید بدون خطا فعال بشه.

گام ۲. بارگذاری هوشمند استایل و اسکریپت

حالا باید فایل‌های CSS و JS رو به وردپرس معرفی کنیم. ولی یه تفاوت مهم با روش رایج داریم. خیلی از آموزش‌ها فایل‌ها رو روی همه‌ی صفحات سایت بارگذاری می‌کنن. یعنی حتی صفحه‌ی تماس با ما هم فایل اسلایدر رو دانلود می‌کنه بدون اینکه بهش نیاز داشته باشه. برای یه فروشگاه که سرعتش مستقیم روی فروش اثر می‌ذاره، این کار درستی نیست.

روش بهتر اینه که فایل‌ها رو فقط ثبت کنیم و بعد داخل خود شورت‌کد بارگذاریشون کنیم. این‌جوری فقط صفحه‌ای که واقعاً شورت‌کد داره، این فایل‌ها رو می‌گیره. این کد رو به فایل PHP اضافه کنید:

/**
 * ثبت فایل‌های استایل و اسکریپت
 */
function mwp_pt_register_assets() {

    wp_register_style(
        'mwp-pt-style',
        plugins_url( 'assets/css/style.css', __FILE__ ),
        array(),
        '1.0.0'
    );

    wp_register_script(
        'mwp-pt-main',
        plugins_url( 'assets/js/main.js', __FILE__ ),
        array( 'jquery' ),
        '1.0.0',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'mwp_pt_register_assets' );

/**
 * بارگذاری فایل‌ها فقط زمانی که واقعاً لازم است
 */
function mwp_pt_enqueue_assets() {
    wp_enqueue_style( 'mwp-pt-style' );
    wp_enqueue_script( 'mwp-pt-main' );
}

تابع دوم رو بعداً از داخل شورت‌کدها صدا می‌زنیم.

حالا پوشه‌ی assets و زیرپوشه‌های css و js رو بسازید و دو تا فایل خالی style.css و main.js داخلشون ایجاد کنید. محتواشون رو در گام‌های بعدی پر می‌کنیم.

دقت کنید که هندل فایل‌ها هم پیشوند اختصاصی داره. اگه اسم هندل رو چیزی مثل style بذارید، احتمال تداخل با قالب یا افزونه‌های دیگه خیلی زیاده و ممکنه فایل شما اصلاً بارگذاری نشه.

گام ۳. ساخت شورت‌کد تب‌ها

تب‌بندی ما از دو تا شورت‌کد تشکیل می‌شه. یکی نقش ظرف بیرونی رو داره و اون یکی هر تب رو می‌سازه.

شورت‌کد ظرف بیرونی

/**
 * شورت‌کد ظرف تب‌ها
 * [mwp_tab] ... [/mwp_tab]
 */
function mwp_pt_tab( $atts, $content = null ) {

    mwp_pt_enqueue_assets();

    static $id_counter = 1;

    $output  = '<div id="mwp-tab-' . absint( $id_counter ) . '" class="mwp-tab">';
    $output .= do_shortcode( $content );
    $output .= '</div>';

    $id_counter++;

    return $output;
}
add_shortcode( 'mwp_tab', 'mwp_pt_tab' );

شورت‌کد هر تب

/**
 * شورت‌کد یک تب
 * [mwp_tab_item title="جدیدترین‌ها" active="true"] ... [/mwp_tab_item]
 */
function mwp_pt_tab_item( $atts, $content = null ) {

    $atts = shortcode_atts(
        array(
            'title'  => '',
            'active' => 'false',
        ),
        $atts,
        'mwp_tab_item'
    );

    static $id_counter = 1;

    $classes = array( 'tab-item' );

    // پارامتر active مستقیماً کلاس active را اضافه می‌کند
    if ( 'true' === $atts['active'] ) {
        $classes[] = 'active';
    }

    $slug = sanitize_title( $atts['title'] );

    $output  = '<div data-target="tab-' . esc_attr( $slug ) . '" ';
    $output .= 'class="' . esc_attr( implode( ' ', $classes ) ) . '">';
    $output .= esc_html( $atts['title'] );
    $output .= '</div>';

    $output .= '<div id="tab-' . esc_attr( $slug . '-' . $id_counter ) . '" class="tab-content">';
    $output .= do_shortcode( $content );
    $output .= '</div>';

    $id_counter++;

    return $output;
}
add_shortcode( 'mwp_tab_item', 'mwp_pt_tab_item' );

سه تفاوت مهم با نمونه‌کدهای رایج

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

خبری از تابع extract() نیست. این تابع مقادیر آرایه رو به متغیرهای مستقل تبدیل می‌کنه و کد رو به‌ظاهر کوتاه‌تر می‌کنه، ولی باعث می‌شه معلوم نباشه هر متغیر از کجا اومده. ما مستقیم از $atts['title'] استفاده می‌کنیم که هم خواناتره و هم امن‌تر.

عنوان تب با esc_html() پاک‌سازی می‌شه، نه esc_attr(). این دو تابع برای دو موقعیت متفاوتن. هر جا متن قراره داخل یک ویژگی HTML بشینه از esc_attr استفاده می‌کنیم و هر جا قراره به‌عنوان محتوای قابل مشاهده چاپ بشه از esc_html. رعایت این تفکیک بخشی از کدنویسی امن در وردپرسه.

پارامتر active واقعاً کار می‌کنه. در بسیاری از نسخه‌های این آموزش، شورت‌کد کلاسی مثل active-true می‌سازه در حالی که جاوااسکریپت دنبال کلاس active می‌گرده. چون این دو با هم مطابقت ندارن، پارامتر عملاً بی‌اثره و فقط به‌خاطر حالت پیش‌فرض، ظاهراً درست به نظر می‌رسه. در کد بالا مستقیم خود کلاس active اضافه می‌شه.

گام ۴. جاوااسکریپت تب‌ها

تا اینجا خروجی HTML داریم ولی کلیک کردن روی تب‌ها هیچ کاری نمی‌کنه. این کد رو در فایل assets/js/main.js بذارید:

(function ($) {
    'use strict';

    $('.mwp-tab').each(function () {

        var $wrapper = $(this),
            $tabs    = $wrapper.find('.tab-item'),
            $panels  = $wrapper.find('.tab-content');

        // جدا کردن دکمه‌ها و محتواها در دو ظرف مستقل
        $tabs.wrapAll('<div class="tabset"></div>');
        $panels.wrapAll('<div class="tabs-container"></div>');

        // اگر هیچ تبی فعال نبود، اولی را فعال کن
        if (!$tabs.filter('.active').length) {
            $tabs.first().addClass('active');
        }

        // نمایش پنل متناظر با تب فعال
        var activeIndex = $tabs.index($tabs.filter('.active'));
        $panels.hide().removeClass('active');
        $panels.eq(activeIndex).show().addClass('active');

        // مدیریت کلیک
        $tabs.on('click', function () {

            var $self = $(this);

            if ($self.hasClass('active')) {
                return;
            }

            $tabs.removeClass('active');
            $self.addClass('active');

            $panels.hide().removeClass('active');
            $panels.eq($tabs.index($self)).show().addClass('active');
        });

    });

})(jQuery);

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

یه تفاوت با نسخه‌های قدیمی‌تر این کد وجود داره. اینجا از $tabs.index($self) استفاده شده به‌جای $self.index(). دلیلش اینه که بعد از عملیات wrapAll، اندیس عنصر نسبت به ظرف جدید محاسبه می‌شه و روش اول قابل اتکاتره.

گام ۵. شورت‌کد نمایش محصولات

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

این کد رو به فایل PHP افزونه اضافه کنید:

/**
 * شورت‌کد نمایش محصولات
 * [mwp_products type="recent" layout="grid" columns="3" quantity="8"]
 */
function mwp_pt_products( $atts ) {

    $atts = shortcode_atts(
        array(
            'layout'   => 'grid',     // grid یا carousel
            'columns'  => '3',        // 2 تا 4
            'quantity' => '8',
            'type'     => 'recent',   // recent | featured | sale | best_selling
        ),
        $atts,
        'mwp_products'
    );

    if ( ! class_exists( 'WooCommerce' ) ) {
        return '<p>برای استفاده از این شورت‌کد باید ووکامرس نصب و فعال باشد.</p>';
    }

    mwp_pt_enqueue_assets();

    $args = array(
        'post_type'           => 'product',
        'post_status'         => 'publish',
        'ignore_sticky_posts' => 1,
        'posts_per_page'      => absint( $atts['quantity'] ),
        'meta_query'          => WC()->query->get_meta_query(),
        'tax_query'           => WC()->query->get_tax_query(),
    );

    switch ( $atts['type'] ) {

        case 'featured':
            $args['tax_query'][] = array(
                'taxonomy' => 'product_visibility',
                'field'    => 'name',
                'terms'    => 'featured',
                'operator' => 'IN',
            );
            break;

        case 'sale':
            $args['post__in'] = array_merge( array( 0 ), wc_get_product_ids_on_sale() );
            break;

        case 'best_selling':
            $args['meta_key'] = 'total_sales';
            $args['orderby']  = 'meta_value_num';
            $args['order']    = 'DESC';
            break;
    }

    $products = new WP_Query( $args );

    if ( ! $products->have_posts() ) {
        wp_reset_postdata();
        return '<p class="mwp-pt-empty">محصولی برای نمایش وجود ندارد.</p>';
    }

    $classes = array( 'products', 'mwp-pt-' . sanitize_html_class( $atts['layout'] ) );

    ob_start();
    ?>

    <ul class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>"
        data-columns="<?php echo absint( $atts['columns'] ); ?>">

        <?php while ( $products->have_posts() ) : $products->the_post(); ?>
            <li class="product">
                <?php
                do_action( 'woocommerce_before_shop_loop_item' );
                do_action( 'woocommerce_before_shop_loop_item_title' );
                do_action( 'woocommerce_shop_loop_item_title' );
                do_action( 'woocommerce_after_shop_loop_item_title' );
                do_action( 'woocommerce_after_shop_loop_item' );
                ?>
            </li>
        <?php endwhile; ?>

    </ul>

    <?php
    wp_reset_postdata();

    return ob_get_clean();
}
add_shortcode( 'mwp_products', 'mwp_pt_products' );

پارامترهای شورت‌کد

چهار نکته درباره‌ی این کد

بررسی ووکامرس در ابتدای تابع انجام می‌شه و مقدار برمی‌گردونه. در بسیاری از نمونه‌های مشابه، پیام «ووکامرس را نصب کنید» با echo چاپ می‌شه. مشکل اینه که شورت‌کد باید همیشه خروجی رو برگردونه نه چاپ کنه. اگه echo کنید، اون پیام بالای صفحه ظاهر می‌شه نه جای شورت‌کد.

حالت خالی بودن نتیجه هم مدیریت شده. اگه هیچ محصولی پیدا نشه، به‌جای اینکه تابع بی‌صدا چیزی برنگردونه، یه پیام مشخص نشون می‌ده. این هم برای کاربر بهتره هم موقع عیب‌یابی خیلی کمک می‌کنه.

به‌جای چند بار تعریف کردن آرایه‌ی کوئری، از switch استفاده شده. نسخه‌های رایج این کد، برای هر نوع محصول کل آرایه رو از اول می‌سازن که هم طولانیه و هم اگه بخواید یه چیزی رو تغییر بدید باید در چهار جا تغییرش بدید.

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

گام ۶. استایل‌دهی با پشتیبانی از راست‌چین

این بخش برای سایت فارسی از همه مهم‌تره و دقیقاً همون‌جاییه که بیشتر آموزش‌ها اشتباه می‌کنن. اکثر نمونه‌کدهای موجود با ویژگی‌هایی مثل margin-right و left: 0 نوشته شدن. این‌ها برای سایت چپ‌چین درستن، ولی روی یه فروشگاه فارسی راست‌چین، فاصله‌ی تب‌ها و جای برچسب تخفیف به‌هم می‌ریزه.

راه‌حل استفاده از ویژگی‌های منطقی CSS است. این ویژگی‌ها به‌جای چپ و راست، از مفهوم ابتدا و انتها استفاده می‌کنن و خودشون رو با جهت صفحه تطبیق می‌دن. این کد رو در فایل assets/css/style.css بذارید:

/* ----- تب‌ها ----- */
.mwp-tab .tabset {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 24px;
}

.mwp-tab .tab-item {
    padding: 8px 16px;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background .2s, color .2s;
}

.mwp-tab .tab-item:hover {
    background: #e8e8e8;
}

.mwp-tab .tab-item.active {
    background: #111;
    color: #fff;
}

/* ----- شبکه‌ی محصولات ----- */
.mwp-tab ul.products {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mwp-tab ul.products.mwp-pt-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .mwp-tab ul.products.mwp-pt-grid[data-columns="3"] {
        grid-template-columns: repeat(3, 1fr);
    }
    .mwp-tab ul.products.mwp-pt-grid[data-columns="4"] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.mwp-tab .product {
    position: relative;
    text-align: center;
}

/* برچسب تخفیف با ویژگی منطقی، در راست‌چین هم درست می‌نشیند */
.mwp-tab .product .onsale {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    padding: 4px 8px;
    background: #d63638;
    color: #fff;
    border-radius: 4px;
    font-size: .8em;
}

.mwp-pt-empty {
    padding: 16px;
    background: #f5f5f5;
    border-radius: 4px;
    text-align: center;
}

اگه با ویژگی‌های منطقی آشنا نیستید، معادل‌هاشون ساده‌ست. margin-block-end جای margin-bottom می‌شینه و inset-inline-start در سایت راست‌چین معادل right و در سایت چپ‌چین معادل left عمل می‌کنه. با یه بار یاد گرفتنشون، دیگه لازم نیست برای راست‌چین کد جداگانه بنویسید.

گام ۷. افزودن حالت اسلایدری

حالا نوبت چیدمان اسلایدریه. اینجا یه تصمیم مهم گرفتیم که باید توضیحش بدیم.

چرا سراغ Owl Carousel نرفتیم

بیشتر آموزش‌های موجود از کتابخانه‌ی Owl Carousel استفاده می‌کنن. سه تا دلیل باعث شد ازش فاصله بگیریم.

اول اینکه این کتابخانه سال‌هاست به‌روزرسانی نشده و وابسته به jQuery ئه. دوم اینکه یه فایل جاوااسکریپت اضافه به سایت فروشگاهی شما اضافه می‌کنه که روی سرعت اثر می‌ذاره. و سوم که مهم‌ترینه، این کتابخانه وقتی داخل یه تب مخفی مقداردهی می‌شه، عرض عناصر رو اشتباه محاسبه می‌کنه. برای همینه که در نسخه‌های قدیمی این آموزش، یه تابع اضافه برای تازه‌سازی اسلایدر هنگام تعویض تب لازم بود.

راه‌حل ساده‌تر استفاده از قابلیت scroll-snap در خود CSS است. بدون هیچ کتابخانه‌ای، بدون jQuery، و مهم‌تر از همه بدون اون مشکل محاسبه‌ی عرض در تب مخفی. در راست‌چین هم به‌صورت طبیعی درست کار می‌کنه.

این کد رو به انتهای فایل CSS اضافه کنید.

/* ----- چیدمان اسلایدری بدون کتابخانه ----- */
.mwp-tab ul.products.mwp-pt-carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 0;
    padding-block-end: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.mwp-tab ul.products.mwp-pt-carousel .product {
    flex: 0 0 auto;
    inline-size: 70%;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .mwp-tab ul.products.mwp-pt-carousel[data-columns="3"] .product {
        inline-size: calc((100% - 48px) / 3);
    }
    .mwp-tab ul.products.mwp-pt-carousel[data-columns="4"] .product {
        inline-size: calc((100% - 72px) / 4);
    }
}

همین. حالا اگه در شورت‌کد مقدار layout="carousel" بذارید، محصولات به‌صورت افقی و با اسکرول نرم نمایش داده می‌شن و روی موبایل هم با کشیدن انگشت کار می‌کنن.

اگه به قابلیت‌های بیشتری مثل دکمه‌های ناوبری یا پخش خودکار نیاز دارید، به‌جای Owl سراغ کتابخانه‌های فعال‌تری مثل Splide یا Swiper برید. فقط یه توصیه‌ی عملی برای سایت‌های ایرانی. فایل کتابخانه رو روی هاست خودتون بذارید و از CDN خارجی صدا نزنید، چون در دسترس بودن این سرویس‌ها برای کاربر ایرانی همیشه پایدار نیست و اگه فایل لود نشه، اسلایدر شما از کار می‌افته.

استفاده از شورت‌کد در برگه

کار تمومه. حالا به برگه یا نوشته‌ی موردنظرتون برید و شورت‌کد رو اضافه کنید. اگه از ویرایشگر بلوکی استفاده می‌کنید، یه بلوک شورت‌کد اضافه کنید و کد رو داخلش بذارید.

یه نمونه‌ی کامل با چهار تب:

[mwp_tab]
    [mwp_tab_item title="جدیدترین‌ها" active="true"]
        [mwp_products type="recent" layout="grid" columns="4" quantity="8"]
    [/mwp_tab_item]

    [mwp_tab_item title="پیشنهاد ویژه"]
        [mwp_products type="featured" layout="grid" columns="4" quantity="8"]
    [/mwp_tab_item]

    [mwp_tab_item title="تخفیف‌دار"]
        [mwp_products type="sale" layout="grid" columns="4" quantity="8"]
    [/mwp_tab_item]

    [mwp_tab_item title="پرفروش‌ترین‌ها"]
        [mwp_products type="best_selling" layout="carousel" columns="4" quantity="12"]
    [/mwp_tab_item]
[/mwp_tab]

دقت کنید که در تب اول از active="true" استفاده شده. اگه این پارامتر رو در هیچ تبی نذارید، جاوااسکریپت خودش تب اول رو فعال می‌کنه.

عیب‌یابی خطاهای رایج

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

سؤالات متداول

جمع‌بندی

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

اگه می‌خواید یه قدم جلوتر برید، چند تا ایده براتون داریم. می‌تونید پارامتری برای فیلتر کردن بر اساس دسته‌بندی اضافه کنید، تنظیمات افزونه رو به پیشخوان بیارید تا لازم نباشه هر بار کد رو دست بزنید، یا شورت‌کد رو به یک بلوک ویرایشگر تبدیل کنید تا استفاده‌ش برای مشتری‌هاتون راحت‌تر بشه.

اگه جایی گیر کردید یا خطایی گرفتید، در بخش نظرات بنویسید تا کمکتون کنیم.موفق و پیروز باشید! 🙂

تیم تولید محتوا

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