Il blocco del ciclo di query in WordPress: guida, suggerimenti e trucchi

Pubblicato: 2023-04-11

Il Query Loop è un accurato blocco di WordPress che ti consente di visualizzare un elenco di post di blog, prodotti e pagine correlati. Come principiante, ti starai chiedendo come sfruttare questa funzione.

Fortunatamente, il blocco Query Loop è relativamente facile da usare. Puoi scegliere il tuo layout predefinito preferito o creare qualcosa da zero. Inoltre, puoi configurare la visualizzazione dei tuoi blocchi nidificati e personalizzare completamente il design.

In questo post, daremo un'occhiata più da vicino al blocco Query Loop in WordPress. Quindi, ti mostreremo come utilizzare il blocco e parleremo di casi d'uso specifici.

Cos'è il blocco Query Loop in WordPress?

Il blocco Query Loop è uno strumento che consente agli utenti di WordPress di visualizzare un elenco dinamico di post basato su attributi specifici. Ad esempio, può essere impostato per scorrere tutti i post di una determinata categoria, visualizzando il titolo del post e l'immagine di ciascuno.

Questo blocco può essere abbastanza tecnico da configurare. Di conseguenza, i principianti tendono ad evitare di usarlo e optano invece per il blocco Post List, che è una versione più semplice del Query Loop.

Sebbene il blocco Query Loop sia più complesso, consente anche una maggiore flessibilità. Ad esempio, puoi creare una pagina piena delle tue migliori ricette o mostrare un portfolio di progetti.

Quando utilizzare il blocco Query Loop in WordPress

Il blocco Query Loop offre molteplici opportunità per promuovere i tuoi contenuti. Ecco alcuni dei risultati che puoi ottenere con esso:

  • Crea una sezione di post correlati per il tuo blog, con il titolo del post, l'estratto e l'immagine.
  • Mostra contenuti da tipi di post personalizzati come testimonianze o elementi del portfolio.
  • Visualizza i post dello stesso tag o categoria.
  • Mostra i prodotti WooCommerce correlati.
  • Visualizza una griglia di prodotti, raggruppati per prezzo.
  • Elenca le aziende per posizione all'interno di una directory aziendale.
  • Elenca le recensioni dei libri in base a una specifica valutazione a stelle.

Questi sono solo alcuni esempi. Esistono molti modi per configurare il blocco Query Loop.

Come utilizzare il blocco Query Loop in WordPress

Per iniziare con il blocco Query Loop, dovrai accedere al post o alla pagina in cui desideri utilizzarlo. Quindi, fai clic su + per aggiungere un nuovo blocco e cerca Query Loop .

trovare il blocco del ciclo di query in WordPress

Puoi anche inserire il blocco usando il selettore di modelli di blocco. Passa a Pattern e seleziona Query dal menu a discesa. Quindi, scegli il tuo layout preferito.

scelta di un layout per il blocco del ciclo di query

Ci sono molti layout di Query Loop tra cui scegliere. Ad esempio, puoi presentare i tuoi post in una griglia, con un'immagine a sinistra o attenersi al formato predefinito.

In alternativa, fai clic su Avvia vuoto per creare il tuo ciclo di query da zero e ottenere il pieno controllo sul design dei tuoi contenuti.

iniziando con un ciclo di query vuoto

Dovrai scegliere una variante con cui iniziare. Potresti voler mostrare l'immagine, la data e il titolo del tuo post, o semplicemente presentare il titolo e l'estratto del post.

scegliendo una variante del ciclo di query

Se hai creato il tuo blocco da zero o hai utilizzato un modello, vedrai un'anteprima del tuo blocco nell'editor.

visualizzare in anteprima il blocco del ciclo di query

Il tuo blocco Query Loop è costituito da diversi sottoblocchi diversi, come titoli di post, immagini in primo piano e altro. Se fai clic sull'icona Impostazioni di visualizzazione nella barra degli strumenti, puoi configurare il numero di elementi per pagina.

impostazioni del ciclo di query per il feed

Puoi anche utilizzare le impostazioni di blocco nel pannello a destra per personalizzare ulteriormente il ciclo di query. Potresti decidere di modificare l'ordine dei tuoi articoli, creare nuovi post per il tuo feed, applicare filtri, cambiare i colori e altro ancora.

Quali sottoblocchi si trovano all'interno del blocco Query Loop?

All'interno del blocco Query Loop, troverai diversi sottoblocchi raggruppati insieme. Sebbene contengano la parola "post" nei loro nomi, possono essere applicati anche ad altri contenuti come pagine, elementi del portfolio o prodotti.

Diamo un'occhiata a ciascun sottoblocco.

1. Titolo del post

Il blocco del titolo del post mostra il titolo di ogni post. Puoi trasformare il titolo in un collegamento e regolare il carattere e il colore all'interno delle impostazioni del blocco.

2. Data di pubblicazione

Con questo blocco puoi mostrare la data di pubblicazione del tuo contenuto. Puoi modificare il formato predefinito, mostrare la data dell'ultima modifica e collegarti a un post all'interno delle impostazioni.

3. Pubblica contenuto

Il blocco Post Content presenta l'intero contenuto del tuo post o pagina all'interno del blocco Query Loop. Questo potrebbe rendere il tuo blocco molto lungo, il che può essere scoraggiante per i visitatori.

4. Estratto postale

Post Excerpt mostra un riepilogo di ogni contenuto. I visitatori potranno visualizzare il tuo estratto e trovare un collegamento "Leggi di più". Puoi aggiungere questo collegamento su una nuova riga o alla fine dell'estratto. Inoltre, puoi modificare il testo di ancoraggio, cambiare il colore del collegamento e selezionare una nuova dimensione del carattere.

5. Pubblica l'immagine in primo piano

Se scegli di includere questo blocco nel tuo Query Loop, visualizzerai l'immagine in primo piano per i tuoi post o prodotti. Inoltre, puoi abilitare un collegamento con la tua immagine per indirizzare i visitatori verso il contenuto quando viene cliccato.

6. Categorie di messaggi

Aggiungendo un blocco di categorie di post all'interno del ciclo di query, puoi visualizzare le categorie associate a quel contenuto. Questo è un ottimo modo per visualizzare i post del blog che trattano un argomento simile o prodotti all'interno della stessa categoria. Puoi anche modificare il colore e i caratteri all'interno delle impostazioni.

7. Pubblica tag

Il blocco Post Tags ti consente di visualizzare i tag aggiunti al tuo post. È un altro modo utile per mostrare contenuti simili.

8. Impaginazione (post precedente e post successivo)

L'impaginazione è uno dei blocchi più preziosi da aggiungere al tuo ciclo di query poiché mostra i collegamenti ai tuoi post precedenti o successivi. L'impaginazione è composta da tre blocchi separati:

  • Precedente
  • Numeri di pagina
  • Prossimo

Per usarlo, devi prima selezionare il blocco Post Template, utilizzando la visualizzazione elenco. Quindi, puoi fare clic su + per aggiungere il blocco Paginazione.

9. Autore del post

Come suggerisce il nome, Post Author mostra i dettagli dell'autore, come il nome dell'autore, l'avatar e la biografia. Se scegli di includere questo blocco, dovrai selezionare l'utente con il menu a discesa nelle impostazioni del blocco. Qui puoi anche configurare la visibilità dell'avatar, modificare le dimensioni dell'avatar, mostrare/nascondere la biografia dell'autore e modificare il colore e le dimensioni.

10. Pubblica la biografia dell'autore

Se non vuoi includere il nome dell'autore e l'avatar nel tuo Query Loop, ma vuoi che la biografia dell'autore sia visibile, allora questo blocco è per te. Tutto ciò che i tuoi visitatori potranno vedere è la biografia. Inoltre, puoi personalizzarne l'aspetto, regolando la dimensione, il carattere e il colore.

Esempi di casi d'uso del blocco Query Loop

Ora che hai compreso un po' meglio il blocco Query Loop, diamo un'occhiata a tre modi in cui puoi utilizzarlo.

1. Crea una sezione "post recenti".

Questa sezione può rendere più visibili i contenuti pubblicati di recente.

blocco del ciclo di query impostato per visualizzare i post recenti

Per iniziare, dovrai utilizzare due blocchi Query Loop. Aggiungi il tuo primo, quindi scegli un modello o inizia da zero. Per post visivi come ricette, Immagine, Data e Titolo possono essere una buona scelta.

opzioni del ciclo di query

Se hai già configurato il tuo ciclo di query, i tuoi post verranno visualizzati qui. In caso contrario, fai clic su Crea un nuovo post per questo feed per scrivere e pubblicare i post che desideri includere.

Poiché è qui che andrà il tuo post più recente, ti consigliamo di visualizzare solo un contenuto. Passare alle impostazioni di visualizzazione . Accanto a ARTICOLI PER PAGINA , inserire "1".

selezionando un post per il feed

Ora dovresti essere in grado di vedere solo il tuo post più recente elencato nel blocco.

Puoi quindi aggiungere un secondo blocco Query Loop per visualizzare altri post recenti. Scegli il tuo layout preferito. Quindi, vai alla barra degli strumenti e passa dalla visualizzazione elenco alla visualizzazione griglia . In questo modo, il lettore può vedere più ricette contemporaneamente.

impostazione di una visualizzazione a griglia per il blocco del ciclo di query

Ora, fai clic su Impostazioni di visualizzazione e modifica il valore OFFSET su "1". Questo eliminerà il tuo post più recente dal tuo secondo blocco Query Loop.

impostando il valore di offset per il blocco del ciclo di query

Inoltre, puoi personalizzare il layout del tuo blocco. Ad esempio, potresti voler ridurre la dimensione del carattere delle intestazioni per migliorare la leggibilità del testo. Puoi farlo dalla barra degli strumenti.

impostazioni per i titoli dei post del blog

Potresti anche voler ridurre le dimensioni della data. Puoi apportare queste modifiche all'interno delle impostazioni del blocco. Trova Tipografia e seleziona una dimensione del carattere più appropriata.

regolando la dimensione del carattere della data del post

Puoi anche impostare nuove dimensioni per le immagini in primo piano e modificare l'allineamento dei titoli delle ricette. Quando sei pronto, fai clic su Salva bozza o Pubblica.

2. Aggiungere il blocco Query Loop a un modello di indice

Se utilizzi un tema a blocchi, puoi aggiungere il blocco Query Loop a un modello. Questo può tornare utile quando si impostano stili globali per i cicli di query e i relativi sottoblocchi.

Nella dashboard di WordPress, vai su Aspetto → Editor .

aggiunta di un blocco di ciclo di query a una pagina di indice

Fai clic sul menu a discesa attualmente impostato su Home o Pagina (a seconda del tema) e seleziona Sfoglia tutti i modelli .

scegliendo un modello di pagina da modificare

Dall'elenco dei modelli, seleziona quello che desideri modificare. Il modello Index tende ad essere una buona opzione, poiché è quello che indicizza e visualizza i post del sito web.

set di tre post di blog sul modello di pagina indice

Se scegli Index , scoprirai che il modello include già un blocco Query Loop, ma puoi eliminarlo e aggiungerne uno tuo. È quindi possibile regolare il layout, passando dalla visualizzazione elenco alla visualizzazione griglia.

Puoi anche personalizzare il testo "Leggi di più" facendo clic sul blocco secondario e digitando il tuo invito all'azione preferito.

modificare il design del post del blog

Troverai anche tutte le impostazioni del blocco disponibili se vai sulla barra degli strumenti e fai clic su Mostra altre impostazioni. Qui puoi modificare la dimensione e il colore del testo e impostare nuove dimensioni per le tue immagini.

3. Imposta gli stili globali per i tuoi blocchi di Query Loop

Se prevedi di utilizzare frequentemente i blocchi di Query Loop sul tuo sito, può richiedere molto tempo creare e configurare il tuo loop più e più volte. Ecco perché è una buona idea impostare stili globali per i cicli di query e i blocchi nidificati.

Per accedere all'editor globale degli stili, fai clic sull'icona Stili nell'angolo in alto a destra dello schermo:

selezionare gli stili globali per il blocco

Quindi, seleziona Blocchi nella parte inferiore della barra laterale:

selezionando l'opzione Blocchi per gli stili globali

Scorri l'elenco dei blocchi disponibili e trova Query Loop. Quindi, fai clic su Colori :

trovare le impostazioni del colore per il blocco del ciclo di query

Qui puoi gestire le combinazioni di colori di diversi elementi e blocchi sul tuo sito. Se desideri aggiungere più colori personalizzati alla tua tavolozza predefinita, fai clic su Tavolozza e trova CUSTOM .

Ora, fai clic sul + per aggiungere nuovi colori alla tua tavolozza.

aggiunta di colori alla tavolozza dei colori

Successivamente, torna ai colori del ciclo di Query Block. Vedrai un elenco di elementi come sfondo, collegamenti e intestazioni.

Puoi anche impostare stili predefiniti per questi componenti. Per fare ciò, seleziona l'elemento che desideri modificare.

selezionando da una tavolozza di colori

Ad esempio, puoi cambiare il colore di sfondo dei blocchi di Query Loop.

cambiando il colore di sfondo

Se decidi contro una qualsiasi delle modifiche che applichi, fai semplicemente clic su Cancella.

Puoi anche impostare stili globali per lo sfondo e il colore del testo delle tue intestazioni. Inoltre, puoi assegnare colori al passaggio del mouse per i tuoi collegamenti. Al termine, fai clic su Salva per applicare i nuovi stili predefiniti ai tuoi blocchi.

Estendi il blocco Query Loop

Anche se ora sai come creare e personalizzare un blocco Query Loop in WordPress, potresti voler estendere ulteriormente il blocco. Utilizzando l'API Block Variations, puoi specificare determinate impostazioni predefinite, disabilitare le opzioni di personalizzazione e altro ancora.

Ad esempio, potresti non utilizzare mai l'attributo Sticky nel tuo ciclo di query. Anche il campo Autore potrebbe non essere rilevante per i tuoi post. Pertanto, puoi disabilitare questi controlli in modo che non siano visibili.

In questo caso, il codice di variazione sarebbe simile a questo:

 { /** ...variation properties */ allowedControls: [ 'inherit', 'order', 'taxQuery', 'search' ], }

In questo modo, i tuoi utenti possono accedere alle funzioni inerenti, all'ordine, alle tassonomie e alla ricerca, ma l'autore e i campi permanenti non verranno visualizzati.

In alternativa, potresti preferire nascondere l'opzione di ricerca per gli utenti, nel qual caso la tua proprietà avrà questo aspetto:

 { /** ...variation properties */ allowedControls: [ 'inherit', 'postType', 'order', 'sticky', 'taxQuery', 'author', ], }

Se, per qualsiasi motivo, desideri nascondere tutti i controlli disponibili per il tuo blocco Query Loop, puoi impostare un array vuoto accanto a AllowControls.

Come puoi vedere, questo metodo richiede alcune conoscenze tecniche. Se non hai competenze di programmazione, potresti voler attenersi alle opzioni di personalizzazione disponibili nell'Editor blocchi.

Domande frequenti

Sebbene abbiamo cercato di coprire tutti gli aspetti del blocco Query Loop, potresti avere ancora alcune domande su questa funzione. Diamo un'occhiata a quelli più comuni.

Che cos'è una query di WordPress?

Query si traduce in "chiedi" o "comanda". Quindi, all'interno del blocco Query Loop, la parte "Query" consente agli utenti di chiedere determinate informazioni da inserire nel ciclo. Questo è il modo in cui Query Loop mostra tutti i post o le pagine per un tag, una categoria e altro ancora specifici.

Che cos'è un loop di WordPress?

Un loop di WordPress è un modo per visualizzare informazioni simili in un formato ciclico. Ad esempio, puoi creare un ciclo di post del blog che visualizzerà articoli correlati sulla tua pagina, mostrando il titolo del post, l'estratto, l'immagine in primo piano e altro ancora.

I dati vengono estratti dai tuoi contenuti pubblicati e inseriti nel ciclo, che si trova sulle tue pagine per i visitatori. In quanto tale, ti aiuta a indirizzare gli utenti verso altri contenuti pertinenti e a mantenere i visitatori coinvolti con il tuo sito.

Cosa puoi fare con il blocco Query Loop?

Ci sono molte cose che puoi ottenere con il blocco Query Loop. Ad esempio, potresti mostrare un elenco di prodotti correlati o in primo piano.

Inoltre, potresti indirizzare gli utenti verso altre ricette sul tuo sito che condividono gli stessi tag o categorie. Per un sito Web di portfolio, puoi persino mostrare il tuo lavoro più recente o migliore all'interno di un blocco Query Loop.

Come puoi estendere il blocco Query Loop?

Puoi ottenere un controllo dettagliato sul modo in cui viene visualizzato il ciclo di query aggiungendo impostazioni personalizzate al blocco. Con l'API Block Variations, puoi creare nuove funzionalità, disabilitare determinati elementi e applicare i tuoi preset.

Crea un blocco Query Loop in WordPress

Il blocco Query Loop è un utile blocco di WordPress che ti consente di visualizzare post in primo piano, pagine correlate o prodotti di una determinata categoria. Puoi anche usarlo per mostrare contenuti da tipi di post personalizzati, come testimonianze e progetti di portfolio.

Il blocco Query Loop è molto personalizzabile. Puoi configurare i sottoblocchi al suo interno, come il titolo del post, il nome dell'autore e le immagini in primo piano. Inoltre, puoi estendere il blocco e aggiungere impostazioni personalizzate con l'API Block Variations.

Un altro modo per aiutare i visitatori a trovare i contenuti giusti sul tuo sito è utilizzare Jetpack Search. Ideale per siti Web di grandi dimensioni, puoi fornire risultati di ricerca istantanei e utilizzare potenti filtri per migliorare la tua esperienza utente. Inizia oggi stesso con Jetpack Search!