Come creare un tema XHTML valido per WordPress parte 2

by

Nella prima parte di questo articolo abbiamo visto un pò come organizzare la partenza della nostra missione cioè:

Come creare un tema xhtml valido per wordpress.

Cosa abbiamo fatto fino adesso:

  1. Abbiamo visto le principali caratteristiche di un tema WordPress
  2. Abbiamo visto le caratteristiche principali del CSS
  3. Abbiamo notato che il tema senza CSS risulta danneggiato
  4. Abbiamo preso l’header del nostro tema e lo abbiamo “pulito” da tutto ciò che non ci occorre

Cosa cominciamo a fare oggi per iniziare la costruzione del nostro tema:

  1. Nel file CSS che abbiamo visto nel precedente articolo svuotiamo tutte le caratteristiche dei vari contenitori, considerate che le andremo a riempire con le nostre caratteristiche preferite
  2. Decidiamo che tipo di layout vogliamo per le nostre pagine ad esempio: 1,2,3 o addirittura 4 colonne, tipo fluido o fisso
  3. Vediamo cosa piace agli utenti di un blog

Cosa piace agli utenti di un blog?

Da studi effettuati su internet si è rivelato che gli utenti dei blog sono i migliori lettori del web, ma ogni cosa ha il rovescio della sua medaglia, gli utenti dei blog sono anche quelli che perdono la pazienza più velocemente.

Un utile consiglio viene anzitutto dato nella scelta del font del blog, non pensate minimamente ad un font complesso finirete con pochissimi utenti in quanto gli articoli verrebbero difficili da leggere e gli utenti hanno poca pazienza.

La lunghezza delle righe è un’altro fondamentale passo nel mondo dell’accessibilità se le righe sono troppo lunghe ed il blog è privo di immagini un’utente ci penserà più volte a cominciare la lettura.

La grandezza del font viene considerata anche moltissimo dagli utenti ma direi che non è fondamentale in quanto più il font è chiaro ed il tratto è semplice più la grandezza può essere minore (io uso addirittura 11px con font Verdana).

Detto questo andiamo a svuotare tutte le caratteristiche del CSS.

Cosa avremo come risultato?

/*
Theme Name: Nome del Tema

Theme URI: http://sitoincuièusatoiltema.it

Description: Tema realizzato da me

Version: 1.0 BETA

Author: Tuo nome

Author URI: http://sitopersonaleautore.com

*/
#sidebar
{

}

#footer
{

}

body
{

}

Ecco fatto!

Il CSS vuoto con solo le caratteristiche principali dei contenitori a loro volta vuote.

Spero non guardiate l’anteprima del vostro blog adesso perchè ne uscireste orribilati.

Iniziamo prendendo delle decisioni importanti

Il Layout del nostro sito

Non abbiamo ancora deciso come vogliamo in realtà il nostro blog io ho optato per un 2 colonne fisso con la sidebar a sinistra, potreste anche dire che è molto scontato ma a me piace così, sono per la semplicità e la funzionalità.

Allora vado a mettere le prime regole CSS nel mio foglio di stile

Cosa metto? Vediamolo assieme

/*
Theme Name: Nome del Tema

Theme URI: http://sitoincuièusatoiltema.it

Description: Tema realizzato da me

Version: 1.0 BETA

Author: Tuo nome

Author URI: http://sitopersonaleautore.com

*/

#sidebar
{
float: left;
width: 100px;
}

#footer
{
clear: both;
}

body
{
font-size: 11px;
line-height: 15px;
font-family: Verdana, Sans-serif;
margin: 20px;
}

Cosa ho fatto con queste regole?

Ho anzitutto messo la barra laterale (sidebar) a sinistra (float:left) e l’ho dimensionata a 100 pixel (width:100px) ,ho fatto in modo che il piè di pagina stesse al centro e non creasse problemi all’allungamento delle colonne content e sidebar (clear:both) ed infine ho dato delle caratteristiche ancora molto scarne al body della pagina, mi sono limitato al la grandezza del font (font-size:11px) , altezza della linea di scrittura (line-height:15px) , tipo di font (font-family:Verdana) ed ho applicato un margine generale(margin:20px).

Per oggi può bastare.

Cosa faremo nel prossimo articolo.

Nel prossimo articolo vedremo come dare delle caratteristiche più avanzate al nostro layout e daremo uno sguardo al div content ad al loop, una parte fondamentale del blog, cercheremo di vedere cosa guardano i motori di ricerca nelle pagine web e renderemo il nostro blog più “appetibile” ai loro spider.

Alla prossima!

No Comments

Send your comment for the article

No comments yet.

Leave a comment