Plik kontekstowy

Na tej stronie opisujemy, jak dostosować wygląd wyszukiwarki za pomocą pliku kontekstu, który jest specyfikacją XML Twojej wyszukiwarki.

1. Omówienie
2. Element LookAndFeel
3. Atrybuty elementu LookAndFeel
4. Elementy podrzędne elementu LookAndFeel
5. 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.

Powrót do góry

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
• Elementy podrzędne elementu LookAndFeel

Powrót do góry

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.

Powrót do góry

Atrybut	Opcje hostingu	Opis	Wartość
googlebranding	Na serwerach Google	Określa pole wyszukiwania wyszukiwarki.	Użyj jednej z tych wartości: watermark – domyślny. smnar smwide smwidg smnarg smnarb smwidb
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: 1 – domyślny. Pełna szerokość. 2 – kompaktowa. 3 – 2 kolumny. 4 – 2 strony. 5 – na serwerze Google: strona otwarta w bieżącym oknie. 6 na serwerze Google: strona otwiera się w nowym oknie. 7 – tylko wyniki.
theme	Wyszukiwany element	Określa styl pola wyszukiwania i wyników wyszukiwania.	Użyj jednej z tych wartości: 1 – domyślny. Przypomina wyniki wyszukiwania Google. 2 – Gra Minimalist ma prostą paletę kolorów. 3 – zielone niebo używa czcionki Trebuchet. 4 – gumka balonowa korzysta z czcionkitypu należy. 5 – espresso korzysta z czcionki szeryfowej Georgia i ma ciepłą paletę kolorów. 6 – w kolorze błyszczącym użyto czcionki bezszeryfowej Verdana i chłodnej palety kolorów.
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: false – domyślny. Google wyświetla standardowe motywy. true – powoduje, że Wyszukiwarka niestandardowa akceptuje wartości ustawione w elementach podrzędnych obiektu LookAndFeel.
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 ("), np. Trebuchet MS powinien być zapisany jako "Trebuchet MS".

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.

Powrót do góry

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.

Powrót do góry

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 true. Wartość domyślna to false. Obraz, który ma się wyświetlać, jest ustawiony w pliku promocji.
show_snippet	Aby wyświetlać opis w promocji, ustaw ten atrybut na true. Wartość domyślna to false. 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.

Powrót do góry

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.

Powrót do góry

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.

Powrót do góry

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.

Powrót do góry