Introduzione al WordPress Loop, una guida essenziale!

C’è una cosa che molti utilizzatori WordPress non comprendono e questo vale sia per le persone che usano i page builder che per gli sviluppatori PHP con più esperienza. È un concetto molto importante sul quale WordPress basa tutte le sue funzionalità e sono convinto che conoscerlo farà proprio al caso tuo.

Infatti in questo articolo andremo a conoscere da vicino il ciclo WordPress o, come lo chiameremo da qui in avanti, il Loop.

Il Loop rappresenta una delle parti più importanti del sistema WordPress e ci permette di personalizzare la visualizzazione dei nostri articoli e pagine all’interno dei nostri temi. Prima ancora di vedere come personalizzare il Loop dobbiamo soffermarci per capire per bene quali siano le sue funzionalità.

Il termine Loop si sente molto spesso quando si parla di questa piattaforma, se hai controllato il WordPress Codex hai sicuramente notato che molte delle funzioni che vengono descritte presentano una scritta:

Questa piccola stringa di testo ci permette di capire immediatamente che la funzione che stiamo studiando dovrà essere utilizzata all’interno del Loop, ovvero all’interno del processo che ci permette di prendere i contenuti presenti all’interno del database. Ma come funziona realmente questa caratteristica? E soprattutto come ci permette di personalizzare il contenuto che mostriamo?

Conosciamo il Comportamento del Loop

Fin dal titolo di questo articolo abbiamo anticipato l’argomento, ma ancora non abbiamo avuto una definizione chiara di che cosa sia questo Loop. Per coloro che conoscono il linguaggio PHP ecco una spiegazione da non addetto ai lavori che potrebbe essere interessante:

Per chi invoce non fosse un addetto ai lavori, ecco qua una spiegazione da profani:

A questo punto dovrebbe essere chiaro cosa si nasconde dietro al temine Loop e dovremmo aver appreso anche che quest’ultimo ci permette di avere degli strumenti con i quali possiamo modificare le informazioni relative agli articoli e alle pagine, benissimo! Purtroppo non abbiamo ancora conosciuto il codice che permetterà di eseguirlo!

Andiamo a vederlo nella prossima sezione.

Il codice del WordPress Loop

Se sei già familiare con il PHP il concetto di Loop è molto semplice perché all’interno di WordPress è rappresentato da un ciclo while che viene eseguito fintanto che non avrà terminato la sua ricerca di articoli.

Se invece sei un novizio e non sai niente di PHP continua a leggere quanto segue che cercherò di spiegarti la sua logica e struttura nel miglior modo possibile.

Quindi per capire al meglio il Loop di WordPress dobbiamo parlare di codice, giusto? E allora ecco qua un bell’esempio che dovrebbe introdurti all’argomento:

<?php if ( have_posts() ) : ?> 
	<?php while ( have_posts() ) : the_post(); ?> 
		/* Codice da eseguire in caso di contenuto trovato */ 
	<?php 
		endwhile; 
		else: 
	?> 
	/* Codice da eseguire in caso di contenuto non trovato */ 
<?php endif; ?>

Quello che abbiamo appena letto è il codice che compone il Loop WordPress! Andiamo ad analizzare rigo per rigo per capire al meglio il suo funzionamento:

• rigo 2 – grazie al ciclo if controllo che la funzione have_posts() restituisce un valore booleano di verità, la funzione esegue una veloce interrogazione al database e controlla se è presente almeno un post;
• rigo 4 – qua parte il bello del Loop! Praticamente stiamo dicendo a WordPress che finntanto che la funzione have_posts() restituisce un falore booleano di verità eseguo, all’interno di quella sessione, la funzione the_post() che ci permette di attivare gli strumenti che permettono di mostrare i contenuti presenti all’interno del singolo articolo;
• rigo 6 – all’interno del ciclo lanciato dal while potremmo sbizzarrirci utilizzando gli strumenti che ci ha fornito la funzione the_post() personalizzando così la visualizzazione dei contenuti;
• da rigo 8 in poi – chiudo il ciclo while e provvedo un messaggio di errore nel caso il controllo presente al rigo 1 avesse restituito un valore booleano falso, ovvero se have_posts() non ha trovato nessun articolo all’interno del database.

Eccoti presentato il WordPress Loop che rappresenta una delle caratteristiche più importanti di questo sistema e che ha contribuito allo sviluppo e crescita di questa piattaforma, mi sono forse dimenticato che WordPress viene utilizzato da più del 26% dei migliori siti online?

Tutte notizie molto interessanti, sopratutto se ti trovi su questo sito per scoprire nuove cose su WordPress con l’intenzione di creare una carriera.

La cosa interessante è che non ti ho ancora svelato perché il Loop è diventato uno strumento così potente e apprezzato dalla comunità WordPress. Infatti se il Loop si limitasse a cercare all’interno del database e restituire le informazioni che compongono i vari articoli non sarebbe molto utile… Questo comportamento restituirebbe tutti gli articoli di tutte le categorie in una pagina singola!

Ma se stai leggendo questo articolo probabilmente è perché ti interessa conoscere come personalizzare queste caratteristiche attraverso il codice. Per esempio, cosa dovremmo fare se desideriamo mostrare “5 articoli della categoria Pippo”?

Personalizziamo il Loop WordPress

Il Loop non sarebbe uno strumento così potente se non fossimo in grado di personalizzarlo, anche se non andremo ad affrontare questo argomento nel dettaglio, voglio intanto mostrarti come sia possibile iniziare a personalizzarlo con i limiti imposti precedentemente:

<?php query_posts( 'page_per_post=5&category_name=pippo' ); ?>

Posizionando questa semplice riga di codice immediatamente sopra al ciclo if sarai in grado di personalizzare il tipo di informazioni che vengono prese dal Loop all’interno del database, questo ci permetterà di creare pagine personalizzate che saranno in grado anche di mostrare i Custom Post Type!

Ci sono molti altri aspetti che ti permettono di personalizzare il Loop di WordPress, ma questo articolo sta già diventando abbastanza lungo e non voglio trattenerti in modo eccessivo. Se sei veramente interessato a conoscere tutte le caratteristiche di questa piattaforma spiegate in modo semplice ed esaustivo puoi sempre rivolgerti al corso dedicato alla creazione dei temi WordPress.

Personalizzia il contenuto all’interno del Loop

Fatta una veloce introduzione alla personalizzazione del tipo di informazioni che il Loop sarà in grado di andare a prendere è arrivato il momento di conoscere come fare per mostrarle ai visitatori! Per fare questo ci basterà semplicemente utilizzare gli strumenti, o meglio le funzioni, che il ciclo while e la funzione the_posts() ci mettono a disposizione.

Per una lista completa delle funzioni che potremmo utilizzare per mostrare le informazioni contenute in un articolo ecco un collegamento verso il WordPress Codex che parla delle Template Tag, al suo interno troverai moltissime funzioni, alcune delle quali da utilizzare soltanto all’interno del Loop, che puoi usare per creare il nostro tema.

Se sei andato a controllare il Codex ti sarai accorto che la lista è abbastanza lunga quindi in questo articolo andremo a vedere soltanto alcune funzioni che ci saranno veramente utili per la personalizzazione dei nostri articoli.

Post ID e Classi Correlate

Mi sembra giusto partire mostrando come sia possibile personalizzare, anche singolarmente, ogni contenitore dei nostri articoli sfruttando le funzioni che WordPress mette a disposizione. Molti saranno i casi in cui questo ci risulterà utile, ne conosceremo alcuni soltanto dopo aver visualizzato il codice.

Per una corretta esecuzione dobbiamo ricordarci che tutto il codice che verrà presentato da qui in avanti dovrà essere eseguito all’interno del ciclo while che ti ho mostrato poco fa:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >

Come puoi vedere all’interno degli attributi dell’elemento div, che in questo caso specifico rappresenta il contenitore del nostro articolo, abbiamo utilizzato due funzioni PHP ben precise:

• the_ID() – funzione che ci permette di ottenere l’id del nostro articolo. Vero! Non l’avevo ancora menzionato, ma ogni volta che salviamo un articolo all’interno del nostro WordPress quest’ultimo aggiunge un numero unico che gli permetterà di identificare il nostro articolo rispetto agli altri presenti nel suo database;
• post_class() – questa interessante funzione ci permetterà di inserire in modo del tutto automatico delle classi CSS che ci permetteranno di identificare le caratteristiche del nostro articolo.

Con la spiegazione delle due funzioni dovresti aver capito che la funzione the_ID() ci permette di identificare uno specifico articolo tra gli altri, anche se è una situazione un po’ rara possiamo usarlo per creare un ID con il quale potremmo personalizzare singolarmente il nostro articolo. Trovo più interessante e un comportamento molto più utile quello eseguito dalla funzione post_class() che ci permette di avere alcune delle classi che puoi trovare nella seguente lista che verranno mostrate a seconda del tipo di pagina e di contenuto che WordPress a generato:

• .post-id – in questo caso la classe generata assumerà la forma post-132, ovvero il termine id usato precedentemnete verrà sostituito dal numero identificatore del nostro articolo creando automaticamente la classe CSS che ci permetterà di identificare il nostro post;
• .post – questa è la prima classe che potrebbe variare a seconda del contenuto che stiamo consultando, se stiamo consultando un articolo assumerà il valore post ma se stiamo consultando una Pagina WordPress assumerà il valore page e via dicendo. Praticamente grazie a questa classe possiamo usare direttamente lo slug di qualsiasi Custom Post Type e abbiamo la possibilità di differenziarli rispetto al resto;
• .attachment – verrà inserito soltanto nelle pagine in cui visualizziamo un file collegato a un articolo o pagina presente all’interno del nostro sito;
• .sticky – permette di identificare quegli articoli che vengono targati come in evidenza, molto utile per creare slideshow e personalizzare con i CSS articoli di questo tipo;
• .hentry (hAtom microformat pages) – ci permetterà di evidenziare alcune porzioni del contenuto grazie ai microformats;
• .category-id – anche qui verrà sostituito il termine id con il numero identificativo della nostra categoria;
• .category-name – classe pià utile a livello umano dato che sostituirà il termine name con l’abbreviazione della nostra categoria;
• .tag-name – questa classe verrà ripetuta per ogni tag utilizzato nell’articolo e sostituirà il termine name con il nome del tag da noi inserito;
• .format-name – anche in questo caso verrà sostituito il termine name con il termine che andrà ad identificare il formato del nostro articolo, qualcuno ha detto Post Formats?

Come puoi vedere la funzione post_class() ti permette di avere molte informazioni, molte delle quali ti permetteranno di identificare il tipo di articolo mostrato e personalizzarlo tramite i CSS, ecco a voi un veloce esempio!

Come puoi notare tu stesso, il creatore del tema dal quale ho preso questo semplice esempio sta utilizzando il post format aside per creare un bloc notes. L’effetto è veramente molto interessante ma come ti ho anticipato all’interno del corso dedicato alla realizzazione di temi WordPress purtroppo la caratteristica dei Post Formats sta andando un po’ in declino perché in fin dei conti la bacheca di questo CMS non è mai stata in grado di adattarsi veramente alla differenza di contenuto che questi formati possono ospitare.

Dal mio punto di vista questo è un vero peccato, anche perché non molti anni fa questa fu una feature che aveva scatenato molto interesse e ci eravamo avvicinati molto all’integrazione di un plugin che permetteva di utilizzarli in modo più semplice. Purtroppo non è andata così… Però non disperare, in fin dei conti stai utilizzando una piattaforma basata su codice Open Source e sei sempre in tempo a rilasciare un bel plugin che faccia scatenare nuovamente l’interesse nei confronti di questa caratteristica 😉

Titoli e Link

Come consigliano molti marketer, i titoli dei nostri articoli sono uno dei motivi per i quali i nostri lettori li leggono, magari è successo anche a te quando ti sei trovato di fronte quello di questo articolo.

Però al momento tutto il codice che abbiamo condiviso ti ha mostrato soltanto come sia possibile creare il contenitore del nostro articolo, non hai ancora conosciuto nessuna funzione in grado di mostrare il titolo o il testo contenuto al suo interno. Con questa sezione voglio rimediare a questa mancanza mostrandoti non soltanto la funzione che ti permetterà di richiamare il titolo dal database, ma anche come inserire un bel link che permette di aprire la versione completa dell’articolo!

Ecco subito sotto un paio di funizioni che sono sicuro fanno al caso tuo!

<h1 class="entry-title">
	<a href="<?php the_permalink(); ?>" rel="bookmark">
		<?php the_title(); ?>
	</a>
</h1>

Le funzioni che ho utilizzato in questo blocco di codice sono molto interessanti, scopriamole da vicino:

• the_permalink() – questa funzione, inserita all’interno dell’attributo href, ci permette di inserire la URL che punta all’articolo completo. In questo modo il titolo è allo stesso tempo link dell’articolo stesso e passa molte informazioni ai motori di ricerca che consulteranno la pagina;
• the_title() – come molto probabilmente hai intuito, questa funzione mostra il titolo dell’articolo. In questo esempio l’ho usata anche all’interno dell’attributo title per aumentare il numero di informazioni che passiamo al motore di ricerca e rinforzare la SEO presente nella pagina.

Mi hai sentito parlare tanto di SEO nei precedenti punti ma molto probabilmente ti sei incuriosito vedendo che sto utilizzando un classico h2 per racchiudere il testo del titolo. Beh la risposta è molto semplice!

In questo articolo ho fatto l’esempio nel quale stiamo personalizzando il Loop di una pagina index.php o, per essere più precisi, della pagina che mostrerà la lista dei nostri articoli, quindi in questo caso il titolo più importante della pagina è quello del nostro sito, per il quale usiamo l’elemento h1. Ma questo è soltanto un esempio e devi tenere sempre a mente che se per necessità ti trovi a modificare le pagine single.php o page.php ti sarà molto più utile, per motivi SEO, avere un h1 per il titolo del proprio articolo/pagina.

Inseriamo i Metadati

Ed eccoci ad analizzare un altro importante passaggio nella composizione del nostro articolo. Per il momento siamo stati in grado di creare il contenitore e il titolo, che cosa sono questi metadati?

I metadati sono quelle informazioni che permettono di dare un contesto specifico al nostro articolo. Tutte quelle cose come la categoria di appartenenza, i tag utilizzati, l’autore dell’articolo e anche il numero di commenti che il vostro articolo ha ricevuto rientrano all’interno di questa sezione! Per mostrarli nella struttura dell’articolo che stiamo ricostruento serve soltanto questo piccolo blocco di codice che potrai personalizzare a tuo piacimento!

<div class="meta">
	Scritto da: <?php the_author(); ?> 
	- 
	Commenti: <?php comments_popup_link(); ?> 
	Tag: <?php the_tags(); ?>
	- 
	Categorie: <?php the_category(); ?>
</div>

Questo blocco di codice è lo stesso codice utilizzato da moltissimi altri siti WordPress che mostrano queste informazioni e, grazie al testo inserito, dovremmo essere in grado di comprendere di cosa stiamo parlando. Però credo che sia giusto entrare nel dettaglio quindi per una accurata formazione sarà necessario leggerci una breve descrizione di ciascuna:

• the_author() – funzione che non richiede alcun parametro e che ci permette di mostrare il nome dell’autore dell’articolo;
• comments_popup_link() – con questa possiamo mostrare il numero di commenti che l’articolo ha ottenuto. Se inseriamo la funzione comments_popup_script()nell’head del nostro WordPress ci permette di caricare il codice JavaScript idoneo ad aprire una finestra di popup permettendoci di inserire o visualizzare i commenti;
• the_tags() – funzione che mostra i tag inseriti all’interno dell’articolo, accetta tre parametri che ci permettono di inserire i caratteri che precedono, separano e seguono il singolo tag;
• the_category() – utima, ma non per importanza, la funzione che ci permette di visualizzare le categorie di appartenenza per un determinato articolo, il parametro accettato rappresenta il separatore da usare tra le varie categorie.

Il Momento di Mostrare il Contenuto!

Ci siamo, dopo tante parole siamo giunti a scoprire come inserire il nostro contenuto, la parte che fa da padrone su tutti i nostri siti e che senza di esso non potremmo fidelizzare alcun visitatore!

<?php the_content('<p>Continua a Leggere &raquo;</p>'); ?>

Una sola semplice regola per mostrare il contenuto che con tanto impegno abbiamo creato per il nostro articolo. Voglio condividere una cosa con te: questa stessa funzione mi permette di mostrare tutto il contenuto di questo articolo!

Ma non ci perdiamo in festeggiamenti, ci sono altre cose che voglio farti notare.

Hai visto che all’interno delle parentesi tonde ho inserito del codice HTML? Ebbene grazie a questo possiamo personalizzare il testo, ma anche la struttura, del link che permette ai nostri lettori di raggiungere la versione completa del vostro articolo (stiamo ancora assumendo di modificare il Loop a una homepage che taglia il contenuto dei nostri articoli in versioni ridotte).

Prima di concludere voglio lasciarti il codice completo che abbiamo sviluppato assieme in questo articolo. Trovi tutto nel Gist condiviso quindi non esitare a utilizzarlo più e più volte, sono sicuro che ti farà molto comodo 😉

Conclusioni

Spero che adesso sia chiaro per chiunque che cosa sia il WordPress Loop, esistono moltissimi modi per personalizzare il comportamento e la visualizzazione dei nostri articoli personalizzando questo aspetto della piattaforma, molto spesso l’unico limite che incontriamo è la fantasia!

Sono sicuro che quanto hai appreso oggi ti sarà di grande aiuto per il tuo lavoro e prima di salutarti vorrei chiederti un grande favore, che ne dici di condividere questo articolo con i tuoi amici e colleghi? Se condividete le stesse passioni è molto probabile che anche loro potranno beneficiare dalla sua lettura.

Intanto io ti ringrazio per aver letto fino a questo punto e se hai dubbi, suggerimenti o vuoi richiederci degli articoli specifici non dimenticarti che puoi utilizzare i commenti qua sotto oppure il nostro forum, quest’ultimo soltanto se sei uno skillato però…