آموزش افزودن حالت نمایش جستجو در المنتور (بدون استفاده از پاپ‌آپ)

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

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

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

مرحله اول: ساخت ساختار پایه در المنتور

1. یک کانتینر (Container) ایجاد کن.
2. المان Search را داخل آن قرار بده.
3. استایل مورد نظرت (فونت، رنگ، فاصله و…) را به جستجو اعمال کن.

در این مرحله می‌خواهیم این کانتینر به‌صورت پیش‌فرض پنهان (Hidden) باشد.

مرحله دوم: پنهان کردن کانتینر با CSS

در المنتور، کانتینر ساخته‌شده را انتخاب کن و وارد تب پیشرفته (Advanced) شو.

در قسمت شناسه CSS (CSS ID) بنویس:

search-hide

حالا در قسمت CSS سفارشی المنتور، این کد را وارد کن:

#search-hide {
    display: none;
}

به این ترتیب، جعبه جستجو در ابتدا دیده نمی‌شود.

مرحله سوم: ایجاد آیکون جستجو در هدر

1. به هدر سایتت برو.
2. یک المان Icon اضافه کن و آیکون «ذره‌بین» (Search) رو انتخاب کن.
3. به آن یک کلاس CSS بده، مثلاً: search-icon

می‌تونی با تنظیم سایز و فاصله‌ها، ظاهر آیکون را با طراحی‌ات هماهنگ کنی.

مرحله چهارم: نمایش و مخفی شدن با JavaScript

الان وقتشه که با یک اسکریپت ساده، رفتار باز و بسته شدن را تعریف کنیم.

کد زیر را در یکی از بخش‌های زیر جای‌گذاری کن:

• مسیر: پیشخوان وردپرس ← المنتور ←کدهای سفارشی ← افزودن کد جدید
• یا داخل فایل functions.php قالب فرزندت.

<script>
jQuery(document).ready(function($){
    $('.search-icon').on('click', function(){
        $('#search-hide').slideToggle(300);
    }
    );
}
);
</script>

اکنون هر بار که روی آیکون جستجو کلیک شود، کانتینر جستجو نمایش داده یا پنهان می‌شود.

مرحله پنجم: زیباتر کردن طراحی و تجربه کاربری

برای بهبود UX و زیبایی جعبه جستجو می‌تونی این کارها رو انجام بدی:

• افزودن انیمیشن باز و بسته شدن با transition
• قرار دادن پس‌زمینه نیمه‌شفاف برای تأکید بیشتر
• تغییر رنگ آیکون هنگام hover
• افزودن خاصیت cursor pointer به آیکون:

.search-icon {
cursor: pointer;
}

نکاتی برای طراحی بهتر

• حتماً ویژگی placeholder جذاب برای فیلد جستجو بنویس. مثل:«چی دنبالشی؟ مقاله، آموزش یا محصول؟»
• اگر سایت آموزشیه، بهتره بخش جستجو در دسکتاپ و موبایل هماهنگ باشه.
• با ابزارهایی مثل Chrome DevTools باز و بسته شدن جستجو رو در دستگاه‌های مختلف تست کن.

نتیجه‌گیری

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

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

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

مقاله پیشنهادی : آموزش فروش با وردپرس