Na tej stronie opisujemy, jak dostosować wygląd wyszukiwarki za pomocą pliku kontekstu, który jest specyfikacją XML Twojej wyszukiwarki.
- Omówienie
- Element
LookAndFeel
- Atrybuty elementu
LookAndFeel
- Elementy podrzędne elementu
LookAndFeel
- Dodawanie logo do strony z wynikami hostowanymi przez Google
Opis
Oprócz korzystania z Panelu sterowania Wyszukiwarki niestandardowej możesz też kontrolować wygląd i styl wyszukiwarki, edytując kontekstowy plik XML. (Więcej informacji o zaletach i wadach poszczególnych formatów znajdziesz na stronie Podstawy). Jeśli nie znasz się na plikach kontekstowych, przeczytaj artykuł Kontekst: definiowanie wyszukiwarki.
Aby uzyskać jeszcze większą elastyczność w wyświetlaniu wyszukiwarki, możesz użyć elementu Wyszukiwarki niestandardowej, który umożliwia umieszczanie Wyszukiwarki niestandardowej na stronie internetowej i innych aplikacjach za pomocą JavaScriptu.
Jeśli Twoje strony internetowe zawierają też uporządkowane dane, możesz tworzyć krótkie opisy z bogatszą prezentacją i niestandardową treścią. Więcej informacji o dostosowywaniu fragmentów z wynikami
Zanim zaczniesz projektować wygląd i styl Wyszukiwarki niestandardowej, przeczytaj artykuł Wskazówki dotyczące implementacji Wyszukiwarki niestandardowej. To krótki dokument wyjaśniający, jak należy postępować w przypadku promowania marki Google i ich atrybucji.
Element LookAndFeel
W pliku kontekstu wszystkie specyfikacje wyglądu i działania są określone przez element LookAndFeel
w polu CustomSearchEngine
. Od tego elementu zależy, czy wyświetlane są reklamy, jak tworzona jest sekcja wyników wyszukiwania oraz jak wyświetlane są poszczególne wyniki wyszukiwania. Poniższy przykład pokazuje wszystkie atrybuty i elementy podrzędne elementu 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>
Nie wszystkie atrybuty i elementy LookAndFeel
są odpowiednie dla wszystkich typów wyszukiwarek. Na przykład atrybut googlebranding
jest używany tylko w przypadku wyszukiwarek hostowanych przez Google i jest ignorowany, jeśli wyszukiwarka używa opcji hostingu „Element wyszukiwania”.
Po pobraniu pliku kontekstu wyszukiwarki ze strony Overview (Przegląd) w panelu sterowania w pełni zdefiniowana sekcja LookAndFeel
będzie dostępna. Nawet atrybuty i elementy niezwiązane z wybranym typem wyszukiwarki będą miały zdefiniowane wartości. To są tylko wartości domyślne – zignoruj je. Zwracaj uwagę tylko na te elementy i atrybuty, które mają wpływ na typ wyszukiwarki.
W kolejnych sekcjach omówiono następujące zagadnienia:
Atrybuty elementu LookAndFeel
Wszystkie atrybuty LookAndFeel
są opcjonalne. Jeśli ich nie określisz, Wyszukiwarka niestandardowa będzie używać wartości domyślnych. Jeśli na przykład nie zdefiniujesz atrybutu element_layout
elementu LookAndFeel
, Wyszukiwarka niestandardowa zinterpretuje to, że wartość element_layout
to "1"
. Nie wszystkie atrybuty mają zastosowanie do wszystkich typów wyszukiwarek.
Zgodnie ze sposobem zdefiniowania wartości atrybutów Wyszukiwarka niestandardowa generuje zestaw kodu dla pola wyszukiwania i wyników wyszukiwania. Podgląd wygenerowanego kodu możesz zobaczyć w sekcji Pobierz kod na stronie Przegląd w wyszukiwarce. Wygenerowany fragment kodu możesz skopiować i wstawić na swojej stronie internetowej.
Poniżej znajduje się przykład elementu LookAndFeel
z w pełni zdefiniowanymi atrybutami:
<LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif" />
W tabeli poniżej znajdziesz listę atrybutów atrybutu CustomSearchEngine
i ich wartości.
Uwaga: określ wartości tylko tych atrybutów, które mają związek z wybraną opcją hostingu. Kolumna Opcje hostingu zawiera informacje o opcjach hostingu, których dotyczą te atrybuty.
Atrybut | Opcje hostingu | Opis | Wartość |
---|---|---|---|
googlebranding |
Na serwerach Google | Określa pole wyszukiwania wyszukiwarki. | Użyj jednej z tych wartości:
|
element_layout |
Wyszukiwany element | Określa sposób układu pola wyszukiwania i wyników wyszukiwania na stronie. Więcej informacji o różnych opcjach układu znajdziesz w artykule Układ elementu wyszukiwania. |
Użyj jednej z tych wartości:
|
theme |
Wyszukiwany element | Określa styl pola wyszukiwania i wyników wyszukiwania. | Użyj jednej z tych wartości:
|
custom_theme |
Wyszukiwany element | Aby dostosować motyw i wyświetlić inne kolory i rodzinę czcionek niż wersja standardowa, ustaw wartość na true . W przeciwnym razie Wyszukiwarka niestandardowa ignoruje zmiany wprowadzone w kolorach i czcionkach zdefiniowane w elementach podrzędnych elementu LookAndFeel . |
Określ:
|
text_font |
Wszystko | Ustawia rodzinę czcionek dla tekstu, który ma się wyświetlać w wynikach wyszukiwania. |
W panelu sterowania możesz wybrać tylko 5 rodzin czcionek, ale w pliku kontekstowym możesz wybrać szerszy zestaw rodzin czcionek. Jako wartość tego atrybutu możesz podać listę rozdzielonych przecinkami rodzin czcionek, jak w tym przykładzie: text_font="Arial, sans-serif" Jeśli podasz więcej niż jedną rodzinę czcionek, przeglądarka użyje pierwszej z nich. Jeśli przeglądarka nie obsługuje pierwszej czcionki, próbuje użyć kolejnej. Zacznij więc od wybranej czcionki, a na końcu wpisz ogólną rodzinę, np. Serif lub San-Serif. Ogólna rodzina umożliwia przeglądarce wybranie podobnej czcionki z rodziny ogólnej, gdy żadna z podanych czcionek nie jest dostępna. Jeśli używasz rodziny czcionek, której nazwa składa się z więcej niż jednego słowa, musisz ją ująć w cudzysłów ( |
Elementy podrzędne elementu LookAndFeel
Wszystkie elementy podrzędne elementu LookAndFeel
(z wyjątkiem elementu Promotions
) odnoszą się tylko do elementu wyszukiwarki. Większość atrybutów elementu Promotions
ma zastosowanie do wszystkich typów wyszukiwarek. Elementy podrzędne kontrolują zazwyczaj kolory różnych komponentów wyszukiwarki. Wartości kolorów to standardowe wartości szesnastkowe HTML. Jeśli nie zdefiniujesz atrybutów elementu, Wyszukiwarka niestandardowa będzie używać wartości domyślnych.
Uwaga: jeśli chcesz dostosować element wyszukiwarki, musisz najpierw ustawić wartość atrybutu custom_theme
elementu LookAndFeel
na true
, zanim zdefiniujesz wartości w elementach podrzędnych. Jeśli nie ustawisz wartości atrybutu custom_theme
na true
, wszystkie wartości zdefiniowane w elementach podrzędnych (z wyjątkiem Promotions
) będą ignorowane przez Wyszukiwarka niestandardowa.
LookAndFeel
zawiera te elementy podrzędne.
Colors
– określa kolory elementu wyszukiwania.Promotions
– określa wygląd i styl promocji. Te ustawienia dotyczą wszystkich typów wyszukiwarek.SearchControls
– określa kolory komponentów pola wyszukiwania elementów wyszukiwania.Results
– określa kolory komponentów sekcji wyników elementu wyszukiwania.
Element podrzędny Colors
Element Colors
określa kolor wyszukiwarki. Aby zmienić kolory podkomponentów elementu wyszukiwania, np. poszczególnych wyników wyszukiwania lub promocji, musisz ustawić wartości w innych elementach równorzędnych.
Poniżej znajduje się przykład elementu Colors
z w pełni zdefiniowanymi atrybutami:
<Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/>
W tabeli poniżej znajdziesz listę atrybutów opcjonalnych Colors
i ich wartości.
Atrybut | Kolor komponentu |
---|---|
url |
Adres URL u dołu każdego fragmentu wyniku. |
background |
Tło całej sekcji wyników. |
border |
Obramowanie wokół elementu wyszukiwania. |
title |
Tytuły fragmentów z wynikami. Tytuł to pierwszy wiersz każdego wyniku. |
text |
Tekst główny fragmentu wyniku. |
visited |
Link po kliknięciu go przez użytkownika. |
title_hover |
Kolor tytułu po najechaniu przez użytkownika kursorem myszy na link. |
title_active |
Kolor tytułu po kliknięciu linku przez użytkownika. |
Element podrzędny Promotions
Element Promotions
określa kolory promocji, a także określa, czy obrazy i opisy mają być wyświetlane. Wygląd i styl promocji są zdefiniowane w pliku kontekstu, natomiast treść samych promocji jest zdefiniowana w pliku XML promocji. Więcej informacji znajdziesz w artykule Promocje.
Poniżej znajduje się przykład elementu Promotions
z w pełni zdefiniowanymi atrybutami:
<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" />
W tabeli poniżej znajdziesz listę atrybutów opcjonalnych Promotions
i ich wartości.
Atrybut | Kolor komponentu |
---|---|
title_color |
Tytuł każdej promocji. |
title_visited_color |
Tytuł kliknięty przez użytkownika. |
url_color |
Adres URL u dołu każdej promocji. |
background_color |
Kolor tła całej sekcji promocji. |
border_color |
Obramowanie całej sekcji promocji. |
snippet_color |
Opis promocji. Jeśli promocja nie ma opisu, ustawienie niczego nie zmienia. |
show_image |
Aby wyświetlać obraz w promocji, ustaw ten atrybut na Obraz, który ma się wyświetlać, jest ustawiony w pliku promocji. |
show_snippet |
Aby wyświetlać opis w promocji, ustaw ten atrybut na Treść opisu jest określona w pliku z promocjami. |
title_hover_color |
Tytuł, który pojawia się po najechaniu przez użytkownika kursorem myszy na link. |
title_active_color |
Tytuł otwierany po kliknięciu linku przez użytkownika. |
Element podrzędny SearchControls
Element SearchControls
określa kolory pola wyszukiwania i kart zawężeń elementu wyszukiwarki. Jeśli w wyszukiwarce masz utworzone etykiety zawężania wyszukiwania, będą one wyświetlane w elemencie wyszukiwania jako karty. Jeśli nie masz etykiet zawężających wyszukiwanie, karty się nie pojawią, a Wyszukiwarka niestandardowa zignoruje wartości atrybutów.
Jeśli chcesz, aby Wyszukiwarka niestandardowa automatycznie uzupełniała zapytania, zapoznaj się z sekcją opisującą atrybut autocompletions
elementu CustomSearchEngine
w pliku kontekstu.
Poniżej znajduje się przykład elementu SearchControls
z w pełni zdefiniowanymi atrybutami:
<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" />
W tabeli poniżej znajdziesz listę atrybutów opcjonalnych SearchControls
i ich wartości.
Atrybut | Kolor komponentu |
---|---|
input_border_color |
Obramowanie pola do wprowadzania zapytań. |
button_border_color |
Obramowanie przycisku wyszukiwania. |
button_background_color |
Przycisk wyszukiwania. |
tab_border_color |
Obramowanie wokół kart, które nie są obecnie aktywne (nie wybrane przez użytkownika). |
tab_background_color |
Karty, które nie są zaznaczone. |
tab_selected_border_color |
Karta, którą użytkownik właśnie wybrał kliknięciem. Wybrana zostanie karta, którą użytkownik ostatnio kliknął. |
tab_selected_background_color |
Kolor aktualnie wybranej karty. |
Element podrzędny Results
Element Results
określa kolor poszczególnych wyników w wyszukiwarce. Każdy wynik stanowi jednostkę tytułu, krótkiego opisu wyniku i linku. Zdefiniowanie tego elementu podrzędnego pozwala wizualnie nakreślać poszczególne wyniki lub wyróżniać wyniki wybierane przez użytkowników. Jeśli nie chcesz definiować poszczególnych wyników ani wyróżniać jednego z nich, możesz ustawić obramowanie i tło tak, aby pasowały do koloru tła całej sekcji wyników.
Rysunek 1. Wyniki z pojedynczymi wynikami wyróżnionymi po najechaniu kursorem myszy.
Wyniki mają 2 stany:
- Stan normalny – wygląd pojedynczego wyniku, gdy kursor myszy nie jest na nim umieszczony.
- Stan po najechaniu – wygląd pojedynczego wyniku po najechaniu na niego kursorem myszy.
Ten element steruje kolorem poszczególnych wyników. Aby zmienić tło wszystkich wyników, zapoznaj się z sekcją Element podrzędny koloru.
Poniżej znajduje się przykład elementu Results
z w pełni zdefiniowanymi atrybutami:
<Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" />
W tabeli poniżej znajdziesz listę atrybutów opcjonalnych Results
i ich wartości.
Atrybut | Kolor komponentu |
---|---|
border_color |
Obramowanie każdej osoby powoduje stan normalny. |
border_hover_color |
Obramowanie wyniku po najechaniu na nie kursorem myszy. |
background_color |
Kolor tła osoby oznacza stan normalny. |
background_hover_color |
Tło wyniku po najechaniu na nie kursorem myszy. |
Dodawanie logo do strony wyników hostowanej przez Google
Jeśli zezwalasz Google na przechowywanie strony z wynikami, na stronie wyników wyszukiwania możesz umieścić logo lub mały obraz tuż obok pola wyszukiwania. Obraz musi być plikiem w formacie .jpg, .png lub .gif hostowanym w witrynie (prawdopodobnie Twojej lub witrynie niemającej ograniczeń związanych z prawami autorskimi). Możesz powiązać z nim adres URL, dzięki czemu będzie on klikalny.
Uwaga: jeśli do hostowania wyników wyszukiwania używasz elementu Wyszukiwarka niestandardowa, nie możesz dodać obrazu w Panelu sterowania ani w pliku kontekstu.
Poniżej znajduje się przykład strony wyników z logo.
Rysunek 3. Pole wyszukiwania z obrazem
Obraz i jego adres URL są określone w atrybutach elementu Logo
w elemencie LookAndFeel
. Z przykładu poniżej dowiesz się, jak dodać logo do strony z wynikami hostowanej przez Google.
<LookAndFeel> <Logo url="http://www.ascii.com/logo.gif" destination="http://www.ascii.com/" height="90"/> ... </LookAndFeel>
W tabeli poniżej znajdziesz atrybuty elementu Logo
.
Atrybut | Opis i wartość |
---|---|
url |
Adres URL obrazu. Może to być plik w formacie .gif, .png lub .jpg. |
destination |
Jeśli chcesz, by obraz był linkiem, określ docelowy adres URL. |
height |
Wysokość obrazu w pikselach. Maksymalna wysokość to 100 pikseli. Nie musisz podawać szerokości, ponieważ Wyszukiwarka niestandardowa zachowuje współczynnik proporcji. Nie staraj się podawać wysokości, chyba że obraz jest za duży i chcesz, żeby Wyszukiwarka niestandardowa go zmniejszyła. |