Come Creare Template Personalizzati per le Pagine di WordPress?
Nella lezione precedente abbiamo visto un po’ più nel dettaglio come funziona la gerarchia dei template e come realizzare un template personalizzato da utilizzare per mostrare il contenuto degli articoli.
Oggi invece vedremo come realizzare un template da assegnare alle diverse pagine che abbiamo creato sul nostro blog/sito.
1. Qual è il nome del template da destinare alle pagine di WordPress?
Secondo le indicazioni forniteci dalla gerarchia dei template vista nella precedente lezione, il file da destinare al template delle pagine di WordPress deve chiamarsi page.php; se questo non è presente nella cartella del tema, il contenuto delle pagine sarà visualizzato mediante il template generale: index.php.
Andiamo a fare subito una prova pratica?
2. Creare il template da destinare alle pagine di WordPress
Copiamo l’intero contenuto del nostro file index.php e incolliamolo all’interno di un nuovo file. Salviamo questo file assegnandogli il nome page.php.
In questo modo abbiamo creato una copia del nostro template generale – in un file che abbiamo chiamato page.php – da utilizzare per la visualizzazione delle pagine. Prima di apportare qualsiasi tipo di modifica andiamo a vedere com’è visualizzato il contenuto della pagina About con l’utilizzo dell’attuale template (Figura 1).
Figura 1 - Pagina About visualizzata con l'utilizzo del template generico.
3. Modificare il file page.php
Al file page.php possiamo adesso apportare tutte le modifiche che desideriamo per adattare il layout delle pagine del blog/sito a quelle che sono le nostre esigenze.
Innanzitutto desideriamo togliere dalle pagine la data e l’autore che sono visualizzati subito sotto il titolo, e in seguito la categoria mostrata alla fine del contenuto della pagina; solitamente queste non sono informazioni utili all’interno di una pagina.
Cancelliamo quindi le righe interessate dal markup del template:
<!-- START DATE -->
<p class="data">
<?php the_time('j F Y') ?> di <?php the_author() ?>
</p>
<!-- END DATE -->
E successivamente:
<!-- START CATEGORY POST -->
<p class="postmetadata">
Pubblicato in <?php the_category(', ') ?>
</p>
<!-- END CATEGORY POST -->
Adesso cos’altro possiamo personalizzare?
Possiamo personalizzare tutto ciò che desideriamo: potremmo caricare un header diverso da quello standard, oppure eliminare la sidebar adattando il template a un’unica colonna o ancora mostrare una sidebar differente da quella visualizzata nel template generico. Tutto è ovviamente in funzione di ciò che vogliamo effettivamente realizzare.
Nella Figura 2 puoi vedere uno screenshot con le modifiche apportate al template delle pagine del tema che stiamo sviluppando.
Figura 2 - Pagina About visualizzata con l'utilizzo del template page.php modificato.
4. Come creare un template personalizzato da assegnare a una specifica pagina?
WordPress non si limita a fornire la possibilità di realizzare un template da utilizzare all’occorrenza per visualizzare il contenuto delle varie pagine, ma offre anche l’opportunità di creare template da assegnare a una singola pagina: in questo modo è possibile creare un modello personalizzato di pagina sulla base delle nostre esigenze.
Esempio pratico? Realizziamo un template da assegnare solo alla pagina Contact che dovrà contenere, oltre ad un breve testo, anche un modulo contatti che permetta agli utenti di inviarci una mail.
Partiamo dal template che abbiamo realizzato per la visualizzazione delle pagine (page.php), copiamone l’intero contenuto e incolliamolo all’interno di un nuovo file che chiameremo contatti.php (qui il nome può essere uno qualsiasi poiché non ha nulla a che vedere con la gerarchia dei template).
Personalizziamo questo template sulla base delle nostre esigenze, aggiungiendo un modulo che permetta agli utenti di mettersi in contatto con noi.
Come primo step, dobbiamo indicare a WordPress il nome con cui vogliamo identificare il template; prima di ogni altra cosa aggiungiamo, subito all’inizio del file, le seguenti righe di codice:
<?php /* Template Name: Contatti */ ?>
In questo modo stiamo comunicando a WordPress che il nome di questo template è: “Contatti”.
Adesso possiamo procedere con le modifiche vere e proprie; subito dopo la fine del loop aggiungiamo il markup necessario per la creazione del nostro modulo contatti:
<!-- START MODULO CONTATTI --> <form id="contacts" method="post" action=""> <fieldset> <legend>Modulo contatti</legend> <label for="visitor">Nome:</label> <input tabindex="1" type="text" id="visitor" name="visitor" value="" /><br/> <label for="visitortel">Tel:</label> <input tabindex="2" type="text" id="visitortel" name="visitortel" value="" /><br/> <label for="visitormail">E-mail:</label> <input tabindex="3" type="text" id="visitormail" name="visitormail" value="" /><br/> <label for="notes">Messaggio:</label> <textarea tabindex="4" id="notes" name="notes" cols="30" rows="3"></textarea><br/> <input tabindex="5" type="submit" id="invia" name="invia" value="invia" /> </fieldset> </form> <!-- END MODULO CONTATTI -->
Come puoi vedere mi sono limitato ad aggiungere semplicemente i vari campi del modulo senza preoccuparmi dell’effettivo funzionamento del modulo contatti in quanto questo argomento esula dalla nostra lezione odierna.
Diamo una sistemata anche al modo in cui sarà presentato il modulo aggiungendo queste regole nel nostro foglio di stile:
/*form*/
legend {font-weight:bold;font-size:1.2em;}
input,textarea {margin:10px 0;width:250px;padding:5px;}
label {width:6em;float:left;display:block;padding:10px 0;clear:left;}
input[type="submit"] {width:100px;}
Il passo successivo è far capire a WordPress che questo template deve essere utilizzato dalla pagina Contact creata in una delle precedenti lezioni.
Per ottenere ciò, andiamo a modificare la pagina interessata dal Pannello di Amministrazione. Sul lato destro, tra gli attributi della pagina, è possibile scegliere uno tra i template disponibili da applicare (Figura 3). Selezioniamo il template Contatti e clicchiamo sul pulsante Aggiorna per rendere effettiva la modifica appena apportata.
Figura 3 - Assegnazione di un Template ad una pagina di WordPress.
Adesso se andiamo a visualizzare il contenuto della nostra pagina Contact – cliccando sul collegamento posto in alto nella barra di navigazione – dovremmo visualizzare, oltre al contenuto, il modulo che abbiamo aggiunto alla fine della stessa (Figura 4).
Figura 4 - Il contenuto della Pagina Contact così come si presenta dopo l'assegnazione del Template Contatti.
Dalla versione 2.9 di WordPress è stata introdotta la possibilità di realizzare template personalizzati per le singole pagine utilizzando l’id o l’abbreviazione (slug) della pagina, esempio:
- page-ID.php (page-24.php)
- Page-slug.php (page-contact.php)
In questo modo non sarà necessario assegnare manualmente il template alla relativa pagina,dato che se ne occuperà direttamente la piattaforma dell’associazione necessaria, utilizzando la gerarchia dei template.
5. Conclusione
Anche questa lezione è giunta al termine. Restano ormai solo due lezioni alla fine, a questo punto del corso WordPress dovrebbe avere pochissimi segreti per te e dovresti già essere in grado di sviluppare un tema grafico personalizzando all’occorrenza tutti i template di cui necessiti.
Lezione dopo lezione abbiamo visto come andare a personalizzare ogni minimo dettaglio che compone il sito/blog gestito da WordPress. Adesso che sei entrato a stretto contatto con le potenzialità offerte da questa piattaforma mi piacerebbe conoscere qual è il tuo parere in merito alle sue possibilità di utilizzo.
6. 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:
55 commenti
Trackback e pingback
-
Tweets that mention Come Creare Template Personalizzati per le Pagine di WordPress? | Your Inspiration Web -- Topsy.com
[...] This post was mentioned on Twitter by Giustino Borzacchiel. Giustino Borzacchiel said: RT @YIW Come Creare Template Personalizzati per… -
Aggiungiamo la Sidebar al nostro tema | Your Inspiration Web
[...] Come Creare Template Personalizzati per le Pagine di WordPress? [...] -
wp-popular.com » Blog Archive » Come Creare Template Personalizzati per le Pagine di WordPress? | Your …
[...] post: Come Creare Template Personalizzati per le Pagine di WordPress? | Your … Tags: template, [...] -
Custom Post Type: come migliorare l'esperienza utente? | Your Inspiration Web
[...] utilizziamo la funzionalità Page Template che WordPress ci mette a disposizione. Come spiegato nella guida di Nando basta inserire…
O cavolo ancora nessun commento :)…………una domanda che può sembrere stupida a questo punto…..io per il modulo contatti ho sempre usato un plug-in che mi pare si chiami CONTACT FORM se non sbaglio, più che altro per comodità, ma in questo caso non sembra tu abbia utilizzato qualche cosa di simile……..ma è meglio creare il form così o utilizzare il plug-in bello che pronto……….(ne utilizzo già parecchi, uno in meno sarebbe anche una bella cosa :) ) a sto punto potrei anche modificare qualche lavoretto………..
Credo si tratti solo di una questione grafica al momento.
Personalmente non conosco alternative ai plug-in per creare un form contatti con WordPress.
Quindi sarà successivamente possibile prendere la porzione di html che riguarda il form è darla in pasto a CONTACT FORM 7 (questo è il plug-in che utilizzo io e reputo uno dei migliori) per ottenere lo stesso risultato funzionante.
Ciao Cristiano, se non vuoi sbatterti a creare un modulo contatto funzionante (con controllo errori, codice captcha e tutto ciò che serve per il suo corretto funzionamento) puoi tranquillamente utilizzare uno dei plugin messi a disposizione dalla comunità.
Se invece hai già creato un tuo modello di modulo contatti che abitualmente integri sui siti che realizzi, puoi fare a meno del plugin (come giustamente dici, un plugin in meno fa “respirare” meglio WordPress =) e utilizzare questo, un po’ come ho fatto io nell’esempio, ovviamente includendo anche tutta la parte di controllo errori e invio mail che io invece ho tralasciato.
In fondo il plugin non fa altro che fare questo lavoro al posto nostro.
Ciao Vito, in realtà non si tratta di una questione grafica.
Aggiungendo un controllo errori, un eventuale codice captcha e l’invio della mail (quello che normalmente serve per farlo funzionare), il modulo contatti sarebbe perfettamente funzionante senza l’utilizzo di nessun plugin, così come funzionerebbe su qualsiasi sito web.
Orrimo lezione anche oggi e siamo a -2 dalla vetta e poi metto sotto il mio amico grafico per farmi fare delle pagine per il mio blog e per provare.
Bell’avatar Nando :)
Ciao Luca, siamo a meno due dalla fine di questo corso, nel frattempo sto continuando a scrivere per l’ebook =)
p.s. Devo però darti anche una “cattiva” notizia: dalla prossima settimana sospenderemo le pubblicazioni su YIW per riprenderle ad inizio settembre. Contavo di finire il corso in tempo prima delle vacanze ma avendo aggiunto due lezioni in corso d’opera si sono di conseguenza allungati i tempi.
Peccato mi servivano proprio adesso le ultime due lezioni o almeno la penultuima ma pazienza cercherò di fare io, poi dopo tutto dovrei capirle queste cose visto che sono un programamtore :D
ciao
…ma siete già andati in vacanza? :D
vedete cosa succede ad abituarci a leggervi quotidianamente?!?
ciao Igor, andremo in vacanza dalla prossima settimana ma non abbiamo comunque intenzione di lasciarvi a mani vuote, ci sarà un bel regalo per tutti voi =)
Ottima guida, la seguo da un bel pò! Aspetto k sia finita per cominciare a creare il template! ;)
@Nando: ottima guida complimenti!
Ciao Sebastiano, grazie per i complimenti.
Adesso facciamo una piccola pausa per le vacanze estive. A settembre riprendiamo con le ultime due lezioni e la pubblicazione dell’eBook. Non mancare.
Mi scuso con tutti per il ritardo di queste risposte, purtroppo questa settimana motivi personali mi hanno tenuto lontano dal lavoro.
Abbiate pazienza, cerco di rimediare rispondendo a tutti i commenti anche se non immenso ritardo. Buon fine settimana =)
Fantastica guida, molto pratica e chiara, proprio quello che mi serviva, anche se mancano 2 lezioni già posso provare a realizzare il mio prossimo sito con wordpress, complimenti nando! :D
Grazie, luca. Buon lavoro e per qualsiasi problema noi siamo qui ;)
Sempre più meraviglioso questo tutorial. Grazie. Di cuore. Nell’ultima lezione spero sarà spiegato anche come mettere un avatar personalizzato (come usate voi) per gli utenti che non hanno un gravatar. Mi sono stufata di quella brutta G che oltretutto stona col mio template!
Ciao Gloria, grazie per i complimenti, davvero lusingato =)
Impostare un avatar di default è un’operazione molto semplice, lo affronteremo nella lezione in cui parleremo del template dei commenti.
Ed io che contavo di leggere la guida completa mentre ero in ferie XD
Le tue guide sono troppo “docili”, mi sto impigrendo :p
Purtroppo aver aggiunto due lezioni in più in corso d’opera ha un po’ scombussolato i piani. Pazientate, a settembre per farci perdonare pubblicheremo anche l’eBook =)
Ciao Nando,
seguendo la guida sono arrivato a in mezzora un blog :) percò quando sono arrivato ad una pagina dove siamo volevo inserire una mappa di google con le api vesione 3 come ho descritto qui ma non mi faceva più visualizzare niente della pagina dopo che ho inserito nell’header personalizzato della pagina dove siamo il richiamo alle api di goggle con il tag script e il richiamo ad un mio js che mi inizializza la mappa e mi inserisce un marcatore (avevo anche provato a meterlo inline ma con scarsi risultati.
Googlando un po ho trovato il plug ins inline javascript versione 0.5 ma non ho cavato un ragno dal buco…
Dove sbaglio e dove posso migliorare? Io non vorrei utilizzare il plugins google maps perché vuole ancora le chiavi ed utlizza ancora le api v.2.
Grazie della risposta.
Ciao Luca, intanto scusa il ritardo con cui ti rispondo ma sono stato immerso nel tour de force finale prima delle ferie =)
Ti faccio i complimenti per la velocità con cui sei riuscito a mettere su il tuo tema, sono felice di vedere che la guida sta dando i suoi primi frutti =)
Non ho ben capito qual è il tuo problema, ti chiedo – se puoi – di creare un post sul nostro forum nell’apposita sezione e postare il codice che hai utilizzato per la personalizzazione dell’header.
Purtroppo fornire supporto mediante i commenti, soprattutto quando si deve utilizzare codice, diventa un po’ problematico.
A presto e buon lavoro
Ho risolto mi è bastatoandare a leggere con calma la guida sul wiki di WP, in ongi caso adesso appena ho 5 minuti apro un po sul forum per far vedere al mia personalizzazione dell’header e caso mai se ci sono delle cose da migliorare mi direte direttamente nel forum :)
grazie grazie!
Bellissimi questi tutorial su wordpress e pieno di risorse anche questo sito…tutto da scoprire!!! :-)))
Una guida stupenda, aspetto le ultime due guide. Farai anche una guida per capire come si preparano i file grafici e come si inseriscono? Magari anche per avere un footer grafico bello come quello che avete qui nel template? Una cosa che mi piacerebbe realizzare è un menù orizzontale con apertura delle sottocartelle sempre in orizzontale al passaggio del puntatore del mouse, spero dedicherai una guida. Molto bello anche questo vostro modulo dedicato ai commenti, insomma dai… avete fatto una bella guida perchè non completarla con questi aspetti??? Grazie, grazie, grazie.
ciao nando!
A quando le prossime puntate? grazie!!
Ciao Veronica, scusatemi per l’assenza ma purtroppo ultimamente gravi problemi familiari mi stanno impedendo di dedicarmi alla scrittura degli articoli.
Spero di riuscire a preparare qualcosa per martedì prossimo.
ci mancherebbe nando… noi ti aspettiamo comunque :)
ciao come va? sempre io…
mi chiedevo, esiste la possibilità di creare diversi template per i post?
Ovvero clonando e modificando single.php
grazie, ciao!
ciao veronica, scusa il ritardo di questa risposta.
è possibile creare dei template personalizzati anche per i singoli post. nell’ultima versione di wp (la 3.0.1) è stata introdotta una nuova funzionalità che permette di definire anche delle tassanomie da assegnare ad alcune tipologie di post che si desidera personalizzare.
Ciao Nando,
avevo gia fatto la guida da capo ma per dei problemi ho dovuto cancellare e re-installare WP.
Ho riscaricato direttamente il file.zip per non rifare tutto ma ho un problema.
Non riesco a visualizzare il modulo dei contatti ed andando nelle pagine dalla dashboard non appare la finestra che mi permette di scegliere il template, in questo caso : Contatti.
Mi puoi dare un aiuto?
ciao luca, controlla se all’interno dell’archivio che hai scaricato è presente anche il file contatti.php e fammi sapere.
grazie mille, sei gentilissimo :)
ti rispondo con quasi due anni di ritardo: you’re welcome! :)
A me non funziona? Mi spiego meglio nel menu “Attributi Pagina” non compare la voce “Template” pur avendo eseguito con attenzione questa guida… Ho sbagliato qualcosa?
ps: anche se in aspetto>tema …la pagina mi compare per quale motivo… posso intervenire da qualche parte…
Ciao Nando,
ottima guida. Ho un problema come quello di giulius, nel menu Attributi pagina non c’è la parte dei Template….
E’ un bug di WP?
giulius, betta… provate per un attimo a disattivare il tema attivando twenty (il tema predefinito di wp), poi riattivate nuovamente il vostro tema e verificate se il problema continua a ripresentarsi.
ciao nando, mi complimento ancora una volta per la tua guida… ottima ottima ottima….
a quando nuovi tutorial magari per incrementare jquery in wp???
in ogni caso grazie di tutto
grazie a te paolo!
Grande Nando.
Ottima guida! Quelle passo-passo sono sempre quelle più apprezzate e più chiare.
Prima di questa guida il mondo wordpress mi faceva un po’ paura…. ora mi sembra quasi banale.
Grazie Leo, mi fa piacere sapere che questa guida ti è stata utile!
Ciao e complimenti per il sito, strautile…. Volevo creare una home diversa dalle altre pagine, senza sidebar nè footer. In un sito in locale, ho copiato l’index.php, ho tolto le ultime due righe e , ho salvato il template come mionome.php ma non lo vedo nell’elenco a tendina nell’editor delle pagine. Lavoro con WP 3.3 su un tema child di TwentyTen e, per non sapere nè leggere nè scrivere, ho salvato il nuovo template in tutt’è due le cartelle dei temi. Any ideas?
Grazie.
devi cambiare anche il nome del template oltre al nome del file .php
il nome del template come descritto nell’articolo lo si definisce ad inizio pagina:
< ?php /* Template Name: Contatti */ ?>
ciao nando
grazie per il tut, è da poco che mi sono immersa in wp quindi non sono esperta, mi potresti gentilmente correggere i passaggi che dovrei fare?
prendo il contenuto dell’index del template e lo incollo in page sopra a tutto il codice, poi inserisco il codice template name: ?
se volessi cambiare sfondo come posso fare?
grazie ancora per la tua disponibilità:)
ciao francesca, la procedura che hai indicato è corretta.
se vuoi inserire uno sfondo basta creare un’apposita regola tramite il foglio di stile:
body {background: url(‘…………’) no-repeat top center;}
bella guida Nando – grazie
usi il codice e…funziona! con altre guide spesso ciò non accade-
complimenti per la chiarezza e semplicità-
devo trasferire tutto il sito microsol-onlus.org su wordpress e potenziarlo , con il vostro aiuto ce la farò!
bella guida Nando – grazie
usi il codice e…funziona! con altre guide spesso ciò non accade-
complimenti per la chiarezza e semplicità-
devo trasferire tutto il sito microsol-onlus.org su wordpress e potenziarlo , con il vostro aiuto ce la farò!
grazie a te Stefano!
Ciao, complimenti ottimo sito. Allora, io ho creato un template di pagina e l’ho impostato come HOME., fin qui tutto bene. Ora vorrei cambiare lo sfondo solo della pagina statica. Ho inserito nel foglio di stile css il segunte codice:
.post-4530 {
background:url(img/inascoltati.jpg);
}
Ma rimane sempre la stessa immagine come sfondo. Poi la cosa strana è che per gli articoli funziona, mentre per il template di pagina no. Ho anche controllato i permessi da filezilla e ho dato tutti i permessi al proprietario, che naturalmente sono io. Sai come aiutarmi? Grazie in anticipo. Claudio
Ciao Nando, bella guida, una delle migliori sul web.
sto creando un template di pagina nuovo per eliminare le barre side e footer,
ho modificato il page.php sono sparite le barre (evviva!) ma mi è rimasta la larghezza della pagina minore dell’ampiezza del sito! :-( praticamente è come se fosse rimasta la barra.
è possibile aumentare la larghezza?
un saluto
salve,sono illustratrice,vorrei chiederle se posso inserire dei template al mio sito,realizzati da me.La ringrazio,cordiali saluti,roberta