چگونه یک منوی کشویی (Dropdown) سفارشی در وردپرس ایجاد کنیم

چگونه یک منوی کشویی (Dropdown) سفارشی در وردپرس ایجاد کنیم

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

مقدمه

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

آشنایی با ساختار منوی وردپرس

۱. ناحیه مدیریت منوها

برای دسترسی به تنظیمات منو، به مسیر نمایش → منوها در پنل مدیریت وردپرس بروید. در این بخش می‌توانید یک منوی جدید ایجاد کنید، آیتم‌های آن را اضافه یا حذف کنید و ترتیب نمایش را تغییر دهید.

۲. افزودن آیتم به منو

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

۳. تعیین سلسله مراتب آیتم‌ها

برای ایجاد منوی کشویی، باید آیتم‌ها را به صورت «زیرمنو» (Child) تعیین کنید. برای این کار، آیتم را کمی به سمت راست بکشید تا کمی به داخل جعبهٔ منو جابه‌جا شود. این عمل در وردپرس به‌صورت خودکار سطح سلسله‌مراتبی را ایجاد می‌کند.

ساخت منوی کشویی سفارشی با CSS و JavaScript ساده

۱. ایجاد کلاس‌های CSS برای منو

در فایل CSS قالب خود (معمولاً style.css)، کدهای زیر را اضافه کنید. این کدها منوی کشویی را به صورت افقی نمایش می‌دهند و بر روی کلیک نشان می‌دهند یا پنهان می‌کنند.

.custom-dropdown {
    position: relative;
    display: inline-block;
}

.custom-dropdown a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    background: #333;
    color: #fff;
}

.custom-dropdown .dropdown-content {
    display: none;
    position: absolute;
    background: #444;
    min-width: 160px;
    z-index: 1;
}

.custom-dropdown .dropdown-content a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.custom-dropdown .dropdown-content a:hover {
    background: #555;
}

۲. افزودن کلاس به منو در PHP

در فایل functions.php قالب خود، افزونهٔ زیر را اضافه کنید تا کلاس custom-dropdown به تمامی آیتم‌های سطح اول منو اعمال شود.

add_filter( 'nav_menu_css_class', 'add_custom_dropdown_class', 10, 4 );
function add_custom_dropdown_class( $classes, $item, $args, $depth ) {
    if ( $depth == 0 ) {
        $classes[] = 'custom-dropdown';
    }
    return $classes;
}

۳. فعال‌سازی نمایش زیرمنوها با جاوااسکریپت

کد زیر را در فایل JavaScript قالب (مثلاً script.js) قرار دهید تا بر روی کلیک بر روی آیتم‌های سطح اول، زیرمنوها نمایش داده شوند.

document.addEventListener('DOMContentLoaded', function() {
    const dropdowns = document.querySelectorAll('.custom-dropdown > a');
    dropdowns.forEach(function(dropdown) {
        dropdown.addEventListener('click', function(e) {
            e.preventDefault();
            const content = this.nextElementSibling;
            if (content.style.display === 'block') {
                content.style.display = 'none';
            } else {
                content.style.display = 'block';
            }
        });
    });
});

نمونه عملی: منوی کشویی برای دسته‌بندی‌های فروشگاه WooCommerce

۱. ایجاد منو در وردپرس

به منوی نمایش → منوها رفته و یک منو جدید با نام «Shop Menu» ایجاد کنید. سپس آیتم‌های دسته‌بندی محصولات را به آن اضافه کنید. هر دسته را به صورت زیرمنو در منوی «Shop» قرار دهید.

۲. اضافه کردن کلاس به دسته‌بندی‌ها

با استفاده از فیلتر nav_menu_css_class، کلاس shop-dropdown را به دسته‌بندی‌ها اضافه کنید تا بتوانید برای آن‌ها استایل جداگانه تعیین کنید.

add_filter( 'nav_menu_css_class', 'add_shop_dropdown_class', 10, 4 );
function add_shop_dropdown_class( $classes, $item, $args, $depth ) {
    if ( in_array('category', $item->classes) && $depth == 0 ) {
        $classes[] = 'shop-dropdown';
    }
    return $classes;
}

۳. استایل مخصوص دسته‌بندی‌ها

در CSS، ظاهر دسته‌بندی‌ها را به‌صورت زیر تنظیم کنید.

.shop-dropdown a {
    background: #0066cc;
    color: #fff;
}

بهینه‌سازی سئو برای منوی کشویی

منوی کشویی نه تنها تجربه کاربری را بهبود می‌بخشد، بلکه می‌تواند به سئو سایت کمک کند. نکات زیر را در نظر بگیرید:

• استفاده از لینک‌های داخلی: مطمئن شوید که لینک‌های زیرمنو به صفحات مرتبط و ارزشمند هدایت می‌کنند.
• عنوان‌های واضح و کلیدی: کلمات کلیدی را در برچسب‌های لینک استفاده کنید تا موتورهای جستجو بهتر محتوای شما را درک کنند.
• استفاده از <nav> برای منو: کد HTML منو را در تگ <nav> قرار دهید تا ساختار معنایی بهینه شود.
• سئو تصاویر: اگر از آیکون یا تصویر در منو استفاده می‌کنید، از تگ alt مناسب بهره ببرید.

نتیجه‌گیری

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