ویجت جستجوی زنده

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

بخش «عمومی»

منطق متن راهنما: اگر «متن راهنما» را خالی بگذارید، افزونه بر اساس منبع یکی از دو مقدار پیش‌فرض را می‌گذارد — برای منبع course متن «جستجو در دوره‌ها…» و برای بقیه‌ی منابع «جستجو در مقالات…».

حالت‌های نمایش

ویجت جستجوی زنده دو حالت نمایش دارد که با کنترل حالت نمایش نتایج در بخش «عمومی» انتخاب می‌شود. این انتخاب فقط ظاهر را عوض نمی‌کند؛ رفتار پنل، کنترل‌های فعال و حتی کلید Escape را تغییر می‌دهد.

مقایسه‌ی دو حالت

حالت لیست

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

1. کاربر روی فیلد کلیک می‌کند

   اگر از قبل عبارت معتبری در فیلد باشد و نتیجه‌ای مانده باشد، پنل باز می‌شود.

2. کاربر تایپ می‌کند

   پس از 250 میلی‌ثانیه درخواست فرستاده می‌شود و پنل باز می‌شود.

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

   کلیدهای بالا و پایین بین نتایج حرکت می‌کنند و Enter به همان نتیجه می‌رود.

4. با کلیک بیرون یا Escape پنل بسته می‌شود

   Escape دوم، عبارت داخل فیلد را پاک می‌کند.

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

حالت نمایش در صفحه

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

1. ناحیه‌ی نتایج از ابتدا روی صفحه است

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

2. عبارت تایپ می‌شود

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

3. ستون‌ها واکنش‌گرا هستند

   مقادیر دسکتاپ/تبلت/موبایل به‌ترتیب پیش‌فرض 3/2/1 است.

4. صفحه‌بندی داخل همان ناحیه است

   شماره‌ها، قبلی/بعدی یا بارگذاری بیشتر، همه زیر نتایج.

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

ستون‌ها، کاشی و ارتفاع برابر

انتخاب قالب در حالت صفحه

وقتی «انتخاب قالب» روی سفارشی باشد، شناسه‌ی قالب به مسیر REST فرستاده می‌شود و هر نتیجه با قالب المنتور شما رندر می‌شود:

1. قالب را در کتابخانه بسازید

   «قالب‌ها → قالب‌های ذخیره‌شده»؛ قالب باید منتشر شده باشد.

2. آن را در ویجت انتخاب کنید

   «انتخاب قالب» → سفارشی، سپس قالب موردنظر را از فهرست برگزینید.

3. خروجی را بررسی کنید

   کلاس wgcr-search--tpl به ریشه اضافه می‌شود و CSS خود قالب یک بار بارگذاری می‌شود.

جزئیات بیشتر در صفحه‌ی قالب‌های المنتور.

تفاوت‌های رفتاری که کمتر دیده می‌شوند

انتخاب با ماوس

• حالت لیست: حرکت ماوس روی یک نتیجه، آن را «انتخاب‌شده» می‌کند تا با Enter باز شود.
• هر دو حالت با قالب المنتور: وقتی نتایج با قالب سفارشی رندر می‌شوند (wgcr-search-item--tpl)، حرکت ماوس هیچ نتیجه‌ای را «انتخاب‌شده» نشانه‌گذاری نمی‌کند و استایل انتخاب اعمال نمی‌شود؛ چون قالب خودش لینک و استایل دارد و تداخل، کلیک را خراب می‌کند. اگر نتیجه‌ی قالبی لینک نداشته باشد، کلیک روی خود کارت به آدرس آن نتیجه می‌رود.

فوکوس پس از صفحه‌بندی

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

اسکرول بی‌نهایت

در حالت «صفحه»، یک عنصر دیده‌بان (.wgcr-search-sentinel) انتهای نتایج را با IntersectionObserver نسبت به پنجره‌ی مرورگر می‌سنجد؛ یعنی برای بارگذاری بیشتر لازم نیست داخل پنل اسکرول کنید. در حالت لیست، اسکرول خود پنل معیار است.

دسترس‌پذیری در هر دو حالت

جزئیات کامل در صفحه‌ی دسترس‌پذیری و کلیدهای کیبورد.

تفاوت‌های استایل

چون هر دو حالت کلاس پایه‌ی .wgcr-search را دارند، می‌توانید یک قانون CSS برای بخش‌های مشترک بنویسید و قانون‌های اختصاصی هر حالت را با کلاس‌های تغییردهنده اضافه کنید.

الگوهای پیشنهادی

قالب‌های المنتور

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

آماده‌سازی قالب

1. یک قالب جدید در کتابخانه بسازید

   در پیشخوان: «قالب‌ها → افزودن جدید» و نوع «بخش» (Section) یا «قالب حلقه» را انتخاب کنید.

2. داخل قالب از ویجت‌های حلقه‌ی المنتور استفاده کنید

   ویجت‌هایی مانند «پست حلقه» یا فیلدهای داینامیک عنوان/تصویر/خلاصه، داده‌های همان نتیجه را می‌گیرند.

3. قالب را منتشر کنید

   فقط قالب‌های با وضعیت publish و نوع elementor_library قابل استفاده‌اند؛ پیش‌نویس در فهرست نمی‌آید.

4. قالب را در ویجت انتخاب کنید

   در ویجت جستجوی زنده: بخش «طرح‌بندی» → «انتخاب قالب» را روی سفارشی بگذارید و از فهرست «یک قالب انتخاب کنید» همان قالب را انتخاب کنید.

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

چه اتفاقی هنگام جستجو می‌افتد

1. درخواست با پارامتر template=<شناسه‌ی قالب> به REST می‌رود
2. سرور برای هر نتیجه، حلقه را روی همان نوشته می‌بندد
3. قالب با get_builder_content_for_display() رندر می‌شود
4. اگر خروجی محتوای قابل‌مشاهده داشته باشد، در فیلد html همان نتیجه برمی‌گردد
5. جاوااسکریپت آن را داخل li.wgcr-search-item--tpl می‌گذارد

بررسی محتوای قابل‌مشاهده

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

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

CSS قالب چگونه بارگذاری می‌شود

قالب‌های المنتور معمولاً همراه خروجی خود <style> و <link rel="stylesheet"> دارند. افزونه این‌ها را از HTML نتایج بیرون می‌کشد و جدا مدیریت می‌کند:

نتیجه: حتی با 12 نتیجه، CSS قالب 12 بار تکرار نمی‌شود و <link>ها هم به‌جای درج شدن به‌صورت متن، مانند استایل واقعی رفتار می‌کنند.

انیمیشن‌های ورود و هندلرها

پس از رندر نتایج قالبی، دو کار انجام می‌شود:

1. کلاس elementor-invisible از عنصرها حذف می‌شود؛ وگرنه عنصرهای دارای انیمیشن ورود نامرئی می‌ماندند.
2. اگر window.elementorFrontend موجود باشد، هندلرهای سمت کاربر المنتور روی نتایج تازه اجرا می‌شوند تا رفتارهایی مثل تب، آکاردئون یا کاروسل داخل قالب کار کنند.

نتیجه‌های قالبی و تعامل

الگوی پیشنهادی قالب

یک قالب نتیجه‌ی خوب معمولاً این عنصرها را دارد:

┌──────────────────────────────────────┐
│ تصویر شاخص (16:9)                     │
│ عنوان (پیوند به نوشته)                 │
│ خلاصه‌ی کوتاه (2 خط)                   │
│ رده · تاریخ · نویسنده                  │
│ دکمه‌ی «ادامه مطلب»                     │
└──────────────────────────────────────┘

نکات عملی:

• یک لینک اصلی در هر کارت بگذارید؛ لینک‌های تودرتو دسترس‌پذیری را خراب می‌کنند.
• ارتفاع تصویر را ثابت نگه دارید تا در حالت «کاشی» چیدمان نپرد.
• اگر از «ارتفاع برابر» استفاده می‌کنید، کارت را با display:flex و flex-direction:column بسازید تا دکمه همیشه پایین بماند.
• متن‌های طولانی را با line-clamp کوتاه کنید؛ افزونه خلاصه را به 18 کلمه محدود می‌کند ولی قالب شما می‌تواند کمتر نشان دهد.

رفع مشکلات قالب

پرس‌وجو و فیلترها

پرس‌وجوی جستجو از دو لایه ساخته می‌شود: کنترل‌های ویجت (یا ویژگی‌های شورت‌کد) که بدون کدنویسی تنظیم می‌شوند، و فیلترهای PHP که اجازه می‌دهند کل کوئری را عوض کنید.

آرگومان‌های پایه‌ی کوئری

هر جستجو به یک WP_Query تبدیل می‌شود که این مقدارهای ثابت را دارد:

فیلترهای بدون کدنویسی

ساختار tax_query

ترم‌ها بر اساس رده‌بندی گروه می‌شوند و یک tax_query ساخته می‌شود:

$tax_query = array( 'relation' => $include ? 'OR' : 'AND' );
foreach ( $grouped_terms as $taxonomy => $ids ) {
	$tax_query[] = array(
		'taxonomy' => $taxonomy,
		'field'    => 'term_id',
		'terms'    => $ids,
		'operator' => $include ? 'IN' : 'NOT IN',
	);
}

یعنی با terms_op="include" کافی است نتیجه در یکی از رده‌های داده‌شده باشد، و با terms_op="exclude" نتیجه باید از همه‌ی رده‌های داده‌شده بیرون باشد.

قالب terms

فیلترهای سمت سرور

دو فیلتر روی آرگومان‌های کوئری اعمال می‌شوند، پیش از اجرای WP_Query:

$args = apply_filters( 'wgcr_search_query_args', $args, $query_id, $request );
if ( '' !== $query_id ) {
	$args = apply_filters( 'wgcr_search_query_args/' . $query_id, $args, $request );
}

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

کجا بنویسیم

کد نمونه را در یک افزونه‌ی کوچک یا در functions.php پوسته‌ی فرزند بگذارید:

add_filter( 'wgcr_search_query_args/courses', function ( $args, $request ) {
	$args['meta_query'] = array(
		array(
			'key'     => 'course_level',
			'value'   => 'beginner',
			'compare' => '=',
		),
	);
	return $args;
}, 10, 2 );

و در ویجت (یا شورت‌کد) همان شناسه را بگذارید:

[wgcr_search source="course" query_id="courses" mode="page" columns="3"]

نمونه‌های کاربردی

محدود کردن به یک نویسنده:

add_filter( 'wgcr_search_query_args/team_blog', function ( $args ) {
	$args['author__in'] = array( 4, 17, 22 );
	return $args;
} );

جستجو در عنوان با وزن بیشتر:

add_filter( 'wgcr_search_query_args', function ( $args, $query_id, $request ) {
	if ( 'title' === $request->get_param( 'orderby' ) ) {
		$args['orderby'] = 'title';
		$args['order']   = 'ASC';
	}
	return $args;
}, 10, 3 );

حذف یک رده از همه‌ی جستجوها:

add_filter( 'wgcr_search_query_args', function ( $args ) {
	$args['tax_query']   = isset( $args['tax_query'] ) ? $args['tax_query'] : array();
	$args['tax_query'][] = array(
		'taxonomy' => 'category',
		'field'    => 'slug',
		'terms'    => array( 'internal' ),
		'operator' => 'NOT IN',
	);
	return $args;
} );

افزودن یک پست‌تایپ دوم:

add_filter( 'wgcr_search_query_args/library', function ( $args ) {
	$args['post_type'] = array( 'post', 'document' );
	return $args;
} );

نکات عملکرد

• orderby="rand" روی محتواهای بزرگ کند است؛ برای فهرست‌های بلند از date استفاده کنید.
• meta_query بدون ایندکس مناسب، جستجو را سنگین می‌کند؛ اگر تعداد نوشته‌ها زیاد است، کلید متا را ایندکس کنید.
• date_query با inclusive => true ساخته می‌شود، پس «هفته» یعنی از همین لحظه هفت روز به عقب.
• اگر به نوار شماره‌ی صفحه نیاز ندارید، page نفرستید تا no_found_rows فعال بماند و کوئری سبک‌تر شود.

صفحه‌بندی

صفحه‌بندی نتایج جستجو در بخش «صفحه‌بندی» ویجت تنظیم می‌شود و فقط وقتی دیده می‌شود که تعداد نتایج از «آیتم در هر برگه» بیشتر باشد.

چهار نوع صفحه‌بندی

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

<div class="wgcr-search-foot">
	<nav class="wgcr-search-pagination" aria-label="صفحه‌بندی نتایج">
		<button type="button" class="wgcr-search-page wgcr-search-page--prev">قبلی</button>
		<button type="button" class="wgcr-search-page" data-page="1">1</button>
		<button type="button" class="wgcr-search-page" data-page="2" aria-current="page">2</button>
		<span class="wgcr-search-page wgcr-search-page--gap" aria-hidden="true">…</span>
		<button type="button" class="wgcr-search-page" data-page="9">9</button>
		<button type="button" class="wgcr-search-page wgcr-search-page--next">بعدی</button>
		<span class="wgcr-search-page wgcr-search-page--info">صفحه 2 از 9</span>
	</nav>
	<button type="button" class="wgcr-search-more" aria-controls="wgcr-search-abc123-list" hidden>
		<span class="wgcr-search-more-icon" aria-hidden="true">…</span>
		<span class="wgcr-search-more-text">مشاهده مقالات بیشتر</span>
	</button>
	<div class="wgcr-search-nomore" role="status" hidden>نوشته‌ی بیشتری موجود نیست.</div>
</div>

صفحه‌ی جاری با aria-current="page" نشانه‌گذاری می‌شود تا صفحه‌خوان آن را اعلام کند.

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

چطور تعداد صفحه‌ها محاسبه می‌شود

وقتی درخواست با پارامتر page فرستاده شود، سرور دو هدر برمی‌گرداند:

برای اینکه شمارش کل نتایج انجام شود، no_found_rows فقط وقتی page کمتر از 1 باشد روشن می‌شود؛ یعنی در درخواست‌های بدون صفحه‌بندی، کوئری سبک‌تر است و شمارش انجام نمی‌شود.

curl -sI "https://example.com/wp-json/wgcr/v1/search?q=آموزش&limit=12&page=1" | grep -i x-wp

X-WP-Total: 47
X-WP-TotalPages: 4

پیمایش بی‌نهایت

در «بارگذاری با اسکرول»، یک عنصر دیده‌بان به نام .wgcr-search-sentinel بعد از آخرین نتیجه قرار می‌گیرد و با IntersectionObserver دیده می‌شود:

• در حالت نمایش در صفحه، ملاک دیده‌شدن، پنجره‌ی مرورگر است.
• در حالت لیست، ملاک، اسکرول داخل پنل نتایج است.
• اگر IntersectionObserver در مرورگر موجود نباشد، بارگذاری خودکار انجام نمی‌شود ولی «بارگذاری با کلیک» و شماره‌ها کار می‌کنند.

هر بار که صفحه‌ی جدید می‌رسد، تا پایان رندر منتظر می‌ماند و سپس دیده‌بان دوباره فعال می‌شود؛ پس درخواست پشت‌سرهم و تکراری فرستاده نمی‌شود. وقتی صفحه‌ی آخر رسید، پیام پایان نتایج (role="status") نمایش داده می‌شود و دیده‌بان با aria-hidden از دسترس بیرون می‌رود.

رفتار کیبورد

پس از رندر صفحه‌ی جدید، فوکوس به دکمه‌ای برمی‌گردد که زده شده بود: قبلی، بعدی یا دکمه‌ی aria-current="page".

نکات عملکرد

• آیتم در هر برگه را کوچک نگه دارید: مقدار 12 برای بیشتر سایت‌ها مناسب است؛ مقدار 50 در حالت لیست، پنل را طولانی و رندر را سنگین می‌کند.
• شمارش کل نتایج هزینه دارد: اگر به نوار شماره‌ها نیاز ندارید، صفحه‌بندی را «هیچکدام» یا «بارگذاری با کلیک» بگذارید تا found_posts شمارش نشود.
• کش سمت سرور: اگر پروکسی کش هدرهای X-WP-Total را حذف می‌کند، نوار شماره‌ها کامل ساخته نمی‌شود. مسیر /wp-json/ را از کش بیرون بگذارید.

انتخاب نوع صفحه‌بندی

استایل‌دهی نتایج

کنترل‌های مخصوص حالت «صفحه» فقط وقتی همان حالت انتخاب شده باشد نمایش داده می‌شوند. راهنمای کامل در صفحه‌ی استایل‌دهی.

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

متغیرهای CSS

افزونه چند متغیر CSS را روی ریشه‌ی هر .wgcr-search تعریف می‌کند. این متغیرها سراسری نیستند؛ مقدارهای پایه‌ی رنگ، کادر، گردی و تعداد ستون‌ها را برای همان ویجت فراهم می‌کنند و می‌توانید آن‌ها را روی ریشه‌ی یک نمونه بازنویسی کنید:

تغییر کل ظاهر با یک قطعه‌ی کوچک:

.wgcr-search {
	--wgcr-blue: #4f46e5;
	--wgcr-navy: #3730a3;
	--wgcr-ink: #0f172a;
	--wgcr-slate: #64748b;
	--wgcr-line: #e2e8f0;
	--wgcr-radius: 10px;
}

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

کنترل‌های استایل المنتور

فیلد جستجو

کادر نتایج

آیتم‌ها

چیدمان ستونی، کاشی و ارتفاع برابر

ستون‌ها واکنش‌گرا هستند؛ چون المنتور برای هر نقطه‌ی شکست یک مقدار جدا می‌سازد:

.wgcr-search--page .wgcr-search-list {
	display: grid;
	grid-template-columns: repeat(var(--wgcr-search-cols, 1), minmax(0, 1fr));
	gap: 4px 10px;
}

نمونه‌کدهای آماده

کارت با سایه‌ی نرم و لبه‌ی رنگی

.wgcr-search-item .wgcr-search-link {
	border: 1px solid var(--wgcr-line);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgb(15 23 42 / 6%);
	transition: box-shadow .18s ease, transform .18s ease;
}
.wgcr-search-item .wgcr-search-link:hover {
	box-shadow: 0 10px 24px -8px rgb(15 23 42 / 22%);
	transform: translateY(-2px);
}

پنل تیره

.wgcr-search-panel {
	background: #0f172a;
	border-color: #1e293b;
	--wgcr-ink: #f8fafc;
	--wgcr-slate: #94a3b8;
}

پنل هم‌عرض با فیلد در حالت لیست

.wgcr-search-panel { inset-inline: 0; }
.wgcr-search--modal .wgcr-search-list { max-height: 60vh; }

حذف تصویر و چیدمان فشرده

.wgcr-search-thumb { display: none; }
.wgcr-search-body { gap: 2px; }
.wgcr-search-excerpt { display: none; }

نکات مهم

• حرکت‌ها با @media (prefers-reduced-motion: reduce) غیرفعال می‌شوند؛ اگر انیمیشن دلخواه اضافه می‌کنید، همین الگو را رعایت کنید.
• جهت متن از خود سایت می‌آید (inset-inline-start و inset-inline-end)، پس در حالت چپ‌به‌راست هم درست کار می‌کند و نیازی به بازنویسی RTL ندارید.
• برچسب فیلد (.wgcr-search-label) به‌صورت بصری پنهان است ولی برای صفحه‌خوان خوانده می‌شود؛ آن را display:none نکنید.

ساختار خروجی

<div class="wgcr-search wgcr-search--modal" data-wgcr-search
	data-display-mode="modal" data-source="post" data-limit="12"
	data-thumb="yes" data-excerpt="yes" data-all="نمایش همه نتایج"
	data-template="0" data-query="…" data-pagination="none">
	<form class="wgcr-search-form" role="search" method="get" action="https://example.com/">
		<label class="wgcr-search-label" for="wgcr-search-abc123-input">جستجو در مقالات…</label>
		<div class="wgcr-search-field">
			<span class="wgcr-search-icon"><svg viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
			<input type="search" class="wgcr-search-input" id="wgcr-search-abc123-input" name="s"
				placeholder="جستجو در مقالات…" autocomplete="off" role="combobox"
				aria-autocomplete="list" aria-expanded="false"
				aria-controls="wgcr-search-abc123-list" aria-haspopup="listbox">
			<input type="hidden" name="post_type" value="post">
			<span class="wgcr-search-spinner" aria-hidden="true"></span>
		</div>
		<div class="wgcr-search-panel" hidden>
			<ul class="wgcr-search-list" id="wgcr-search-abc123-list" role="listbox" aria-label="نتایج جستجو"></ul>
			<div class="wgcr-search-status" aria-live="polite"></div>
			<a class="wgcr-search-all" href="#" hidden>نمایش همه نتایج</a>
		</div>
	</form>
</div>

هر نتیجه یک li با کلاس wgcr-search-item و role="option" است:

<li class="wgcr-search-item" id="wgcr-search-abc123-opt-0" role="option" aria-selected="false">
	<a class="wgcr-search-link" href="https://example.com/?p=42">
		<img class="wgcr-search-thumb" src="…" alt="" width="150" height="150" loading="lazy">
		<span class="wgcr-search-body">
			<span class="wgcr-search-title">عنوان نوشته</span>
			<span class="wgcr-search-excerpt">خلاصه‌ی 18 کلمه‌ای…</span>
			<span class="wgcr-search-date">2026/09/26</span>
		</span>
	</a>
</li>

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

پیش از فایل search.js، یک آبجکت پیکربندی به‌صورت درون‌خطی در صفحه چاپ می‌شود:

window.WGCRSearch = {
	restUrl: 'https://example.com/wp-json/wgcr/v1/search',
	homeUrl: 'https://example.com/',
	minChars: 2,
	maxResults: 50,
	i18n: {
		noResults: 'نتیجه‌ای یافت نشد.',
		found: 'نتیجه',
		error: 'خطا در دریافت نتایج.',
		prev: 'قبلی',
		next: 'بعدی',
		page: 'صفحه',
		pageOf: 'از'
	}
};

رفتار سمت کاربر

جریان کار: کاربر تایپ می‌کند → 250 میلی‌ثانیه صبر می‌شود → اگر عبارت کمتر از 2 نویسه بود، پنل خالی و پاک می‌شود → در غیر این صورت درخواست قبلی لغو و درخواست جدید فرستاده می‌شود → نتایج رندر می‌شوند → پیام وضعیت («تعداد نتایج: N») برای صفحه‌خوان خوانده می‌شود.

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

فرم ویجت یک فرم واقعی GET با action برابر خانه‌ی سایت، فیلد s و فیلد پنهان post_type است. یعنی اگر جاوااسکریپت غیرفعال باشد، ارسال فرم کاربر را به صفحه‌ی نتایج جستجوی خود وردپرس برای همان پست‌تایپ می‌برد. این همان الگویی است که برای دسترس‌پذیری و سئو توصیه می‌شود: پیشرفت تدریجی، نه وابستگی کامل به اسکریپت.

داده‌های روی ریشه‌ی ویجت

جاوااسکریپت تنظیمات را از همان ویژگی‌های data-* روی ریشه می‌خواند؛ پس اگر ویجت را با قالب‌های پویا یا کد PHP می‌سازید، این ویژگی‌ها را کامل بگذارید:

فهرست کامل کنترل‌ها

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

رفع مشکلات