چطور یک کادر جستجوی ساده گوگل، یاهو یا بینگ به وبسایت وردپرسمون اضافه کنیم؟
جستجو، پرکاربردترین و ضروریترین عملکرد وب هست. موتورهای جستجو روزانه میلیاردها درخواست کلمه کلیدی رو پردازش میکنن اما هنوز برخی از وبسایتهای وردپرس و وبلاگها هستن که این ویژگی حیاتی رو ندارن.
در حالیکه راهحلهای کادر جستجوی سفارشی توسط نهادهای تجاری مختلفی ارائه میشن، ما ترجیح میدیم فقط از نتایج موتورهای جستجوی اصلی استفاده کنیم: Google، Yahoo یا Bing.
کادر جستجوی گوگل
اگر در وبسایت یا وبلاگتون مشکل فضا دارین، میتونین به راحتی یک کادر جستجوی کوچک گوگل قرار بدین که با نیازهاتون مطابقت داره. راهحل کدنویسی ترکیبی از HTML و Javascript هست:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form method="get" action="http://www.google.com/search"> <div style="padding:4px;width:15em;"> <table border="0" align="center" cellpadding="0"> <tr><td> <input type="text" name="q" size="25" style="color:#808080;" maxlength="255" value="Google site search" onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/> <input type="submit" value="Go!" /> <input type="hidden" name="sitesearch" value="yoursite.com" /></td></tr> </table> </div> </form> |
برای مثال میتونین این کد رو در ویجت متنی در قسمت Appearance > Widgets داشبورد وردپرستون وارد کنین.
این کادر جستجو تقریبا بلافاصله آماده کار هست. فقط yoursite.com رو در خط سوم تا آخر به دامنه خودتون تغییر بدین. تظیمات دیگر، مثل عرض کادر، مقدار cell padding، و پیام اولیه که در کادر ظاهر میشه رو میتونین به سرعت قبل از آپلود نهایی اسکریپت در وبسایتتون انجام بدین.
کادر جستجوی گوگل با Radio Buttons
کادر جستجو بالا فقط امکان مکان یابی محتوا رو در وبسایت تعیین شده فراهم میکنه. با این حال، برخی از صاحبان سایت ممکنه بخوان به بازدیدکنندگان این امکان رو بدن که به دنبال کلمه کلیدی در وبسایت به صورت گسترده تر هم باشن.
در این صورت، سادهترین راهحل، ارائه یک کادر جستجو با دو radio buttons هست. یکی برای وب و دیگری برای سایت، همونطور که در زیر نشون داده شده:
کدگذاری کادر جستجو به صورت زیر هست:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form method="get" action="http://www.google.com/search"> <div style="border:1px solid black;padding:4px;width:20em;"> <table border="0" align="center" cellpadding="0"> <tr><td> <input type="text" name="q" size="25" maxlength="255" value="" /> <input type="submit" value="Google Search" /></td></tr> <tr><td align="center" style="font-size:75%"> <input type="radio" name="sitesearch" value="" />The Web <input type="radio" name="sitesearch" value="yoursite.com" checked /> Only Your Site<br /> </td></tr></table> </div> </form> |
درست مثل مثال قبلی، فقط yoursite.com رو به نام دامنه صحیح تغییر بدین و کادر جستجو آماده اجرا خواهد بود. توجه داشته باشین که گزینه جستجو در داخل سایت شما به صورت پیشفرض انتخاب شده باشه.
کادر جستجور بینگ با Radio Buttons
برای ترکیب یک کادر جستجوی مشابه با بالا، اما با کادری که از بینگ به عنوان موتور جستجو استفاده میکنه، از خزوز کدگذاری زیر استفاده کنین:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form method="get" action="http://www.bing.com/search"> <div style="border:1px solid black;padding:4px;width:20em;"> <table border="0" align="center" cellpadding="0"> <tr><td> <input type="text" name="q" size="25" maxlength="255" value="" /> <input type="submit" value="Bing Search" /></td></tr> <tr><td align="center" style="font-size:75%"> <input type="radio" name="q1" value="" />The Web <input type="radio" name="q1" value="site:yoursite.com" /> Only Your Site<br /> </td></tr></table> </div> </form> |
در این مثال، هیچ یک از گزینههای radio button به طور پیشفرض انتخاب نمیشن. اگر بازدیدکننده سایت کلمه یا عبارتی رو در کادر جستجو وارد کنه، نتایج پیشفرض از wider web خواهند بود.
کادر جستجوی یاهو با چک باکس
آخرین کادر جستجوی ساده شامل کمی پیچ و تاب هست، چون به جای دو radio buttons فقط شامل یک چک باکسه، که در زیر نشون داده شده:
گزینه جستجو در دامنه تعیین شده به طور پیشفرض انتخاب شده. هنگامی که کاربر کادر انتخاب رو لغو میکنه، میتونه در wider web برای کلمه یا عبارت موردنظر جستجو کنه.
در واقع همهاش همین بود. راهحلهای ساده کادر جستجو که در این آموزش مشخص شدن آماده استفاده هستن و به راحتی تقریبا در هر سایتی گنجانده میشن.
