Redazione
a- a+

Creare template personalizzati

In questa lezione: come si crea un template, caricamento ed installazione di template personalizzati, software per creare template.

Come si crea un template per Wordpress

Un  tema grafico (o template) WordPress è composto da più file e una directory per le immagini; i file che devono sempre esserci per un tema funzionante sono:

  • header.php
  • footer.php
  • index.php
  • page.php
  • comments.php
  • sidebar.php
  • single.php
  • search.php
  • style.css
  • functions.php

Va precisato che in rete si trovano vari template gratuiti e a pagamento, con file nominati diversamente, o con più file. I vari file possiamo considerarli come dei moduli in cui parte del nostro layout va messo in ciascun blocco.

1.     header.php -> contiene la parte superiore del sito

2.     footer.php -> lo speculare di header e contiene la parte finale del blog, il piè di pagina

3.     index.php -> l’ homepage, ossia la pagina che si presenta quando si accede al CMS

4.     page.php -> il template delle pagine interne del CMS

5.     comments.php -> la porzione di codice relativa ai commenti che viene inclusa all’interno dei post; qui vengono inseriti i commenti e il form per inviarli

6.     sidebar.php -> contiene tutti gli strumenti di navigazione del sito come le categorie, gli archivi dei post o in generale, i widget per WordPress

7.     single.php -> la pagina che contiene un singolo post, quella che si apre quando si clicca su un post dalla homepage per intenderci

8.     search.php -> la pagina che si apre quando si effettua una ricerca

9.     style.css -> il foglio di stile per la definizione e la formattazione del CMS

10.   functions.php -> serve a dichiarare le funzioni che vogliamo scrivere manualmente; ovvero le funzioni definite dall’utente.

Data la definizione dei vari file (moduli) vediamo come iniziare a implementare il codice del template. Utilizzate un editor HTML per la realizzazione di pagine web e impostate il codice in modo che dividiate le varie zone con i tag. <DIV> come nel seguente esempio:

<body><div id="box">  <div id="banner"></div>  <div id="menu"></div>  <div id="body"><div id="mainBar"></div><div id="sidebar"></div>  </div>  <div id="footer"></div></div></body>

Nel foglio di stile “style.css” scriviamo il codice per la formattazione delle varie “zone”:

#box {width:880px;margin:0 auto;float:none;min-height:100%;height:100%;}#banner {width:860px;font-size:14px;font-family:Arial;font-weight:bold;background:#dedede;padding:15px;}#menu {margin-top:5px;background:#fcf5c7;}#body {margin-top:5px;font-family:Arial;}#mainBar {width:670px;background:#ffd2d3;padding:10px;}#sidebar {width:170px;padding:10px 0 10px 10px;margin-left:10px;background:#dddddd;}#footer {margin-top:5px;padding:5px 0;background:#eeeeee;text-align:center;font-family:Verdana;font-size:10px;}

Il codice html che abbiamo appena scritto, contiene in forma completa tutti i file prima descritti dall’header al footer. Quello che dobbiamo fare è spezzettare il codice e distribuirlo nei vari file. Iniziamo dall’“intestazione” header: copiamo e incolliamo questo codice su header.php, salviamo e chiudiamo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="style.css" type="text/css" /><title>Untitled Document</title></head> <body><div id="box">  <div id="banner"></div>  <div id="menu"></div>

Su index.php, page.php, single.php e search.php invece incolliamo le successive righe di codice, che corrisponde alla parte centrale del CMS:

<div id="body"><div id="mainBar"></div>

Queste tre pagine hanno la struttura uguale, ma solo per il momento sono uguali; andranno poi personalizzate ciascuna in base alle funzionalità che vorremo dare al nostro CMS. Nel file sidebar.php inseriremo il codice relativo:

<div id="sidebar"></div>

Infine al file footer.php, affidiamo il codice di piè di pagina e i tag di chiusura.

<div id="footer"></div></div></body></html>

A questo punto la parte grafica è stata definita. Ora va realizzata la parte dinamica. WordPress mette a disposizione una serie di funzioni di base che andiamo a elencare:

name -> restituisce il titolo del CMS

description -> il motto del CMS

url -> l’indirizzo URL

rdf_url -> l’URL del feed RDF/RSS 1.0

rss_url -> l’URL del feed RSS 0.92

rss2_url -> l’URLdel feed RSS 2.0

atom_url -> l’URLdel feed Atom

pinback_url -> l’URLdi pingback

admin_email -> l’indirizzo email dell’amministratore del CMS

charset -> il tipo di Encode utilizzato

version -> la versione di WordPress installata

wpurl -> l’URLdell’installazione di WordPress

template_directory -> l’URL della directory del template in uso

stylesheet_url -> l’URL del foglio di stile style.css

stylesheet_directory -> l’URL della directory contenente il foglio di stile, e più in generale la root del template

Quindi se noi scriviamo:

<?php blogInfo(‘name’); ?>

 il browser ci restituirà il nome del nostro CMS che abbiamo impostato e che si può modificare dal pannello di amministrazione.

Altre funzioni e tag WordPress con la relativa spiegazione e uso si possono trovare al seguente URL del sito ufficiale: http://codex.wordpress.org/Template_Tags. Per completare il tutto manca la piccola anteprima che compare come abbiamo visto nel capitolo 2 nella sezione aspetto, ovvero lo screenshot del nostro layout. Lo screenshot va salvato nominandolo come screenshot.png.

Caricamento ed installazione di template personalizzati

Creato il template, si raccolgano tutti i file creati in una directory, mentre, come detto precedentemente, tutte le immagini devono essere contenute in una sottodirectory denominata images. Fatto ciò, utilizzando un client-ftp si carica la directory principale del tema grafico su /wp-content/themes/. Andando sul pannello di controllo del CMS Sezione Aspetto e poi Temi (figura 1), se avete fatto tutto correttamente dovreste vedere lo screenshot del tema grafico che avete creato. Come si nota, la procedura di caricamento del template personalizzato è identica a quello dei template già “tutti pronti” scaricati da Internet vista nel capitolo 2 di questa guida.

Figura 1

Software per creare template WordPress

Esistono diverse soluzioni per creare i temi grafici in WordPress. Come detto prima, per scrivere il codice HTML possiamo utilizzare un editor web come Adobe Dreamweaver CS5 e per la parte grafica Adobe Photoshop CS5. Ma esistono anche altri software freeware e open source che ci permettono sia di creare la parte grafica che la parte di codice per le varie sezioni del template. Uno di questi è Artisteer (figura 2)

Figura 2

un’applicazione che gira sotto Windows. In Artisteer è presente il comando Suggest Design che ci permette di vedere vari tipi di template. Trovato quello che più si addice, lo possiamo modificare a nostro piacere nei più piccoli dettagli per crearne uno del tutto nuovo e personalizzato. L’interfaccia del software è molto semplice e intuitiva, è possibile scegliere i colori, il testo, il layout, il background (sfondo), il titolo, l’header, il menu di navigazione, i tasti, vari blocchi, la sidebar e ogni altro elemento. Un’altra soluzione, meno potente di Artisteer, e a nostro parere utile solo se il template che vogliamo realizzare deve essere semplice e meno ricco di spunti grafici è:  Wordpress Theme Generator  (http://wordpressthemegen.com/) (figura 3). Si tratta di un servizio online, quindi non un software da installare, che permette di creare facilmente il template di WordPress potendo configurare molti dettagli. È possibile scegliere la grandezza del blocco, dove posizionare la sidebar, il menu, selezionare lo sfondo e varie altre opzioni. Le parti deboli del servizio sono che a differenza di Artisteer questo tool risulta molto più elementare nelle elaborazioni grafiche e che, essendo un servizio online, ha un ventaglio di scelte e opzioni molto ristretto.

Figura 3