Creare un tema WordPress partendo dall'HTML statico: preparare il markup

() translation by (you can also view the original English article)

L'anno precedente ho fatto un piccolo (devo dire non molto scientifico) ritrovo con alcuni sviluppatori WordPress.

Quello che volevo sapere era questo: Come fanno per creare il loro primo tema WordPress? Modificano un altro tema già esistente o partono da un file HTML statico e lo sviluppano in un tema?

La maggior parte delle persone alle quali ho parlato utilizzano il secondo approccio - questi erano tutti degli sviluppatori con esperienza che avevano già creato siti web in HTML e in CSS e avevano trovato più facile e più semplice prendere i loro file HTML e convertirli in un tema. Due delle persone alle quali parlai erano docenti o insegnanti, e mi hanno detto che questo è l'approccio che utilizzano anche con gli studenti.

Quindi in questa serie vi mostrerò proprio come fare in questo modo.

Partirete con un singolo file HTML (con un foglio di stile separato) e lo modificherete fino a farlo diventare un tema WordPress, con più file per i template, con una serie di hook, funzioni e tag template inclusi per utilizzare i loop, i menu, gli widget e gli altri elementi.

In questa prima guida vi mostrerò come preparare il vostro HTML, prima di convertirlo in PHP per creare il tema, cosa che vedremo in seguito in questa serie di articoli.

Di cosa avete bisogno

Per questa guida tutto quello di cui avete bisogno sono degli strumenti di base per modificare l'HTML:

Un editor di codice a vostra scelta
Un browser per vedere i risultati del vostro lavoro

1. Perchè preparare il vostro HTML?

In teoria, potete prendere qualsiasi HTML valido, aggiungere i template tag corretti, un loop e modificarli in un tema, ma vi consiglio di approfondire la cosa un pò di più.

La ragione di questo è che WordPress aggiunge automaticamente elementi HTML e classi quando iniziamo ad aggiungere le funzioni come menu e widget, quindi è consigliato iniziare a lavorare con questi elementi sin dall'inizio. Ho evidenziato le classi e gli ID che WordPress genera in una precedente guida, in caso vogliate conoscerli meglio prima di continuare.

Un altra ragione è quella di assicurarsi che il proprio markup sia conforme agli standard e che sia scritto in HTML5. Se volete convertire un vecchio sito statico in WordPress, potreste trovarvi a lavorare con del codice vecchio in una versione precedente di HTML... il quale, francamente parlando, probabilmente necessita di essere revisionato.

Non vi posso dire come dovete aggiornare il vostro markup, ma posso consigliarvi comunque di strutturare il vostro documento e di utilizzare l'HTML5 per il vostro tema WordPress.

2. HTML5 e WordPress - Strutturare il tuo Markup

Ci sono un numero di elementi in HTML5 come <article> e <aside> che hanno ovviamente delle posizioni specifiche per il vostro tema in WordPress. Ho scritto un post sul mio blog su questo, ma il pensiero comune su come ognuno di questi debba essere utilizzato è in continuo cambiamento, quindi utilizzateli a vostro giudizio.

Nel file HTML con il quale lavorerò in questa guida, la struttura è come di seguito:


<header>
  <div>
	</div>
	<aside>
	</aside>
</header>
<nav>
</nav>
<div class="main">
	<div id="content">
		<article>
			<section class="entry-meta">
			</section><!-- .entry-meta -->
			<section class="entry-content">
			</section><!-- .entry-content -->
			<section class="entry-meta">
			</section><!-- .entry-meta -->
		</article>
	</div><!-- #content-->
	<aside class="sidebar">
	</aside>
</div><!-- .main -->
<footer>
	<div class="fatfooter">
	</div><!-- #fatfooter -->
</footer>

Come potete vedere vengono utilizzati un numero di elementi HTML5 e anche alcuni elementi precedenti all'HTML5. Nella parte successiva, vi mostrerò come suddividere questa struttura nei file di template, ma per adesso teniamoli tutti in un file chiamato index.html.

Se il vostro markup non è ancora strutturato in un modo simile a questo o non è scritto in HTML5, prendetevi un pò di tempo per effettuare i cambi necessari. La cosa importante è quella di avere le seguenti aree della pagina ben definite:

la testata - in <header>
il contenuto - in questo caso, sto utilizzando <div id="content">. Qui sto deliberatamente utilizzando un ID invece che una classe in modo che in seguito lo possa anche utilizzare come un anchor per gli screen-reader, in modo da poter saltare il menu.
la barra laterale (se ne avete una) - qui utilizzo <aside class="sidebar">. Ho anche aggiunto delle classi addizionali per la stilizzazione - queste sono tutte object-oriented così che possano essere utilizzate nel tema e nelle pagine che aggiungerò in seguito in WordPress.
il piè di pagina - in <footer>. Io tendo ad aggiungere un altro elemento nel mio footer che racchiude l'area widget - lo chiamo <div class="fatfooter">. Questo significa che posso aggiungere un colore di sfondo a tutto schermo (full-width) all'elemento footer con la possibilità di tenere l'elemento .fatfooter sempre centrato nella pagina.

3. Aggiungere Classi e ID Generati da WordPress

Il passo successivo è quello di lavorare attraverso il markup e aggiungere qualche classe e ID che mostreranno il nostro tema in forma completa.

Questo passo non va ad incidere sul tema finale, dato che le classi e gli ID saranno automaticamente aggiunte tramite le funzioni PHP che andremo ad inserire in seguito. Comunque, se aggiungete le classi e gli ID giusti in questo momento, li utilizzerete nel vostro foglio di stile che continuerà a funzionare anche dopo che avrete convertito il vostro HTML in un tema WordPress.

Lavorate attraverso ogni parte del markup in ordine.

La Testata (Header)

WordPress non aggiunge automaticamente le classi e gli ID al nome del sito e alla descrizione, ma ha senso utilizzare quelle che sono consistenti con la terminologia di WordPress. La parte sinistra dell'header contiene un elemento div con il nome del sito e la descrizione in esso, come qui di seguito:


<div class="site-name half left"><!-- nome sito e descrizione --></div>

<div class="site-name half left">
	<h1 class="one-half-left" id="site-title"><a title="Creare un Tema WordPress dall'HTML Statico - Home" rel="home">Creazione del Tema WordpPress</a></h1>
	<h2 id="site-description">Creare un Tema WordPress dall'HTML Statico</h2>
</div>

Nella parte destra del mio design c'è uno spazio per l'indirizzo, per un numero di telefono e forse anche per un box di ricerca. Potete dare agli utenti del vostro tema completa flessibilità su cosa viene mostrato in questa parte impostandola come un area widget. Vi mostrerò in seguito sempre in questa serie di articoli come creare un area widget, ma per ora aggiungiamo solo le classi pertinenti:


<!-- un aside nella testata - questa verrà popolata tramite l'area widget in seguito -->
<aside class="header widget-area half right" role="complementary">
	<div class="widget-container">Questa sarà un area widget nella testata - informazioni di indirizzo (o qualsiasi altra cosa vogliate) va qui</div><!-- .widget-container -->
</aside><!-- .half right -->

Immagini

La cosa più importante da aggiungere al vostro contentuo sono le classi per le immagini. WordPress genera le classi per le immagini basandosi su come le aggiungiamo al nostro Manager Media, quindi prima vi dovrete assicurare che queste siano presenti nel vostro tema.

Nel markup della mia pagina fittizzia ci sono due immagini - una è larga e l'altra è media e impostata sulla destra.

Per la prima aggiungo:

1
2	<img class="size-large" alt="" src="images/featured-image.jpg" />

E per la seconda aggiungo:

1
2	<img class="alignright" alt="" src="images/another-image.jpg" />

Notate che nel vostro tema finale rimuoverete il codice per queste immagini dato che queste verranno inserite in automatico da WordPress, ma è comunque di aiuto aggiungerle adesso in modo che si possa impostare lo stile in modo corretto.

Avendo aggiunto le classi al vostro markup, vi dovrete assicurare di avere queste classi anche nel vostro foglio di stile, quindi aggiungete il seguente codice:


/* Immagini */

img {
	max-width: 100%;
}
#content img {
	margin: 0;
	height: auto;
	width: auto;
}
#content .alignleft,
#content img.alignleft {
	float: left;
	margin: 4px 4% 4px 0;
}
#content .alignright,
#content img.alignright {
	float: right;
	margin: 4px 0 4px 4%;
}
#content .aligncenter,
#content img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
#content img.alignleft,
#content img.alignright,
#content img.aligncenter {
	margin-bottom: 12px;
}

Se guardate la mia pagina di esempio vedrete che la prima immagine è al 100% della larghezza del contenuto, e la seconda immagine è allineata alla destra con dei margini:

creating-wordpress-theme-from-static-html-images

Barra laterale (Sidebar) e Piè di pagina (Footer)

La barra laterale (sidebar) e il piè di pagina (footer) conterranno anche questi delle aree per i widget, quindi dovrete aggiungere le classi pertinenti sia nel vostro markup che nel vostro foglio di stile.

Il markup della barra laterale (sidebar) è come segue:


<!-- la barra laterale - in WordPress questa verrà popolata con i widget -->
<aside class="sidebar widget-area one-third right" role="complementary">
	<div class="widget-container">
		<h3 class="widget-title">Un widget per la barra laterale</h3>
		<p>Questo è un widget per la barra laterale - nel tuo tema WordPress la si può impostare in modo che venga visualizzata in tutto il proprio sito web.</p>
	</div><!-- .widget-container -->
	<div class="widget-container">
		<h3 class="widget-title">Un altro widget per la barra laterale</h3>
		<p>Un secondo widget per la barra laterale - potete utilizzare un plugin per visualizzare i feed dei social, oppure listare gli ultimi articoli.</p>
	</div><!-- .widget-container -->
</aside>

Il markup per il footer contiene quattro aree widget, ognuna delle quali può contenere a sua volta uno o più widget. Come potete vedere qui sotto, ho aggiunto una classe ad ognuna in modo da comunicarlo al browser, potendo così in seguito stilizzarle in modo più veloce.


<footer>
	<!-- il .fatfooter aside - Lo utilizzo per abilitare il background screen-wide (larghezza massima) nel piè di pagina continuando a mantenere il contenuto del piè di pagina in linea con il layout -->
	<div class="fatfooter" role="complementary">
		<div class="first quarter left widget-area">
			<div class="widget-container">
				<h3 class="widget-title">La prima area widget del piè di pagina</h3>
				<p>Un area widget nel piè di pagina - utilizza dei plugin o dei widget per popolarla.</p>
			</div><!-- .widget-container -->
		</div><!-- .first .widget-area -->
		<div class="second quarter widget-area">
			<div class="widget-container">
				<h3 class="widget-title">Seconda area widget per il piè di pagina</h3>
				<p>Un area widget nel piè di pagina - utilizza dei plugin o dei widget per popolarla.</p>
			</div><!-- .widget-container -->
		</div><!-- .second .widget-area -->
		<div class="third quarter widget-area">
			<div class="widget-container">
				<h3 class="widget-title">Terza area widget per il piè di pagina</h3>
				<p>Un area widget per il piè di pagina - utilizza dei plugin o dei widget per popolarla.</p>
			</div><!-- .widget-container -->
		</div><!-- .third .widget-area -->
		<div class="fourth quarter right widget-area">
			<div class="widget-container">
				<h3 class="widget-title">Quarta area widget per il piè di pagina</h3>
				<p>Un area widget per il piè di pagina - utilizza dei plugin o dei widget per popolarla.</p>
			</div><!-- .widget-container -->
		</div><!-- .fourth .widget-area -->
	</div><!-- #fatfooter -->
</footer>

Sommario

Il tuo file HTML è adesso preparato e pronto per essere convertito in una serie di file per il proprio tema. Nella prossima guida vi mostrerò come dividerlo e come aggiungere del codice base in PHP.

Risorse

Working with Classes and IDs generated by WordPress (tutorial)
Theme Development (from the WordPress Codex)
WordPress and HTML5 - how they fit together (from my blog)
HTML5 spec (from the W3C)
WordPress Theme Development Beginners's Guide by Tessa Blakeley Silver and Rachel McCollin (yes, me!)