Personalizzare la pagina dei risultati di ricerca di WordPress con GeneratePress e GenerateBlocks

 

Il motore di ricerca di WordPress fa schifo

Non conosco nessuno che utilizzi WordPress e che parli bene del suo motore di ricerca e continuo a non capire che si è a malapena evoluto dalle prime versioni.

Non solo è primitivo in termini di funzionamento, ma non offre alcuna configurazione. Anche l'aspetto della pagina dei risultati lascia molto a desiderare. A seconda del modello utilizzato, può avere un design leggermente migliore, ma in generale è ancora preistorico

L'aspetto dei risultati può essere migliorato un po' con i CSS e la reattività con un plugin gratuito (con una versione a pagamento) come Relevanssi (anche se triplicherà il peso del suo database) o quest'altro che si collega al servizio esterno Algolia (gratuito fino a 10.000 richieste di ricerca al mese).

Ma lascerò la questione delle prestazioni per un altro giorno, dato che sto ancora lottando con essa, e mi occuperò delle riforme puramente estetiche usando GeneratePress (GP) e GenerateBlocks (GB).

GeneratePress e GenerateBlocks

GP e GB sono ancora due strumenti di un progetto giovane con molta usabilità da migliorare, GB non offre la stessa curva di apprendimento che ci si potrebbe aspettare se si utilizzano costruttori come Elementor o simili.

Come vedremo in questo esempio, alcuni processi per costruire determinate cose con GenerateBlocks sono molto più lunghi e laboriosi e possono essere un po' disperati nei primi tentativi. Man mano che si aggiungono sempre più blocchi, le cose si complicano.

D'altra parte, una volta compreso il funzionamento e l'utilizzo, si ha un maggiore controllo sull'aspetto e la sensazione di ogni elemento.

la difficoltà è bilanciata dalla sua documentazione e da un'assistenza impeccabile, in cui i suoi creatori aiutano persino a risolvere problemi specifici di design che non sono di loro competenza, quindi è ancora un'ottima alternativa da prendere in considerazione, in quanto rimane fedele alla sua filosofia: codice corretto, pulito e leggero.

Elementi di blocco

Blocks Elements, in seguito Elements, è stato aggiunto nel luglio 2020 nella versione 1.11.0 di GeneratePress Premium. Può essere utilizzato come un normale gancio per inserire contenuti quasi ovunque nel suo blog senza dover armeggiare con il codice.

In combinazione con GenerateBlocks, consente di utilizzare l'editor di blocchi di WordPress per creare ganci, intestazioni, piè di pagina, barre laterali, una pagina "Eroe", modelli di contenuto, ecc.

Andiamo al sodo.

Modello di struttura

La prima cosa da fare è creare quello che chiameremo un "modello di struttura". Questo passo è facoltativo, ma non fa male crearne uno nel caso in cui un giorno volessimo cambiare qualcosa con un paio di clic.

Gli do questo nome perché definirà solo gli aspetti strutturali e non il contenuto. Vale a dire, se vogliamo mostrare o meno l'intestazione, il piè di pagina o i suoi widget, una barra laterale o definire la larghezza, eccetera, e così non ci confondiamo con i nomi dei blocchi del resto dei passaggi.

Dal menu principale Aspetto/Elementi o dall'alto, possiamo accedere alla creazione e alla gestione degli elementi.

Elements de GeneratePress- Layout o diseño

Per l'uso specifico che ci interessa, quando aggiungiamo un nuovo elemento scegliamo Design e premiamo Crea.

Poi indichiamo all'elemento in quale pagina vogliamo che sia applicato. Per farlo, passiamo alla scheda "Regole di visualizzazione" e in posizione selezioniamo "risultati della ricerca" dal menu a tendina.

Personalizzare la pagina dei risultati di ricerca di WordPress con GeneratePress e GenerateBlocks

Gli elementi offrono molte possibilità di personalizzazione. Come vedrà, in questo menu a tendina può selezionare la maggior parte delle posizioni del suo blog, in modo che queste impostazioni vengano applicate lì.

Possiamo anche decidere quali elementi vogliamo nascondere. Nel mio caso utilizzerò solo un'opzione per fare a meno della barra laterale, quindi selezionerò"Contenuto (Nessuna barra laterale)".

Esistono altri modi per nascondere la barra laterale, ma questo, oltre ad essere il più semplice e veloce, ci permette di ripristinare qualsiasi modifica, semplicemente tornando qui o direttamente a "non pubblicare" questo elemento/template in stato di "Bozza", riportando così la pagina al suo aspetto originale.

Inoltre, nella scheda"Disattiva elementi" può lasciare la pagina praticamente pulita. Si potrebbe dire che è l'equivalente del modello di pagina "Canvas" di Elementor, anche se leggermente migliorato e più semplice da usare.

Desactivar Elementos en GeneratePress

Una buona pratica, raccomandata anche in una delle schede di configurazione, è quella di documentare ciò che fa ogni elemento con note interne, nel caso in cui il titolo non sia abbastanza descrittivo o non vogliamo che sia troppo lungo.

Mi sono abituato ad aggiungere note e commenti a tutto, perché quando si apportano molte modifiche e nel tempo è inevitabile che si finisca per dimenticare dove e/o come sono state fatte. Quindi, nelle note interne avrà sempre tutte le informazioni necessarie per ripercorrere i suoi passi se qualcosa va storto o se desidera apportare nuove modifiche.

Pubblicando questo modello avremmo già la pagina dei risultati configurata a nostro piacimento, ma, naturalmente, ora sarebbe vuota quando effettua una ricerca, perché dobbiamo creare e pubblicare un nuovo elemento che determinerà l'aspetto di queste ricerche.

Può lasciare questo modello in bozza per il momento mentre lo facciamo e pubblicarlo quando tutto sarà pronto.

Modello di aspetto

Sebbene si tratti di un altro elemento, per questa piccola guida lo chiamo "modello di aspetto", perché all'epoca ero un po' confuso dalla nomenclatura degli elementi e dai loro diversi utilizzi possibili.

Qui inizia il vero lavoro di personalizzazione.

Creiamo un nuovo elemento, questa volta un Blocco e gli diamo un nome descrittivo.

Aggiungiamo un contenitore GenerateBlocks e all'interno di questo contenitore inseriamo un blocco Query Loop.

Ecco cosa vedremo.

Ho scelto"Inizio vuoto" per replicare la struttura nativa dei risultati, ma può scegliere uno qualsiasi dei modelli offerti da questo blocco.

La cosa migliore da fare è provarli prima di decidere, perché una volta iniziato a lavorare su uno di essi non potrà applicarne un altro e dovrà ricominciare l'intero processo da zero se vuole cambiarlo (cosa che dovrebbe risolvere GB).

Dopo aver scelto il modello, selezioni il blocco query loop (1) e vedrà la scheda "Blocco" sulla destra (2). Clicchi su di essa e selezioni l'opzione"Eredita la query dal modello" (3) sotto "Parametri della query". Infine, in basso, sotto "Regole di visualizzazione"/"Posizione" (4) cerchiamo e impostiamo "Risultati della ricerca" e salviamo come bozza.

Quando dispieghiamo il ciclo di query, vedremo questo:

Aggiungiamo un altro blocco griglia all'interno di "Modello di query" e selezioniamo la struttura che desideriamo.

Per l'esempio utilizzeremo uno dei due contenitori che fungeranno da colonne. La colonna di sinistra sarà il posto per l'immagine in primo piano e la colonna di destra mostrerà l'estratto della voce.

Può anche giocare con tre contenitori e configurare quello centrale come spazio. Insisto, le possibilità sono molte e la cosa migliore da fare è giocare con esse.

Come avrà notato, stiamo costruendo quasi da zero un contenitore con tutti i pezzi che costituiranno l'aspetto finale di ciò che vogliamo mostrare. In questo caso i risultati della ricerca, ma può farlo con qualsiasi altro contenuto.

Ora svuotiamo questi due contenitori.

Selezioniamo il primo contenitore e impostiamo la sua larghezza a 33 (che in realtà è impostata a 33.33), come potrà vedere scorrendo le opzioni di ridimensionamento.

Facciamo lo stesso con il secondo contenitore e selezioniamo 66 (che sarà automaticamente impostato su 66,66). Ovviamente, il punto è che tutti i contenitori utilizzati si sommano a 100, in modo che non escano dallo spazio orizzontale della pagina e siano visualizzati sulla stessa linea.

Ora, con il primo contenitore selezionato, aggiungiamo un blocco immagine GenerateBlocks all'interno.

Ciò che accadrà è che appariranno spazi immagine diversi. Non si spaventi, perché il blocco rileva il Loop e ricrea il suo comportamento. Se il motore di ricerca mostra dieci risultati, questi sono gli spazi che appariranno. Continui a lavorare sul contenitore dell'immagine, passando sopra a gran parte del resto, che non è altro che l'anteprima della pagina dei risultati.

Selezioniamo nuovamente il contenitore contenente l'immagine (1). Nel menu del blocco a destra scendiamo a "Abilita dati dinamici" e attiviamolo (2). Selezioni "Featured image" in Background image source (3) e le immagini appariranno nell'editor.

In Sorgente link scegliamo "Collegamento individuale" ( 4), in modo che ogni immagine sia collegata al post corrispondente e salviamo nuovamente come bozza.

Ora andiamo al secondo contenitore, lo selezioniamo e aggiungiamo un blocco "Titolo" da GenerateBlocks.

Selezioniamo il blocco "Headline" (1) con i dati dinamici attivati (2) e ripetiamo il processo precedente (3), ma questa volta selezionando "Title" come fonte del contenuto (4) e la voce individuale nella fonte del link (5)

Infine, aggiungeremo un altro blocco "Titolo" in basso, che utilizzeremo per mostrare l'estratto della voce che segue questi passaggi.

Una volta aggiunto, ripetiamo nuovamente lo stesso processo. Con questo nuovo blocco selezionato (1), attiviamo i dati dinamici (2) e come fonte dei dati (3) la voce corrente e la fonte del contenuto "Estratto" ( 4). Ora può anche impostare la lunghezza dell'estratto in parole ( 5).

Infine, aggiungeremo la paginazione, che apparirà sotto i risultati. Per farlo, selezioni il blocco query loop (1) e clicchi sul piccolo simbolo + con i puntini che troverà nella barra di modifica (2).

La paginazione è costruita con un blocco di pulsanti a cui dovrà dare il formato, il colore e la forma che si adattano all'aspetto che sta cercando. Tutte le configurazioni possibili, che non sono poche, si trovano nel menu del blocco in cui avrà sempre a disposizione le opzioni per mettere a punto ogni blocco per mobile, tablet e desktop.

La lascio qui per non allungare troppo questo post.

Le consiglio di fare tutto questo prima in un ambiente di prova per vedere come funziona realmente, al di là dell'anteprima offerta dall'editor, e di pubblicarlo quando è sicuro che si presenta come dovrebbe.

Si ricordi inoltre che se ha realizzato il blocco di design proposto all'inizio e che chiamiamo il Modello di struttura che avevamo lasciato in bozza, dovrà pubblicarlo.

Questo sarebbe il punto di partenza per personalizzare ulteriormente l'aspetto della pagina dei risultati in base alle sue preferenze estetiche.

Tante possibilità di personalizzazione

Può continuare a modificare o aggiungere ciò che desidera, come ad esempio un blocco a griglia con due contenitori tra il titolo e l'estratto e aggiungere lì la data di pubblicazione, il numero dell'autore della voce o qualsiasi altra cosa desideri.

Se lo desidera, può anche creare un altro modello per quella blanda pagina predefinita quando WordPress non trova risultati durante la ricerca e aggiungere pulsanti di aiuto o qualsiasi altro elemento che aiuti il visitatore.

Può cambiare il tipo e la dimensione del carattere, giustificarlo da un lato o dall'altro, regolare la spaziatura e le dimensioni degli elementi, giocare con il colore dello sfondo aggiungendo immagini e forme, aggiungere icone, bordi, effetti hover sui link, ombre sui contenitori, ecc.

Tutto questo senza lasciare l'editor e senza dover armeggiare con i CSS o toccare i file del suo modello.

Qui può provare il layout di base dei miei risultati di ricerca, che devo ancora perfezionare, come l'aggiunta del tempo di lettura e del numero di visite, la scrittura degli estratti vuoti e l'aggiunta delle immagini in primo piano mancanti.

Palla bonus: se ha bisogno di aggiungere ai risultati il tipico"Mostra (numero) di risultati per: (parola cercata)", qui può trovare il codice necessario codice e istruzioni per farlo funzionare con il blocco Query Loop, grazie a David del supporto GB


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting