Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Theme Development
Code

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

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Creating a WordPress Theme From Static HTML.
Creating a WordPress Theme From Static HTML: Creating Template Files

Italian (Italiano) translation by Glauco Zega (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:

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:

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:

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:

E per la seconda aggiungo:

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:

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:

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.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.