WordPress: impostare un foglio di stile per la stampa

I fogli di stile per la stampa sono un utile strumento per permettere agli utenti di stampare i contenuti del nostro sito. Aggiungere un foglio di stile per la stampa in WordPress è un'operazione molto semplice. La parte sicuramente più complessa è la definizione degli stili.

Ci sono due modi per includere un foglio di stile per la stampa:

  1. Aggiungere gli stili per la stampa nel file CSS principale del tema.
  2. Creare un foglio di stile separato.

Il primo modo è il seguente:


<link rel="stylesheet" type="text/css" media="screen, print" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Il secondo modo può essere implementato come segue:


<link rel="stylesheet" type="text/css" media="print" href="<?php echo get_template_directory_uri() . '/css/print.css'; ?>" />

Con il primo approccio occorre creare una sezione per la stampa all'interno del file CSS principale:


@media print {
	/* stili qui */
}

Il secondo approccio invece non necessita di questo accorgimento. Quando si definiscono degli stili per la stampa occorre:

  • Eliminare gli elementi di navigazione e gli elementi secondari (menu, widget, colonne ecc.).
  • Eliminare il floating ed il posizionamento degli elementi.
  • Impostare uno sfondo bianco con testo nero per tutti gli elementi, compresi i link.
  • Usare font serif.
  • Usare misure per la stampa, come i punti (pt).
  • Reimpostare la larghezza degli elementi in maniera che siano adatti alla stampa.
  • Gestire le immagini.

La soppressione degli elementi si attua con la proprietà display:


#navigation,
#search,
#sidebar,
#footer .widget,
.post .post-meta {
	display: none;
}

Per il floating ed il posizionamento possiamo usare:


*,
div[class],
div[id],
img {
	float: none !important;
	position: static !important;
}

oppure regole più specifiche. I colori e i font vengono impostati in modo analogo:


body {
	background: #fff;
	color: #000;
	font: 14pt/20pt 'Times New Roman', serif;
}

a:link,
a:visited {
	color: #000;
	background: transparent;
}

Per i link possiamo utilizzare il contenuto generato per visualizzare l'URL:


a[href^="http://"]:after {
	content: attr(href);
	padding: 0 4pt;
}

La larghezza degli elementi è facilmente reimpostabile:


#content,
div.post {
	width: auto;
	max-width: 100%;
}

Le immagini sono un capitolo a parte. Esse si dividono in:

  • Immagini che fanno parte del contenuto.
  • Immagini decorative.

Nel primo caso è sufficiente che le immagini non superino la larghezza del contenitore:


img {
	display: block;
	max-width: 100%;
}

Nel secondo caso invece dobbiamo sia considerare le immagini inserite nella marcatura sia quelle generate dai CSS:


img[class*="smiley"],
*[class^="icon"] {
	display: none;
}

Le immagini decorative andrebbero sempre soppresse.

Torna su