Guida: una impaginazione alternativa per stampare il blog

Qualhe settimana fa ho pubblicato una breve guida per facilitare la vita a chi vuole stampare gli articoli del nostro blog. In uno dei commenti a quel post Eugenio nota:

l’ho provato, ma differenza di questo sito sul mio, stampa anche le due sidebar di DX e SX, che sarebbe meglio eliminare nella stampa.

Quello che Eugenio vorrebbe fare, in sintesi, è realizzare una impaginazione alternativa del blog solo per la versione a stampa. E’ una cosa che si può fare abbastanza facilmente, semplicamente aggiungendo un nuovo foglio di stile (CSS) opportunamente modificato.

In questo post, ispirato da un articolo in inglese di HackWordPress, vediamo come fare.

Pronti?

Cos’è un Foglio di Stile per la Stampa?

Si tratta di un Foglio di Stile (CSS) che viene utilizzato dal blog e dal browser solo quando qualcuno cerca di stampare una pagina del tuo sito. Per indicare che venga usato solo per la stampa si utilizza un marcatore specifico nel tag html che lo richiama (media="print"). Ma di questo non devi preoccuparti: lo troverari pronto da copiare e incollare al termine del post.

Come funziona?

Si tratta di un foglio di stile che contiene istruzioni che “sovrascrivono” o che “sostituiscono” le relative istruzioni contenute nel file style.css (il foglio di stile principale di WordPress, responsabile della visualizzazione a schermo).

Se un foglio di stile per stampare è creato in modo corretto chi stamperà un pagina del tuo blog non troverà sulla carta gli elementi superflui (per esempio le barre laterali o i banner pubblicitari).

Come realizzare un foglio di stile per la stampa

La prima cosa da fare è creare il tuo foglio print.css per la stampa. Puoi utilizzare il blocco note o qualsiasi editor di solo testo. In alternativa (e forse ancora meglio) puoi copiare il tuo style.css e rinominarlo.

Che cosa mettere nel CSS

In base al tema del tuo WordPress questa fase può rivelarsi estremamente semplice oppure più complessa. Essenzialmente vogliamo fare in modo che non appaiano cose tipo intestazione, piè di pagina, barre laterali, e così via.

Devi quindi inserire nel print.css le istruzioni per “nascondere” questi elementi:

#header, #nav, #sidebar, #footer .noprint {display: none;}

Come dicevo, in funzione del tuo tema e dei “<div>” che utilizza per marcare le varie sezioni della pagina, i nomi dei marcatori possono variare.

In sintesi: usa questo come una guida da personalizzare in funzione del tuo layout. Puoi utilizzare questo metodo anche per nascondere immagini e ogni altro elemento indesiderato.

Successivamente può essere una buona idea espandere il contenuto in modo che occupi l’intera pagina stampata (abbiamo eliminato la barra laterale, ricordi? non è proprio il caso si sprecare quello spazio ora libero). Le istruzioni da inserire saranno probabilmente simili a queste:

#content {width: 100%; margin: 0; float: none;}

Ora passiamo ai colori: la gente quasi sempre stampa in bianco e nero, inoltre spesso le impostazioni dei browser prevedono che i colori di sfondo vengano “esclusi” dalla stampa. E’ importante quindi che il testo dei post sia in nero, così come quello dei link. Per fare ciò usa la diuirettiva color, per esempio:

a:link, a:visited {color: #000000}

…e siamo quasi alla fine della nostra avventura…

Come dire al tuo Tema di usare questo CSS per la stampa

Innanzitutto devi caricare il print.css nella stessa cartella del tuo tema, dove già cìè style.css.

Fatto questo devi semplicemente copiare e incollare nel file header.php del tuo tema il codice seguente (di solito subito dopo la riga simile che richiama il file style.css):

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

Ecco fatto… ora lanciando la stampa del tuo blog dovresti vedere la differenza… puoi continuare a ritoccare le cose fino a che non sei soddisfatto e poi… beh vale la pena farlo sapere a tutti con un bel post sul blog 😉

3 commenti:

  1. Ciao, era quello che cercavo ma data la mia ignoranza sono riuscito a farlo funzionare solo a metà… ho tolto l’header ed il main menù ma le sidebar continua a stamparle… nel mio css non ho #sidebar ma iniziano con .sidebar all’interno di #page… ho provato un pò di soluzioni ma non ci riesco proprio… qualcuno saprebbe aiutarmi?

  2. Scusate, ho risolto andando a mettere “display: none” al posto di “inline” direttamente nella parte dedicata alle sidebar e non in testa al css. Non so se è la soluzione giusta ma funziona.

Rispondi