การใช้งานช่องค้นหา

เมื่อสร้าง Programmable Search Engine แล้ว คุณจะเพิ่มองค์ประกอบ Programmable Search ลงในเว็บไซต์ได้ ในการดำเนินการ คุณจะต้องคัดลอกโค้ดและวางลงใน HTML ของเว็บไซต์ในตำแหน่งที่ต้องการให้เครื่องมือค้นหาปรากฏ

  1. ในแผงควบคุม ให้คลิกเครื่องมือค้นหาที่คุณต้องการใช้
  2. ในส่วนพื้นฐานของหน้าภาพรวม ให้คลิกรับโค้ด คัดลอกโค้ดแล้ววางลงในซอร์สโค้ด HTML ของหน้าเว็บที่คุณต้องการให้องค์ประกอบ Programmable Search ปรากฏ

องค์ประกอบ <div class="gcse-search"></div> เป็นตัวยึดตำแหน่ง ซึ่งจะแสดงองค์ประกอบการค้นหา (ทั้งช่องค้นหาและผลการค้นหา)

<!-- ใส่รหัส Programmable Search Engine ของคุณเองที่นี่ --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> 
<div class="gcse-search"></div>

การลองใช้เลย์เอาต์แบบต่างๆ

ในหลายกรณี การที่ช่องค้นหาปรากฏอย่างอิสระจากผลการค้นหาเป็นเรื่องที่ดี เลย์เอาต์แบบ 2 คอลัมน์ช่วยให้คุณแสดงช่องค้นหาในพื้นที่หนึ่งของหน้าเว็บ (เช่น ในแถบด้านข้าง) และแสดงผลการค้นหาในอีกพื้นที่หนึ่ง (เช่น พื้นที่หลักของหน้าเว็บ)

หากต้องการเปลี่ยนเลย์เอาต์ของเครื่องมือ ให้ไปที่ส่วนเลย์เอาต์ของหน้ารูปลักษณ์ในแผงควบคุม หลังจากเลือกและบันทึกเค้าโครง 2 คอลัมน์ในแผงควบคุมแล้ว คุณยังต้องเปลี่ยนโค้ด HTML สำหรับองค์ประกอบการค้นหาด้วย

<!-- ใส่รหัส Programmable Search Engine ของคุณเองที่นี่ --> <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>

เลย์เอาต์ที่น่าสนใจอีกรูปแบบคือตัวเลือกแบบ 2 หน้า ซึ่งจะช่วยให้คุณใช้ช่องค้นหาของคุณเองในหน้าหนึ่งและแสดงผลการค้นหามาตรฐานในอีกหน้าหนึ่งได้โดยใช้พารามิเตอร์ในแถบที่อยู่

เลือกและบันทึกรูปแบบ 2 หน้าในแผงควบคุม ใช้ช่องค้นหาแบบสแตนด์อโลนในหน้าหนึ่ง โดยเปลี่ยนแอตทริบิวต์ 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> รู้ว่าจะแสดงผลการค้นหาใด

ลองใช้

ถัดไป...

ไปที่การเปิดใช้การเติมข้อความอัตโนมัติ