تنفيذ مربّع البحث

بعد إنشاء "محرك البحث المبرمَج"، يمكنك إضافة عنصر البحث المبرمَج إلى موقعك الإلكتروني. لإجراء ذلك، تحتاج إلى نسخ بعض الرموز ولصقها في 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>

تجربة تنسيقات مختلفة

في كثير من الحالات، يكون من المنطقي أن يظهر مربّع البحث بشكل مستقل عن نتائج البحث. يتيح لك التخطيط المكون من عمودين عرض مربع بحث في منطقة واحدة من صفحتك (على سبيل المثال في الشريط الجانبي) وعرض النتائج في منطقة مختلفة (على سبيل المثال، المنطقة الرئيسية للصفحة).

لتغيير تخطيط المحرك، انتقل إلى القسم التنسيق في صفحة الشكل والأسلوب في لوحة التحكم. بعد تحديد وحفظ التخطيط المكون من عمودين في لوحة التحكم، يجب أيضًا تغيير رمز 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 للإشارة إلى عنوان URL الذي تريد عرض النتائج فيه.

<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" في عنوان URL:

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

اطّلِع على المعلمة q=myQuery في شريط العناوين. وهذه هي الطريقة التي يحدّد بها العنصر <div class="gcse-searchresults-only"></div> نتائج طلب البحث التي سيتم عرضها.

التجربة الآن

التالي...

انتقِل إلى تفعيل ميزة "الإكمال التلقائي".