X
Skimbu è stato abbandonato, ma è stato sostituito da Tasc.it!

Come creare un semplice tema per WordPress

Pubblicato da il giorno 25 dicembre 2010

closeQuesto articolo è stato pubblicato 3 anni 10 mesi 29 giorni tempo fa e potrebbe contenere informazioni non più valide.

Era ormai da anni che molti lettori di Skimbu me lo chiedevano, ed oggi finalmente ecco che ho rispettato (magari con parecchio ritardo) la promessa. In questa guida vedremo come creare un tema per WordPress, il popolare CMS usato da migliaia di persone.

Prima di iniziare

Creare un tema per WordPress richiede alcune piccole conoscenze teoriche, per sapere cosa andremo ad affrontare.

Requisiti

Di cosa necessiteremo in questa guida? Ecco una veloce lista di tutto ciò che dovete avere/sapere:

  • Un editor di codice, noi usiamo di solito Expression Web su Windows e Coda o Dreamweaver su Mac, ma di gratuiti potete scaricare Notepad++ o jEdit per Windows, per Mac i primi che abbiamo trovato sono TextWrangler e jEdit, ma sicuramente su internet c’è pieno di editor di codice gratuiti sempre migliori. Ricordo, per chi non lo sapesse, che l’editor di codice non influisce sul risultato finale!!
  • Una minima conoscenza di HTML e CSS, e sappiate almeno le cose veramente basilari di PHP (almeno che si apre con <?php e si chiude con ?>)
  • Dovete sapere che a partire da questa pagina in inglese della documentazione di WordPress potete trovare tutto ciò che riguarda la creazione di temi per WordPress, è una documentazione fondamentale per ogni sviluppatore in caso di bisogno.

La struttura di un tema WordPress

La prima cosa da creare sarà la cartella del tema, all’interno di questa cartella inseriremo i file fondamentali per un tema WordPress, ho detto “fondamentali” perchè quando farete temi più complicati scoprirete che si potranno creare molte più pagine, per fare più personalizzazioni. Ma quali sono i file fondamentali per un tema?

  • index.php : la pagina più importante, infatti è la home page di WordPress, che contiene i vari articoli.
  • header.php : la parte superiore di ogni template di WordPress, che viene richiamata in ciascuna pagina attraverso una funzione PHP (che vedremo dopo).
  • footer.php : la parte inferiore di ogni template di WordPress, anche il footer viene richiamato in ciascuna pagina attraverso una banale funzione PHP (che vedremo dopo).
  • page.php : è il template di una pagina di WordPress (ad esempio la pagina “Chi siamo” o la pagina “Contatti” o qualsiasi altra pagina voi abbiate)
  • single.php : è il template di ciascun singolo articolo
  • search.php : la pagina in cui appaiono i risultati di una ricerca
  • sidebar.php : è la parte laterale di un tema, anch’essa è una parte comune di tutte le pagine e viene richiamata, come l’header e il footer, da una funzione PHP, che vedremo quando creeremo la pagina.
  • 404.php : template di una pagina non trovata
  • functions.php : all’inizio è la pagina meno importante, ma quando vorrete aggiungere nuove funzionalità al tema come le opzioni ecc. questa pagina diventerà fondamentale.
  • comments.php : contiene il template dei commenti, è facoltativa, ma quasi tutti i temi la usano e vedremo anche noi brevemente come si crea.

Una cosa importante da sapere è che WordPress sfrutta un sistema gerarchico per i template delle proprie pagine, ad esempio se nel nostro tema non creeremo page.php, quando visiteremo una pagina WordPress utilizzerà il template di index.php. Questa gerarchia è meglio spiegata in una fantastica immagine del blog inglese digwp.com.

Come vedete dall’immagine ci sono altre pagine che non abbiamo messo nella lista, come archive.php, che sarebbe il template usato per mostrare gli articoli di un determinato archivio (es. Giugno 2010), ma di solito non si crea perchè grazie al sistema gerarchico WordPress utilizzerà index.php che va più che bene e vedrete che funzionerà alla perfezione.

La bozza del tema

Chiunque, prima di creare un buon tema WordPress, crea una bozza, molti la disegnano direttamente su carta, mentre io, personalmente, la “disegno” direttamente su Photoshop. Decidete voi il metodo che preferite usare, potete anche creare una bozza mentale. Ecco la bozza che ho creato con Photoshop per il tema che andremo a creare.

Il loop

Un’aspetto teorico fondamentale di WordPress è il loop. Vi spiego brevemente cos’è. Il loop è quella parte di codice che appare in tutte le pagine PHP del tema in cui vengono visualizzati uno o più articoli (single.php, index.php ecc.) ed è quindi la parte di codice che contiene il template di un articolo. Capirete sicuramente meglio quando la inseriremo nelle pagine PHP.

Creiamo il template HTML

Dopo l’introduzione essenziale, siamo pronti ad agire. Purtroppo prima di passare alla creazione delle pagine PHP è fondamentale creare il template di base in HTML, cioè una semplice pagina HTML che contiene una pagina esempio del tema (cioè index.php), questo ci evita errori HTML in futuro ma soprattutto ci velocizza il lavoro, perchè dopo ci basterà ritagliare le parti del template HTML e incollarle nelle pagine PHP, quindi inserire le funzioni e le variabili ecc.

Dopo aver creato la bozza in Photoshop io ho semplicemente riprodotto in HTML quanto creato su Photoshop, ecco tutto il codice HTML e CSS che ho commentato parecchio per spiegarvi i passaggi, anche se questo passaggio vi interesserà poco se conoscete già HTML e CSS, altrimenti sarà un’ottima occasione per migliorare anche questi due semplici linguaggi.

<!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>
 <!-- Informazioni poco importanti -_-' -->
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 <title>Guida tema</title>

 <!-- Ecco il CSS del nostro mini-template, per far più veloce lo abbiamo integrato direttamente in HEAD, ma con la creazione dei files PHP metteremo tutto in un file CSS -->
 <style type="text/css">
 /* Reset: questo codice serve per resettare tutti i tags HTML, è una convenzione che uso sempre, per evitare errori grafici con i vari browser */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
 body{line-height:1;}
 ol, ul{list-style:none;}
 blockquote, q{quotes:none;}
 blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;}
 :focus{outline:0;}
 ins{text-decoration:none;}
 del{text-decoration:line-through;}
 table{border-collapse:collapse;border-spacing:0;}img {border:0px;}

 /*Stilizzazione dei tag principali*/
 body {font-family:"Myriad Pro","Trebuchet MS","Helvetica Neue",Helvetica,Arial,Verdana;}
 #wrapper {display:block; /*Ricordo che overflow:hidden, assieme a height:auto serve per dare un'altezza dinamica al DIV*/ overflow:hidden; height:auto;}
 a {color:#0057E8; text-decoration:none;}
 a:hover { color:#4079FF; text-decoration:underline;}
 #container {overflow:hidden; width:100%; margin:20px 0;}
 #footer {display:block; height:40px; background-color:#4F4F4F; margin:20px 0; text-align:center; color:#fff; line-height:40px;}

 /*Stilizzo l'header e le sue parti */
 #header {width:100%; background-color:#393939; color:#fff;}
 #header a {color:#fff; text-decoration:none;}
 #header a:hover {color:#fff;}
 #header h1 {font-size:2.2em; font-weight:bold; padding:20px 0 10px 20px;}
 #header h2 {font-size:1.3em; padding:0 0 15px 20px; font-weight:normal;}
 /*Stilizzo naturalmente anche il bottoncino RSS, che si trova sempre nell'header*/
 #header #rss {background-color:#ff6600; float:right; color:#fff; font-size:1.1em; font-weight:bold; width:auto;overflow:hidden; position:absolute; top:40px; right:50px;}
 #header #rss a {display:block;padding:4px 4px; text-decoration:none;}
 /*Ora stilizziamo la navbar */
 #navbar {overflow:hidden; height:auto; width:100%;}
 #navbar ul li {float:left; font-size:1.1em; font-weight:bold;}
 #navbar ul li a {padding:13px 7px; background-color:#e2e2e2; display:block; color:#3d3d3d;}
 #navbar ul li:hover a {background-color:#55a2ea;}

 /*Stilizziamo il content, che si trova dentro il container, ricordo che il content conterrà i vari articoli ecc. */
 #content {overflow:hidden; height:auto; width:75%; float:left;}
 #post {margin:0 0 15px 20px; overflow:hidden; display:block;}
 #post h1 {font-size:1.3em;}
 #post h2 {font-size:1em; font-style:italic; color:#838383;}
 #post_content {font-size:1em; overflow:hidden; margin:5px 0 8px 0; display:block;}
 #post_info {padding:5px; display:block; background-color:#E1E1E1; color:#626262; font-style:italic;}

 /*Stilizziamo la sidebar e gli H1, che saranno i titoli di ogni elenco o elemento nella sidebar*/
 #sidebar {float:right; overflow:hidden; height:auto; /*La larghezza della sidebar cambia da tema a tema, almeno 250pixel ci vogliono!*/ width:20%;}
 #sidebar h1 {background-color:#616161; color:#fff; display:block; font-size:1.3em; padding:5px 3px; margin:10px 10px 5px 0;}
 </style>
</head>

<!-- Ora inizia il body -->
<body>
 <!-- Creo il DIV che conterrà TUTTO, tutti lo chiamano "wrapper" -->
 <div id="wrapper">
 <!-- Ecco il div che contiene tutta l'header, naturalmente anche questo div andrà incluso in header.php -->
 <div id="header">
 <h1>Titolo del blog</h1>
 <h2>Descrizione del blog</h2>
 <div id="rss"><a href="http://rss">RSS</a></div>
 <!-- Ora costruiamo la barra di navigazione tra le pagine di WordPress -->
 <div id="navbar">
 <ul>
 <li>
 <a href="http://home">Home</a>
 </li>
 <li>
 <a href="http://home">Home</a>
 </li>
 </ul>
 </div>
 </div>
 <!--Dopo l'header, passiamo a ciò che sta in mezzo nel template, il contenuto, che chiamiamo con l'ID "container" e conterrà il contenuto in sè (content) e la sidebar -->
 <div id="container">
 <div id="content">
 <!--Un articolo di esempio, contiene le varie informazioni dell'articolo (categorie, tags ecc) e ovviamente il contenuto di esso -->
 <div id="post">
 <h1>Titolo dell'articolo</h1>
 <h2>Info articolo</h2>
 <div id="post_content">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>
 <div id="post_info">Categorie: xxx Tags: xxx</div>
 </div>
 </div>

 <div id="sidebar">
 <!-- Qui andrà il modulo per la ricerca, che inseriremo dopo nelle pagine PHP e stilizzeremo dopo! -->
 <h1>Archivi</h1>
 <!-- Qui dentro ci andranno, ad esempio, tutti gli archivi, che per velocizzare il tutorial non abbiamo stilizzato -->
 </div>
 </div>
 <!-- Ora passiamo al footer, che conterrà nulla, anche se poi potrete metterci quello che volete ;-)  -->
 <div id="footer">Fine del tema :) </div>
 </div> <!--Fine del Container -->
</body>

</html>

Ovviamente questo template, ma anche il tema che andremo a creare, sarà estremamente semplice e basilare, toccherà voi poi a esplorare la documentazione di WordPress ed ampliarlo di funzioni, in ogni caso continuate a seguire Skimbu perchè sicuramente pubblicheremo delle estensioni da fare a questo tema che stiamo creando.

Creazione del tema vero e proprio

Dopo aver creato il template HTML è ora di fare il tema vero e proprio e quindi provarlo su WordPress, ecco come lavoreremo:

  • Creazione delle varie pagine PHP, inserimento delle variabili e funzioni varie (ad esempio per ricavare l’url degli RSS, il titolo dei post ecc.)
  • Creazione di style.css, ovvero del foglio di stile del nostro tema, che andremo a collegare ovviamente in header.php
  • Per ogni pagina PHP vi diremo tutte le parti in PHP che abbiamo usato che ricavano dei dati.

style.css

È ora di creare style.css, quindi nella cartella del nostro tema creiamo un nuovo file style.css e ci inseriamo dentro tutto lo stile CSS che avevamo inserito nel template HTML. Inoltre, prima di ogni cosa, inseriamo subito un commento dal quale WordPress riconosce nome del tema, versione, autore ecc. Un’altra cosa da tener presente è che style.css lo riapriremo spesso per modificare gli stili o aggiungerne altri.


/*
Theme Name: Tema di prova
Theme URI: http://www.skimbu.it
Description:Un semplice e banale Tema di Prova creato da Skimbu.it per un tutorial
Author: Alberto Ziveri
Version: 1.0
Tags: simple,fast,theme
*/

 /* Reset: questo codice serve per resettare tutti i tags HTML, è una convenzione che uso sempre, per evitare errori grafici con i vari browser */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
 body{line-height:1;}
 ol, ul{list-style:none;}
 blockquote, q{quotes:none;}
 blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;}
 :focus{outline:0;}
 ins{text-decoration:none;}
 del{text-decoration:line-through;}
 table{border-collapse:collapse;border-spacing:0;}img {border:0px;}

 /*Stilizzazione dei tag principali*/
 body {font-family:"Myriad Pro","Trebuchet MS","Helvetica Neue",Helvetica,Arial,Verdana;}
 #wrapper {display:block; /*Ricordo che overflow:hidden, assieme a height:auto serve per dare un'altezza dinamica al DIV*/ overflow:hidden; height:auto;}
 a {color:#0057E8; text-decoration:none;}
 a:hover { color:#4079FF; text-decoration:underline;}
 #container {overflow:hidden; width:100%; margin:20px 0;}
 #footer {display:block; height:40px; background-color:#4F4F4F; margin:20px 0; text-align:center; color:#fff; line-height:40px;}

 /*Stilizzo l'header e le sue parti */
 #header {width:100%; background-color:#393939; color:#fff;}
 #header a {color:#fff; text-decoration:none;}
 #header a:hover {color:#fff;}
 #header h1 {font-size:2.2em; font-weight:bold; padding:20px 0 10px 20px;}
 #header h2 {font-size:1.3em; padding:0 0 15px 20px; font-weight:normal;}
 /*Stilizzo naturalmente anche il bottoncino RSS, che si trova sempre nell'header*/
 #header #rss {background-color:#ff6600; float:right; color:#fff; font-size:1.1em; font-weight:bold; width:auto;overflow:hidden; position:absolute; top:40px; right:50px;}
 #header #rss a {display:block;padding:4px 4px; text-decoration:none;}
 /*Ora stilizziamo la navbar */
 #navbar {overflow:hidden; height:auto; width:100%;}
 #navbar ul li {float:left; font-size:1.1em; font-weight:bold;}
 #navbar ul li a {padding:13px 7px; background-color:#e2e2e2; display:block; color:#3d3d3d;}
 #navbar ul li:hover a {background-color:#55a2ea;}

 /*Stilizziamo il content, che si trova dentro il container, ricordo che il content conterrà i vari articoli ecc. */
 #content {overflow:hidden; height:auto; width:75%; float:left;}
 #post {margin:0 0 15px 20px; overflow:hidden; display:block;}
 #post h1 {font-size:1.3em;}
 #post h2 {font-size:1em; font-style:italic; color:#838383;}
 #post_content {font-size:1em; overflow:hidden; margin:5px 0 8px 0; display:block;}
 #post_info {padding:5px; display:block; background-color:#E1E1E1; color:#626262; font-style:italic;}

 /*Stilizziamo la sidebar e gli H1, che saranno i titoli di ogni elenco o elemento nella sidebar*/
 #sidebar {float:right; overflow:hidden; height:auto; /*La larghezza della sidebar cambia da tema a tema, almeno 250pixel ci vogliono!*/ width:20%;}
 #sidebar h1 {background-color:#616161; color:#fff; display:block; font-size:1.3em; padding:5px 3px; margin:10px 10px 5px 0;}

header.php

La prima pagina PHP da creare è sempre header.php, perchè è l’inizio di ogni pagina di WordPress, ed è quindi importantissima. Come sempre ecco il codice di header.php, che abbiamo commentato per farvi capire tutto, dopo il codice trovare le variabili e funzioni varie che abbiamo introdotto. Chiaramente per costruire header.php, così come per tutte le altre pagine, abbiamo prima incollato la parte HTML comune a tutte le pagine e poi l’abbiamo modificata.


<!DOCTYPE html>
<!-- Apriamo ovviamente il tag HTML, quindi ci inseriamo una funzione che ricaverà tutte le informazioni riguardanti lingua della pagina ecc. -->
<html <?php language_attributes(); ?> >
<head>
 <meta charset="<?php bloginfo( 'charset' ); ?>" /> <!-- Questo meta ricava le informazioni relative al carattere, fondamentali se volete vedere correttamente le vostre pagine -->
 <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title> <!-- Anche il titolo del blog che apparirà nel browser apparirà dinamicamente, a seconda delle impostazionid WordPress -->
 <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <!-- Questo ricaverà in automatico lo style.css del nostro tema -->

 <!-- Altre cose non fondamentali, riguardanti il profilo e i links degli RSS e dei pingbacks -->
 <link rel="profile" href="http://gmpg.org/xfn/11" />
 <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
 <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
 <link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />
 <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 <?php
 if ( is_singular() && get_option( 'thread_comments' ) )    wp_enqueue_script( 'comment-reply' ); //Questa funzione serve per il supporto ai commenti nidificati
 wp_head(); //Mentre questa funzione è fondamentale per i plugin!
 ?>

</head>

<!-- Ora inizia il body -->
<body>
 <div id="wrapper">
 <div id="header">
 <h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo( 'name' ); ?></a></h1> <!-- Ricavo il titolo del blog -->
 <h2><?php bloginfo( 'description' ); ?></h2> <!-- Descrizione del blog -->
 <div id="rss"><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></div>
 <div id="navbar">
 <ul><?php wp_list_pages('sort_order=desc&title_li='); ?></ul> <!-- Ecco la funzione magica che ricaverà il nostro menu, che abbiamo già stilizzato! -->
 </div>
 </div>
 <!--Dopo l'header, passiamo a ciò che sta in mezzo nel template, il contenuto, che chiamiamo con l'ID "container" e conterrà il contenuto in sè (content) e la sidebar -->
 <div id="container">

Ecco le funzioni più importanti usate in questo codice (in ogni caso guardate anche i commenti che abbiamo fatto al codice ;-) ):

  • echo get_option(‘home’); fornisce l’URL del blog.
  • bloginfo( ‘name’ ); fornisce il nome del blog, sostituendo name con description ricaveremo la descrizione del blog, mentre mettendo rss2_url ricaveremo l’URL degli RSS.
  • wp_list_pages() fornisce la lista di pagine, all’interno della funzione è possibile personalizzare l’ordine in cui verranno mostrate ecc.
  • wp_head() è fondamentale in quanto grazie ad essa i plugin sapranno dove si trova l’header per inserire i loro scripts ecc.

index.php

Creiamo ora il contenuto che sarà mostrato nella homepage del nostro blog. Ecco il codice tutto commentato.


<?php get_header(); //Ricavo l'header ?>
 <div id="content">
 <!-- Qui inizia il loop!! cioè, per ogni articolo, WordPress mostrerà il template che gli indichiamo qui sotto -->
 <?php while ( have_posts() ) : the_post(); ?>
 <div id="post">
 <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> <!-- In questa riga ricavo il titolo dell'articolo e lo linko all'articolo singolo, che avrà come pagina single.php -->
 <h2>Pubblicato da <strong><?php the_author_posts_link(); ?></strong> il giorno <strong><?php the_time('j F Y'); ?></strong></h2> <!-- Ricavo le varie informazioni, autore e data -->
 <div id="post_content"><?php the_content(); ?></div> <!-- Ricavo il contenuto dell'articolo -->
 <div id="post_info"><strong>Categorie:</strong><?php the_category(', '); ?>  <strong>Tags:</strong> <?php the_tags('', ' , ', '');?></div> <!-- Queste due funzioni ricavano categorie e tags dell'articolo -->
 </div>
 <?php endwhile; // FINE DEL LOOP ?>

 </div>
<?php get_sidebar(); //Ricavo la sidebar ?>
<?php get_footer(); //Ricavo il footer ?>

Ecco le funzioni più rilevanti usate in index.php :

  • get_header() è fondamentale perchè ricava tutto header.php, di conseguenza apre i tags html, body ecc. Stessa cosa vale per le funzioni alla fine get_sidebar() e get_footer()
  • while ( have_posts() ) : the_post(); è l’inizio del loop, scoprirete, quando approfondirete l’argomento, che grazie al loop potete ricavare anche post precisi, ad esempio i post di una categoria e di una certa data ecc. Ricordo che il loop termina con endwhile; .
  • the_permalink() se messo all’interno del loop fornisce l’URL all’articolo.
  • the_title() fornisce il titolo del post, anch’esso va messo all’interno del LOOP

footer.php

Il footer è una delle pagine più semplici ma è molto importante, perchè chiude tutti i tags aperti (oltre a html, head e body chiude anche i vari div aperti, come wrapper) ed è un punto di riferimento per i plugins.


<!-- Ecco footer.php, è fondamentale più che altro per chiudere tutti i DIV e tags aperti -->
 </div> <!--Fine del Container -->
 <div id="footer">Fine del tema :) </div>
 <?php wp_footer(); //Questa funzione è fondamentale per evitare problemi con i plugins ?>
 </div> <!-- Fine del Wrapper -->
</body>

</html>

C’è solo un’importante funzione nel footer:

  • wp_footer() serve a WordPress per indicare dove si trova il footer, serve molto ai plugin anche per sapere dove andranno messi i vari files…

sidebar.php

La sidebar, assieme a footer e header, è la terza parte comune a tutte le pagine. È chiamata sidebar perchè è essenzialmente una colonna che si trova lateralmente al contenuto delle pagine.


<div id="sidebar">
 <!-- Ecco il form della ricerca -->
 <form id="searchform" action="<?php bloginfo('url'); ?>/" method="get">
 <input id="submitsearch" alt="" title="" type="submit" value="Cerca" /> <input id="s" name="s" placeholder="Cerca..." type="text" value="<?php the_search_query(); ?>" />
 </form>

 <h1>Archivi</h1>
 <ul>
 <?php wp_get_archives('show_post_count=true'); ?>
 </ul>
 <!--Questa parte riguarda la sidebar dinamica, cioè che supporta i widgets, ricordatevi però di modificare anche Functions.php! -->
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
 <?php endif; ?>
 </div>

Ecco le parti PHP importanti di questa pagina…

  • wp_get_archives() serve per ricavare gli archivi di un blog, è una delle tante funzioni usate nella sidebar, c’è ad esempio anche get_categories.
  • the_search_query(); è la funzione PHP da mettere nella value dell’input della ricerca, ed è fondamentale affinchè il form della ricerca funzioni.

Una cosa molto importante è che invece che scrivere il form della ricerca manualmente esiste una funzione che fa tutto in automatico e ricava tutto il form della ricerca. Si tratta di get_search_form() .

Altra cosa importante è che in quasi tutti i temi il modulo della ricerca assume sempre degli stili diversi, per velocizzare il tutorial noi non abbiamo stilizzato nulla della ricerca nel CSS.

single.php

Dopo aver visto header,index,footer e sidebar, che sono le quattro pagine che compongono la home page del vostro blog, ora vedremo single.php, che è la pagina PHP che viene chiamata quando si accede ad un articolo singolo, anch’essa ovviamente richiamerà header,footer e sidebar. Single.php, in teoria, non è altro che la copia di index.php ma con il template dei commenti, anche se in realtà in tantissimi temi ci sono molte personalizzazioni in più.


<?php get_header(); //Ricavo l'header ?>
 <div id="content">
 <!-- Qui inizia il loop!! cioè, per ogni articolo, WordPress mostrerà il template che gli indichiamo qui sotto -->
 <?php while ( have_posts() ) : the_post(); ?>
 <div id="post">
 <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> <!-- In questa riga ricavo il titolo dell'articolo e lo linko all'articolo singolo, che avrà come pagina single.php -->
 <h2>Pubblicato da <strong><?php the_author_posts_link(); ?></strong> il giorno <strong><?php the_time('j F Y'); ?></strong></h2> <!-- Ricavo le varie informazioni, autore e data -->
 <div id="post_content"><?php the_content(); ?></div> <!-- Ricavo il contenuto dell'articolo -->
 <div id="post_info"><strong>Categorie:</strong><?php the_category(', '); ?>  <strong>Tags:</strong> <?php the_tags('', ' , ', '');?></div>
 </div>
 <?php endwhile; // FINE DEL LOOP ?>
 <?php comments_template(); //Ecco la funzione che ricava il template dei commenti ?>

 </div>
<?php get_sidebar(); //Ricavo la sidebar ?>
<?php get_footer(); //Ricavo il footer ?>

Come avete visto è praticamente la copia di index.php (anche se, come detto prima non quasi mai così, nel senso che molti in single.php aggiungono personalizzazioni, come i bottoni per condividere l’articolo su Facebook, più informazioni sull’autore ecc.) ma c’è, in più, la possibilità di inserire commenti, e su questo ci soffermiamo per un po’.

Per inserire il template dei commenti, la via più veloce è usare la funzione comments_template() , questa funzione ricaverà il file comments.php (che dobbiamo ancora creare), ma, se questo sarà assente, sarà inserito in automatico tutto il template dei commenti ed anche il form di inserire di nuovi. Per velocizzare il tutorial, abbiamo deciso di non creare comments.php, anche perchè ormai, se non volete troppe personalizzazioni, non è più fondamentale.

In ogni caso ci sono alcune cose da tener presente:

  • Noi abbiamo inserito la funzione del template dei commenti nuda e cruda, senza neanche stilizzare i commenti nei CSS, il risultato sarà ovviamente pessimo, toccherà a voi poi stilizzare tutto e renderlo più bello.
  • comments.php è una delle pagine PHP più difficili da creare in WordPress, anche perchè all’interno di essa viene richiamato anche il template per mostrare i commenti, oltre al form per inserirne di nuovi. Quindi, se non avete particolari personalizzazioni da fare, non createla.
  • Nel caso siate interessati ad approfondire e creare comments.php allora se masticate un po’ di inglese c’è un articolo perfetto di nettuts.

page.php

Anche page.php incorpora il loop uguale a index.php, a differenza di index.php in page.php mancano alcune informazioni relative alla articolo o pagina, ad esempio non ci sono ne categorie ne tags. Ricordo che page.php è il template usato nelle singole pagine (es. la pagina “Chi Siamo”) ecc.


<?php get_header(); //Ricavo l'header ?>
 <div id="content">
 <!-- Qui inizia il loop!! cioè, per ogni articolo, WordPress mostrerà il template che gli indichiamo qui sotto -->
 <?php while ( have_posts() ) : the_post(); ?>
 <div id="post">
 <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> <!-- In questa riga ricavo il titolo dell'articolo e lo linko all'articolo singolo, che avrà come pagina single.php -->
 <h2>Pubblicato da <strong><?php the_author_posts_link(); ?></strong> il giorno <strong><?php the_time('j F Y'); ?></strong></h2> <!-- Ricavo le varie informazioni, autore e data, QUESTE POSSONO ANCHE ESSERE TOLTE -->
 <div id="post_content"><?php the_content(); ?></div> <!-- Ricavo il contenuto dell'articolo -->
 </div>
 <?php endwhile; // FINE DEL LOOP ?>

 </div>
<?php get_sidebar(); //Ricavo la sidebar ?>
<?php get_footer(); //Ricavo il footer ?>

Come detto prima abbiamo usato le stesse identiche funzioni usate in index.php, inoltre mancano le categorie ed i tags e ricordo che potete togliere, se preferite, anche le informazioni riguardanti autore e data.

search.php

Anche search.php è molto simile a index.php, vedremo dopo il codice le differenze.


<?php get_header(); //Ricavo l'header ?>
 <div id="content">
 <h1>Risultati ricerca per <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); _e('<span>'); echo $key; _e('</span>'); _e(' &mdash; '); echo $count . ' '; _e('articoli trovati'); wp_reset_query(); ?></h1> <!-- Tutta questa riga ricava il termine cercato -->
 <!-- Qui inizia il loop!! cioè, per ogni articolo, WordPress mostrerà il template che gli indichiamo qui sotto -->
 <?php if (have_posts()) : //È un IF che verifica se sono stati trovati dei risultati dalla ricerca ?>
 <?php while ( have_posts() ) : the_post(); ?>
 <div id="post">
 <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> <!-- In questa riga ricavo il titolo dell'articolo e lo linko all'articolo singolo, che avrà come pagina single.php -->
 <h2>Pubblicato da <strong><?php the_author_posts_link(); ?></strong> il giorno <strong><?php the_time('j F Y'); ?></strong></h2> <!-- Ricavo le varie informazioni, autore e data -->
 <div id="post_content"><?php the_content(); ?></div> <!-- Ricavo il contenuto dell'articolo -->
 <div id="post_info"><strong>Categorie:</strong><?php the_category(', '); ?>  <strong>Tags:</strong> <?php the_tags('', ' , ', '');?></div>
 </div>
 <?php endwhile; // FINE DEL LOOP ?>
 <?php else : //Se non sono stati trovati risultati... ?>
 <h1>Nessun risultato trovato!</h1>
 <?php endif; ?>
 </div>
<?php get_sidebar(); //Ricavo la sidebar ?>
<?php get_footer(); //Ricavo il footer ?>

Come notate ci sono due differenze, la prima è che è presente un tag H1 prima del loop che indica il termine cercato (è un codice piuttosto complicato). La seconda differenza è un if che inizia prima del loop e finisce dopo il loop, l’if determina se sono stati trovati dei risultati di ricerca e se dopo il loop non ne ha trovati allora verrà visualizzato sempre un tag H1  con la scritta “Nessun risultato trovato”.

404.php

È forse la pagina più semplice, appare quando WordPress non trova una pagina, in molti temi la pagina 404.php ha un design stravagante, noi ci limitiamo a far apparire una semplice scritta.


<?php get_header(); //Ricavo l'header ?>
 <div id="content">
 <h1>Pagina non trovata :(  !</h1>
 </div>
<?php get_sidebar(); //Ricavo la sidebar ?>
<?php get_footer(); //Ricavo il footer ?>

functions.php

Come detto precedentemente, è una pagina che diventa importantissima quando si vogliono aggiungere funzionalità avanzate al proprio tema, come i custom post types, le impostazioni del tema ed altre cose. Per ora, in questo semplice tema, ci serve solo per aggiungere un piccolo script PHP che aggiunge la compatibilità del tema con i widgets della sidebar.

Cosa importante è che PHP non va mai chiuso in functions.php perchè potrebbe generare degli errori.


<?php
/*Ecco l'unico script di Functions.php, ci servirà per aggiungere la compatibilità ai widgets */
if ( function_exists('register_sidebar') )
 register_sidebar(array(
 'before_widget' => '',
 'after_widget' => '',
 'before_title' => '<h1>',
 'after_title' => '</h1>',
 ));

Download del tema e conclusioni

Dopo ore di lavoro, abbiamo concluso il nostro semplice tema. Vi do subito il link da cui potete scaricarlo, vederlo e anche provarlo, inserendolo nella cartella wp-content>themes e attivandolo dall’amministrazione di WordPress. Contiene anche il template HTML.

In conclusione, vi dico e ripeto altri aspetti fondamentali della creazione di temi WordPress:

  • Ciò che abbiamo creato è qualcosa di estremamente basilare, ma sicuramente più avanzato rispetto ad altre guide, anche inglesi, che si trovano su internet. Creare un tema WordPress avete visto che non è un lavoro semplicissimo, e diventa ancora più lungo e complesso quando si vogliono aggiungere nuove funzionalità al proprio tema, ad esempio aggiungere le opzioni, i post meta, le thumbnail ecc. Noi di Skimbu pubblichiamo e pubblicheremo spesso guide aggiuntive per aggiungere funzioni al proprio tema e renderlo più avanzato, ma se volete farlo fin da subito, vi toccherà cercare in Google oppure partire dalla completa documentazione di WordPress.org
  • Molte pagine non le abbiamo create, perchè sono facoltative, come comments.php (che possiamo definire semi-facoltativa), archive.php, category.php, tag.php, searchform.php e tante altre.
  • Un’altra cosa importante è che noi abbiamo stilizzato soltanto gli elementi principali del blog, per stilizzare intendiamo dare uno stile agli elementi attraverso il linguaggio CSS.

Per finire, vi invito a continuare a seguire Skimbu, anche abbonandovi e iscrivendovi ai vari servizi che trovate in alto a destra del blog (Facebook, Twitter, RSS ecc.).

, 892 articoli pubblicati

Fin da quando ho 7 anni sviluppo siti web, amo l'informatica, la fotografia, la scienza e l'economia. Credo che il segreto del successo stia nel fare cose che altri non fanno. Nel 2008 ho fondato Skimbu, a cui ho voluto fin da subito dare una precisa immagine attraverso una grafica semplice, bella e unica e attraverso articoli di qualità e anch'essi unici. Poi son cresciuto, ora mi trovate su tasc.it, per maggiori info visitate il mio sito personale.

Visita il sito web di questo autore

Condividi l'articolo!

  • Light

    Davvero un’ottima guida! E io che pensavo di comprarmi qualche manuale xD

  • http://poelweb olivierognn

    bella, sei veramente bravo, da oggi incomincio a seguirti

  • alessandro

    rilascerai mai il tema di skimbu (anche a pagamento)?

  • DagDigg

    Segnalo che il download del tema di default non va

Seguici per leggere

Prima di vedere il contenuto che stai cercando seguici su Facebook per scoprire sempre grandi articoli riguardanti la tecnologia, la scienza, l'innovazione, la moda e le tendenze. Abbiamo una filosofia unica e giovane, e ci serve il tuo sostegno.

Se non hai Facebook seguici su Twitter!

Non ho Facebook ne Twitter o vi seguo già