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



Ti potrebbe interessare anche

commenta la notizia

Ci sono 1 commenti
Anonimo
ciao volevo sapere se possibile avere qualche guida di come pubblicare dei post di una determinata categoria in un template differente diciamo in un secondo template di pagina, tranne che in home. grazie