Spaghetti Wordpress

Sebbene l’ultimo post su come inserire un pulsante per la stampa di una pagina abbia qualche problema che ancora deve essere risolto, il blog non si ferma, e quindi procediamo con un nuovo post di argomento simile al precedente, ovvero come creare un foglio di stile personalizzato per stampare i post del vostro blog.

Forse vi chiedete perchè dovreste creare uno stile appositamente per la stampa. Beh, non è certo obbligatorio, ma è un favore che i vostri lettori apprezzeranno sicuramente se il vostro blog è basato su un tema bellissimo da vedere sullo schermo del computer, ma poco pratico da stampare. Se, per esempio, il vostro tema ha lo sfondo nero e le scritte bianche, la stampante dei vostri lettori potrebbe mettersi a piangere, e voi non volete che questo accada, vero?

Inoltre perchè i vostri lettori dovrebbero stampare anche alcuni elementi che non c’entrano con il contenuto vero e proprio del post, come per esempio la sidebar, il footer? Difficilmente riusciranno a cliccare sugli Adsense sulla carta, quindi perchè disturbarne la lettura?

Di seguito quindi alcuni consigli su come creare uno stile personalizzato per la stampa, iniziamo!

#1. Come creare un file CSS per la stampa (print stylesheet)?

Semplicemente create attraverso un normale editor di testo, anche Notepad va bene, un file css e salvatelo con il nome print.css . Questo file verrà utilizzato per creare lo stile per la stampa. All’interno di questo file non dovrete riscrivere tutto il css per il vostro template, ma solamente modificare le parti già esistenti che verranno sovrascritte al vostro foglio di stile originale (style.css) nel momento della stampa.

#2. Quali elementi sono utili per la stampa?

Qui il discorso è un po’ personale, cioè dipende molto dal template del vostro blog. In generale la parte da stampare dovrebbe essere solamente quella relativa al contenuto del post, mentre tutte le parti superflue, come header, sidebar, footer e immagini non dovrebbero entrare nella stampa.

Ovviamente ogni blog è diverso dagli altri, quindi non c’è una soluzione uguale per tutti.

E molto dipende dal vostro tema, che dovrete studiare bene (se non lo avete creato voi) prima di capire quali elementi devono essere modificati e quali no. In particolare vi consiglio di concentrarvi sulla  struttura dei div per capire quali elementi non mostrare nella stampa usando semplicemente i comandi CSS.

#3. Come eliminare gli elementi non necessari alla stampa usando i CSS

Per eliminare gli elementi non necessari dovrete utilizzare il file print.css che avete appena creato per modificare il vostro template. Il comando che più vi sarà utile in questo caso sarà display: none; grazie al quale potrete far scomparire dalla stampa tutti quegli elementi superflui al contenuto.

Un esempio che potreste usare, se il vostro tema comprende 4 div per header, content, sidebar e footer, sarebbe il seguente:

#header, #sidebar, #footer { display: none; }

in questo modo questi 3 div non verranno mostrati ma solamente il div content che verrà stampato.

Inoltre potreste modificare lo sfondo e il colore del testo, rendendo il tutto nero su sfondo bianco, per migliorare la leggibilità. Usate quindi il seguente comando (sempre riferito al div content):

#content { background-color: white; color: black;}

In base al vostro template potreste fare altre modifiche, per esempio modificando il colore dei link, utilizzando semplici regole Css. Per un approfondimento sull’uso dei CSS, consiglio l’ottima guida online presso HtmlDog.

#4. Come inserire un print stylesheet nel tema di Wordpress

Ovviamente per far funzionare il tutto dovremo inserire un link al file Css per la stampa, che prima avremo caricato sul server dove si trova Wordpress, all’interno del nostro template. Aprite quindi il file header.php dove dovreste trovare la seguente linea di codice:

<link type="text/css" media="screen" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" />

Questa linea di codice dice a Wordpress dove trovare il foglio di stile che deve essere utilizzato per la visualizzazione sullo schermo dei computer (grazie al comando media=”screen”). Per dire a Wordpress di usare il nuovo file per la stampa, aggiungiamo subito dopo questa simile linea di codice:

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

Questa crea un link al nostro file print.css e attraverso il comando media=”print” specifica che debba essere usata solamente in caso di stampa della pagine e non per la visualizzazione sullo schermo.

Ora non rimane altro che utilizzare la vostra creatività per creare pagine per la stampa ottimizzate e che rendano la lettura dei vostri post facile e gradevole. Alla prossima!