Come creare un template per WordPress Parte 4

H4ck3rM4n è tornato dopo un periodo di assenza (per lo sviluppo e il funzionamento di un antico codice) con la quarta parte della guida: come creare un template per WordPress.

Nell’articolo precedente ho illustrato come registrare i fogli di stile e gli scripts JS all’interno del core di WordPress attraverso il file functions.php creato ad hoc per il tuo template.

NB: per chi non ha letto l’ultima puntata può dare un’occhiata qui.

In questo articolo invece ti parlo del concetto di loop di WP, del suo principale utilizzo e del single.php ovvero il file di default di un template WordPress che serve a visualizzare un singolo articolo.

Cos’è il concetto di loop?

Il loop di WordPress in sostanza è un ciclo iterativo che serve a recuperare gli articoli nella tabella wp_post del vostro database.

All’interno di questa tabella vengono solitamente memorizzati gli articoli, ma è anche possibile registrare in memoria pagine, impostazioni di visualizzazione articoli, immagini in evidenza e altri parametri come le revisioni dei post e parametri opzionali del template.

Quindi il loop non fa altro che visualizzare tutti gli articoli e le pagine mettendoli in un certo ordine e visualizzazione.

Vediamo un esempio concreto cliccando su questo link.

NB: tieni conto che il codice sorgente in uso funziona se usi la libreria Materialize che puoi scaricare qui.

E ora analizziamo meglio il codice che hai appena visto.

Il loop si presenta quasi sempre con questa struttura:

 

have_posts() : questa funzione verifica se ci sono post da ciclare all’interno di una query WP e restituisce un valore booleano TRUE se ci sono articoli da visualizzare, in caso contrario FALSE.  Se vuoi approfondire puoi dare un’occhiata al Codex di WP;

the_post() : serve ad effettuare il ciclo iterativo per recuperare gli articoli della tabella wp_post e reimposta anche il loop per effettuare un controllo sugli indici dei post.

Quando i post da iterare sono terminati la funzione have_posts() restituirà un valore booleano FALSE con il quale terminerà il ciclo iterativo.

Ci sono altre funzioni in WordPress che possono essere utilizzate (quasi la maggior parte) solo attraverso il loop:

the_ID() :  riporta il numero identificativo del post iterato;

the_title() : mostra il titolo dell’articolo;

the_content() : mostra il contenuto dell’articolo e anche le immagini al suo interno;

the_permalink() : visualizza il permalink del post, infatti è utile scrivere questa funzione come valore dell’attributo HTML href per fare puntare all’URL dell’articolo e renderlo cliccabile.

Utilizzando il codice scritto in alto avrai un risultato molto simile a questo:

 

Diamo qualche tocco di classe al nostro loop

È arrivato il momento di sistemare un po' il layout di visualizzazione.

Supponiamo di mantenere lo stesso stile, inserendo però un’immagine in evidenza all’articolo e modificando alcune cose nel css del nostro template.

Innanzitutto, è possibile sostituire il css utilizzando un foglio di stile alternativo (css personalizzato) e registrarlo nel core di WordPress.

 

Come si fa?

Semplicemente, aprendo il file functions.php e scrivendo questa semplice funzione per agganciarlo all’hook wp_enqueue_scripts.

Per vedere il codice clicca qui.

Fatto ciò, è possibile modificare il codice del loop (che hai inserito nel file index.php) per inserire la funzionalità dell’immagine in evidenza:

Per vedere il codice clicca qui.

Utilizzando questo codice all’interno del loop, hai inserito un nuovo controllo If all’interno del ciclo iterativo e utilizzato 6 funzioni nuove.

Le funzioni inserite nel codice sopra, servono a fare determinate cose che ti spiegherò adesso nel dettaglio.

is_attachment() : controlla se l’articolo appena iterato contiene un’immagine in evidenza;

has_post_thumbnail() : restituisce un valore booleano TRUE, se l’articolo iterato contiene l’immagine in evidenza, FALSE il contrario;

the_post_thumbnail_url() : visualizza l’immagine in evidenza del post iterato. Da notare che ci sono dei parametri per settare meglio la visualizzazione dell’immagine, qui ho impostato le foto con larghezza media, ma puoi consultare meglio tutti i parametri disponibili a questo link;

get_author_posts_url() : recupera l’URL di un autore con i parametri ID o Nome utente). Ti consigliamo di approfondire l’argomento, cliccando qui;

get_the_author_meta() :  recupera il meta dell’autore del post iterato esclusivamenta via ID. Se vuoi approfondire leggi qui;

the_author_meta() : visualizza su schermo i dati dell’autore, nel codice ho utilizzato il parametro display_name visualizza il nome utente, per ulteriori approfondimenti sui parametri da utilizzare per questa funzione clicca qui.

Ed ecco a te il risultato finale ☺

Visualizzare un singolo articolo

Cliccando nel link iterato dovresti vedere tutto il contenuto del nostro articolo ma, meraviglia delle meraviglie ci riporta al file index.php.

Questo perché?

Questo è dato dal fatto che il nostro template non contiene il file single.php e quindi non è possibile visualizzare un semplice articolo.

Ma, hihihihihihihihi, tutto è possibile.

Prova a creare questo file e inserire questo codice, in file che si chiama single.php:

Per vedere il codice clicca qui.

Come puoi vedere il codice è molto simile a quello di index.php, ha più o meno le stesse funzionalità ma ne visualizza uno e soltanto uno. ;D

Sotto, potete ammirare con grande soddisfazione un risultato molto simile a questo, segno del vostro ineluttabile lavoro.

Et voilà, il nostro single.php con un po' di modifiche strutturali HTML/CSS è pronto per la pubblicazione.

Spero che l’articolo sia stato di vostro gradimento, mangiate e bevete codice fino al prossimo aggiornamento.

Stay tuned!