בדף זה מוסבר איך להתאים אישית את המראה של מנוע החיפוש באמצעות קובץ ההקשר, שהוא מפרט ה-XML של מנוע החיפוש.
- סקירה כללית
- הרכיב
LookAndFeel
- המאפיינים של הרכיב
LookAndFeel
- רכיבי הצאצא של
LookAndFeel
- הוספת לוגו לדף תוצאות באירוח Google
סקירה כללית
בנוסף לשימוש בלוח הבקרה של Programmable Search Engine, ניתן לשלוט במראה ובתחושה של מנוע החיפוש על ידי עריכת קובץ ה-XML של ההקשר. (מידע נוסף על היתרונות והחסרונות של כל פורמט זמין בדף העקרונות הבסיסיים). אם אינך מתמצא בקובצי הקשר, קרא את המאמר הקשר: הגדרת מנוע חיפוש.
לקבלת גמישות רבה יותר בתצוגה של מנוע החיפוש, אפשר להשתמש ב-Programmable Search Element, שמאפשר להטמיע את 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, והמערכת מתעלמת ממנו אם מנוע החיפוש משתמש באפשרות האירוח 'רכיב חיפוש'.
כשמורידים את קובץ ההקשר של מנוע החיפוש מהדף Overview ב-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
והערכים שלהם.
הערה: צריך להגדיר רק את הערכים של המאפיינים שרלוונטיים לאפשרות האירוח שבחרתם. בעמודה אפשרויות אירוח מופיעות אפשרויות האירוח שהמאפיינים האלה חלים עליהן.
מאפיין | אפשרויות אירוח | התיאור | Value |
---|---|---|---|
googlebranding |
מתארח ב-Google | הגדרה זו קובעת את תיבת החיפוש עבור מנוע החיפוש שלך. | צריך להשתמש באחד מהערכים הבאים:
|
element_layout |
רכיב חיפוש | הגדרה זו קובעת את הפריסה של תיבת החיפוש ותוצאות החיפוש בדף. מידע נוסף על אפשרויות הפריסה השונות זמין במאמר פריסת רכיב חיפוש. |
צריך להשתמש באחד מהערכים הבאים:
|
theme |
רכיב חיפוש | הגדרה זו קובעת את הסגנון של תיבת החיפוש ותוצאות החיפוש. | צריך להשתמש באחד מהערכים הבאים:
|
custom_theme |
רכיב חיפוש | כדי להתאים אישית את העיצוב כך שיוצגו צבעים שונים ומשפחת גופנים שונה מהרגיל, יש להגדיר את הערך true . אחרת, Programmable Search Engine מתעלם מההתאמה האישית שביצעת לצבעים ולגופנים, שמוגדרים ברכיבי הצאצא של LookAndFeel . |
צריך לציין אחת מהאפשרויות הבאות:
|
text_font |
הכול | מגדיר את משפחת הגופנים לטקסט בתוצאות החיפוש. |
על אף שלוח הבקרה מאפשר לבחור רק חמש משפחות גופנים, ניתן לבחור קבוצה רחבה יותר של משפחת גופנים בקובץ ההקשר. אפשר ליצור רשימה של משפחות גופנים שמופרדות בפסיקים בתור הערך של המאפיין הזה, כמו בדוגמה הבאה: text_font="Arial, sans-serif" אם ציינתם יותר ממשפחת גופנים אחת, הדפדפן ישתמש בגופן הראשון. אם הדפדפן לא תומך בגופן הראשון, הוא ינסה את הגופן הבא. לכן כדאי להתחיל בגופן הרצוי ולהסתיים במשפחה גנרית, כגון serif או san-serif. הקבוצה הגנרית מאפשרת לדפדפן לבחור גופן דומה מהמשפחה הגנרית כאשר אף אחד מהגופנים הרשומים אינו זמין. אם משתמשים במשפחת גופנים שיש בה יותר ממילה אחת, יש לתחום אותה בין ישויות מירכאות ( |
רכיבי הצאצא של LookAndFeel
כל רכיבי הצאצא של LookAndFeel
, מלבד הרכיב Promotions
, מתייחסים רק לרכיב החיפוש. רוב המאפיינים של הרכיב Promotions
רלוונטיים לכל הסוגים של מנועי החיפוש. ברוב המקרים, רכיבי הצאצא שולטים בצבעים של רכיבים שונים במנוע החיפוש. ערכי הצבעים הם סימונים הקסדצימליים של HTML רגילים. אם לא תגדירו את מאפייני הרכיב, Programmable Search Engine ישתמש בערכי ברירת המחדל.
הערה: כדי להתאים אישית רכיב חיפוש, צריך להגדיר קודם את המאפיין custom_theme
של הרכיב LookAndFeel
כ-true
לפני שמגדירים את הערכים ברכיבי הצאצא. אם לא מגדירים את המאפיין custom_theme
כ-true
, מערכת Programmable Search Engine מתעלמת מכל הערכים שהגדרת ברכיבי הצאצא (למעט Promotions
).
LookAndFeel
כולל את רכיבי הצאצא הבאים.
Colors
- קובע את הצבעים של רכיב החיפוש.Promotions
- קובע את המראה והסגנון של מבצעים. ההגדרות חלות על כל הסוגים של מנועי החיפוש.SearchControls
- קובע את הצבעים של הרכיבים בתיבת החיפוש של רכיבי החיפוש.Results
- קובע את צבעי הרכיבים בקטע התוצאות של רכיבי החיפוש.
רכיב הצאצא 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
קובע את הצבעים של תיבת החיפוש ושל הכרטיסיות של חידודים ברכיב חיפוש. אם יצרתם תוויות חידוד במנוע החיפוש שלכם, התוויות יופיעו ככרטיסיות ברכיב החיפוש. אם אין לכם תוויות חידוד, הכרטיסיות לא יופיעו, ו-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
קובע את הצבע של תוצאות בודדות ברכיב החיפוש. כל תוצאה בנפרד יוצרת יחידה של כותרת, קטע מידע של תוצאה וקישור. הגדרת רכיב הצאצא הזה מאפשרת לך לתחום באופן חזותי תוצאות בודדות או להדגיש תוצאות שנבחרו על ידי משתמשים. אם אתם לא רוצים לתחום תוצאות בודדות או להדגיש תוצאה, תוכלו להגדיר את הגבולות והרקעים כך שיתאימו לצבע הרקע של קטע התוצאות כולו.
איור 1: תוצאות עם תוצאות בודדות מסומנות ותוצאה בודדת מודגשת בהעברת העכבר.
לתוצאות יש שני מצבים:
- מצב רגיל - ההופעה של תוצאה מסוימת כאשר העכבר לא מרחף מעליה.
- מצב העברת העכבר - המראה של תוצאה מסוימת כאשר סמן העכבר מרחף מעליה.
הרכיב הזה קובע את הצבע של התוצאות הבודדות. כדי לשנות את הרקע של כל התוצאות, עיינו בקטע רכיב הצאצא של הצבע.
זוהי דוגמה לרכיב 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 שמתארח באתר כלשהו (כנראה שלך או מאתר שאין בו הגבלות על זכויות יוצרים). אפשר לשייך כתובת אתר לתמונה, וכך ללחוץ עליה.
הערה: אם אתם משתמשים ב-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 |
אם ברצונך שהתמונה תהיה קישור, עליך להגדיר את יעד כתובת האתר. |
height |
גובה התמונה בפיקסלים. הגובה המקסימלי הוא 100 פיקסלים. אין צורך לציין את הרוחב, כיוון שיחס הגובה-רוחב נשמר ב-Programmable Search Engine. אל תטרחו לציין את הגובה, אלא אם התמונה גדולה מדי ואתם רוצים להקטין את גודל התמונה באמצעות Programmable Search Engine. |