In questo articolo vorrei spiegare come realizzare un tema personalizzato per WordPress. A chi non conosce WordPress, mi limito a dire che è – semplificando – un “software” open-source scritto in PHP e basato su database MySQL, che permette, una volta installato e configurato sul proprio spazio web, di creare e gestire un Blog o un sito web senza conoscere quasi niente di PHP e HTML, personalizzando l’aspetto e la grafica per mezzo dei temi. Molti di voi, probabilmente, già conoscono WordPress e sanno che esistono migliaia di temi gratuiti da scaricare per questa piattaforma; se vi accontentate di dare al vostro sito un bell’aspetto, e non vi importa che qualcun altro ha quasi sicuramente usato lo stesso tema da voi scelto, questo articolo non vi interessa. Potete evitare di leggerlo. Ma se volete creare un sito o un Blog con WordPress dalla grafica originale, siete capitati nel posto giusto. Ma andiamo per gradi.
1. Cos’è un tema?
Un tema di WordPress è un insieme di file PHP e CSS che definiscono l’aspetto del vostro sito e il suo funzionamento. Infatti è il tema che stabilisce come presentare i vostri contenuti, sotto forma di blog o di magazine, oppure se volete una pagina di presentazione statica e gli articoli del blog su un’altra. Ma di questo parlerò in un altro articolo.
2. Come è composto un tema?
Un tema WordPress è composto da diversi file e da una cartella per le immagini; alcuni file, per esempio, possono essere:
- 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.
- footer.php –>analogo di header e contiene la parte finale del blog (in genere i tag di chiusura html o la grafica di chiusura del vostro layout).
- index.php –> è la homepage, o meglio, la parte che contiene tutti gli articoli
- page.php –> è il template delle pagine interne del blog (ad esempio portfolio)
- sidebar.php — > contiene il codice della barra laterale, sede dei widgets
- style.css –> il foglio di stile principale
- functions.php –> serve a dichiarare le funzioni personalizzate del sito; per chi comincia basta solo il codice di default che rende la nostra sidebar “widget ready”, ossia pronta a ricevere nuovi widgets dal pannello admin del sito.
Questi file sono contenuti all’interno di una directory nominata a nostro piacimento (nometema) posizionata in wp-content/themes/ nel nostro sito.
3. Progettare il lay-out della home page
Ok! Dopo questa breve infarinatura, possiamo iniziare a progettare la home page del nostro blog. Sentiamoci liberi di usare gli strumenti a noi più congeniali, perchè non dobbiamo fare altro che realizzare una pagina html statica. Un esempio può essere questo:
Come vedete la pagina è composta da una testata che contiene il nostro logo e il titolo del blog, un menù di navigazione, l’area che conterrà gli articoli, una barra laterale per i widget e infine il piè di pagina, o footer, che conterrà, ad esempio, le note sul copyright e i nostri contatti. Traducendo questo lay-out in HTML otterremo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Il Nostro Blog</title> </head> <body> <div id ="wrapper"> <div id="header"> <h1>Il titolo del nostro Blog</h1> <h2>Il motto del nostro Blog</h2> </div> <div id="navMenu"> <!-- Qui inseriremo il custom-menu di WordPress --> </div> <div id="pageBody"> <div id="postArea"> <!-- Qui inseriremo il loop di WordPress --> </div> <div id="sidebar"> <!-- Qui inseriremo i widget di WordPress --> </div> </div> <div id="footer">Copyright 2011 - info@nostrosito.com</div> </div> </body> </html>
Salviamo il nostro documento come template.html nella directory che abbiamo chiamato con molta fantasia nometema.
Adesso è giunto il momento di dare uno stile al nostro template; creiamo, quindi un file di testo vuoto dentro a nometema, chiamiamolo style.css e scriviamo queste righe di codice:
/*Theme Name: Nometema
Theme URI: https://www.nostrosito.com
Description: tema semplice
Version: 1.0
Author: Nostro Nome
Author URI: https://www.nostrosito.com/
Tags: fixed width, two columns
*/
@charset "utf-8";
body {
font-family: Verdana, Arial, sans-serif;
margin:0;
padding:0;
}
a {
color: #F09;
text-decoration: none;
}
a:hover {
color: #069;
text-decoration: underline;
}
h1, h2, h3 {
margin:0;
padding:0;
color: #00F;
text-decoration: none;
}
#wrapper {
width: 1000px;
margin: 0 auto;
}
#header {
width: 990px;
height: 190px;
padding:5px;
background-color: #CCC;
}
/*------STILE MENU DI NAVIGAZIONE-------*/
#navMenu {
width: 1000px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 10px;
margin-right: 0px;
padding: 0;
height: 40px;
background-color: #CCC;
}
#navMenu div { /*il div che conterrà il custom menu generato da wordpress*/
height: 40px;
width: auto;
padding: 0px;
margin: 0px;
}
#navMenu ul {
list-style-type: none;
margin: 0;
padding:0;
width: auto;
}
#navMenu ul li {
display: block;
width: 100px;
float: left;
padding: 10px;
}
/*------FINE STILE MENU DI NAVIGAZIONE-------*/
#pageBody {
width:1000px;
min-height:200px;
overflow: auto;
margin-bottom:10px,
}
#postArea {
width: 590px;
padding: 5px;
margin-right: 10px;
float: left;
background-color: #CCC;
}
#sidebar {
width: 380px;
padding: 5px;
float: left;
background-color: #CCC;
}
#footer {
width: 990px;
padding:5px;
background-color: #CCC;
}
Applichiamo style.css a template.html scrivendo questo frammento di codice dopo il tag <meta> del nostro file HTML:
<link href="style.css" rel="stylesheet" type="text/css" />
otterremo così una pagina con un lay-out a due colonne; questa è la base di partenza per costruire il nostro tema wordpress.
4. Frammentazione del codice
Bene! Ora che abbiamo il nostro file HTML vediamo come trasformarlo in un tema di WordPress. Per fare ciò dobbiamo suddividere il codice html in diversi file php che andranno a costituire le diverse aree della nostra pagina. Questa logica viene usata per rendere modulare il nostro blog. Il contenuto vero e proprio della pagina viene creato dal file index.php, gli altri file sono inclusioni di codice, come ad esempio header.php che ne descrive la parte alta, cosicché se volessimo cambiare il banner o il logo del sito, dovremmo cambiare solo un file che verrà richiamato su ogni pagina. Da questa immagine potete capire da quale file viene creata ogni area della pagina.
Adesso creiamo nella directory del nostro tema il file header.php e copiamo al suo interno solo la parte di codice del nostro template che descrive la parte superiore della pagina
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Il Nostro Blog</title> </head> <body> <div id ="wrapper"> <div id="header"> <h1>Il titolo del nostro Blog</h1> <h2>Il motto del nostro Blog</h2> </div> <div id="navMenu"> <!-- Qui inseriremo il custom-menu di WordPress --> </div>
Salviamo il file, creiamo il file index.php e copiamo questa parte di codice:
<div id="pageBody"> <div id="postArea"> <!-- Qui inseriremo il loop di WordPress --> </div>
questo codice andrà inserito in sidebar.php:
<div id="sidebar"> <!-- Qui inseriremo i widget di WordPress --> </div> </div>
e infine footer.php
<div id="footer">Copyright 2011 - info@nostrosito.com</div> </div> </body> </html>
Adesso creiamo il file funcions.php, vedremo in seguito cosa scriverci dentro.
Abbiamo tutti i file necessari al funzionamento del nostro tema dobbiamo integrarli con le funzioni in php di wordpress, indispensabili per inserire gli articoli e i dati presenti nel database.
5. Integrazione delle funzioni di WordPress
iniziamo dal file header.php, che modifichiamo in questo modo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<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() ) { ?>» Blog Archive<?php } ?></title>
<?php wp_head(); ?>
</head>
<body>
<div id ="wrapper">
<div id="header">
<h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
<div id="navMenu">
<?php wp_nav_menu(array('menu' => 'main_menu')); ?>
</div>
Niente panico! Queste ed altre funzioni (Template Tags) sono spiegate nella guida ufficiale di WordPress: il Codex o, se non conoscete l’inglese, esiste il wiki di WordPress Italy.
Passiamo al file index.php, il cuore della nostro sito dinamico. Esso contiene il loop di WordPress, cioè il codice che interroga (query) il database e mostra i nostri articoli nella home page. Scriviamo questo codice all’interno di index.php e salviamolo:
<?php get_header(); //richiama il codice di header.php per comporre la pagina?>
<div id="pageBody">
<div id="postArea">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); // se sono presenti post mostrali ?>
<!-- inizio elenco post -->
<div class="item entry" id="post-<?php the_ID(); ?>">
<div class="itemhead">
<h2> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="chronodata"><?php the_time('j F Y')?></div>
<small class="metadata"><span class="category">Archiviato in:
<?php the_category(', ') ?>
<?php echo "|"; ?>
<?php edit_post_link('Modifica', '', ' | '); ?>
<?php comments_popup_link('Commenti (0)', ' Commento (1)', 'Commenti (%)'); ?></span>
<?php if ( function_exists('wp_tag_cloud') ) : ?>
<?php the_tags('<span class="tags">| Tag Articolo: ', ', ' , '</span>'); ?>
<?php endif; ?>
</small>
</div>
<div class="storycontent">
<?php if(is_single()):?>
<?php the_content(); //il contenuto dell'articolo ?>
<?php endif;?>
<?php if(is_archive() || is_category()): //se dobbiamo visualizzare l'archivio o una categoria specifica di articoli ?>
<?php the_excerpt(); ?>
<div class="leggi"><a href="<?php the_permalink() ?>" rel="bookmark">Leggi e Commenta --></a></div>
<?php endif;?>
</div>
</div>
<!-- fine elenco post -->
<?php comments_template(); // mostra l'area commenti ?>
<?php endwhile; ?>
<div class="navigation"> <!-- i bottoni per scorrere le pagine con gli articoli -->
<div class="alignleft"><?php next_posts_link('« Articolo Precedente') ?></div>
<div class="alignright"><?php previous_posts_link('Articolo Successivo »') ?></div>
</div>
<?php else : // se non sono presenti i post mostra questo codice ?>
<h2 class="center">Articolo non Trovato!</h2>
<p class="center">Spiacenti, state cercando qualcosa che non esiste.</p>
<?php endif;?>
</div>
<?php get_sidebar(); //richiama e include il codice di sidebar.php ?>
<?php get_footer(); //include footer.php ?>
Tutto questo codice fa si che la pagina abbia comportamenti diversi in base alla query fatta al database. Se si tratta della home page mostrerà gli ultimi articoli, se invece si vuole visualizzare un singolo articolo, mostrerà solo quello con il form per inserire i commenti. Un solo file php, quindi, mostra risultati diversi secondo ciò che vuole visualizzare l’utente del sito.
I Template Tags come get_header(), get_sidebar() o get_footer() servono per includere il codice contenuto rispettivamente in header.php, sidebar.php e footer.php e ricostruire così la pagina nella sua interezza.
Continuiamo con il file sidebar.php che includerà il codice per visualizzare i widget di WordPress, cioè quegli elementi generalmente presenti a lato della pagina che contengono il calendario dei post, il tag cloud, il form per la ricerca ecc. Ho scritto “generalmente” perché nulla ci vieta di inserire l’are dei widget in un altra posizione, ad esempio nel footer.
Ecco cosa scriveremo in questo file:
<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('blogWidget') ) : // fa il check se è settata la sidebar dinamica su functions.php ?>
<?php endif; ?>
</div>
</div>
Questo codice renderà la nostra side bar “widget ready”, cioè pronta per l’inserimento dei widget.
Apriamo il file footer.php e scriviamo queste righe:
<div id="footer">Copyright 2011 - info@nostrosito.com</div> </div> <?php wp_footer(); //questo hook(gancio) indica ai plug-in dove inserire il codice ?> </body> </html>
Abbiamo quasi finito. Non ci resta che definire all’interno di functions.php le funzioni per creare il menù dinamico di wordpress (custom menu) e l’area dei widget.
Apriamo il file e scriviamo:
<?php
if ( function_exists('register_sidebar') ){
register_sidebar(array(
'name' => 'form',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
}
add_action('init', 'register_custom_menu');
function register_custom_menu() {
register_nav_menu('main_menu', __('Main Menu'));
}
?>
Bene! Il nostro tema è pronto; carichiamo la cartella nometema, che contiene tutti i nostri file, in wp-content/themes/ nel nostro sito. All’interno dell’area temi del back-end di WordPress troveremo il tema dal nome molto originale nometema. Attiviamolo e il gioco è fatto!
Spero di essere stato sufficientemente esaustivo, ma se qualcosa non vi è chiaro vi invito a commentare il post; vi risponderò sicuramente.
Prima di chiudere vorrei indicarvi la guida grazie alla quale ho iniziato a cimentarmi nella creazione di temi WordPress:
https://www.claudio-corti.com/06/creare-un-tema-per-wordpress/
Grazie per l’attenzione e a presto con una nuova guida su WebLab Design Blog!
