Come creare un template in WordPress
WordPress è sicuramente la piattaforma più utilizzata al mondo. Un sito su tre è realizzato tramite questo CMS . Ciò ha spinto i web designer freelance a lanciarsi in un mercato molto vasto. Infatti, creare un template in WordPress e venderlo è un’attività che se fatta bene può portare molti frutti.
Moltissime agenzie vedono di buon occhio il risparmio di denaro e tempo che si può realizzare acquistando WP. La piattaforma di WordPress è open source, ciò significa che la community ad essa collegata è numerosa e pro-attiva. L’incredibile quantità di plugin lo rendono duttile ed assoggettabile a qualsiasi utilizzo se ne voglia fare.
Al giorno d’oggi è possibile fare quasi tutto con WordPress: dalle cose “difficili” come creare un template e far funzionare i plugin per un sistema di prenotazioni per hotel alle cose più semplici come scegliere il tema per il vostro blog.
La struttura di un tema WordPress
WordPress richiama le varie librerie e il template impostato dall’utente, tramite il file index.php e style.php per caricare e visualizzare il front-end del sito.
Partiamo dalle cose semplici ma che ti servono a capire l’organizzazione generale.
Avete creato la sottocartella nella directory wp-content/themes all’interno della vostra cartella di WP (WordPress abbreviato). Potrete usare un nome a piacimento, come ad esempio “ilmiosupertema”. Tenete conto che il nome di questa cartella deve poi essere uguale a quello del tema di WP che si crea.
Innanzitutto bisogna decidere il layout del sito web che statecreando. Avrete un’intestazione, denominata Header, una barra laterale Slidebar, un’area dei contenuti Main Area e un pié di pagina denominato Footer.
Definito il layout si tratta di creare dei file nella directory ” ilmiosupertema”, così come indichiamo qui di seguito:
- header.php – E’ il nome del file che contiene il codice per la parte dell’intestazione del template;
- index.php: E’ un file importante poiché indicherà dove sono gli altri file;
- sidebar.php: Qui c’è il file che riporta il codice della barra laterale;
- footer.php: E’ il file che gestirà il footer;
- style.css – E per finire il file che specifica il design del tema che state per creare;
Si possono scrivere sul PC i file di cui si ha bisogno con un editor di testo come notepad oppure notepad++. Anche se si tratta di un editor diverso (come Atom ad esempio) non ha importanza.
Analizziamo ogni file per vedere cosa deve contenere. Innanzitutto facciamo la dichiarazione doctype che ha la funzione di dare informazioni al browser su come deve interpretare il codice xhtml:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Primo file: header.php
In questo file bisognerà aggiungere il seguente codice:
<html>
<head>
<title>Tema WordPress</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>Alcune spiegazioni sono doverose prima di proseguire: si tratta di un codice html in cui c’è una sola riga per il codice php e una funzione di tipo standard di WP. Potete dare la specifica del meta tag come il titolo del vostro blog, la meta descrizione e le parole chiave.
La riga:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" indica a WP di caricare il file style.css. Ovvero il design del sito. Quindi questa parte php carica il file dello stile.
Secondo file: index.php
<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>Il primo codice php include il file header.php.
Le successive righe sono codici php e funzioni standard di WP e si preoccupa di verificare se ci sono post nel sito.
Segue il file sidebar.php in cui visualizzi le categorie del post.
Il div che segue divide le varie aree dal footer.
Concludiamo appunto con il php del footer.
Terzo file: sidebar.php
Nel file sidebar.php aggiungete il seguente codice:
<div id="sidebar">
<h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>Quarto file: footer.php
Aggiungete queste linee al file footer.php:
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>Abbiamo aggiunto l’etichetta FOOTER.
Quinto file: style.css
Ora bisogna aggiungere qualche riga al file style.css:
body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }Il file CSS ha impostato gli aspetti basilari del vostro template.
Ora, abbiamo dato una struttura di base al vostro blog.
Da questo momento in poi, potete inserire foto, animazioni ed in generale tutti i contenuti che volete per arrivare all’aspetto desiderato per il vostro blog.
