Creare template personalizzati per le pagine di WordPress
Creare e sviluppare un sito web e/o blog con WordPress, per se stessi oppure per un cliente, richiede Template Personalizzati per le diverse Pagine.
INIZIAMO …
I temi attuali prevedono quasi sempre la presenza del file page.php; se questo non fosse presente nella cartella del tema, il contenuto delle pagine sarà visualizzato mediante il file index.php. Copiamo l’intero contenuto del file index.php e incolliamolo all’interno di un nuovo file (creato con il blocco note). Salviamo questo file assegnandogli un nome consono al suo scopo (ad esempio contatti.php)
CREAZIONE TEMPLATE
Al file contatti.php dobbiamo apportare le modifiche per adattare il layout delle pagine di WordPress, secondo le nostre esigenze. In questo articolo realizzeremo un template da assegnare alla pagina Contatti che dovrà contenere un modulo contatti che permetta agli utenti di inviarci una email.
Come primo elemento dobbiamo indicare il nome con cui vogliamo identificare il template; copiate questo codice e incollatelo all’inizio della pagina contatti.php:
<?php /* Template Name: Contatti */ ?>
Adesso possiamo procedere alla personalizziamo del template, aggiungendo il 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="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 -->
Sistemiamo il layout del modulo aggiungendo questi parametri nel nostro foglio di stile (style.css):
/*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 Contatti; modifichiamo la medesima pagina presente nel pannello di amministrazione. Sul lato destro, tra gli attributi pagina>modello è possibile scegliere il template Contatti che abbiamo creato. Clicchiamo sul pulsante Aggiorna per rendere effettiva la modifica.
Adesso se andiamo a visualizzare il contenuto della nostra pagina Contatti, visualizzeremo il modulo che abbiamo aggiunto.