Creare un tema per WordPress da 0

Premessa

Per seguire questo tutorial darò per scontato che conosciate un pò di html e di css.

Senza queste conoscenze di base infatti, vi conviene provare a modificare un tema già fatto oppure usare l’ottimo theme-generator che trovate a quest’indirizzo.

Non scoraggiatevi cmq, se siete qui è perchè volete imparare ed io cercherò di essere il più chiaro ed esaustivo possibile; in più, alla fine del tutorial, potrete scaricare il tema che costruirò qui con voi. Bene cominciamo!

Files che compongono un tema WordPress

Iniziamo con il dire che un tema WordPress è composto da diversi files ed una directory per le immagini; I files di base per un tema funzionante sono:

1. header.php
2. footer.php
3. index.php
4. page.php
5. comments.php
6. sidebar.php
7. single.php
8. search.php
9. style.css
10. functions.php

Tengo a precisare che questa è una linea guida a cui più o meno si attengono tutti i temi per WordPress, ma potrete trovarne molti in rete con files nominati diversamente, o con più files (ad esempio quei temi a più sidebar).

Cosa serve spezzettare il codice

Ma perchè questa divisione? Perchè rendere un template “modulare” è un grande vantaggio sia per la progettazione che per la manutenzione; infatti le pagine vere e proprie in WordPress sono 4 (index.php, page.php, single.php e search.php), gli altri files sono “inclusioni” di codice che servono a completare la pagina di volta in volta.

Header ad esempio serve a contenere la parte superiore del vostro blog; allo stesso modo footer è solo la parte finale.

Prima ho detto che questa divisione, seppur un pò “ostica” per i non avvezzi, è un grande vantaggio poi per progettare e manutenere il vostro blog: vediamo cosa intendevo.

Immaginate di voler cambiare l’header del vostro sito, aggiungendo un immagine o una scritta, o cambiare la disposizione del vostro menu; bene in questo modo dovrete farlo solo su un file e non N volte su tutte le pagine che compongono il vostro blog; allo stesso modo potete inserire lo script per le statistiche sul vostro footer, oppure un immagine sulla sidebar solamente una volta.

Ci penserà poi il php a includere dove serve il vostro file, e la vostra modifica si ripercuoterà su tutto il vostro blog senza dover fare nient’altro e con un margine d’errore molto più basso.

Funzioni dei files in dettaglio

Vediamo ora cosa servono i nostri moduli e che parte del nostro layout va messo in ciascun blocco.

1. header.php -> contiene la parte superiore del sito (di solito il banner ed il menù) ma più in generale tutto ciò che si deve ripetere su tutto il sito nella parte superiore.
2. footer.php -> è lo speculare di header e contiene la parte finale del blog (in genere i tag di chiusura html o la grafica di chiusura del vostro layout).
3. index.php -> è la vostra homepage, ossia la pagina che si presenta quando si accede al blog.
4. page.php -> è il template delle pagine interne del blog (nel mio caso ad esempio about o contacts).
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 -> qui abbiamo tutti gli strumenti di navigazione del sito (a volte vi si inserisce anche il menu) come le categorie, gli archivi dei post o in generale, i widgets per WP.
7. single.php -> è la pagina che contiene un singolo post, quella che si apre quando cliccate su un post dalla homepage per intenderci.
8. search.php -> è la pagina che si apre quando si effettua una ricerca tramite l’apposito widget search
9. style.css -> è il file di stile che serve a dare tutti gli attributi grafici del nostro template
10. functions.php -> serve a dichiarare le funzioni che vogliamo scrivere a mano per il nostro blog; se non vogliamo aggiungere niente di particolare basterà solo il codice di default che rende la nostra sidebar “widget ready”, ossia pronta a ricevere nuovi widgets dal pannello admin del blog; a riguardo vedere l’ultima parte di questo tutorial.

Iniziare a progettare un layout

A questo punto, con il know-how necessario, ci apprestiamo ad iniziare sul serio

La cosa migliore da fare è aprire il vostro bel programma di progettazione per pagine web (vi consiglio Adobe Dreamweaver a pagamento se non siete pratici, in caso contrario anche editor come PsPad vanno benissimo) ed iniziare a disegnare il vostro layout, tenendo presente che avrete bisogno di almeno un div dove inserire un bannerino, un div per il menù (a menochè non vogliate inserirlo nella sidebar), e di altri due div (uno largo e uno più stretto) dove inserire i post e la sidebar.

Questo potrebbe essere un esempio di codice

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!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>
        <div id="body">
            <div id="mainBar"></div>
            <div id="sidebar"></div>
        </div>
        <div id="footer"></div>
	</div>
</body>
</html>

Come vedete ho già attribuito gli “id” del css, in modo da riuscire a capire ogni contenitore che ruolo ha all’interno del sito.

sul file css ora scriveremo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

/*
Theme Name: Claudio Corti
Theme URI: http://www.claudio-corti.com
Description: un tema di prova
Version: 1.0
Author: Claduio Corti
Author URI: http://www.claudio-corti.com/
Tags: fixed width, one column
 
 
*/
 
@charset "utf-8";
/* CSS Document */
 
body {
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color:#CCCCCC;
}
div {
	width:100%;
	float:left;
}
a:link {
	color:#33CC00;
}
a:hover {
	color:#6666FF;
}
#box {
	width:880px;
	margin:0 auto;
	float:none;
	min-height:100%;
	height:100%;
}
	#banner {
		width:860px;
		font-size:18px;
		font-weight:bold;
		background:#ececec;
		padding:10px;
	}
	#menu {
		margin-top:5px;
		background:#fcf5c7;
	}
	#body {
		margin-top:5px;
	}
		#mainBar {
			width:670px;
			background:#ffd2d3;
			padding:10px;
		}
		#sidebar {
			width:170px;
			padding:10px 0 10px 10px;
			margin-left:10px;
			background:#ffd1b3;
		}
	#footer {
		margin-top:5px;
		padding:5px 0;
		background:#cefdd9;
		text-align:center;
	}

Notate nella parte alta del file css ci sono delle informazioni commentate. Queste sono le infos del vostro tema, e si vedranno quando andrete sul pannello di controllo del vostro blog e avrete la lista dei temi disponibili.

Ripartire il codice sui files

Vi sembrerà strano che con queste 4 righe di html abbiate già costruito un tema per wordpress, eppure la struttura classica è proprio questa il risultato di questo codice lo potete vedere facendo la preview sul vostro browser (ovviamente la personalizzazione grafica ve la lascio a voi…vi ho solo dato i blocchi da riempire).

Bene ora entriamo nel vivo di tutta la faccenda e vediamo come ripartire il codice appena creato sui files che compongono il nostro tema, e soprattutto come e dove inserire i tag di WordPress.

Come abbiamo detto prima su header.php dobbiamo inserire la parte alta che si ripete su ogni pagina del nostro sito; semplicemente copiamo ed incolliamo questo codice su header.php, salviamo e chiudiamo

1
2
3
4
5
6
7
8
9
10
11
12

<!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, page, single e search invece incolliamo quest’altro codice, che corrisponde alla parte centrale del blog

13
14

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

Queste tre pagine hanno la struttura uguale, ma solo per il momento sono uguali; Andranno poi personalizzate in base alle funzioni del blog.

Su sidebar inseriremo il codice relativo

15

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

Infine al file footer.php, affidiamo il codice di chiusura

17
18
19
20

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

La funzione”blogInfo” e gli elementi dinamici

Molto bene, ora viene la parte un pò meno artistica ed un pò più noiosa, ma direi essenziale per fare in modo che il nostro tema funzioni.

Infatti fino ad ora abbiamo solo “disegnato” la struttura, ma, non essendo l’html un linguaggio dinamico, non abbiamo dato modo al tema di comunicare con la piattaforma di WordPress che gestisce i contenuti…Abbastanza inutile fermarsi a questo punto insomma

WordPress ci mette a disposizione numerose funzioni per estrapolare i dati che inseriamo nel pannello admin. La più importante tra queste è sicuramente la funzione blogInfo la quale ci fornisce molti dati in base a che valore diamo alla sua variabile; vediamole nel dettaglio

• name -> restituisce il titolo del blog
• description -> è il motto del blog
• 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’url del feed RSS 2.0
• atom_url -> l’url del feed Atom
• pinback_url -> l’url di pingback
• admin_email -> l’indirizzo email dell’amministratore del blog
• charset -> il tipo di Encode utilizzato
• version -> la versione di WordPress installata
• wpurl -> l’url dell’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 vostro tema

Quindi se noi scriviamo <?php blogInfo(‘name’); ?> il browser ci restituirà il nome del nostro blog.

Oltre a blogInfo, WordPress si serve di molte altre funzioni per estrapolare dati; non sto qui a spiegarli tutti, la lista completa dei tags per i templates di WP la trovate a quest’indirizzo http://codex.wordpress.org/Template_Tags

Attenzione! inutile fare una preview adesso per vedere cosa ritorna <?php blogInfo(‘name’); ?> perchè blogInfo è una funzione di WordPress e ritorna un valore solo quando il template è installato. Comunque non vi preoccupate, per ora preoccupiamoci di sostituire questi nuovi tag al codice html che abbiamo visto prima.

Partiamo con header.php e sostituiramo il title, i link al css e aggiungiamo quello per i feed e per il menù.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!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="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/reset-fonts-grids-tabs.css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
 
<body>
	<div id="box">
        <div id="banner"><h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1> <h5><?php bloginfo('description'); ?></h5></div>
        <div id="menu">
        <ul>
        	<li><a href="<?php bloginfo('url'); ?>">Home</a></li>
          		<?php wp_list_pages('depth=1&title_li='); // elenca le voci delle pagine presenti sul nostro sito ?>
        </ul>
        </div>

Nello stesso modo aggiungiamo i template tags sulle altre pagine ed il codice php; In fondo al tutorial potete scaricare il tema finito completo di queste sostituzioni; ho aggiunto i commenti al lato del codice per renderlo più chiaro.

Il file functions.php

Abbiamo detto prima che il file functions.php è un file particolare, infatti questo non contiene generalmente codice html da includere, ma le funzioni php che ci servono all’interno del nostro blog; di default l’unica funzione necessaria che dobbiamo inserire è la registrazione della sidebar in modo che da pannello di controllo possiamo aggiungere i nostri widgets dinamicamente, senza quindi dover toccare una linea di codice sul template.

Questa “registrazione” viene fatta come scritto qua sotto.

1
2
3
4
5
6
7
8
9
10
11

<?php
if ( function_exists('register_sidebar') ){
    register_sidebar(array(
        'name' => 'mainsidebar',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h4>',
        'after_title' => '</h4>',
    ));
}
?>

E’ importante che il name ‘name’ => ‘mainsidebar’, sia uguale a quello che dichiariamo su sidebar.php
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘mainsidebar’) )

Conclusione

Bene ora potete fare uno screenshot al vostro layout salvandolo come screenshot.png, per dargli un anteprima sul pannello di controllo al momento della selezione del tema, e siete pronti a provare il vostro tema su WP! Era ora no?

Copiate la cartella che contiene tutti i vostri files su /wp-content/themes/, andate sul pannello di controllo del blog e selezionate Design->Themes, se avete fatto tutto correttamente dovreste vedere il vostro tema con tanto di screenshot.

Di seguito potete scaricare lo zip con tutti i files di cui abbiamo parlato su questo tutorial; ovviamente questa è una base da cui partire e che potete modificare per adattarla alla grafica che avete creato.

Technorati Tags: temi, tutorials, wordpress