Gerarchia dei template e loro utilizzo: come creare un template per gli articoli?
Nella lezione precedente abbiamo ultimato la realizzazione del template di base (index.php) che sarà utilizzato da WordPress per presentare i vari contenuti che, di volta in volta, saranno richiesti dagli utenti. Ogni qual volta l’utente richiederà una pagina o un articolo o visualizzerà l’indice di una categoria, WordPress – in mancanza di altri template – userà questo template di base per mostrare i contenuti. L’inconveniente è che in questo modo avremmo un unico template per qualsiasi contenuto da mostrare. E se volessimo visualizzare il contenuto degli articoli con un template leggermente diverso da quello di base?
Oggi vedremo come funziona la gerarchia dei template dei WordPress e come creare un template da utilizzare esclusivamente per la visualizzazione degli articoli. Sei pronto?
Indice dell’articolo
- Quale template utilizza WordPress quando visualizza un certo tipo di pagina?
- Come creare un template per la visualizzazione degli articoli?
- Conclusione
- Indice degli articoli trattati in questa guida
1. Quale template utilizza WordPress quando visualizza un certo tipo di pagina?
La scorsa settimana abbiamo visto la differenza che intercorre tra i termini “tema” e “template”, concetti indispensabili per comprendere bene il paragrafo che stai per leggere.
WordPress utilizza una propria gerarchia di template all’interno di un tema: questo significa che, sulla base della pagina richiesta dall’utente, associa un determinato template da adoperare per mostrare i contenuti. Vediamo come funziona più nel dettaglio questo processo.
WordPress utilizza le “Query String” (le informazioni contenute all’interno di ciascun url del nostro sito) per decidere quale template sarà utilizzato per visualizzare la pagina richiesta.
- In primo luogo confronta le Query String contenute nell’url della pagina richiesta per determinarne il tipo (pagina di ricerca, pagina di categoria, home page, pagina di articolo, ecc).
- Il template da utilizzare è selezionato secondo l’ordine suggerito dalla gerarchia dei Template di WordPress: a seconda se i template necessari sono disponibili o meno all’interno della cartella del tema, WordPress cerca il file del template con il nome specifico e utilizza il primo template corrispondente che riesce a trovare.
- In aggiunta al template di base (index.php) possiamo scegliere se creare o meno ulteriori file di template. Se WordPress non riesce a trovare un file di Template con il relativo nome corrispondente, passa al nome del file successivo indicato nella gerarchia dei template. Se WordPress non riesce a trovare alcuna corrispondenza nei file di template, sarà utilizzato il template di base (index.php)
1.1 Esempio
Se il tuo blog si trova all’indirizzo http://example.com/wp/ e un visitatore clicca sul link di una categoria come quello che segue:
http://example.com/wp/category/your-cat/
WordPress cercherà un file di template nella cartella del tema corrente cui corrisponda l’ID della categoria your-cat. Se l’ID di questa categoria è 4, WordPress cercherà un file di template denominato category-4.php. Se questo file non è presente, WordPress cercherà un file di template generico per le categorie: category.php. Se questo file non esiste WordPress cercherà il template generico utilizzato per la visualizzazione degli archivi: archive.php. Infine, se anche questo file non esiste, la scelta di WordPress ricadrà sul tema generico index.php. Esattamente come suggerito dalla gerarchia dei template (Figura 1).
1.2 Panoramica Visuale
Il seguente grafico mostra quali file di template sono chiamati a generare una pagina basata sulla gerarchia dei template di WordPress.
Figura 1 - Gerarchia dei template di WordPress.
Dopo questa introduzione sull’utilizzo dei vari template andiamo a personalizzare ulteriormente il nostro tema creando un template per la visualizzazione dei singoli articoli.
2. Come creare un template per la visualizzazione degli articoli?
Dando uno sguardo alla gerarchia dei template (Figura 1) ci accorgiamo subito che il file del template utilizzato per visualizzare i singoli articoli è chiamato single.php, quindi nella cartella del nostro tema dobbiamo creare un file che abbia questo nome in modo che WordPress lo possa trovare quando dovrà visualizzare il contenuto di un articolo.
Come primo passo creiamo una copia del template generale (index.php) e rinominiamolo in single.php. Le jeux son fait, da questo momento in poi WordPress utilizzerà sempre questo file quando si tratterà di visualizzare il contenuto di un singolo articolo.
Andiamo a visualizzare il contenuto di un articolo per vedere come si presenta sullo schermo (Figura 2).
Figura 2 - Template utilizzato per la visualizzazione degli articoli.
A questo punto possiamo apportare a questo file (single.php) tutte le modifiche che desideriamo, sulla base delle nostre esigenze.
Poniamo il caso di voler visualizzare, alla fine dell’articolo, un messaggio che inviti l’utente a sottoscrivere i feed rss del nostro blog. Per fare questo aggiungeremo una piccola icona per richiamare visivamente i Feed e un breve messaggio di testo.
Prepariamo il terreno prima di iniziare a scrivere il markup necessario.
All’interno della cartella principale del tema creiamo una nuova cartella denominata images, che servirà a contenere tutte le immagini che utilizzeremo nel nostro tema. All’interno della cartella images copiamo l’icona che desideriamo utilizzare per rappresentare visivamente i Feed rss (Figura 3).
Figura 3 - Icona feed rss
La struttura del nostro tema ora dovrebbe apparire come mostrato in Figura 4.
Figura 4 - Struttura del tema di WordPres
Adesso è arrivato il momento di scrivere il markup necessario per visualizzare l’invito a iscriversi ai Feed. Apriamo il nuovo file che abbiamo creato, single.php, posizionamoci subito dopo il markup che visualizza i commenti e aggiungiamo le seguenti righe di codice:
<!-- START FEED --> <p class="feed"> Se ti è piaciuto questo articolo considera di <a href="#">iscriverti ai nostri feed</a> per restare sempre aggiornato sulle ultime novità pubblicate! </p> <!-- END FEED -->
Al foglio di stile aggiungiamo la seguente regola:
p.feed {
background:url('images/feed.png') no-repeat 10px center;
padding:20px 0 20px 80px;
margin:70px 0 0 0;
border:2px solid #7f192f;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
Adesso se ricarichiamo la pagina dell’articolo dovremmo visualizzare quanto mostrato in Figura 5.
Figura 5 - Il template del nostro articolo dopo la personalizzazione apportata.
3. Conclusione
Abbiamo iniziato a creare un template dedicato alla visualizzazione degli articoli. Sul template single.php si potranno apportare tutte le modifiche che si desiderano per adattare il layout alle nostre necessità.
Per oggi ci fermiamo qui, spero sia chiaro il meccanismo riguardante la gerarchia dei template di WordPress, questo è un altro argomento molto importante che – se ben compresso – permette di personalizzare ogni singolo aspetto della piattaforma sulla base delle proprie esigenze.
In una delle prossime lezioni vedremo come aggiungere sul template dell’articolo anche la possibilità di lasciare e visualizzare i commenti, una delle caratteristiche più importanti per un blog che permettono l’interazione diretta tra gli utenti e l’autore del blog.
Mi auguro che anche la lezione di questa settimana sia stata di tuo gradimento e ti do appuntamento alla settimana prossima.
4. Indice degli articoli trattati in questa guida
Per agevolarti la consultazione della guida alla fine di ogni articolo riporterò l’indice comprendente tutti gli argomenti trattati.
- Come Installare WordPress in Locale?
- WordPress: Diamo Uno Sguardo al Pannello di Amministrazione
- Come Creare un Template per WordPress Partendo da Zero?
- WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2)
- Diamo Uno Sguardo al Loop di WordPress
- Aggiungiamo la Sidebar al nostro tema
- WordPress: come rendere dinamici Header e Sidebar del template?
- Gerarchia dei template e loro utilizzo: come creare un template per gli articoli?
- Come Creare Template Personalizzati per le Pagine di WordPress?
- WordPress: predisporre la sidebar per l’uso di widget
- Personalizzare il Template dei Commenti di WordPress (Parte 1) | (Parte 2)
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
36 commenti
Trackback e pingback
-
Tweets that mention Gerarchia dei template e loro utilizzo: come creare un template per gli articoli? | Your Inspiration Web -- Topsy.com
[...] This post was mentioned on Twitter by Antonino Scarfì. Antonino Scarfì said: RT @YIW Gerarchia dei template e loro… -
Aggiungiamo la Sidebar al nostro tema | Your Inspiration Web
[...] Gerarchia dei template e loro utilizzo: come creare un template per gli articoli? [...] -
WordPress: Come Realizzare L’Header Del Tema? Parte 2 | Your Inspiration Web
[...] essere interessato anche ai seguenti articoli:Gerarchia dei template e loro utilizzo: come creare un template per gli articoli? Nella… -
Come Creare Template Personalizzati per le Pagine di WordPress? | Your Inspiration Web
[...] Gerarchia dei template e loro utilizzo: come creare un template per gli articoli? [...] -
WordPress: Diamo Uno Sguardo al Loop | Your Inspiration Web
[...] Gerarchia dei template e loro utilizzo: come creare un template per gli articoli? [...] -
Come creare un tema per WordPress partendo da zero? | Your Inspiration Web
[...] Gerarchia dei template e loro utilizzo: come creare un template per gli articoli? [...]
Aspettavo la lezione di questa settimana… Interessante sicuramente capire tutta la struttura dei template.
Bravo Nando!
p.s. quand’è che cambi il tuo avatar con una tua foto recente come ti si vede nei video del barcamp?
Ciao Luca, comprendere la gerarchia dei template è importantissimo in quanto permette di adattare la piattaforma WordPress a qualsiasi progetto (anche se il consiglio rimane sempre quello di non abusarne).
p.s. eccoti accontentato! spero di essere riuscito a caricare correttamente la foto fatta all’isola bella all’indomani del WordCamp. Più recente di così =)
Spettacolo. Come sempre sei stato chiarissimo.
Ho visto i video, molto interessanti, se la prossima volta fosse un pò più vicino a Ravenna verrei sicuramente ; )
Grazie ancora delle guide e dei consigli che date, riuscite a fare capire molto bene con semplicità, siete bravi davvero.
Ho installato wordpress da quando ho iniziato a seguire il corso, prima facevo semplici pagine in html, fino adesso tutto chiaro, se continua così riesco sicuramente a fare un qualcosa di personale, una volta capito la struttura e il meccanismo rimane a noi e alla nostra fantasia.
Un saluto e buon lavoro.
Ciao Paolo, intanto grazie a te per le bellissime parole!
Sono curioso ti vedere il tuo primo lavoro con WordPress =)
p.s. in un prossimo futuro non molto lontano vedremo di organizzare un incontro live con tutti i nostri lettori, il bello del web è anche questo!
Wow, si iniziano a vedere davvero le grandi potenzialità di WP. Capire la struttura dei template è davvero illuminante! Grazie e alla prossima settimana.
Ciao Massimiliano e grazie a te.
Una volta capito il funzionamento della struttura dei vari template che compongono WordPress possiamo fare di tutto, l’unico limite è dettato dalla nostra fantasia =)
PS: non so se succede solo a me ma il file .pdf dell’articolo genera un’errore all’apertura e non si vede…
Ho appena verificato, credo si tratti di un problema del plugin utilizzato.
Vedo se riesco a trovare qualcosa di meglio in questi giorni, comunque sta per essere lanciato un nuovo progetto che almeno in un primo momento dovrebbe sopperire a questo inconveniente [gli iscritti alla newsletter avranno già capito a cosa mi riferisco =)].
Si può sistemare il PDF? L’ho scaricato oggi e mi da errore.
Ve ne sarei grato, non si può fare a meno di queste guide.
Grazie.
ciao giovanni, ti chiedo solo ancora un po’ di pazienza, è quasi pronto l’eBook dell’intero corso.
Dopo questa news sarò ben lieto di aspettare.
PS: Avevo visto che qualcuno voleva sapere come inserire l’immagine qui a sx nei commenti, ma non ritrovo il post. Mi permetto di chiederlo anche io. Scusate.
Ok, grazie. Ciao!
“Sono curioso di vedere il tuo primo lavoro con WordPress =)”
adesso mi sento un po in soggezione.
“…organizzare un incontro live con tutti i nostri lettori…”
bella idea, ci vorrebbe qualcosa ad una “distanza” abbastanza facilmente raggiungibile per tutti, non sarà facile, ma se posso molto volentieri.
ahahaha, no dai, semplicemente per vedere nella pratica i risultati di questo corso.
potremmo scegliere Roma come punto centrale, comunque più in la ne discuteremo meglio, ci piacerebbe ci fosse più gente possibile, i contatti umani reali superano di gran lunga tutti i vari servizi di social messi insieme =)
Ancora 3 “puntate” e finalmente l’identità dell’assassino sarà svelata ^_^ Scherzi a parte, finora tutto chiaro. Aspetto con ansia la prossima lezione.
Ciao Apnea, si, siamo ormai vicini alla conclusione del corso, grazie per essere passato =). Alla prossima lezione.
Succede anche a me. Inoltre non riesco a scaricare anche un altro articolo; questo:
https://www.yourinspirationweb.com/2010/04/01/come-realizzare-un-template-joomla-seconda-parte/
Sono molto utili, peccato non si riescano a stampare.
:-)
Non so se succede solo a me, ma il pdf risulta danneggiato. Si riesce a scaricare ma in acrobat da errore e le pagine risultano vuote.
Ciao Fede, è un problema del plugin che stiamo utilizzando per generare i pdf, per rimediare prova a stampare la pagina normalmente, abbiamo realizzato un foglio di stile appositamente per la stampa degli articoli anche se ancora non abbiamo avuto modo di testarlo ufficialmente.
Fammi sapere!
Ciao Nando,
ho provato a fare un’anteprima di stampa ma vengono inclusi anche tutti i menu, i banner e glie altri elementi. non so se è così che l’avete impostato… è la pagina linearizzata senza il foglio di stile in pratica.
Grazie!
No, allora non sta funzionando. Abbiamo impostato il foglio di stile per la stampa eliminando tutto il contenuto dell’header, della sidebar e tutti gli altri fronzoli che ci sono in ogni pagina al di là del contenuto.
Grazie per la segnalazione, Fede, metto in elenco la sistemazione del foglio di stile per la stampa.
ciao nando…. una domanda rapida… ma single.php viene usato solo per la visualizzazione degli articoli???
grazie per tutto… ottimo corso!!!! bravo!!!!
Ciao Paolo, se guardi bene l’immagine dell’articolo che si riferisce alla gerarchia dei template vedrai chiaramente per quali pagine viene utilizzato il template single.php (per esempio anche per mostrare gli allegati, i custom, ecc)
Buongiorno Nando, grazie per la chiarezza del tuo blog.
Ho però un problema che mi sembra insormontabile: per qualche strana ragione non riesco a sfruttare la proprietà gerarchica.
Se al single.php aggiungo l’id dell’articolo sembra che wordpress lo bypassi.
Non riesco a capire dove sbaglio …
puoi darmi una mano?!
Marinella, l’id non funziona per gli articoli. Per personalizzare gli articoli devi utilizzare i post-type.
Ciao innanzi tutto volevo farti i complimenti per la guida che tra tutte quelle che ho visto è la migliore e la più aggiornata.
Volevo solo chiederti se potevi risolvere un piccolo problema: seguendo passo passo la tua guida il risultato in locale usando xamp è perfetto e identico ai tuoi screen mentre invece se faccio l’upload del tema su un dominio aruba che uso per fare test mi si scombussola tutto, la sidebar finisce sotto invece che a fianco ed il menù sopra si decentra rispetto ai post. Che succede???
Grazie in anticipo.
Ciao Daniele, non ho idea… mi sembra piuttosto strano che i file caricati online su un hosting di terze parti si comportano in modo completamente diverso. Forse viene mostrato qualche errore in alto (dovuto alla diversa configurazione del server) che contribuisce a scombussolare il layout del tuo tema?
Con le tue guide su wordpress mi stai salvando la vita, sono chiare e semplici anche se parlano di argomenti complessi. Mi hai salvato da un sacco di ansia e stress, grazie davvero!
grazie per le belle parole, Louis!
Ciao!! Sono un grafico appassionato di WP
mi sono imbattuto per caso su questo blog e non resisto..DEVO assolutamente complimentarti con te la questa meravigliosa e preziosa guida!!!!
Complimenti davvero per il lavoro svolto