Realizzare un template Wordpress da zero – Capitolo 1

Posted by admin in Tutorials on 5 April 2009 | 3 responses

wpstudy_thumb

1.0 Introduzione

Questa guida nasce dopo anni di esperienza dello stesso autore, nella realizzazione di templates per i più diffusi CMS presenti sul web.

E’ stato scelto wordpress perché in questi ultimi anni è diventato il sistema più utilizzato e supportato.

La gestione di un sito in wordpress risulta semplice e immediata, offre molte possibilità di estensione grazie ai plugin sviluppati e inoltre come CMS, è considerato uno dei migliori per quanto riguarda l’aspetto SEO.

Questa guida è rivolta sia agli esperti del web design sia ai principianti e tratterà i vari aspetti della fase di sviluppo di un template per wordpress analizzandone i dettagli e cercando di spiegarli in modo semplice presupponendo che il lettore abbia un minimo di conoscenza dell’HTML, del CSS e del PHP.

Il contenuto di ogni capitolo della presente guida potrebbe variare nel tempo, presentare correzioni e ampliamenti del contenuto. Alla fine di ogni capitolo, verrà rappresentato uno schema con la struttura dei files relativi al template e alcune informazioni che riassumano il capitolo e ne aumentino la comprensione stessa.

1.1 Installazione di un web server in locale

Trattandosi della realizzazione di un template per wordpress, per testarne le fasi di sviluppo e vederne il risultato tramite la visualizzazione nel browser sarà necessario configurare un web server in locale che supporti il linguaggio PHP.

In alternativa al web server locale, è possibile configurare il tutto su uno spazio web, anche se un web server in locale dimezzerebbe i tempi di produzione e rende lo sviluppo molto più semplice.
Vi proponiamo una lista dei software che consentono rapidamente di installare un web server Apache, PHP e MySQL sul proprio PC.

EasyPHP 3.0 (Windows), XAMPP (Windows, Mac OSX, Linux, Solaris).

1.2 Primi Passi

Il primo passo da eseguire per realizzare un template per wordpress è di creare una cartella con il nome che vogliamo assegnare al template all’interno della cartella dei temi di wordpress. In questa guida, per convenienza, chiameremo il nostro template con il nome: “wpstudy”, e lo andremo a collocare nella cartella: “/wp-content/themes/wpstudy”.

Per una migliore organizzazione dei files che andranno a comporre l’intero template, inseriremo una cartella chiamata “css” come sottocartella di “wpstudy”, dove andremo ad inserire i vari files css relativi al layout e alla tipografia del template.

I files css inseriti nella cartella dovranno essere richiamati da un file css principale che chiameremo “style.css” e lo inseriremo nella cartella principale del template: “/wp-content/themes/wpstudy/style.css”.

Il file style.css in wordpress è il contenitore delle informazioni principali relative al template e risultano necessarie durante l’attivazione del template utilizzando il pannello di amministrazione di wordpress.

Il passo successivo sarà quello di creare un file “index.php” all’interno della cartella “wp-study”. Index.php sarà il file contenente la struttura del template e il relativo codice per utilizzare le funzioni di wordpress.

1.3 Style.css e le informazioni del template

Editiamo il file “style.css” ed inseriamo le informazioni relative al template come fosse un commento del codice CSS:

/*
Theme Name: WpStudy
Theme URI: http://www.wpstudytheme.com/
Description: Learning Wordpress Themes Design
Version: 1.0
Author: Daniele Cultrera
Author URI: http://www.semecreativo.it
Tags: custom header, fixed width, two columns, widgets
*/

Queste righe inserite all’interno del file “style.css” non credo necessitano di ulteriori spiegazioni.

Salvate il file “style.css” e inserite nella cartella del template un file immagine di anteprima del tema stesso in formato PNG ad una risoluzione di 300×225 pixels. Il file si dovrà chiamare “screenshot.png”.

Per meglio comprendere questa guida e le operazioni svolte in questa parte, entriamo nel pannello di amministrazione di wordpress e verifichiamo i template presenti tramite la pagina “Manage Themes”.

Lo screen allegato mostra le informazioni del template presente su “Manage Themes” e contiene alcune delle informazioni inserite nel file “style.css”.

screen-01

Il secondo screen invece, mostra sempre le informazioni del template presente su “Manage Themes” ma con maggiori dettagli di informazione. Questi dettagli vengono visualizzati quando il tema è selezionato come “attivo”.

screen-02