نوار جستجو در منوی سایت یکی از مهم‌ترین عناصر تجربه کاربری (UX) است. با اضافه کردن باکس جستجو به منوی اصلی، کاربران می‌توانند به سرعت محتوای مورد نظر خود را پیدا کنند که این موضوع مستقیماً روی Bounce Rate و زمان ماندن در سایت تأثیر مثبت دارد.

در این راهنما، ۴ روش مختلف برای اضافه کردن نوار جستجو به منوی وردپرس را بررسی می‌کنیم - از ساده‌ترین (بدون کد) تا پیشرفته‌ترین.

چرا باید نوار جستجو به منو اضافه کنید؟

• بهبود UX: کاربران بدون سردرگمی مطلب را پیدا می‌کنند
• کاهش Bounce Rate: به جای خروج، کاربر جستجو می‌کند
• افزایش مدت ماندن: کاربران بیشتر در سایت می‌مانند
• بهبود SEO: سیگنال‌های مثبت به گوگل
• افزایش فروش: در فروشگاه‌ها، دسترسی سریع به محصولات

مقایسه ۴ روش اضافه کردن جستجو به منو

روش ۱: ویرایشگر سایت (Full Site Editor) - بدون کد

اگر از قالب‌های بلاکی جدید وردپرس (مانند Twenty Twenty-Four) استفاده می‌کنید، این ساده‌ترین روش است:

1. به نمایش » ویرایشگر (Appearance → Editor) بروید
2. روی Navigation یا Header کلیک کنید
3. دکمه + را بزنید و Search را جستجو کنید
4. بلاک Search را به منو اضافه کنید
5. Save کنید

روش ۲: تنظیمات قالب (برای قالب‌های محبوب)

بسیاری از قالب‌های کلاسیک محبوب این گزینه را دارند:

قالب Astra

1. به نمایش » سفارشی‌سازی بروید
2. Header Builder را انتخاب کنید
3. عنصر Search را به Header اضافه کنید
4. Publish کنید

قالب Kadence

1. به Appearance → Customize بروید
2. Header → Primary Navigation را انتخاب کنید
3. Navigation Search را روی Enable بگذارید
4. Publish کنید

روش ۳: افزونه Ivory Search (همه قالب‌ها)

اگر قالب شما گزینه داخلی ندارد، از افزونه Ivory Search استفاده کنید:

1. به افزونه‌ها » افزودن بروید
2. Ivory Search را جستجو و نصب کنید
3. افزونه را فعال کنید
4. به Ivory Search » Menu Search بروید
5. Display search form in menu را فعال کنید
6. منوی مورد نظر را انتخاب کنید
7. تنظیمات را Save کنید

تنظیمات پیشرفته Ivory Search

• Search Form Style: آیکون، دکمه، یا فرم کامل
• Search In: محدود کردن به پست، صفحه یا محصول
• Exclude: حذف دسته‌بندی‌ها یا نویسندگان خاص
• Highlight: هایلایت کردن کلمه جستجو در نتایج

افزونه‌های جایگزین

روش ۴: کد سفارشی (کنترل کامل)

برای کنترل کامل، می‌توانید کد زیر را به functions.php قالب فرزند اضافه کنید:

// Add search form to primary menu
function add_search_to_nav_menu($items, $args) {
    if ($args->theme_location == 'primary') {
        $search_form = '<li class="menu-item menu-item-search">';
        $search_form .= get_search_form(false);
        $search_form .= '</li>';
        $items .= $search_form;
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'add_search_to_nav_menu', 10, 2);

استایل CSS برای نوار جستجو

/* Search form in menu */
.menu-item-search {
    display: flex;
    align-items: center;
}

.menu-item-search .search-form {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.menu-item-search input[type="search"] {
    border: none;
    padding: 8px 12px;
    width: 200px;
}

.menu-item-search button {
    background: #0069ff;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
}

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

1. جستجوی Ajax: نتایج زنده بدون رفرش صفحه
2. Placeholder مناسب: "جستجو در سایت..." به جای فقط "جستجو"
3. موبایل: آیکون به جای فرم کامل (صرفه‌جویی در فضا)
4. سرعت: از کش جستجو استفاده کنید
5. WooCommerce: جستجو در محصولات را فعال کنید

جمع‌بندی

اضافه کردن نوار جستجو به منوی وردپرس راه‌های مختلفی دارد. اگر از قالب بلاکی استفاده می‌کنید، Full Site Editor ساده‌ترین روش است. برای قالب‌های کلاسیک، افزونه Ivory Search بهترین گزینه رایگان است.

نوار جستجو نه تنها تجربه کاربری را بهبود می‌دهد، بلکه با کاهش Bounce Rate به SEO سایت هم کمک می‌کند.

منابع:

• WPBeginner - Add Search Bar to WordPress Menu
• SearchWP - How to Add a Search Bar in WordPress
• Astra - Add a Search Bar to WordPress