Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 7 di 33
  • livello avanzato
Indice lezioni

Il file style.css: intestazione e layout della pagina

Come agire sul file style.css,il foglio di stile principale di un tema per WordPress nonché il file che fornisce le informazioni per il funzionamento del tema, in modo da definire intestazione e layout di pagina. Dall'analisi dei metadati fino all'adattamento del layout per i display di dimensioni differenti (Responsive Design).
Come agire sul file style.css,il foglio di stile principale di un tema per WordPress nonché il file che fornisce le informazioni per il funzionamento del tema, in modo da definire intestazione e layout di pagina. Dall'analisi dei metadati fino all'adattamento del layout per i display di dimensioni differenti (Responsive Design).
Link copiato negli appunti

Il file style.css non è solo il foglio di stile principale del tema, è anche il file che fornisce a WordPress tutte le informazioni necessarie al corretto funzionamento del tema stesso. Queste informazioni sono contenute in un'intestazione sotto forma di commento e sono strutturate come coppie chiave/valore, definite seguendo le regole indicate nella File Header Specification.

La seconda parte del file contiene le dichiarazioni CSS che permettono di creare la veste grafica del sito. WordPress genera numerosissimi nomi di classi CSS che vengono assegnati automaticamente agli elementi che compongono le pagine del front-end. Una volta noti i nomi delle classi, sarà agevole definire con precisione le caratteristiche grafiche di ogni elemento della pagina.

L'intestazione del file

Quelli che seguono sono i metadati che possono comporre l'intestazione del file style.css:

Chiave Descrizione
Name il nome del tema
ThemeURI la URI della home page del tema
Description la descrizione del tema
Author l'autore del tema
AuthorURI il sito web dell'autore
Version la versione corrente
Template previsto solo per i child themes, indica la directory del parent theme (obbligatorio)
Status indica se il tema è pubblicato
Tags etichette utilizzate per descrivere il tema
TextDomain il text domain utilizzato per la localizzazione
DomainPath il percorso ai file contenenti le traduzioni

La lista proposta non è tassativa e altre coppie chiave/valore possono essere aggiunte all'elenco. Quello che segue è invece un esempio di intestazione:

/*
Theme Name: Seventy One Theme
Theme URI: http://example.com
Description: A basic theme for HTML.it readers
Author: Carlo Daniele
Author URI: https://www.linkedin.com/in/carlodaniele
Version: 0.1
*/

Queste stesse informazioni saranno visibili nel pannello di amministrazione, nella scheda "Dettagli Tema" della pagina "Aspetto > Temi".

Figura 1. Dettagli del tema
Dettagli del tema

Si passa poi alla dichiarazione degli stili. Non è strettamente necessario, ma, prima di creare i propri stili, è una buona abitudine azzerare gli stili predefiniti dei browser. A tal scopo, in questa guida si è fatto ricorso al Reset CSS di Eric Meyer.

Il layout delle pagine

Dopo aver azzerato gli stili predefiniti, si passa alla progettazione della presentazione del sito, con la creazione del layout.
Si vedrà più avanti come generare il markup, ma già da ora si può definire il seguente schema:

<div id="page" class="site">
	<header id="site-header" class="site-header" role="banner">
		<h1 class="site-title"> ... </h1>
		<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
			<div class="menu-main-menu-container">
				<ul id="menu-main-menu" class="nav-menu"> ... </ul>
			</div>
		</nav>
	</header>
	<div id="main-content" class="main-content">
		<div id="content" class="content-area" role="main"> ... </div>
	</div>
	<aside id="sidebar">
		<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> ... </div>
	</aside>
	<footer id="site-footer" class="site-footer" role="contentinfo"> ... </footer>
</div>

La div#page esterna costituisce il contenitore generale. I blocchi interni sono costituiti dall'elemento header, contenente il titolo del sito e il menu principale di navigazione, dalla div#main-content, che ospita i contenuti, dall'elemento aside, che ospita la sidebar principale e, infine, dall'elemento footer, che ospiterà una diversa sidebar e le informazioni di copyright.

Figura 2. Struttura del layout
La struttura del tema

Definita la struttura, si può procedere alla creazione del layout. Nel foglio di stile andranno aggiunte le seguenti istruzioni:

#page {
	margin: 0 auto;
	width: 90%;
	max-;
}
#site-header {
	margin: 0 1.0416667%;
	padding-top: 2.7659574%;
	width: 97.9166667%;
}
#primary-navigation {
	margin-top: 2.7659574%;
	margin-bottom: 2.7659574%;
	width: 100%;
}
#main-content {
	margin-right: 1.0416667%;
	float: right;
	width: 72.7083333%;
}
#sidebar {
	border-right: 2px solid #e8e8e8;
	margin-right: 1.0416667%;
	margin-left: 1.0416667%;
	padding-right: 1.0416667%;
	float: left;
	width: 22.7083333%;
}
#site-footer {
	float: left;
	margin: 2.7659574% 1.0416667% 1.0416667% 0;
	clear: both;
	width: 97.9166667%;
}

Come è possibile notare, sono state utilizzate unità di misura relative per fare in modo che il layout sia flessibile e si adatti alla dimensione dello schermo. Il blocco #main-content occupa il 72% circa dell'area disponibile, mentre la barra laterale occupa il 22%. Le proporzioni vanno ora adattate agli schermi di dimensioni inferiori:

@media screen and (max-) {
	#main-content {
		float: left;
		width: 97.9166667%;
	}
	#sidebar {
		float: left;
		width: 97.9166667%;
	}
}

Definito il layout generale, si passa alla progettazione grafica degli elementi della pagina. Nei prossimi capitoli si vedrà, quindi, come definire l'aspetto dei singoli elementi delle pagine, sfruttando principalmente le classi generate da WordPress.

Riferimenti e conclusioni

Come in precedenza, anche in questo capitolo si è ampiamente fatto riferimento al Codex di WordPress, in particolare sono state seguite le linee guida delle seguenti risorse:


Ti consigliamo anche