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ę.
- W panelu sterowania kliknij wyszukiwarkę, której chcesz używać.
- 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).
<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.
<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>
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ć.
Dalej...
Przejdź do sekcji Włączanie autouzupełniania.