Come utilizzare il ciclo di query in WordPress per creare una pagina di elenco dei post?

La pagina dei post del blog mostra tutti i post del blog sul tuo sito Web WordPress su una pagina indipendentemente dalla loro categoria, tipo, data di pubblicazione o autore. Hai mai visto siti Web che sono fondamentalmente solo post e articoli di blog? Bene, questa è essenzialmente una pagina di post di blog che funge da homepage per i suddetti siti web. Questi tipi di siti Web sono più evidenti con i siti Web che visualizzano esclusivamente contenuti relativi alle notizie. A parte questo, le pagine dell'elenco dei post sono di solito ciò che vedi quando vai ai blog o alla pagina delle notizie della maggior parte dei siti web. Quindi, come puoi creare uno di questi per il tuo sito web?

Imposta la pagina dei post del blog in WordPress

Se desideri impostare una pagina del blog, puoi semplicemente creare una pagina in WordPress.

• Vai alla dashboard di amministrazione del tuo sito web e seleziona "Pagine > Aggiungi nuovo".
• Inserisci un titolo per la pagina. Nella maggior parte dei siti Web, come menzionato in precedenza, questa pagina sarà denominata "Blog" o "Notizie", puoi utilizzare qualsiasi cosa tu voglia.
• Assicurati che non ci siano contenuti nella pagina e pubblica la pagina vuota.
• Ora vai alla sezione "Impostazioni > Scrittura" nel pannello di amministrazione di WordPress e seleziona la pagina vuota come "Pagina dei post".
• Salva le tue impostazioni.

Puoi personalizzare il numero di post visualizzati nella pagina dei post e se mostrare il riepilogo o il contenuto completo per ogni post.

La pagina dell'elenco dei post progettata è controllata tramite il tuo tema e puoi anche utilizzare i plug-in del generatore di pagine per creare una pagina di post dall'aspetto personalizzato che sei il tuo sito. Ora che potresti chiederti, quando questa è un'opzione predefinita, perché è disponibile un blocco Query Loop separato nell'editor Gutenberg.

Il blocco del ciclo di query

WordPress ha rilasciato una nuova funzionalità davvero interessante nella versione 5.8, il blocco Query Loop. A differenza di una pagina di post di blog, hai opzioni di personalizzazione per regolare la visualizzazione e varie altre funzionalità con il blocco del ciclo di query. In sostanza, puoi utilizzare il blocco del ciclo di query per creare facilmente una pagina di elenco dei post piena di tutti i tuoi post disposti secondo le tue preferenze specifiche in termini di design, allineamento e struttura.

Il ciclo di query è fondamentalmente un blocco nidificato che contiene, titolo del post, contenuto del post, immagine in primo piano del post, ecc. E funziona esattamente come il blocco "Elenco dei post". Con un sacco di schemi di blocchi integrati in questo nuovo editor di blocchi, puoi facilmente creare una pagina di portfolio o una pagina piena dei tuoi post preferiti, senza plug-in di terze parti. Con questa guida, ti guideremo attraverso tutti i passaggi necessari per impostare una pagina di post e utilizzare il blocco del ciclo di query per popolare la pagina con i post del blog sul tuo sito WordPress.

Ai fini di questo esercizio, ti consigliamo di avere già almeno alcuni post sul tuo sito web prima di creare la pagina dell'elenco dei post. Inoltre, assicurati di utilizzare l'editor di blocchi Gutenberg e non il vecchio editor classico.

Aggiungi un blocco del ciclo di query

• Fare clic sull'inseritore (+) Aggiungi blocco e selezionare il blocco Query Loop come mostrato nell'immagine sottostante. Per trovare il blocco Query Loop, dovrai fare clic su Sfoglia tutto , quindi scorrere fino alla sezione Tema dell'inseritore di blocchi. In alternativa, puoi digitare "/query loop" in un nuovo blocco di paragrafo per fare la stessa cosa.

Personalizzazione del blocco del ciclo di query

Dopo aver aggiunto il blocco del ciclo di query nella tua pagina, per impostazione predefinita, il blocco popolerà la tua pagina con l'ultimo post. Tuttavia, allo scopo di creare una pagina di post, puoi modificare il numero di post da visualizzare. L'editor di blocchi Query Loop ti offrirà varie opzioni di layout sotto forma di modelli di blocchi da scegliere e personalizzare. Le diverse opzioni di layout possono essere visualizzate sotto forma di carosello o in formato griglia.

Modelli di progettazione del blocco del ciclo di query

Scegli uno tra i due formati di visualizzazione, carosello o griglia, in base alla visualizzazione del design che preferisci nella parte superiore del blocco loop nella pagina dell'elenco dei post. Dovrai utilizzare il pulsante Scegli se decidi di utilizzare la visualizzazione a carosello o selezionare una delle opzioni disponibili se il modulo della griglia è il formato di visualizzazione preferito.

I modelli Query Loop forniti da WordPress per impostazione predefinita sono:

• Standard
• Immagine a sinistra
• Piccola immagine e titolo
• Griglia
• Titolo grande
• Compensare

A scopo dimostrativo, abbiamo deciso di utilizzare il modello di progettazione Standard mostrato di seguito con il formato di visualizzazione a carosello. Al contrario, puoi anche scegliere di iniziare da Vuoto e scegliere una delle quattro varianti che si adatta alle tue esigenze specifiche e personalizzare ulteriormente da lì.

Opzioni di blocco del ciclo di query

Come accennato in precedenza, il ciclo di query è composto da blocchi annidati che possono essere riorganizzati, aggiunti, allineati e così via. La cosa buona è che quando personalizzi e apporti modifiche a un blocco, lo stesso verrà applicato a tutti i blocchi dello stesso tipo. Come mostrato nello screenshot qui sotto, puoi utilizzare la barra degli strumenti in alto per apportare le seguenti modifiche ai tuoi blocchi di post:

• Larghezza: modifica la larghezza dei vari elementi nel blocco Query Loop. Dalla barra degli strumenti in alto, sarai in grado di rendere i post a tutta larghezza o in larghezza. L'opzione larghezza ampia estenderà il blocco oltre la dimensione del contenuto mentre l'opzione larghezza intera estenderà il blocco Query Loop per coprire l'intera larghezza dello schermo.
• Allineamento: modifica l'allineamento dei vari elementi nel blocco Query Loop. Hai la possibilità di scegliere le impostazioni di allineamento che vanno da sinistra al centro fino al lato destro della pagina.
• Disposizione: puoi riorganizzare gli elementi del blocco Query Loop come desideri utilizzando i motori come mostrato di seguito.

• Colori: puoi applicare vari tipi di opzioni di colore tramite le opzioni delle impostazioni del blocco del blocco che hai selezionato.
• Aggiungi blocchi: puoi anche aggiungere nuovi elementi ai tuoi blocchi come autori di post o estratti se lo desideri.

Barra degli strumenti del blocco del ciclo di query

Nella barra degli strumenti del blocco Query Loop, troverai il pulsante Impostazioni di visualizzazione, che se cliccato apre un popup che ti permetterà di scegliere quanti post mostrare.

• Elementi per pagina: numero di post da visualizzare all'interno del blocco Query Loop
• Offset: numero di post che vuoi saltare
• Pagina massima da mostrare: limita il numero di post che vuoi mostrare

Scegli il numero di post che desideri mostrare nella pagina dell'elenco dei post. È consigliabile che le pagine dell'elenco dei post visualizzino tutti i post sul sito web. Detto questo, potrebbero non essere sulla stessa pagina e possono essere visualizzati su più pagine utilizzando l'impaginazione.

Sulla barra degli strumenti Blocco query, puoi anche alternare tra Visualizzazione elenco o Visualizzazione griglia se desideri visualizzare i tuoi post in formato elenco impilato o come griglie, uno accanto all'altro, rispettivamente.

Correlati: Top 5 plugin di blocco Gutenberg per WordPress.

Editor dei blocchi del ciclo di query

Utilizzando le funzionalità e i modificatori specifici nell'editor di blocchi Query Loop, sarai in grado di apportare modifiche alle impostazioni del colore, applicare filtri specifici per i post e modificare l'ordine dei post nella pagina dell'elenco dei post. Se nel caso non vedi l'editor dei blocchi, fai clic sull'icona "ingranaggio" accanto al pulsante di pubblicazione per aprire la barra laterale dell'editor sul lato destro dello schermo.

• Le opzioni di colore nell'editor del blocco Query Loop influiranno sull'intero blocco Query, ma puoi anche personalizzare i singoli elementi all'interno del blocco selezionandoli in modo specifico e apportando le modifiche applicabili tramite la barra laterale dell'editor. L'editor di blocchi Query Loop fornisce le seguenti opzioni di personalizzazione del colore all'interno del blocco:
  • Colore del testo: consente di apportare modifiche al colore del testo contenuto all'interno del ciclo di query. Qui hai la possibilità di scegliere uno dei colori preimpostati dal menu, scegliere un colore personalizzato dalla tavolozza o aggiungere un codice colore specifico a tua scelta.
  • Colore di sfondo: questo influirà sul colore dello sfondo generale del blocco. Qui puoi scegliere un colore preimpostato, scegliere un colore personalizzato, aggiungere un codice colore specifico o utilizzare anche un'opzione di colore sfumato. Puoi vedere come l'uso di un'opzione di colore sfumato ha influito sul blocco della query nello screenshot fornito di seguito.
  • Colore collegamento: questa opzione di colore controlla i colori di qualsiasi collegamento in uno qualsiasi dei post presenti nel blocco di query. Questa opzione ha le stesse variazioni di colore dell'opzione colore del testo.

• Nella barra laterale dell'editor del blocco Query Loop, ti imbatterai nell'opzione Eredita query dal modello . Questa opzione può essere attivata e disattivata, a seconda che si desideri personalizzare la query su cui si basa il ciclo. Se lo attivi, alcune opzioni di personalizzazione saranno nascoste, ma, se lo disattivi, appariranno più opzioni di personalizzazione come:
  • Colonne: questa sarà una barra di trascinamento che ti consentirà di selezionare il numero di colonne in cui desideri visualizzare i tuoi post. Questa opzione apparirà solo se è selezionata la visualizzazione griglia anziché la visualizzazione elenco.
  • Ordina per: sarai in grado di ordinare i post nella pagina dell'elenco dei post in base a uno dei seguenti criteri:
    • Dal più recente al più vecchio, questa è l'opzione di ordine predefinita
    • Dal più vecchio al più recente
    • Alfabetico, dalla A alla Z
    • Alfabetico, dalla Z alla A
  • Post persistenti: utilizzando questa opzione, i post del blog possono essere posizionati nella parte superiore della prima pagina dei post, mantenendoli lì fino alla pubblicazione di un post permanente più recente. Puoi includere, escludere o visualizzare solo i post persistenti.
• Troverai anche l'opzione Filtro nella barra laterale dell'editor dei blocchi Query Loop, un'opzione che ti aiuterà a personalizzare ulteriormente i post che vengono mostrati. Questa opzione sarà invisibile se attivi l' opzione Eredita query dal modello . Per creare un filtro per la visualizzazione dei post nella pagina dell'elenco dei post, puoi giocare con le seguenti opzioni.
  • Categorie: dovrai elencare tutte le categorie di post che desideri includere. Tieni presente che dovrai assegnare i tuoi post in categorie distinte affinché questo filtro funzioni.
  • Autore: puoi utilizzare questo filtro se desideri visualizzare solo i blog scritti da un autore specifico nella tua pagina indice.
  • Parola chiave: se desideri filtrare i post in base a qualsiasi parola chiave che i post potrebbero includere, utilizza questa opzione di filtro.
• Infine, troverai anche l'opzione Impostazioni avanzate che ti consentirà di aggiungere una classe CSS personalizzata utilizzando la quale puoi personalizzare lo stile del blocco secondo le tue preferenze specifiche. Se lo desideri, puoi anche assegnare un elemento HTML. Tuttavia, se non disponi di un background di sviluppo Web front-end, ti consigliamo di lasciare questa opzione così com'è e di utilizzare le altre opzioni di personalizzazione del blocco per definire lo stile del tuo blocco del ciclo di query.

E il gioco è fatto! Puoi utilizzare le diverse opzioni menzionate sopra nel blocco Query Loop per creare una pagina di post per elencare i diversi post sul tuo sito WordPress e personalizzarli come ritieni opportuno. Se necessario, puoi assegnare la pagina dei post come tuo blog o utilizzarla come blog separato con parametri specifici.