หน้านี้จะอธิบายวิธีปรับแต่งรูปลักษณ์ของเครื่องมือค้นหาโดยใช้ไฟล์บริบท ซึ่งเป็นข้อกำหนด XML สำหรับเครื่องมือค้นหาของคุณ
- ภาพรวม
- องค์ประกอบ
LookAndFeel
- แอตทริบิวต์ขององค์ประกอบ
LookAndFeel
- องค์ประกอบย่อยของ
LookAndFeel
- การเพิ่มโลโก้ลงในหน้าผลลัพธ์ที่ฝากกับ Google
ภาพรวม
นอกเหนือจากการใช้ Programmable Search Engine Control Panel แล้ว คุณยังสามารถควบคุมรูปลักษณ์ของเครื่องมือค้นหาได้ด้วยการแก้ไขไฟล์ XML บริบท (ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อดีและข้อเสียของแต่ละรูปแบบในหน้าข้อมูลเบื้องต้น) หากคุณไม่คุ้นเคยกับไฟล์บริบท โปรดอ่านบริบท: การกำหนดเครื่องมือค้นหา
คุณใช้องค์ประกอบ Programmable Search เพื่อฝัง Programmable Search Engine ไว้ในหน้าเว็บและแอปพลิเคชันอื่นๆ โดยใช้ JavaScript เพื่อการแสดงเครื่องมือค้นหาที่ยืดหยุ่นยิ่งขึ้น
หากหน้าเว็บของคุณมีข้อมูลที่มีโครงสร้างด้วย คุณสามารถสร้างตัวอย่างข้อมูลที่มีการนำเสนอที่สมบูรณ์ยิ่งขึ้นและเนื้อหาที่กำหนดเองได้ ข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่งตัวอย่างข้อมูลผลการค้นหา
ก่อนที่จะเริ่มออกแบบรูปลักษณ์ของ Programmable Search Engine โปรดอ่านหลักเกณฑ์ในการติดตั้งใช้งาน Programmable Search Engine เอกสารนี้เป็นเอกสารสั้นๆ ที่บอกคุณว่าคุณควรจัดการกับการสร้างแบรนด์และการระบุแหล่งที่มาของ Google อย่างไร
องค์ประกอบ LookAndFeel
ในไฟล์บริบท ข้อกำหนดเฉพาะด้านรูปลักษณ์ทั้งหมดจะกำหนดโดยองค์ประกอบ LookAndFeel
ภายใต้ CustomSearchEngine
องค์ประกอบนี้กำหนดว่าจะแสดงโฆษณาหรือไม่ แสดงผลส่วนผลการค้นหาอย่างไร และวิธีแสดงผลการค้นหาแต่ละรายการ ตัวอย่างต่อไปนี้แสดงแอตทริบิวต์และองค์ประกอบย่อยทั้งหมดขององค์ประกอบ LookAndFeel
<CustomSearchEngine ... > <Title>...</Title> <Description>...</Description> <Context> ... </Context> <LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif"/> <Logo /> <Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/> <Promotions title_color="#006600" title_visited_color="#663399" url_color="#3366ff" background_color="#FFFFFF" border_color="#ffff33" show_image="true" show_snippet="true" snippet_color="#330000" title_hover_color="#0000CC" title_active_color="#0000CC" /> <SearchControls input_border_color="#BCCDF0" button_border_color="#666666" button_background_color="#CECECE" tab_border_color="#E9E9E9" tab_background_color="#E9E9E9" tab_selected_border_color="#FF9900" tab_selected_background_color="#FFFFFF" /> <Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" /> </LookAndFeel> <AdSense /> <EnterpriseAccount /> </CustomSearchEngine>
แอตทริบิวต์และองค์ประกอบ LookAndFeel
บางรายการไม่เกี่ยวข้องกับเครื่องมือค้นหาบางประเภท เช่น แอตทริบิวต์ googlebranding
จะใช้สำหรับเครื่องมือค้นหาที่โฮสต์โดย Google เท่านั้น และจะไม่มีผลหากเครื่องมือค้นหาของคุณใช้ตัวเลือกการโฮสต์ "องค์ประกอบการค้นหา"
เมื่อดาวน์โหลดไฟล์บริบทของเครื่องมือค้นหาจากหน้าภาพรวมของ ControlPanel คุณจะพบส่วน LookAndFeel
ที่กำหนดไว้อย่างครบถ้วน แม้แต่แอตทริบิวต์และองค์ประกอบที่ไม่เกี่ยวข้องกับประเภทของเครื่องมือค้นหาที่คุณเลือกก็จะมีการระบุค่าไว้ นั่นเป็นเพียงค่าเริ่มต้น ไม่ต้องสนใจ โปรดให้ความสนใจเฉพาะองค์ประกอบและแอตทริบิวต์ที่มีผลต่อประเภทเครื่องมือค้นหาของคุณ
ส่วนถัดไปจะอธิบายเกี่ยวกับเรื่องต่อไปนี้
แอตทริบิวต์ขององค์ประกอบ LookAndFeel
แอตทริบิวต์ LookAndFeel
ทั้งหมดเป็นค่าที่ไม่บังคับ หากคุณไม่ได้ระบุแอตทริบิวต์ Programmable Search Engine จะใช้ค่าเริ่มต้น ตัวอย่างเช่น หากคุณไม่กำหนดแอตทริบิวต์ element_layout
ขององค์ประกอบ LookAndFeel
Programmable Search Engine จะตีความว่าค่า element_layout
คือ "1"
แอตทริบิวต์บางอย่างอาจไม่ได้เกี่ยวข้องกับเครื่องมือค้นหาบางประเภท
Programmable Search Engine จะสร้างชุดโค้ดสำหรับช่องค้นหาและผลการค้นหาตามวิธีที่คุณกำหนดค่าของแอตทริบิวต์ คุณดูตัวอย่างโค้ดที่สร้างขึ้นได้ในส่วนรับโค้ดของหน้าภาพรวมของเครื่องมือค้นหา คุณสามารถคัดลอกข้อมูลโค้ดที่สร้างขึ้นและแทรกลงในหน้าเว็บของคุณได้
ต่อไปนี้เป็นตัวอย่างองค์ประกอบ LookAndFeel
ที่มีแอตทริบิวต์ที่กำหนดอย่างครบถ้วน
<LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif" />
ตารางต่อไปนี้แสดงแอตทริบิวต์ของ CustomSearchEngine
และค่าของแอตทริบิวต์
หมายเหตุ: กำหนดค่าของแอตทริบิวต์ที่เกี่ยวข้องกับตัวเลือกโฮสติ้งที่คุณเลือกเท่านั้น คอลัมน์ตัวเลือกโฮสติ้งจะแสดงตัวเลือกโฮสติ้งที่แอตทริบิวต์เหล่านี้จะมีผล
แอตทริบิวต์ | ตัวเลือกโฮสติ้ง | คำอธิบาย | ค่า |
---|---|---|---|
googlebranding |
ที่ฝากอยู่บน Google | กำหนดช่องค้นหาสำหรับเครื่องมือค้นหาของคุณ | โปรดใช้ค่าใดค่าหนึ่งต่อไปนี้
|
element_layout |
องค์ประกอบการค้นหา | กำหนดวิธีวางช่องค้นหาและผลการค้นหาในหน้าเว็บ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกการออกแบบต่างๆ โปรดดูที่ การออกแบบองค์ประกอบการค้นหา |
โปรดใช้ค่าใดค่าหนึ่งต่อไปนี้
|
theme |
องค์ประกอบการค้นหา | กำหนดรูปแบบของช่องค้นหาและผลการค้นหา | โปรดใช้ค่าใดค่าหนึ่งต่อไปนี้
|
custom_theme |
องค์ประกอบการค้นหา | หากต้องการปรับแต่งธีมให้แสดงสีและชุดแบบอักษรที่แตกต่างจากมาตรฐาน ให้ตั้งค่าเป็น true มิฉะนั้น Programmable Search Engine จะไม่สนใจการปรับแต่งสีและแบบอักษรซึ่งกำหนดไว้ในองค์ประกอบย่อยของ LookAndFeel |
ระบุอย่างใดอย่างหนึ่งต่อไปนี้
|
text_font |
ทั้งหมด | ตั้งค่าชุดแบบอักษรสำหรับข้อความในผลการค้นหา |
แม้ว่าแผงควบคุมจะอนุญาตให้คุณเลือกชุดแบบอักษรได้เพียง 5 ชุด แต่คุณสามารถเลือกชุดแบบอักษรได้กว้างขึ้นในไฟล์บริบท คุณอาจมีรายการชุดแบบอักษรที่คั่นด้วยคอมมาเป็นค่าสำหรับแอตทริบิวต์นี้ ดังตัวอย่างต่อไปนี้ text_font="Arial, sans-serif" หากคุณแสดงแบบอักษรมากกว่า 1 ชุด เบราว์เซอร์จะใช้แบบอักษรแรก หากเบราว์เซอร์ไม่รองรับแบบอักษรแรก ระบบจะลองใช้แบบอักษรถัดไป ดังนั้น ให้เริ่มด้วยแบบอักษรที่คุณต้องการ และลงท้ายด้วยชุดแบบอักษรทั่วไป เช่น Serif หรือ san-serif กลุ่มทั่วไปจะช่วยให้เบราว์เซอร์เลือกแบบอักษรที่คล้ายกันในกลุ่มทั่วไปได้เมื่อไม่มีแบบอักษรในรายการที่ใช้ได้ หากใช้ชุดแบบอักษรที่มีชื่อมากกว่า 1 คำ คุณต้องล้อมรอบด้วยคำในเครื่องหมายคำพูด ( |
องค์ประกอบย่อยของ LookAndFeel
องค์ประกอบย่อยทั้งหมดของ LookAndFeel
เกี่ยวข้องกับองค์ประกอบ Search เท่านั้น ยกเว้นองค์ประกอบ Promotions
แอตทริบิวต์ส่วนใหญ่ขององค์ประกอบ Promotions
มีผลกับเครื่องมือค้นหาทุกประเภท โดยส่วนใหญ่แล้ว องค์ประกอบย่อยจะควบคุมสีของคอมโพเนนต์ต่างๆ ในเครื่องมือค้นหา ค่าสีคือค่าฐานสิบหก HTML มาตรฐาน หากคุณไม่ได้กำหนดแอตทริบิวต์ขององค์ประกอบ Programmable Search Engine จะใช้ค่าเริ่มต้น
หมายเหตุ: หากต้องการปรับแต่งองค์ประกอบการค้นหา คุณต้องตั้งค่าแอตทริบิวต์ custom_theme
ขององค์ประกอบ LookAndFeel
เป็น true
ก่อนกำหนดค่าในองค์ประกอบย่อย หากคุณไม่ตั้งค่าแอตทริบิวต์ custom_theme
เป็น true
ค่าทั้งหมดที่คุณกำหนดไว้ในองค์ประกอบย่อย (ยกเว้น Promotions
) จะละเว้นโดย Programmable Search Engine
LookAndFeel
มีองค์ประกอบย่อยต่อไปนี้
Colors
- กำหนดสีขององค์ประกอบการค้นหาPromotions
- กำหนดรูปลักษณ์ของโปรโมชัน การตั้งค่านี้จะมีผลกับเครื่องมือค้นหาทุกประเภทSearchControls
- กำหนดสีของคอมโพเนนต์ของช่องค้นหาองค์ประกอบการค้นหาResults
- กำหนดสีของคอมโพเนนต์ของส่วนผลการค้นหาองค์ประกอบของ Search
องค์ประกอบย่อย Colors
องค์ประกอบ Colors
เป็นตัวกำหนดสีขององค์ประกอบการค้นหา หากต้องการเปลี่ยนสีองค์ประกอบย่อยขององค์ประกอบการค้นหา เช่น ผลการค้นหาแต่ละรายการหรือผลการค้นหาที่ได้รับการสนับสนุน คุณจะต้องตั้งค่าในองค์ประกอบระดับข้างเคียงอื่นๆ
ต่อไปนี้เป็นตัวอย่างองค์ประกอบ Colors
ที่มีแอตทริบิวต์ที่กำหนดอย่างครบถ้วน
<Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/>
ตารางต่อไปนี้แสดงแอตทริบิวต์ที่ไม่บังคับของ Colors
และค่า
แอตทริบิวต์ | สีของคอมโพเนนต์ |
---|---|
url |
URL ที่ด้านล่างของข้อมูลโค้ดผลการค้นหาแต่ละรายการ |
background |
พื้นหลังของส่วนผลลัพธ์ทั้งหมด |
border |
เส้นขอบรอบๆ องค์ประกอบของการค้นหา |
title |
ชื่อของตัวอย่างผลการค้นหา ชื่อคือบรรทัดแรกของผลลัพธ์แต่ละรายการ |
text |
ข้อความส่วนเนื้อหาของตัวอย่างข้อมูลผลลัพธ์ |
visited |
ลิงก์หลังจากที่ผู้ใช้คลิก |
title_hover |
สีของชื่อเมื่อผู้ใช้วางเมาส์เหนือลิงก์ |
title_active |
สีของชื่อเมื่อผู้ใช้คลิกลิงก์ |
องค์ประกอบย่อย Promotions
องค์ประกอบ Promotions
จะควบคุมสีของโปรโมชัน รวมถึงกำหนดว่าควรแสดงรูปภาพและคำอธิบายหรือไม่ แม้ว่าจะมีการกำหนดรูปลักษณ์ของการโปรโมตไว้ในไฟล์บริบท แต่เนื้อหาของโปรโมชันจะถูกกำหนดในไฟล์ XML ผลการค้นหาที่ได้รับการสนับสนุน ดูข้อมูลเพิ่มเติมได้ที่โปรโมชัน
ต่อไปนี้เป็นตัวอย่างองค์ประกอบ Promotions
ที่มีแอตทริบิวต์ที่กำหนดอย่างครบถ้วน
<Promotions title_color="#006600" title_visited_color="#663399" url_color="#3366ff" background_color="#FFFFFF" border_color="#ffff33" snippet_color="#330000" show_image="true" show_snippet="true" title_hover_color="#0000CC" title_active_color="#0000CC" />
ตารางต่อไปนี้แสดงแอตทริบิวต์ที่ไม่บังคับของ Promotions
และค่า
แอตทริบิวต์ | สีของคอมโพเนนต์ |
---|---|
title_color |
ชื่อของโปรโมชันแต่ละรายการ |
title_visited_color |
ชื่อหลังจากที่ผู้ใช้คลิก |
url_color |
URL ที่ด้านล่างของโปรโมชันแต่ละรายการ |
background_color |
สีพื้นหลังของส่วนโปรโมชันทั้งหมด |
border_color |
เส้นขอบรอบส่วนโปรโมชันทั้งหมด |
snippet_color |
คำอธิบายของโปรโมชัน หากโปรโมชันไม่มีคำอธิบาย การตั้งค่าจะไม่เปลี่ยนแปลง |
show_image |
หากต้องการแสดงรูปภาพในโปรโมชัน ให้ตั้งค่าแอตทริบิวต์นี้เป็น รูปภาพที่จะแสดงได้รับการตั้งค่าไว้ในไฟล์โปรโมชัน |
show_snippet |
หากต้องการแสดงรายละเอียดในโปรโมชัน ให้ตั้งค่าแอตทริบิวต์นี้เป็น เนื้อหาของคำอธิบายมีระบุไว้ในไฟล์โปรโมชัน |
title_hover_color |
ชื่อเมื่อผู้ใช้วางเมาส์เหนือลิงก์ |
title_active_color |
ชื่อเมื่อผู้ใช้คลิกลิงก์ |
องค์ประกอบย่อย SearchControls
องค์ประกอบ SearchControls
จะควบคุมสีของช่องค้นหาและแท็บสำหรับการปรับแต่งในองค์ประกอบของ Search หากคุณสร้างป้ายกำกับการปรับเกณฑ์การค้นหาไว้ในเครื่องมือค้นหาของคุณ ป้ายกำกับจะปรากฏเป็นแท็บในองค์ประกอบของการค้นหา หากคุณไม่มีป้ายกำกับการปรับแต่ง แท็บจะไม่ปรากฏ และ Programmable Search Engine จะไม่สนใจค่าของแอตทริบิวต์
หากต้องการให้ Programmable Search Engine เติมข้อความอัตโนมัติ โปรดดูส่วนที่อธิบายแอตทริบิวต์ autocompletions
ขององค์ประกอบ CustomSearchEngine
ในไฟล์บริบท
ต่อไปนี้เป็นตัวอย่างองค์ประกอบ SearchControls
ที่มีแอตทริบิวต์ที่กำหนดอย่างครบถ้วน
<SearchControls input_border_color="#BCCDF0" button_border_color="#666666" button_background_color="#CECECE" tab_border_color="#E9E9E9" tab_background_color="#E9E9E9" tab_selected_border_color="#FF9900" tab_selected_background_color="#FFFFFF" />
ตารางต่อไปนี้แสดงแอตทริบิวต์ที่ไม่บังคับของ SearchControls
และค่า
แอตทริบิวต์ | สีของคอมโพเนนต์ |
---|---|
input_border_color |
เส้นขอบของช่องป้อนข้อมูลสำหรับคำค้นหา |
button_border_color |
เส้นขอบรอบๆ ปุ่มค้นหา |
button_background_color |
ปุ่มค้นหา |
tab_border_color |
เส้นขอบรอบแท็บที่ไม่ได้โฟกัสในปัจจุบัน (ผู้ใช้ไม่ได้เลือก) |
tab_background_color |
แท็บที่ไม่ได้อยู่ในโฟกัส |
tab_selected_border_color |
แท็บที่ผู้ใช้เพิ่งเลือกไปโดยการคลิก แท็บที่ผู้ใช้คลิกล่าสุดจะได้รับสถานะที่เลือก |
tab_selected_background_color |
สีของแท็บที่เลือกไว้ในปัจจุบัน |
องค์ประกอบย่อย Results
องค์ประกอบ Results
จะควบคุมสีของผลการค้นหาแต่ละรายการในองค์ประกอบของ Search ผลลัพธ์แต่ละรายการจะสร้างหน่วยของชื่อ ตัวอย่างข้อมูลของผลลัพธ์ และลิงก์ การกำหนดองค์ประกอบย่อยนี้ช่วยให้คุณสามารถแสดงภาพของผลลัพธ์แต่ละรายการ หรือไฮไลต์ผลลัพธ์ที่ผู้ใช้เลือก ถ้าคุณไม่ต้องการแสดงผลลัพธ์แบบเฉพาะเจาะจงหรือเน้นผลลัพธ์ คุณสามารถกำหนดเส้นขอบและพื้นหลังให้ตรงกับสีของพื้นหลังสำหรับส่วนผลลัพธ์ทั้งหมด
รูปที่ 1: ผลลัพธ์ที่มีการแจกแจงผลลัพธ์แต่ละรายการและผลลัพธ์แต่ละรายการที่มีการไฮไลต์ด้วยเมาส์โอเวอร์
ผลลัพธ์จะมี 2 สถานะ ดังนี้
- สถานะปกติ - ลักษณะที่ปรากฏของผลลัพธ์แต่ละรายการเมื่อเมาส์ไม่ได้อยู่เหนือผลลัพธ์นั้นๆ
- สถานะวางเมาส์เหนือ - ลักษณะของผลลัพธ์แต่ละรายการเมื่อเคอร์เซอร์ของเมาส์วางเหนือผลลัพธ์นั้น
องค์ประกอบนี้ควบคุมสีของผลลัพธ์แต่ละรายการ หากต้องการเปลี่ยนพื้นหลังสำหรับผลลัพธ์ทั้งหมด โปรดดูที่ส่วนองค์ประกอบย่อยสี
ต่อไปนี้เป็นตัวอย่างองค์ประกอบ Results
ที่มีแอตทริบิวต์ที่กำหนดอย่างครบถ้วน
<Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" />
ตารางต่อไปนี้แสดงแอตทริบิวต์ที่ไม่บังคับของ Results
และค่า
แอตทริบิวต์ | สีของคอมโพเนนต์ |
---|---|
border_color |
เส้นขอบของผลลัพธ์แต่ละรายการในสถานะปกติ |
border_hover_color |
ขอบของผลลัพธ์เมื่อเมาส์อยู่เหนือผลลัพธ์ |
background_color |
สีพื้นหลังของบุคคลจะทำให้มีสถานะปกติ |
background_hover_color |
พื้นหลังของผลลัพธ์เมื่อเมาส์วางอยู่เหนือผลลัพธ์ |
การเพิ่มโลโก้ลงในหน้าผลลัพธ์ที่ฝากกับ Google
หากให้ Google โฮสต์หน้าผลการค้นหาของคุณ คุณสามารถใส่โลโก้หรือรูปภาพขนาดเล็กไว้ถัดจากช่องค้นหาในหน้าผลการค้นหาได้ รูปภาพต้องเป็นไฟล์ .jpg, .png หรือ .gif ที่โฮสต์บนเว็บไซต์ (ถือว่าเป็นรูปของคุณเองหรือจากเว็บไซต์ที่ไม่มีข้อจำกัดด้านลิขสิทธิ์) คุณสามารถเชื่อมโยง URL กับรูปภาพ ซึ่งทำให้คลิกได้
หมายเหตุ: หากคุณใช้ Programmable Search Element เพื่อโฮสต์ผลการค้นหา คุณจะเพิ่มรูปภาพโดยใช้แผงควบคุมหรือไฟล์บริบทไม่ได้
ต่อไปนี้เป็นตัวอย่างของหน้าผลการค้นหาที่มีโลโก้
รูปที่ 3: ช่องค้นหาที่มีรูปภาพ
รูปภาพและ URL ของรูปภาพจะกำหนดในแอตทริบิวต์ขององค์ประกอบ Logo
ภายใต้องค์ประกอบ LookAndFeel
ตัวอย่างต่อไปนี้แสดงวิธีเพิ่มโลโก้ลงในหน้าผลลัพธ์ที่ฝากกับ Google
<LookAndFeel> <Logo url="http://www.ascii.com/logo.gif" destination="http://www.ascii.com/" height="90"/> ... </LookAndFeel>
ตารางต่อไปนี้แสดงแอตทริบิวต์ขององค์ประกอบ Logo
แอตทริบิวต์ | คำอธิบายและค่า |
---|---|
url |
URL ของรูปภาพ เป็นไฟล์ .gif, .png หรือ .jpg |
destination |
หากต้องการให้รูปภาพเป็นลิงก์ ให้กำหนดปลายทาง URL |
height |
ความสูงของรูปภาพเป็นพิกเซล ความสูงสูงสุดคือ 100 พิกเซล คุณไม่จำเป็นต้องระบุความกว้างเนื่องจาก Programmable Search Engine จะยังคงรักษาสัดส่วนภาพไว้ คุณไม่จำเป็นต้องระบุความสูง เว้นแต่ว่ารูปภาพจะมีขนาดใหญ่เกินไป และคุณต้องการให้ Programmable Search Engine ลดขนาดลง |