Implementacja pola wyszukiwania

Po utworzeniu Wyszukiwarki niestandardowej możesz dodać element Wyszukiwarka niestandardowa do swojej witryny. Aby to zrobić, skopiuj fragment kodu i wklej go do kodu HTML swojej witryny w miejscu, w którym chcesz umieścić wyszukiwarkę.

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

Element <div class="gcse-search"></div> jest obiektem zastępczym – w tym miejscu będzie wyświetlany element wyszukiwania (pole wyszukiwania i wyniki wyszukiwania).

<!-- Wstaw tutaj własny identyfikator Wyszukiwarki niestandardowej --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<div class="gcse-search"></div>

Wypróbowuję różne układy

W wielu przypadkach pole wyszukiwania ma być wyświetlane niezależnie od wyników wyszukiwania. Układ dwukolumnowy umożliwia renderowanie pola wyszukiwania w jednym obszarze strony (na przykład na pasku bocznym), a wyniki w innym (na przykład w głównej części strony).

Aby zmienić układ wyszukiwarki, przejdź do sekcji Układ na stronie Wygląd i styl w Panelu sterowania. Po wybraniu i zapisaniu dwukolumnowego układu w Panelu sterowania należy również zmienić kod HTML elementu wyszukiwania.

<!-- Wstaw tutaj własny identyfikator Wyszukiwarki niestandardowej --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<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 2-stronicowa. Umożliwia on implementację własnego pola wyszukiwania na jednej stronie, a standardowe wyniki wyszukiwania na innej stronie za pomocą parametrów w pasku adresu.

W panelu sterowania wybierz i zapisz układ dwustronicowy. Na jednej stronie zaimplementuj samodzielne pole wyszukiwania, zmieniając atrybut resultsUrl tak, by wskazywał URL, na 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 niej fragment kodu wyników:

<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 „q” argument w adresie URL:

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

Zwróć uwagę na parametr q=myQuery na pasku adresu – dzięki temu element <div class="gcse-searchresults-only"></div> wie, jakie zapytanie ma wyświetlić.

Wypróbuj

Dalej...

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