ساخت فرم جستجوی تمام صفحه در وردپرس

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

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

فرم جستجوی تمام صفحه وردپرس چیه و چه کاربردی داره؟

فرم جستجوی تمام صفحه یا Fullscreen Search یک لایه بزرگه که بعد از زدن دکمه جستجو روی صفحه باز می‌شه. به این لایه معمولاً «مودال» هم می‌گن؛ یعنی پنجره‌ای که موقتاً روی محتوای اصلی قرار می‌گیره و توجه کاربر رو روی یک کار مشخص نگه می‌داره.

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

این مدل جستجو برای چه سایت‌هایی مناسبه؟

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

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

قبل از ساخت فرم به چه چیزهایی نیاز دارید؟

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

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

بهترین روش ساخت فرم جستجوی تمام صفحه در وردپرس

برای ساخت این فرم دو راه اصلی دارید: استفاده از افزونه یا نوشتن کد اختصاصی. برای بیشتر کاربران تازه‌کار، افزونه انتخاب ساده‌تریه. کد اختصاصی کنترل بیشتری بهتون می‌ده، ولی ساخت درست اون به HTML، CSS، JavaScript و نکات دسترسی‌پذیری نیاز داره.

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

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

چه زمانی روش بدون افزونه انتخاب بهتریه؟

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

کد رو مستقیم داخل فایل‌های قالب اصلی نذارید؛ چون ممکنه با به‌روزرسانی قالب پاک بشه. برای تغییرات قالب بهتره از چایلد تم یا یک راهکار اختصاصی و قابل نگهداری کمک بگیرید.

ساخت فرم جستجوی تمام صفحه با یک افزونه به‌روز

برای این آموزش از افزونه SearchWP Modal Search Form استفاده می‌کنیم. این افزونه یک فرم جستجو رو داخل پنجره مودال باز می‌کنه. برای تمام‌صفحه‌کردن ظاهر اون هم کمی CSS اضافه می‌کنیم. CSS زبان ساده‌ای برای تعیین رنگ، اندازه و چیدمان بخش‌های صفحه‌ست.

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

نصب و فعال‌کردن افزونه

1. وارد پیشخوان وردپرس بشید.
2. از منوی «افزونه‌ها»، گزینه «افزودن افزونه تازه» رو باز کنید.
3. عبارت SearchWP Modal Search Form رو جستجو کنید.
4. نام سازنده و صفحه رسمی افزونه رو بررسی کنید تا افزونه مشابهی رو اشتباهی نصب نکنید.
5. روی «هم‌اکنون نصب نمایید» بزنید و بعد افزونه رو فعال کنید.

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

ساخت پنجره جستجوی تمام صفحه

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

برای اینکه لایه مودال کل صفحه رو بگیره، کد زیر رو به بخش CSS اضافی سایت اضافه کنید. توی قالب‌های کلاسیک معمولاً این بخش زیر مسیر «نمایش ← سفارشی‌سازی ← CSS اضافی» دیده می‌شه. توی قالب‌های بلوکی ممکنه از ویرایشگر سایت و بخش استایل‌ها به CSS اضافی برسید.

.searchwp-modal-form {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 100dvh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.96);
}

.searchwp-modal-form form {
  width: min(720px, 100%);
}

.searchwp-modal-form input[type="search"] {
  width: 100%;
  min-height: 60px;
  padding: 12px 18px;
  font-size: clamp(18px, 3vw, 28px);
  color: #ffffff;
  background: transparent;
  border: 0;
  border-bottom: 2px solid #ffffff;
}

.searchwp-modal-form input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

نام کلاس‌های HTML ممکنه بین نسخه‌ها یا قالب‌ها فرق داشته باشه. اگه این CSS روی فرم اثر نذاشت، با ابزار Inspect مرورگر کلاس واقعی لایه افزونه رو پیدا کنید و انتخابگر .searchwp-modal-form رو با همون کلاس جایگزین کنید. اگه با Inspect آشنا نیستید، بهتره این بخش رو به طراح سایت بسپارید.

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

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

فقط به یک آیکون بدون توضیح تکیه نکنید. برای لینک یا دکمه، متن قابل فهمی مثل «جستجو» یا برچسب دسترسی مناسب بذارید تا کاربر صفحه‌خوان هم کاربرد اون رو متوجه بشه.

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

فرم باید با کلیک یا لمس دکمه جستجو باز بشه. برای بستن هم بهتره سه راه داشته باشید: دکمه بستن، کلید Escape و در صورت پشتیبانی افزونه، کلیک روی فضای خالی اطراف فرم.

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

شخصی‌سازی ظاهر فرم جستجو

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

تغییر رنگ پس‌زمینه، متن و دکمه بستن

توی CSS بالا، مقدار background رنگ پس‌زمینه رو مشخص می‌کنه. مقدار color هم رنگ متن داخل کادره. رنگ‌ها باید اختلاف کافی داشته باشن تا نوشته و دکمه بستن راحت دیده بشن.

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

تنظیم اندازه کادر جستجو برای موبایل و دسکتاپ

ویژگی width: min(720px, 100%) باعث می‌شه فرم روی نمایشگر بزرگ بیش‌ازحد کشیده نشه و روی موبایل هم از عرض صفحه بیرون نزنه. ویژگی clamp() اندازه نوشته رو متناسب با عرض صفحه تنظیم می‌کنه.

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

هماهنگ‌کردن فرم با سایت‌های راست‌چین

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

.searchwp-modal-form input[type="search"] {
  direction: rtl;
  text-align: right;
}

.searchwp-modal-form input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}

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

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

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

مشخص‌کردن بخش‌هایی که باید جستجو بشن

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

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

حذف برگه‌ها یا نوشته‌های نامرتبط از نتیجه‌ها

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

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

نمایش پیام مناسب وقتی نتیجه‌ای پیدا نمی‌شه

پیام «چیزی پیدا نشد» به‌تنهایی راه بعدی رو نشون نمی‌ده. بهتره از کاربر بخواید املای عبارت رو بررسی کنه، واژه کوتاه‌تری بنویسه یا از دسته‌بندی‌های اصلی کمک بگیره.

یک نمونه ساده می‌تونه این باشه: «نتیجه‌ای پیدا نکردیم. املای عبارت رو بررسی کنید یا یک کلمه کوتاه‌تر بنویسید.» اگه راه ارتباطی مشخصی دارید، می‌تونید لینک تماس یا پشتیبانی رو هم کنار این پیام بذارید.

آزمایش فرم جستجوی تمام صفحه

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

بررسی فرم در موبایل، تبلت و دسکتاپ

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

بررسی عملکرد دکمه بستن و کلید Escape

فرم رو باز کنید و اول دکمه بستن رو بزنید. دوباره فرم رو باز کنید و این بار کلید Escape رو فشار بدید. بعد چند بار این کار رو تکرار کنید تا مطمئن بشید لایه تیره یا قفل اسکرول روی صفحه باقی نمی‌مونه.

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

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

متن راهنما، عبارت تایپ‌شده و دکمه بستن باید روی پس‌زمینه واضح باشن. فرم رو با زوم ۲۰۰ درصد مرورگر هم ببینید تا مطمئن بشید اجزا روی هم نمی‌افتن.

بررسی سرعت و تداخل با قالب یا افزونه‌ها

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

اگه مشکل فقط بعد از ترکیب یا تأخیر فایل‌های JavaScript دیده می‌شه، فایل افزونه رو از همون قابلیت بهینه‌سازی مستثنا کنید. نام فایل رو حدس نزنید؛ اون رو از ابزار توسعه‌دهنده مرورگر یا گزارش افزونه بهینه‌ساز پیدا کنید.

رفع مشکلات رایج فرم جستجوی تمام صفحه

فرم با کلیک روی آیکون باز نمی‌شه

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

فرم پشت منو یا سربرگ قرار می‌گیره

این مشکل معمولاً به z-index مربوطه؛ یعنی عددی که مشخص می‌کنه کدوم لایه جلوتر دیده بشه. مقدار اون برای لایه فرم رو از سربرگ بیشتر کنید. اگه تغییر عدد اثری نداشت، ممکنه یکی از والدهای فرم یک فضای لایه‌بندی جدا ساخته باشه و بررسی دقیق CSS لازم بشه.

ظاهر فرم در موبایل به‌هم می‌ریزه

عرض ثابت، فونت خیلی بزرگ و فاصله داخلی زیاد سه دلیل رایج این مشکله. برای عرض از درصد یا تابع min() استفاده کنید. برای ارتفاع کامل موبایل هم 100dvh معمولاً نتیجه بهتری از ارتفاع ثابت پیکسلی می‌ده.

نتیجه‌های جستجو دقیق نیستن

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

جمع‌بندی

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

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

سؤال‌های متداول

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

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