Utilizzare Google Custom Search Engine nel tema WordPress GeneratePress

Ci sono due motivi per cui si potrebbe voler cambiare la ricerca predefinita di WordPress in Google Custom Search Engine nel tema GeneratePress.

• Avete bisogno di una soluzione lato client per un sito statico WordPress.
• Si vuole migliorare l’esperienza di ricerca visualizzando risultati altamente pertinenti.

Procedura per aggiungere la Ricerca personalizzata di Google

• Aggiungete una nuova pagina con il titolo “Risultati della ricerca” e il permalink “Ricerca” nel vostro WordPress.
• Noindicizzare la pagina dei risultati di ricerca seguendo le istruzioni del plugin SEO.

• aggiungere il seguente codice CSE in modalità Testo per visualizzare la casella di ricerca e i risultati.

<gcse:search enablehistory="false"></gcse:search>

• Accedere al sito web CSE
• Aggiungere un nuovo motore di ricerca

• Fornire l’URL del sito nel formato jolly per visualizzarlo nei risultati della ricerca.
• Occuparsi di www o non-www come da canonical😉

• Congratulazioni! Avete creato con successo il vostro motore di ricerca personalizzato.
• Andare a Pannello di controllo.

• Andare a “Look and Feel”
• Selezionare Disposizione a due pagine
• 💾Risparmia e ottieni il codice

Configurare i parametri dell’URL di ricerca

• In Dettagli risultati della ricerca, impostare l’URL della pagina dei risultati della ricerca e il parametro Query.

• Fare clic sul pulsante Salva e ottieni codice. Verrà visualizzato il codice dei risultati della ricerca. Ignorare la parte Div, già aggiunta nel primo passo. Copiare solo il codice JavaScript. Lo utilizzeremo con Hook.

Impostazione del codice all’interno di WordPress

• Abilitare il modulo Elements, disponibile nel file GeneratePress Premium.

• Creare un nuovo Hook

• Nominarlo ‘Motore di ricerca personalizzato (italian)’ e incollare il JS copiato al punto 7.

• Inserire il codice JS copiato al punto 9. dal motore di ricerca personalizzato di Google. Ho aggiunto io stesso la parte di precaricamento per caricare rapidamente il JS nel browser. Assicurarsi di sostituire l’ID editore.

<link rel="preload" href="https://cse.google.com/cse.js?cx=partner-pub-XXXXXXXXXXX:YYYYYYYY" as="script">
<script async src="https://cse.google.com/cse.js?cx=partner-pub-XXXXXXXXXXX:YYYYYYYY"></script>

• Usare il gancio wp_head con il valore di priorità più alto, 0, per assicurarsi che lo script venga posizionato nella sezione superiore dell’HTML.
• Per quanto riguarda le prestazioni, possiamo impostare le Regole di visualizzazione in modo che questo JS venga caricato solo nella pagina di WordPress Risultati della ricerca, dove è effettivamente richiesto, e non in altre pagine.

Nascondere la pubblicità dei risultati della ricerca personalizzata di Google

• Allo stesso modo, utilizzando un nuovo Hook, aggiungere il CSS inline sottostante per un buon design della pagina dei risultati di ricerca. Anche nella versione gratuita nasconde i fastidiosi annunci.

<style>
/* Google search results */
.gs-webResult {
border: 0px solid #eee;
padding: 1em;
}
/* Do no display the count of search results */
.gsc-result-info {
display: none;
}
/* Hide the Google branding in search results */
.gcsc-branding {
display: none;
}
/* Hide the thumbnail images in search results */
.gsc-thumbnail {
display: none;
}
/* Hide the snippets in Google search results */
.gs-snippet {
font-size: 16px;
}
/* Change the font size of the title of search results */
.gs-title a {
font-size: 18px !important;
text-decoration: none !important;
}
.gs-webResult div.gs-visibleUrl-long {
font-size: 16px !important;
}
/* Change the font size of snippets inside search results */
.gs-title b, .gs-snippet b {
font-weight: normal;
}
/* Highlight the pagination buttons at the bottom of search results */
.gsc-cursor-page {
font-size: 1.3em;
padding: 4px 8px;
border: 2px solid #ccc;
}
.gsc-adBlockVertical, .gsc-adBlock {
/* this hides both the top and right ad blocks*/
display: none !important;
}
.gsc-thinWrapper {
/* this gives you use of the whole block, as opposed to 69% google gives*/
width: 100%;
}
.gsc-result-info-container {
display: none;
}
td.gsc-twiddleRegionCell.gsc-twiddle-opened {
display: none;
}
td.gsc-configLabelCell {
display: none;
}
.gsc-above-wrapper-area {
border-bottom: 0px solid #E9E9E9!important;
padding: 0px!important;
}
.gsc-resultsRoot.gsc-tabData.gsc-tabdActive table {
margin-bottom: 0px !important;
}
.gsc-resultsRoot.gsc-tabData.gsc-tabdActive tbody {
border-bottom: 0px solid #ddd !important;
}
.gsc-result .gs-title {
height: 1.5em !important;
}
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {
border-bottom: 0px solid #4199FB;
}
.gs-webResult {
border: 0px solid #eee !important;
padding: 0em !important;
}
.cse .gsc-control-cse, .gsc-control-cse {
margin-top: 18px !important;
}
div.gcsc-branding {
display: none;
}
.cse .gsc-control-cse, .gsc-control-cse {
padding-top: 0 !important;
padding-bottom: 30px !important;
}
.gsc-webResult .gsc-result {
padding: 0px 0 10px 0 !important;
}
table.gsc-search-box td {
border: 0px !important;
}
.gsc-input-box table {
margin: 0px ;
}
.gcsc-find-more-on-google {
display: none !important;
}
.gsib_a {
padding: 9px 9px 9px 9px !important;
}
.cse .gsc-search-button-v2, .gsc-search-button-v2 {
border-color: #da0000 !important;
background-color: #da0000 !important;
padding: 10px 19px 10px 19px !important;
}
button.gsc-search-button.gsc-search-button-v2 svg {
width: 18px;
height: 13px;
}
.gsc-input-box {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.cse .gsc-control-cse, .gsc-control-cse {
padding: inherit !important;
}
</style>

Sappiamo che WordPress visualizza i risultati della ricerca a https://www.gulshankumar.net/it/?s=query

Pertanto, è importante modificare il percorso dell’azione per la casella di ricerca e Yoast ha aggiunto il markup JSON-LD per la ricerca del sito. È necessario inserire il seguente snippet utilizzando il plugin Code Snippet.

// Change Search path in the GeneratePress Theme
add_filter( 'generate_navigation_search_output', function() {
printf( 
'<form method="get" class="search-form navigation-search" action="%1$s">
<input type="search" placeholder=" Search" class="search-field" value="%2$s" name="q" title="%3$s" />
</form>', 
esc_url( home_url( '/search/' ) ), 
esc_attr( get_search_query() ), 
esc_attr_x( 'Search', 'label', 'generatepress' ) 
); 
} );
// Other theme? Use Real Time Find and Replace Plugin

Percorso JSON corretto

// For Yoast SEO
function yst_change_json_ld_search_url() {
return trailingslashit( home_url() ) . 'search/?q={search_term_string}';
}
add_filter( 'wpseo_json_ld_search_url', 'yst_change_json_ld_search_url' );

// For Rankmath
function gk_change_json_ld_search_url() {
return trailingslashit( home_url() ) . 'search/?q={search_term_string}';
}
add_filter( 'rank_math/json_ld/search_url', 'gk_change_json_ld_search_url' );

Visualizzazione del titolo e dell’intestazione della pagina in base alla query di ricerca

Grazie a James Hibbard che mi ha fornito il seguente snippet basato su URLSearchParams. Dovrebbe funzionare per tutti i browser moderni.

Assicurarsi di inserire lo script con il gancio wp_footer utilizzando GeneratePress Elements specificamente per la pagina ‘Risultati di ricerca’ che abbiamo creato nel primo passo.

<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const searchTerm = urlParams.get('q');
if (searchTerm) {
    const heading = document.querySelector('h1');
    const title = document.querySelector('title');
    heading.textContent = `Search Results for ${searchTerm}`;
    title.textContent = `Search Results for ${searchTerm}`;
}
</script>

Ora è possibile vedere la query di ricerca nel titolo e nell’intestazione.

Domande frequenti

Grazie per aver letto.