Il ciclo di WordPress spiegato: cos'è e come funziona

Il loop è una parte centrale di WordPress. Senza di esso, non vedresti i contenuti su nessun sito Web WordPress. È responsabile di assicurarsi che gli articoli appaiano sulla pagina del blog e negli archivi, nonché il contenuto statico su singole pagine.

Se sei un designer di temi, non andrai in giro a imparare come usarlo. Tuttavia, come utente occasionale di WordPress, potresti non essere nemmeno consapevole della sua esistenza.

Per alleviare ciò, in questo post spiegheremo in dettaglio il ciclo di WordPress. Esamineremo cos'è e come funziona e dove trovarlo in WordPress. Imparerai anche come crearne uno tuo e vedrai alcuni esempi del ciclo di WordPress per consolidare la tua comprensione.

Cos'è il WordPress Loop (e dove lo trovi)?

Se dovessi spiegare brevemente cos'è il ciclo di WordPress, è semplicemente il markup che recupera e restituisce il contenuto delle pagine di un sito Web WordPress. Che si tratti di una pagina statica, di un post, di una pagina di blog o di un archivio, ovunque WordPress estragga il contenuto dal database e lo visualizzi su una pagina, il ciclo è coinvolto.

Tuttavia, perché si chiama loop in primo luogo?

Perché verrà eseguito ripetutamente. Inoltre, come vedrai di seguito, consiste letteralmente in un ciclo PHP.

Con quale frequenza viene eseguito il loop di WordPress?

Fino a quando non c'è più niente da visualizzare. Anche su pagine statiche scorre il contenuto disponibile. Tuttavia, in questo caso, si ferma dopo un passaggio.

Che aspetto ha il ciclo di WordPress?

Per rendere più chiaro di cosa stiamo parlando, diamo un'occhiata a un esempio e lo esaminiamo passo dopo passo. Ecco un esempio di come appare un semplice loop di WordPress:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

Se conosci già PHP o sei uno sviluppatore WordPress, non dovresti avere problemi a capirlo. Tuttavia, per tutti gli altri, esaminiamo i pezzi uno per uno.

• if ( have_posts() ) : — Questa è un'istruzione if che utilizza la funzione have_posts(). Se le istruzioni sono comuni nella programmazione, dicono semplicemente "se si applica la seguente condizione, continua". In questo caso, la condizione è have_posts() , che è semplicemente un controllo per verificare se esistono post che potrebbero essere visualizzati.
• while ( have_posts() ) : — Questa riga è un ciclo while e segna l'inizio del ciclo di WordPress. Eseguirà il codice che contiene fintanto che la sua condizione è vera. Ancora una volta, la condizione è se WordPress ha dei post in negozio. La frequenza con cui tornerà true è determinata dal numero di post impostati nelle impostazioni di WordPress nell'interfaccia di amministrazione.
• the_post(); — Questo è il codice che esegue il ciclo. È una funzione di WordPress che richiama tutti i dati disponibili per il prossimo post e li salva per prepararli alla visualizzazione. Per questo, abbiamo molti tag modello di cui parleremo di seguito.
• // Display content here — Qui è dove posizioniamo il markup che determina quale parte del contenuto visualizzare e in che modo. Di solito è un mix di PHP e HTML. Non lo mostriamo qui perché è più complesso e lo esamineremo più avanti.
• endwhile; — Il pezzo di codice che chiude il ciclo while dopo che ha eseguito ciò di cui abbiamo bisogno.
• endif; — Come sopra ma per l'istruzione if .

Quindi, sostanzialmente la struttura è la seguente: controlla se i post esistono, quindi estrai i dati necessari dal database e visualizzali in un modo predeterminato, ripeti l'operazione finché ci sono post validi da visualizzare.

Sintassi alternativa

Una cosa veloce, a volte vedrai anche il ciclo scritto in questo modo:

 if ( have_posts() ) { while ( have_posts() ) { the_post(); // Display content here } // end while } // end if

Questo è esattamente lo stesso dell'esempio sopra, solo in una sintassi PHP alternativa. Quale usare dipende davvero da te. Per ragioni di coerenza, continueremo con la prima variazione.

Dove trovare il loop di WordPress?

Il fatto che il loop sia sempre al lavoro ogni volta che il contenuto appare su una pagina risponde già a dove trovare il loop di WordPress. Le risposte si trovano in ogni file modello del tuo tema che mostra il contenuto.

In alternativa, a seconda dell'architettura del tuo tema, potrebbe trovarsi anche in una parte del modello. Si tratta di file modello che contengono parti di codice utilizzate di frequente (come il ciclo). Possono essere inseriti in altri file invece di riutilizzare ogni volta lo stesso frammento di codice.

Ad esempio, se apri il file page.php del tema Twenty Twenty-One, puoi vedere che, qui, il ciclo è diviso in parti. Mentre inizia all'interno del file stesso, la sezione che determina come generare i dati risiede in una parte del modello chiamata content-page.php .

 /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop.

La gerarchia dei modelli di WordPress determina quale file viene utilizzato dal sistema per visualizzare il tipo di pagina e ogni file deve contenere un loop o un riferimento a dove è possibile trovarlo.

Significa anche che il ciclo può apparire diverso nei singoli file, ovvero su pagine diverse. Ad esempio, in un archivio potresti voler visualizzare solo estratti di post, mentre nella pagina principale del blog potresti voler mostrare interi post (fino al link "leggi di più"). Per questo, hai bisogno di diversi tipi di markup, motivo per cui il ciclo non sarebbe lo stesso all'interno home.php e archive.php .

Come creare un ciclo

Per creare un ciclo, puoi fondamentalmente iniziare con il semplice codice che abbiamo analizzato sopra. Questo è davvero il ciclo standard. Eccolo di nuovo:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

La parte difficile è quella che abbiamo tralasciato: la parte che determina la visualizzazione del contenuto. Per questo, come accennato, di solito usi un mix di HTML e PHP. Ad esempio, ecco come diresti a WordPress di sputare il post avvolto in un tag <article> con una classe e un ID personalizzati, il titolo come intestazione h1 , oltre all'immagine e al contenuto in primo piano.

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <?php the_content(); ?> </article> <?php endwhile; endif; ?>

Una cosa che spicca sopra è che ci sono molti tag scritti con caratteri di sottolineatura. Questi sono tag template di WordPress, che offrono scorciatoie per chiamare parti comuni del contenuto. Qui utilizziamo the_title() per visualizzare il titolo del post, the_post_thumbnail() per l'immagine in primo piano e the_content() per il contenuto principale. Ce ne sono molti altri, come the_excerpt() o the_category() . Puoi trovare un elenco di opzioni qui.

Un'altra cosa importante per il ciclo di WordPress sono i tag condizionali. Li vedi usati molto nel markup relativo al ciclo per visualizzare qualcosa solo in determinate condizioni. Ad esempio, è molto comune racchiudere the_post_thumbnail() in un'istruzione condizionale per impedire a WordPress di provare a pubblicarlo sulla pagina quando non esiste un'immagine in primo piano.

 <?php if ( has_post_thumbnail() ): the_post_thumbnail(); endif; ?>

Abbiamo altri esempi di seguito. Per saperne di più sui tag condizionali, controlla il Codice di WordPress.

Esempi del ciclo di WordPress

Come parte finale di questo tutorial, esamineremo alcuni esempi su come utilizzare il ciclo di WordPress.

Il tema del ventuno

Quando si esamina il tema Twenty Twenty-One, la prima cosa che spicca è il suo uso massiccio di parti del modello. Tutti i file modello standard come page.php , single.php e persino index.php avviano il ciclo all'interno del file ma quindi utilizzano get_template_part per scaricare la visualizzazione del contenuto su altri file. In questo caso, sono rispettivamente content-page.php , content-single.php e content.php . Ecco una versione ridotta di single.php come esempio:

 <?php get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-single' ); // additional code for comments and post navigation endwhile; // End of the loop. get_footer();

Questo è visibile anche in altri file. Ad esempio, anche l'intestazione e il piè di pagina hanno le proprie parti del modello. Puoi vedere i riferimenti a quelli all'interno del ciclo in altri posti. Ad esempio, se guardi content-single.php , puoi vedere una chiamata alla parte del modello author-bio.php alla fine.

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> <?php if ( ! is_singular( 'attachment' ) ) : ?> <?php get_template_part( 'template-parts/post/author-bio' ); ?> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> -->

A parte questo, è relativamente normale:

1. Apri un elemento HTML <article> con un ID e una classe personalizzati
2. Crea l'elemento di intestazione dell'articolo che restituisce il titolo racchiuso in un'intestazione h1 e visualizza l'immagine in primo piano con una funzione personalizzata per Twenty Twenty-One
3. Seguilo con un elemento entry-content che contiene il tag del modello the_content() per generare contenuti a post singolo
4. Includi markup per l'impaginazione e il footer della voce con un'altra funzione di Twenty Twenty-One per visualizzare le metainformazioni dei post
5. Infine, c'è la suddetta chiamata alla biografia dell'autore nella propria parte del modello

Il tema predefinito di Twenty Ten WordPress

Se torni al primo tema predefinito di WordPress in assoluto, Twenty Ten, e usi il repository di subversion per guardare i file dalla versione 1.0, puoi vedere come si è evoluta la gestione del loop e dei file modello nel tempo. All'epoca, molti dei file modello contenevano i propri loop WordPress completi invece di esternalizzarli a parti di modello riutilizzabili. Puoi vederlo chiaramente nel page.php del tema.

 <?php get_header(); ?> <div> <div role="main"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <?php if ( is_front_page() ) { ?> <h2 class="entry-title"><?php the_title(); ?></h2> <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php comments_template( '', true ); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>

Lo stesso è visibile anche in onecolumn-page.php , che è un file che controlla un modello di pagina personalizzato offerto dal tema. Ciò che è anche degno di nota è che sta usando la vecchia chiamata al loop che era stata scritta in una riga all'epoca.

 <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

Nei temi moderni, più comunemente lo vedi distribuito su più righe come visto in precedenza per aumentare la leggibilità del codice.

Il tema Twenty Ten ha anche un file loop.php autonomo che è troppo lungo per essere incluso qui senza superare il mio limite di parole. È diviso in tre parti che controllano la visualizzazione di diversi tipi di post (galleria immagini, post della categoria Asides , tutti gli altri post). Ciascuno di questi è ulteriormente suddiviso per istruzioni if ​​e else per tenere conto di casi diversi come l'archivio e le pagine di ricerca.

 <?php while ( have_posts() ) : the_post(); ?> <?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?> // Lots of code here <?php else : ?> // Lots of code here as well <?php endif; ?> <?php /* How to display posts of the Aside format. The asides category is the old way. */ ?> // Even more code <?php /* How to display all other posts. */ ?> <?php else : ?> // Still more code <?php else : ?> // A bit more markup <?php endif; ?> // And a bit more code <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> <?php endwhile; // End of the loop. Whew. ?>

Il tutto contiene una logica piuttosto contorta, motivo per cui risulta piuttosto lungo e complicato. Sono contento che oggi abbiamo altri modi per gestirli e ti consiglio di dare un'occhiata per vedere un esempio di loop di WordPress che non vuoi emulare.

A proposito, se pensi che io sia stato troppo duro con gli sviluppatori di allora, stai certo, sono d'accordo con la mia valutazione. Basta guardare il commento dello sviluppatore in cui loop.php chiude il ciclo.

 <?php endwhile; // End the loop. Whew. ?>

Il blocco del ciclo di query di WordPress

Potresti non esserne a conoscenza perché è una funzionalità di Gutenberg relativamente nuova, ma l'editor di blocchi (e, per estensione, la modifica dell'intero sito) ora ha anche un blocco che contiene un loop di WordPress. Si chiama Query Loop Block e puoi aggiungerlo al tuo sito come qualsiasi altro blocco. Il modo più semplice è aggiungere una barra e digitarne il nome come /queryloop . Premi invio e apparirà sulla pagina.

Il blocco permette di creare un ciclo PHP senza dover scrivere codice. Mostrerà automaticamente gli ultimi post sul tuo sito. Oltre a ciò, ha diverse opzioni di personalizzazione. Innanzitutto, il blocco viene fornito con una serie di layout preimpostati. Puoi scorrere tra di loro tramite le frecce o fare clic sull'opzione Griglia per vederli tutti in una volta.

Scegli quello che preferisci o clicca su Scegli se sei arrivato alla tua opzione preferita per finalizzare la scelta. È importante notare che i layout sono costituiti da schemi di blocchi, quindi gruppi prestabiliti di blocchi singoli. Ciò significa anche che puoi disporli in modo diverso secondo necessità, sono ancora blocchi normali. Usa le frecce o fai clic e tieni premuta l'opzione Trascina per spostarli dove vuoi.

Inoltre, ogni blocco (e spesso ogni gruppo di blocchi) viene fornito con le loro solite opzioni nella schermata principale dell'editor e nella barra laterale. Qui puoi cambiare i colori, le dimensioni dei caratteri, i formati e altro ancora.

Una volta soddisfatto, se pubblichi o visualizzi in anteprima la pagina, vedrai apparire il tuo ciclo di query WordPress personalizzato su di essa. Quindi, anche se non sei uno sviluppatore di WordPress e non capisci PHP, puoi comunque sfruttare ciò che il ciclo ha da offrire.

Il ciclo di WordPress spiegato in poche parole

Il loop è qualcosa con cui qualsiasi professionista di WordPress deve avere familiarità. Tuttavia, anche se sei un utente più occasionale, non è comunque una cattiva idea capire come funziona. Potrebbe semplificare la risoluzione dei problemi o creare modelli di pagina personalizzati, se lo desideri.

In questo post, abbiamo esaminato qual è il ciclo, dove risiede e lo abbiamo analizzato in dettaglio. Abbiamo anche dato un'occhiata a come puoi creare il tuo loop ed esempi dai temi predefiniti e dal nuovo blocco di query. Ormai sai tutto ciò di cui hai bisogno per creare e personalizzare il loop di WordPress.

Qual è il tuo uso preferito del ciclo di WordPress? Per favore condividi i tuoi pensieri nei commenti qui sotto!

Immagini: Jonny Gios/Unsplash, Tine Ivanic/Unsplash