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

Il file style.css: elenchi, sidebar e widget

Impariamo a creare e a stilizzare alcune componenti importanti di un tema per WordPress come per esempio gli elenchi, la sidebar e i widget e il footer. Definendo correttamente il file style.css è possibile ottenere un risultato ottimale dal punto di vista della resa grafica cross browser rispettando nel contempo i dettami del responsive design.
Impariamo a creare e a stilizzare alcune componenti importanti di un tema per WordPress come per esempio gli elenchi, la sidebar e i widget e il footer. Definendo correttamente il file style.css è possibile ottenere un risultato ottimale dal punto di vista della resa grafica cross browser rispettando nel contempo i dettami del responsive design.
Link copiato negli appunti

In questa lezione analizziamo le classi css che servono a dare forma a elenchi di pagine e tassonomie, sidebar e widget. Le ultime dichiarazioni per completare il file style.css.

La navigazione delle pagine

Le funzioni di WordPress che producono mark-up sono diverse, alcune delle quali assegnano una o più classi agli elementi generati. Tra queste, wp_page_menu genera una div di classe menu contenente la lista non ordinata delle pagine:

wp_page_menu( 'show_home=1&exclude=56&menu_class=page-navi&sort_column=menu_order' );

Tra i parametri passati alla funzione, menu_class permette di sovrascrivere la classe menu, assegnata di default al container. L'output inviato al browser è strutturato come segue:

<div class="page-navi">
	<ul>
		<li><a href="http://example.com/">Home</a></li>
		<li class="page_item page-item-2">
			<a href="http://example.com/pagina-di-esempio/">Pagina di esempio</a>
		</li>
		<li class="page_item page-item-4 current_page_item">
		<li class="page_item page-item-4 page_item_has_children current_page_item">
			<a href="http://example.com/nuova-pagina/">Nuova Pagina</a>
			<ul class="children">
				<li class="page_item page-item-56">
					<a href="http://example.com/nuova-pagina/pagina-figlio/">Pagina figlio</a>
				</li>
			</ul>
		</li>
	</ul>
</div>

Quello che segue è l'elenco delle classi generate da wp_page_menu:

.menu {}			/* can be overwitten by menu_class parameter */
.page_item {}			/* single list item */
.page-item-{id} {}		/* specific list item */
.page_item_has_children {}	/* parent list item */
.current_page_item {}		/* active list item */
.children {}			/* unordered child list */

La funzione wp_list_pages genera una lista pressoché identica alla precedente, con la sola differenza che gli elementi dell'elenco non vengono inseriti in una div, ma in un elemento li di classe pagenav:

<li class="pagenav">
Pagine
	<ul>
		...
	</ul>
</li>

L'elenco completo dei selettori è reperibile nello "zip" allegato all'articolo .

Gli elenchi di categorie

Seguendo lo stesso schema degli elenchi di pagine, la funzione wp_list_categories genera un list item contenente una o più liste annidate, i cui elementi individuano le categorie o qualsiasi tassonomia registrata. Queste le classi generate dal framework:

.categories {}		/* or any registered taxonomy */
.cat-item {}
.cat-item-{id} {}
.current-cat {}
.current-cat-parent {}
.children {}

Se alla funzione wp_list_categories viene richiesta una tassonomia, al list item esterno sarà assegnato un nome di classe corrispondente al nome della tassonomia.

Le sidebar e i widget

Per WordPress una sidebar non è letteralmente una barra laterale, ma un'area destinata ad accogliere widget, ossia blocchi di codice HTML generati dinamicamente. WordPress dispone di una dozzina di widget predefiniti, i quali generano elenchi di categorie, articoli recenti, tag, pagine, menu personalizzati, ed altro ancora. Una sidebar viene inserita nel tema grazie alla seguente funzione:

<?php dynamic_sidebar( 'sidebar-primary' ); ?>

La funzione dynamic_sidebar() manda a video la sidebar-primary, che sarà definita più avanti nel file functions.php. La sidebar così generata viene popolata di widget dalla pagina di amministrazione "Aspetto > Widget". Ognuno di questi ha una precisa struttura HTML, e ai rispettivi elementi vengono assegnati classi e id che permettono di selezionarli agevolmente.

Figura 1. I widget vengono aggiunti alla sidebar con una semplice operazione di drag & drop.
Assegnazione dei widget alla sidebar

Due nomi di classe sono comuni a tutti i widget:

.widget {}	/* widget container */
.widgettitle {}	/* widget title */

La prima classe viene assegnata alla div esterna, mentre la seconda all'elemento h2 che racchiude il titolo. Si deve sottolineare che sia le classi widget e widgettitle, che l'elemento h2, possono essere sostituiti con nomi di classe ed elementi HTML personalizzati, come si vedrà più avanti in questa guida. Alla div esterna, oltre alla classe widget, viene assegnata una classe specifica per il tipo di widget:

.widget_categories {}
.widget_recent_comments {}
.widget_calendar {}
.widget_recent_entries {}
.widget_archive {}
.widget_nav_menu {}
.widget_pages {}
.widget_text {}
.widget_tag_cloud {}
.widget_rss {}
.widget_meta {}
.widget_search {}

I contenuti dei widget vengono generalmente visualizzati all'interno di liste non ordinate, a meno che non si tratti di elementi specifici, come il calendario e il box di ricerca. Per il tema "seventyone", che si sta sviluppando in questa guida, sono state impostate le dimensioni generali dei widget con la seguente dichiarazione:

.widget {
	line-height: 2;
	margin-bottom: 2em;
	width: 100%;
}

L'aspetto del calendario viene invece stabilito dai seguenti blocchi:

.widget_calendar table {
	width: 100%;
	line-height: 2;
	margin: 0;
}
.widget_calendar caption {
	color: #fff;
	font-weight: 700;
	line-height: 1.7142857142;
	margin-bottom: 18px;
	text-align: left;
	text-transform: uppercase;
}
.widget_calendar tbody {
	border-bottom: 1px solid rgba(57, 114, 73, 0.6);
	border-top: 1px solid rgba(57, 114, 73, 0.6);
}
.widget_calendar tbody td,
.widget_calendar thead th {
	text-align: center;
}
.widget_calendar tbody a {
	background-color: rgba(199, 225, 186, 0.6);
	display: block;
}
.widget_calendar tbody a:hover {
	background-color: #c7e1ba;
	color: #000;
}
.widget_calendar #prev {
	padding-left: 5px;
}
.widget_calendar #next {
	padding-right: 5px;
	text-align: right;
}

Figura 2. Il widget Calendar.
Calendar widget

Nel box di ricerca viene, infine, nascosto il pulsante di invio:

/* Search Widget*/
.widget_search input[type="submit"] {
	visibility: hidden;
	display: none;
}

Potrebbe sembrare che la progettazione delle sidebar, e soprattutto dei widget, comporti un gran lavoro di codifica CSS. Eppure, a ben guardare, dal punto di vista strutturale i widget non si differenziano molto l'uno dall'altro. Il numero consistente di classi potrà essere un utile strumento per rifinire e differenziare, ma l'aspetto base potrà essere definito con dichiarazioni di carattere generale:

.widget li {}			/* all list items */
.widget li li {}		/* nested list items */

Nello "zip" allegato è disponibile l'elenco completo dei selettori degli elementi che compongono i widget predefiniti.

Il piè di pagina può ospitare diverse informazioni: un menu di navigazione alternativo, disclaimer e informazioni di copyright, collegamenti a social network ed anche un form per un contatto rapido. Grazie ai widget, è possibile inserire e modificare queste informazioni direttamente dal pannello di amministrazione. Chi sviluppa il tema potrà, quindi, prevedere una nuova sidebar.

Figura 3. Aggiungere sidebar al tema dal pannello di amministrazione
Aggiungere sidebar

Al foglio di stile si aggiungano, quindi, i due seguenti blocchi di dichiarazioni:

#footer-sidebar {
	border-bottom: 1px solid black;
	border-top: 1px solid black;
	overflow: hidden;
	width: 100%
}
#footer-sidebar .widget {
	margin-right: 0.52083335%;
	margin-left: 0.52083335%;
	padding: 0.52083335%;
	width: 22.9166666%;
	float: left;
	background-color: #eee;
}

Gli elementi div.widget sono affiancati a sinistra con la proprietà float. Un problema dei layout basati sui float è che i contenitori collassano su se stessi se non opportunamente progettati. In questo caso si è fatto ricorso ad una tecnica poco nota, ma perfettamente cross-browser. Il primo blocco di dichiarazioni, quindi, permetterà al contenitore #footer-sidebar di non collassare, e i blocchi interni ed esterni saranno resi correttamente. Il secondo blocco assegna le dimensioni ai widget e li affianca l'uno all'altro.

Figura 4. Rendering del tema su Opera per (Mac) OS X
Rendering del tema

Nella figura qui sopra, i bordi della #footer-sidebar e gli sfondi dei widget hanno il solo scopo di evidenziare il comportamento del browser, e possono essere resi nei colori più opportuni.

Rendere responsive la sidebar

L'ultimo task consiste nel rendere responsive la sidebar del footer. Se nel layout generale si è voluto dare ai singoli widget una larghezza pari a circa il 25% dell'area disponibile, su schermi di dimensioni inferiori sarà opportuno ridimensionarli. Ad esempio, se la finestra del browser ha una larghezza in pixel compresa tra i 640 e gli 800, i widget potrebbero occupare ognuno la metà (circa) della larghezza del contenitore:

@media screen and (min-width: 641px) and (max-width: 800px) {
	#site-footer {
		width: 100%;
	}
	#footer-sidebar .widget {
		width: 47.9166666%;
		float: left;
	}
}

Figura 5. Sidebar a fondo pagina su Chrome in una finestra 800*640px
Sidebar a fondo pagina su Chrome

Infine, per gli schermi di dimensioni inferiori a 640px, ogni widget dovrà estendersi su tutta la larghezza disponibile:

@media screen and (max-width: 640px) {
	...
	#sidebar {
		float: left;
		width: 100%;
		margin-right: 0;
	}
	#site-footer {
		width: 100%;
	}
	#footer-sidebar .widget {
		width: 97.9166666%;
		float: none;
	}
	...
}

Figura 6. Sidebar a fondo pagina su Chrome in una finestra inferiore ai 640px
Sidebar a fondo pagina su Chrome

Il foglio di stile del tema seventyone è ora completo ed è disponibile nello "zip" allegato all'articolo dove sarà possibile reperire anche l'elenco dei selettori descritti.

Riferimenti

In questo capitolo si è fatto riferimento alle seguenti risorse:

Ti consigliamo anche