Come utilizzare il blocco del ciclo di query di WordPress

L'editor di WordPress sta diventando un vero e proprio costruttore di siti. Grazie all'editing completo del sito e ai nuovi blocchi tematici come Query Loop Block, puoi visualizzare facilmente elenchi di contenuti dinamici per qualsiasi tipo di post ovunque in WordPress.

In questo articolo, approfondiremo il blocco del ciclo di query di WordPress in modo che tu possa capire meglio cos'è e come usarlo.

Che cos'è il blocco del ciclo di query di WordPress?

Il Query Loop Block è uno dei blocchi di temi WordPress più avanzati disponibili nel nuovo Site Editor. È stato aggiunto a WordPress Core nella versione 5.8 ed è una versione più complessa del blocco Ultimi messaggi. Consente a chiunque di creare visivamente un blocco che estrae e visualizza i contenuti dei post in modo dinamico su una pagina o un modello. Anche il Query Loop Block non si limita alla visualizzazione dei post del blog. Puoi usarlo per estrarre il contenuto da qualsiasi tipo di post personalizzato che potresti avere. Puoi persino usarlo con WooCommerce Blocks per visualizzare i prodotti.

Cosa sono le "query" e i "loop"?

Nella terminologia di WordPress, un "loop" è un modo per visualizzare informazioni simili ripetute. Un ciclo di post di blog, quindi, è una serie di post di blog con attributi comuni come titolo del blog, immagine in primo piano, nome dell'autore, data di pubblicazione e una breve descrizione. Il ciclo estrae questi dati dai post (o da qualsiasi tipo di post) e li inserisce in un ciclo. Il ciclo mostra quindi i post ai visitatori del sito.

L'aspetto della query di un "Ciclo di query" significa che un utente può interrogare o comandare determinate informazioni da inserire nel ciclo. Quindi un Query Loop Block può estrarre e visualizzare tutti i post o i post di categorie specifiche, per citare solo un paio di opzioni. Ciò consente a qualcuno di mostrare i post della "Categoria A" e nessun post della Categoria B o C.

I blocchi del ciclo di query possono visualizzare:

• I post del blog
• Pagine del sito web
• Prodotti WooCommerce
• Altri tipi di post personalizzati

Qualsiasi tipo di post è un gioco leale per la visualizzazione in un ciclo dinamico.

Blocchi nidificati del ciclo di query

Ci sono due "blocchi annidati" immediati che appartengono al blocco del ciclo di query:

• Blocco modello post: contiene ulteriori blocchi nidificati che visualizzano i metadati del post (titolo, immagine in primo piano, autore, ecc.)
• Blocco paginazione: consente ai post di traboccare nelle pagine per visualizzarne altri

Non tratteremo questi blocchi nidificati in questo articolo, ma puoi fare clic su uno qualsiasi dei loro collegamenti ipertestuali sopra per ottenere tutte le informazioni su come ciascuno funziona all'interno di un blocco del ciclo di query.

Come aggiungere il blocco del ciclo di query a un modello WordPress di indice

In questo esempio, stiamo usando il tema WordPress predefinito "Twenty Twenty-two". Questo è stato il primo tema predefinito a includere la modifica tramite il Site Editor (precedentemente chiamato "Full Site Editor").

Vedremo come aggiungere un blocco loop di query di WordPress a un modello nell'editor del sito. Per arrivarci, per prima cosa, passa con il mouse su "Aspetti" e quindi fai clic su "Editor".

Quindi, fai clic sull'icona in alto a sinistra per aprire il menu a discesa. In quel menu, fai clic su "Modelli".

Ora, dall'elenco dei modelli presentati, trova il modello che desideri modificare. Uno dei modelli più naturali per questo blocco è il modello "Indice" poiché è il modello che indicizza o visualizza i post del sito web.

Ora sei sul modello di indice di Twenty Twenty-two. Noterai che viene già fornito con un Query Loop Block configurato. Tuttavia, se stai utilizzando un tema a blocchi diverso, potrebbe non essere incluso.

Per aggiungere un nuovo Query Loop Block, fai clic sull'icona "(+)". Scorri verso il basso fino ai blocchi "Tema" o digita "Query Loop" nella barra di ricerca. Trascina il blocco Query Loop nel Site Editor.

WordPress ha "Pattern" predefiniti che possono darti un vantaggio nella progettazione del tuo ciclo di query. Puoi scegliere uno schema specifico se sai che ce n'è uno adatto alle tue esigenze, oppure puoi iniziare da zero. Faremo clic su "Inizia vuoto".

Esistono quattro varianti predefinite da applicare a un ciclo di query. Per questo esempio, fai clic sulla variante "Titolo e data".

Questo creerà il Query Loop con la variazione "Titolo e data".

Nota che i blocchi nidificati vengono visualizzati all'interno del blocco del ciclo di query di WordPress. Questo perché quei blocchi forniscono le funzionalità necessarie per il ciclo di query. Poiché abbiamo scelto la variazione "Titolo e data", è necessario includere quei blocchi nidificati per mostrare le informazioni su "Titolo" e "Data". Una variazione diversa avrebbe caricato una diversa disposizione dei blocchi nidificati.

Ora che un blocco di ciclo di query è su un modello, esploreremo la barra degli strumenti e le impostazioni per questo blocco tematico avanzato.

Barra degli strumenti e impostazioni del blocco del ciclo di query

Ogni blocco all'interno dell'editor del sito e dell'editor dei blocchi ha le proprie opzioni della barra degli strumenti e una barra laterale di altre impostazioni.

Barra degli strumenti del blocco del ciclo di query

Per trovare la barra degli strumenti per il blocco del ciclo di query, è più semplice accedere alla visualizzazione elenco e selezionare il blocco, assicurandosi che non sia selezionato un blocco nidificato.

La prima opzione unica della barra degli strumenti per il blocco del ciclo di query è "Impostazioni di visualizzazione". Facendo clic su di esso verranno visualizzate tre opzioni:

• Elementi per pagina: controlla il numero di post visualizzati alla volta nel ciclo
• Offset: salta il punto di partenza dei post di un determinato importo
• Numero massimo di pagine da mostrare: limita il numero di pagine visualizzate, anche se la query ha più risultati

Avanti sulla barra degli strumenti è il pulsante "Sostituisci". Ciò offre la possibilità di rimuovere il modello del blocco del ciclo di query e sostituirlo con un modello diverso.

L'ultima opzione unica della barra degli strumenti per il blocco del ciclo di query è la commutazione tra visualizzazione elenco e visualizzazione griglia. La visualizzazione elenco mostra il ciclo di post "come un elenco" con i post impilati. Grid View mostra il post loop come una griglia con più di un layout di tabella per i post da riempire.

Barra laterale delle impostazioni del blocco del ciclo di query

Il Query Loop Block ha configurazioni aggiuntive nella barra laterale "Altre impostazioni". Per visualizzare la barra laterale, fai clic sull'opzione "Mostra altre impostazioni" nidificata nella barra degli strumenti o fai clic sull'icona "Ingranaggio" in alto a destra mentre è selezionato il Blocco ciclo di query.

La prima impostazione visibile della barra laterale offre ai proprietari del sito la possibilità di creare un nuovo post per il ciclo di query da questa pagina di modifica. Successivamente, c'è il Layout Toggle che influenza il modo in cui i blocchi nidificati utilizzano la larghezza del layout rispetto al Query Loop Block, ne parleremo più avanti. L'interruttore delle impostazioni consente di selezionare una query personalizzata o ereditata per il blocco, di cui parleremo anche di seguito.

Opzioni di layout

Le impostazioni "Layout" per i blocchi nidificati consentono a un progettista di attivare impostazioni aggiuntive su (blu). Queste impostazioni consentono di scegliere se tali blocchi utilizzano percentuali di contenuto e larghezza. Rivela anche un'opzione per la giustificazione del contenuto a sinistra, al centro o a destra. Con esso disattivato (grigio), gli elementi nidificati sono impostati su tutta la larghezza per impostazione predefinita.

Impostazioni query

Quando la query "Impostazioni" è disattivata (grigio), puoi selezionare esattamente cosa interrogare. La prima opzione è "Post" che possono essere pagine, post o tipi di post personalizzati. Successivamente, gli utenti possono scegliere tra ordine crescente o decrescente per la data di pubblicazione o in ordine alfabetico. Infine, c'è un'opzione per includere o escludere post appiccicosi nella query.

L'attivazione o disattivazione di "Impostazioni" (blu) imposta il blocco del ciclo di query in modo che erediti la query dal modello utilizzato.

Filtri di query

Successivamente, con la query "Filtri" offre agli utenti la possibilità di personalizzare ulteriormente la query filtrando i post per:

• Categorie di post: elenco di categorie separate da virgole
• Post Tag: elenco di tag separati da virgole
• Autore articolo: elenco a discesa degli autori
• Pubblica parola chiave: inserisci un elenco di parole chiave in base alle quali filtrare

Opzioni colore e impostazioni avanzate

Infine, abbiamo Impostazioni colore e Impostazioni avanzate. Le opzioni di colore consentono ai progettisti di scegliere i colori per:

• Colore del testo
• Colore di sfondo
• Colore collegamento

Le impostazioni avanzate includono la possibilità di aggiungere una classe CSS al blocco del ciclo di query di WordPress e/o assegnare un elemento HTML al blocco.

Ogni blocco nidificato all'interno del blocco del ciclo di query ha le proprie opzioni della barra degli strumenti e le impostazioni della barra laterale. Visita l'elenco dei blocchi nidificabili sopra per saperne di più su ciascuno e sulle impostazioni che hanno.

Suggerimenti e best practice per l'utilizzo del Query Loop Block in WordPress

I cicli di query sono blocchi potenti. Segui questi suggerimenti e le migliori pratiche per ottenere il massimo da loro.

Imposta stili globali per cicli di query e blocchi nidificati

Gli stili globali possono essere impostati blocco per tipo. Ciò consente ai progettisti di creare stili predefiniti globali che si applicano a tutte le istanze di un blocco in tutto il sito web. Questo è un enorme risparmio di tempo.

Attualmente, nel tema 2022, il blocco del ciclo di query consente di aggiungere stili globali per il colore del testo, lo sfondo e i colori dei collegamenti. Per accedere all'editor di stili globali, fai clic sull'icona "Stili globali" (riempita a metà in un cerchio), seleziona "Blocchi" e trova il blocco del ciclo di query.

Puoi anche assegnare stili globali separati a ciascuno dei blocchi di temi nidificati (come modello di post, titolo di post, ecc.) anche all'interno di un loop di query.

Usa più blocchi di loop di query su una singola pagina per creare una sezione del blog in primo piano

Nella creazione di un modello di pagina del blog, potresti voler creare un post in primo piano che si distingua perché è il post più recente pubblicato sul tuo sito. Di seguito è riportata una versione semplice del concetto.

Ci dovranno essere due Query Loop Blocks sul nostro modello "Index". Il blocco superiore del ciclo di query avrà una visualizzazione "Visualizzazione elenco" e mostrerà solo un singolo post. Assicurati che non abbia un blocco paginazione nidificato in questo primo ciclo di query.

Con il secondo/inferiore Query Loop Block, impostalo su "Grid View". Dovrebbe visualizzare più post in colonne e impostare "Offset" su 1. Un offset di 1 salterà il primo post della query. Ciò è desiderato poiché il ciclo di query sopra contiene il post in primo piano.

Utilizza un design coerente per cicli di query che visualizzano gli stessi tipi di post

I cicli di query utilizzati per gli "articoli del blog" dovrebbero essere simili. Se utilizzi Query Loop Blocks per altri tipi di post, considera uno stile leggermente diverso per quelli in modo che i visitatori del tuo sito possano distinguere cosa sono i "post del blog" e quali sono altri tipi di contenuto. Ciò renderà chiara la UX del sito web.

Utilizzo del modulo blog di Divi: un'alternativa al blocco del ciclo di query con più opzioni di progettazione

Se usi Divi, il modulo blog funziona in modo molto simile al blocco nativo di WordPress Query Loop. E aggiungere il modulo blog di Divi a una pagina o un modello è semplice, offrendoti tutte le opzioni necessarie per personalizzare i parametri, il layout e il design del contenuto del post dinamico.

Anche il contenuto visualizzato all'interno del Modulo blog è completamente flessibile, consentendoti di selezionare un determinato tipo di post, categorie di tipi di post e il numero di post da includere. I singoli elementi del modulo possono essere aggiunti o rimossi come immagini in primo piano, titoli, meta-testo, corpo del testo, ulteriori collegamenti, impaginazione e così via.

Ciascuno di questi elementi del modulo può essere completamente disegnato utilizzando le ampie opzioni di design di Divi. Ulteriori informazioni sull'utilizzo del modulo blog di Divi sui modelli.

Domande frequenti sul ciclo di query

Rispondendo ad alcune delle domande più frequenti sul Query Loop Block di WordPress.

Qual è la differenza tra il blocco del ciclo di query e il blocco degli ultimi post?

Il blocco Query Loop è simile al blocco Ultimi post in quanto ha la capacità di visualizzare dinamicamente un elenco degli ultimi post sul tuo blog. Tuttavia, il Query Loop Block è molto più avanzato e ti consente di creare il tuo "elenco" di post, pagine o altri tipi di post da zero integrando altri blocchi nidificati. Ad esempio, se disponi di un tipo di post personalizzato per le ricette, puoi utilizzare il Query Loop Block per creare un'intera pagina di ricette personalizzate a tuo piacimento.

Il blocco del ciclo di query richiede conoscenze di programmazione?

No, il blocco WordPress Query Loop non richiede conoscenze di codifica perché la funzionalità è già integrata. Questo blocco ti consente di visualizzare un ciclo di post sul tuo sito WordPress utilizzando impostazioni di blocco personalizzabili sul front-end.

Dove posso utilizzare il blocco del ciclo di query?

Il Blocco Query Loop di WordPress passa in rassegna i post e le pagine pubblicati per visualizzarli. Si aggiornerà automaticamente quando nuove pagine/post soddisfano i parametri della query. Ciò rende questo blocco utile in molti posti come post o modelli di archivio o su pagine statiche in cui si desidera visualizzare dinamicamente cose come post recenti.

Hai utilizzato il Query Loop Block sul tuo sito WordPress? Quali scoperte hai fatto? Fateci sapere nei commenti qui sotto.

Immagine in primo piano di Dmitry Kostrov / shutterstock.com