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

بعد إنشاء "محرك البحث المبرمَج"، يمكنك إضافة "عنصر البحث المبرمَج" إلى موقعك الإلكتروني. لإجراء ذلك، عليك نسخ بعض الرموز ولصقها في ملف HTML لموقعك الإلكتروني حيث تريد أن يظهر محرك البحث.

  1. في لوحة التحكم، انقر على محرك البحث الذي تريد استخدامه.
  2. في القسم أساسي من صفحة نظرة عامة، انقر على الحصول على الرمز. انسخ الرمز والصقه في رمز مصدر HTML لصفحتك في المكان الذي تريد ظهور "عنصر البحث المبرمَج" فيه.

العنصر <div class="gcse-search"></div> هو عنصر نائب، وهذا هو المكان الذي سيتم فيه عرض عنصر البحث (كل من مربّع البحث ونتائج البحث).

<!-- أدخِل معرّف محرك البحث المبرمَج هنا --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<div class="gcse-search"></div>

تجربة تخطيطات مختلفة

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

لتغيير تنسيق المحرّك، انتقِل إلى قسم التنسيق في صفحة الشكل والأسلوب في لوحة التحكّم. بعد تحديد وحفظ التخطيط المكون من عمودين في لوحة التحكم، تحتاج أيضًا إلى تغيير رمز HTML لعنصر البحث.

<!-- أدخِل معرّف محرك البحث المبرمَج هنا --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<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> نتائج طلب البحث المطلوب عرضها.

التجربة الآن

التالي...

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