Implementacja pola wyszukiwania

Po utworzeniu Wyszukiwarki niestandardowej możesz dodać do swojej witryny element Wyszukiwarki niestandardowej. W tym celu trzeba skopiować kod i wkleić go do kodu HTML witryny, w której ma być widoczna wyszukiwarka.

  1. W panelu sterowania kliknij wyszukiwarkę, której chcesz używać.
  2. Na stronie Przegląd w sekcji Podstawowe kliknij Pobierz kod. Skopiuj ten kod i wklej go do kodu źródłowego HTML strony, w którym ma się pojawić Element Wyszukiwarki niestandardowej.

Element <div class="gcse-search"></div> jest symbolem zastępczym – to miejsce, w którym zostanie wyrenderowany element wyszukiwania (zarówno pole wyszukiwania, jak i wyniki wyszukiwania).

<!-- Tu wstaw własny identyfikator Wyszukiwarki niestandardowej --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script>
<div class="gcse-search"></div>

Wypróbowuję różne układy

W wielu przypadkach korzystne jest wyświetlanie pola wyszukiwania niezależnie od wyników wyszukiwania. Układ dwukolumnowy umożliwia wyrenderowanie pola wyszukiwania w jednym obszarze strony (np. na pasku bocznym) i wyświetlanie wyników w innym obszarze (np. w głównym obszarze strony).

Aby zmienić układ wyszukiwarki, przejdź do sekcji Układ na stronie Wygląd i styl w panelu sterowania. Po wybraniu i zapisaniu układu 2-kolumnowego w Panelu sterowania musisz też zmienić kod HTML elementu wyszukiwania.

<!-- Tu wstaw własny identyfikator Wyszukiwarki niestandardowej --> <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>

Innym ciekawym układem jest opcja dwustronicowa. Pozwala ona umieścić na jednej stronie własne pole wyszukiwania i renderować standardowe wyniki wyszukiwania na innej stronie, korzystając z parametrów na pasku adresu.

Wybierz i zapisz układ dwustronicowy w Panelu sterowania. Na jednej stronie zaimplementuj samodzielne pole wyszukiwania, zmieniając atrybut resultsUrl tak, aby wskazywał adres URL, pod którym mają być wyświetlane wyniki.

<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>

Wypróbuj

Aby zaimplementować samodzielną stronę wyników wyszukiwania, wklej na jej stronie fragment kodu:

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>

Teraz możesz wyświetlić wyniki wyszukiwania na tej stronie, przekazując argument „q” w adresie URL:

https://my-results-page-url.com/?q=myQuery

Zwróć uwagę na parametr q=myQuery w pasku adresu – dzięki temu element <div class="gcse-searchresults-only"></div> będzie wiedzieć, jakie wyniki zapytania wyświetlić.

Wypróbuj

Dalej...

Przejdź do sekcji Włączanie autouzupełniania.