Implementazione della casella di ricerca

Dopo aver creato un Motore di ricerca programmabile, puoi aggiungere questo elemento al tuo sito. Per farlo, dovrai copiare del codice e incollarlo nel codice HTML del tuo sito nel punto in cui vuoi che venga visualizzato il tuo motore di ricerca.

  1. Nel Pannello di controllo, fai clic sul motore di ricerca che vuoi utilizzare.
  2. Nella sezione Base della pagina Panoramica, fai clic su Genera codice. Copia il codice e incollalo nel codice sorgente HTML della tua pagina, nel punto in cui vuoi che venga visualizzato l'Elemento di ricerca programmabile.

L'elemento <div class="gcse-search"></div> è un segnaposto: è qui che verrà eseguito il rendering dell'elemento di ricerca (sia la casella di ricerca sia i risultati di ricerca).

<!-- Inserisci qui il tuo ID Motore di ricerca programmabile --> &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>

Provare layout diversi

In molte occasioni, ha senso fare in modo che una casella di ricerca venga visualizzata indipendentemente dai risultati di ricerca. Un layout a due colonne ti consente di mostrare una casella di ricerca in un'area della pagina (ad esempio nella barra laterale) e di visualizzare i risultati in un'altra (ad esempio l'area principale della pagina).

Per modificare il layout del motore, vai alla sezione Layout della pagina Aspetto e design nel pannello di controllo. Dopo aver selezionato e salvato il layout a 2 colonne nel pannello di controllo, devi anche modificare il codice HTML dell'elemento di ricerca.

<!-- Inserisci qui il tuo ID Motore di ricerca programmabile --> &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>

Un altro layout interessante è l'opzione di due pagine. Ti consente di implementare la tua casella di ricerca in una pagina e visualizzare i risultati di ricerca standard in un'altra utilizzando i parametri nella barra degli indirizzi.

Seleziona e salva il layout a due pagine nel pannello di controllo. In una pagina, implementa una casella di ricerca autonoma, modificando l'attributo resultsUrl in modo che punti all'URL in cui vuoi visualizzare i risultati.

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

Prova

Per implementare una pagina dei risultati di ricerca autonoma, incolla lo snippet di codice dei risultati nella pagina dei risultati:

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

Ora puoi attivare i risultati di ricerca su questa pagina passando una lettera "q" nell'URL:

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

Nota il parametro q=myQuery nella barra degli indirizzi: questo è il modo in cui l'elemento <div class="gcse-searchresults-only"></div> stabilisce quali risultati della query visualizzare.

Prova

Avanti...

Vai ad Attivazione del completamento automatico.