Wordpress: creare un file style di un template

Il file style.css definisce gli stili CSS principali che andranno a formattare il nostro template. Tale file ha anche la funzione di visualizzare le informazioni specifiche sul nostro tema. In questo articolo vi fornirò alcuni consigli per realizzare un layout a partire dalla struttura HTML creata negli altri file.

Struttura delle directory

La struttura delle directory apparirà ora così:

|-- tuotemplate
|   -- images
|   style.css

Nella cartella images possiamo sia conservare i file grafici per il nostro CSS che altre immagini da usare nel nostro template.

Metadati

Il nostro file CSS dovrà necessariamente cominciare con i seguenti metadati inseriti tra commenti:


/*
 Theme Name: Nome del template
 Theme URI:  URL alla pagina di descrizione del template
 Description: Descrizione del template
 Author: Autore del template
 Author URI: Sito dell'autore del template
 Version: Versione del template
 Tags: Lista di tag separati da virgole
 License: Licenza d'uso del template (es. GNU/GPL Version 2)
 License URI: Link alla pagina della licenza (es. http://www.gnu.org/licenses/gpl.html)
*/

I metadati inseriti saranno usati da Wordpress per generare la descrizione e le informazioni da visualizzare nella pagina dei temi.

Screenshot

Nella stessa directory del template dobbiamo inserire un'immagine PNG o JPEG chiamata screenshot. Questa immagine deve avere le dimensioni di 300 x 225 pixel e sarà usata da Wordpress come immagine del tema nella pagina dei temi.

Resettare gli stili

Potete resettare gli stili predefiniti dei browser all'inizio del vostro foglio di stile:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, img, strong, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

Questo vi permetterà di avere più controllo sul layout.

Consigli sugli stili CSS

  1. Analizzate la struttura HTML dei file PHP e annotatela a parte.
  2. Cominciate dagli elementi più generici ed esterni e andate via via ad asssegnare stili più specifici agli elementi più interni.
  3. Dopo il punto 1, sicuramente vi può essere d'aiuto creare dei bozzetti grafici del vostro layout.
  4. Per le immagini di sfondo, ricordate che il percorso è relativo alla vostra directory /images, quindi avrete url(images/immagine.png).
  5. Create delle classi generiche che vi permettano di assegnare più stili agli elementi.
  6. Usate cascata e specificità per assegnare stili particolari ad elementi e pagine.
Torna su