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

ایحاد باکس جستجو در وردپرس بر پایه ی Ajax با استفاده از Ajax Search Lite

ایجاد باکس جستجو در وردپرس بر پایه ی Ajax امروزه طرفداران زیادی پیدا کرده است، چرا که این باکس های جستجو معمولاً دارای رابط کاربری زیبا می باشند و باعث می شود کاربر سریع تر به هدف خود برسد. Ajax و یا آژاکس ترکیبی از JavaScript و XML هست که به شما این امکان را می دهد بدون اینکه صفحه وب سایت شما refresh یا reload شود محتوای صفحه را عوض کند. شما به راحتی می توانید بدون اینکه کاربر متوجه شود بین Ajax و دیتابیس خود تبادل اطلاعات کنید و محتوای صفحه را تغییر دهید.

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

در ادامه با معرفی یکی از افزونه هایی که یک باکس جستجوی Ajax به سایت شما اضافه می کند ، با ما همراه باشید.

دانلود و نصب افزونه Ajax Search Lite

جهت یادگیری نحوه ی نصب افزونه ها در وردپرس به صفحه ی آموزش نصب افزونه در وردپرس مراجعه کنید.

در داشبورد وردپرس خود در قسمت افزونه ها / افزودن در باکس جستجو مقدار Ajax Search Lite را جستجو و این افزونه را نصب کنید و یا می توانید با استفاده از لینک زیر این افزونه را از مخزن وردپرس دانلود کنید.

دانلود افزونه ی Ajax Search Lite از مخزن وردپرس

پس از نصب و فعال کردن افزونه ، یک گزینه ی جدید به منوی وردپرس شما به نام Ajax Search Lite اضافه خواهد شد که مانند تصویر زیر است:

تنظیمات و کار با افزونه ی Ajax Search Lite

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

قبل از آن برای نمایش باکس Ajax جستجو در هر جای وب سایت می توانید از کد PHP زیر استفاده کنید:

		<?php echo do_shortcode('[wpdreams_ajaxsearchlite]'); ?>

و یا کد کوتاه زیر را در هر جایی که مایل هستید باکس جستجو به نمایش درآید قرار دهید:

[wpdreams_ajaxsearchlite]

که باکس جستجوی ajax ما به صورت زیر عمل کرد:

تنظیمات عمومی 

اگر می خواهید باکس Ajax جایگزین باکس جستجوی وب سایت شما شود گزینه ی موجود در تصویر زیر را بر روی On قرار دهید:

 

اگر می خواهید جستجو در میان زمینه های سفارشی (Custom Fields) هم انجام بگیرد از قسمت زیر استفاده کنید. زمینه های موردنظر را از باکس چپ جستجو ، پیدا و وارد بخش راست کنید:

قسمت زیر نیز در تصویر توضیح داده شده است:

تنظیمات Image Options

برای عدم نمایش عکس های شاخص در نتایج جستجو ، گزینه ی زیر را Off کنید. همان طور که می بینید در این قسمت می توانید اندازه ی عرض و طول تصویر را در صورت نمایش دادن ، مشخص کنید.

 

اگر قصد دارید از آدرس یک عکس موجود در زمینه سفارشی استفاده کنید ، مانند تصویر زیر عمل کنید:

 

در قسمت اول ، منبع عکس را custom field قرار دهید و در قسمت دوم اسم زمینه سفارشی را انتخاب و save options را بزنید.

تنظیمات Layout Option

در این قسمت می توانید تنظیمات ظاهری باکس جستجو را وارد کنید ، به عنوان مثال در قسمت زیر ظاهر نمایشی باکس جستجو را می توانید بر اساس گزینه های موجود تغییر دهید:

در تصویر زیر می توانید این تنظیمات را انجام دهید:

1- متن Search here … را به مقدار مورد نظر خود تغییر دهید.

2- در تصویر زیر می توانید اندازه ی عرض باکس جستجو که به صورت پبش فرض 100% است را تغییر دهید.

3- اندازه ی margin یا فاصله از اطراف باکس را مشخص کنید

 

همان طور که گفتیم با استفاده از کدهای زیر می توانید این باکس جستجو را در تمام صفحات خود یا هر جا که مایل هستید اضافه کنید:

با PHP

<?php echo do_shortcode('[wpdreams_ajaxsearchlite]'); ?>

با کد کوتاه :

[wpdreams_ajaxsearchlite]

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

برنامه نویسی وردپرس آموزش طراحی وب و برنامه نویسی وردپرس آموزش وردپرس افزونه وردپرس افزونه کاربردی

To top
ورود | ثبت نام
شماره موبایل یا پست الکترونیک خود را وارد کنید

با ورود یا ثبت نام شما قوانین کراسنو را قبول دارید

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