پیاده سازی کادر جستجو

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

  1. در کنترل پنل روی موتور جستجویی که می خواهید استفاده کنید کلیک کنید.
  2. در بخش اصلی صفحه نمای کلی ، روی دریافت کد کلیک کنید. کد را کپی کرده و در کد منبع HTML صفحه خود جایگذاری کنید، جایی که می خواهید عنصر جستجوی برنامه پذیر ظاهر شود.

عنصر <div class="gcse-search"></div> یک مکان نگهدار است - اینجا جایی است که عنصر جستجو (هم کادر جستجو و هم نتایج جستجو) ارائه می شود.

<!-- شناسه موتور جستجوی قابل برنامه ریزی خود را در اینجا وارد کنید --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> 
<div class="gcse-search"></div>

آزمایش طرح‌بندی‌های مختلف

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

برای تغییر طرح موتور خود به بخش Layout در صفحه Look and feel در کنترل پنل بروید. پس از انتخاب و ذخیره طرح 2 ستونی در کنترل پنل، باید کد HTML عنصر جستجو را نیز تغییر دهید.

<!-- شناسه موتور جستجوی قابل برنامه ریزی خود را در اینجا وارد کنید --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> 
<div style="border: 1px solid blue;">
    Area 1 (for example a sidebar)
    <div class="gcse-searchbox"></div>
</div>

<div style="border: 1px solid red;">
    Area 2 (for example main area of the page)
    <div class="gcse-searchresults"></div>
</div>

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

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

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div>

آن را امتحان کنید

برای پیاده‌سازی یک صفحه نتایج جستجوی مستقل، قطعه کد نتایج را در صفحه نتایج خود جای‌گذاری کنید:

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>

اکنون می توانید نتایج جستجو را در این صفحه با ارسال آرگومان "q" در آدرس اینترنتی فعال کنید:

https://my-results-page-url.com/?q=myQuery

به پارامتر q=myQuery در نوار آدرس توجه کنید - اینگونه است که عنصر <div class="gcse-searchresults-only"></div> می‌داند چه نتایج پرس و جو را نمایش دهد.

آن را امتحان کنید

بعدی...

به فعال کردن تکمیل خودکار ادامه دهید.