Come rendere il tuo sito WordPress stampabile in pochissimo tempo

Il tuo sito Web WordPress è compatibile con la stampante? Se non hai idea di cosa stia arrivando quella domanda, potrebbe non essere ...

Mentre alcuni sviluppatori di temi WordPress integrano il supporto per i contenuti stampabili, la maggior parte delle volte non è così. E questo significa che se vuoi che le persone siano in grado di stampare i tuoi contenuti in un modo che sia effettivamente leggibile, dovrai prendere le cose nelle tue mani... che è ciò di cui parlerò oggi.

In questo post imparerai cosa rende un sito Web facile da stampare e come puoi rendere il tuo sito Web WordPress compatibile con la stampante utilizzando CSS o un plug-in.

Cosa rende un sito web stampabile?

Il tuo sito web ha tonnellate di elementi che rendono facile per le persone navigare in tutto il tuo sito. Menu di navigazione, collegamenti ipertestuali interni, barre laterali... tutto ciò è utile per le persone che visitano il tuo sito su Internet perché consente loro di trovare nuove informazioni e spostarsi tra le diverse pagine.

Ma quando si tratta di stampare un contenuto specifico dal tuo sito, quegli elementi si frappongono. Pensaci... le persone non possono fare clic sul menu di navigazione o interagire con la barra laterale sulla pagina stampata, quindi far stampare loro il menu di navigazione superiore non è particolarmente utile quando leggono i tuoi contenuti su un pezzo di carta.

Inoltre, a volte i caratteri e le dimensioni dei caratteri utilizzati sul tuo sito web non si adattano bene alle dimensioni della pagina stampata.

E infine, molte persone stamperanno i tuoi contenuti in bianco e nero (e l'inchiostro a colori è costoso!), Quindi adottare un aspetto più in scala di grigi per i tuoi contenuti stampabili è sempre una buona idea.

Per questo motivo, rendere il tuo sito Web compatibile con la stampante comporta principalmente:

• Modifica di caratteri, dimensioni e spaziatura per rendere le cose più facili da leggere su una normale dimensione di pagina
• Rimozione di elementi estranei come annunci, navigazione e barre laterali che non sono utili su una pagina stampata
• Colori smorzanti se usi molti elementi non in bianco e nero

Quindi come puoi farlo davvero? Scopriamolo…

Come rendere il tuo sito web stampabile con CSS

Nella prossima sezione, ti mostrerò alcuni plugin di WordPress che possono aiutarti a rendere il tuo sito compatibile con la stampante senza dover scavare in alcun CSS. Ma se vuoi avere il pieno controllo sull'aspetto della versione della stampante del tuo sito, puoi effettivamente utilizzare i selettori multimediali per modellare la versione di stampa della tua pagina.

Il blocco base CSS per i tuoi contenuti stampabili è questo:

 @stampa media {
/* Gli stili specifici della stampante vanno qui */
}

Qualsiasi stile CSS che aggiungi a questa dichiarazione multimediale influirà solo sulla versione stampata della tua pagina.

Dove vai da lì? Bene, è difficile dare una risposta esatta perché molto dipende dalle tue preferenze e dal tuo tema specifico.

Ma in generale, ecco alcune delle cose che vorrai fare con i CSS:

• Usa display:none per rimuovere elementi come barre laterali, menu di navigazione, moduli di ricerca e qualsiasi altra cosa che non sia utile sulla pagina stampata.
• Imposta una dimensione del carattere leggibile. Il grafico da punti a pixel di Reed Design è utile per capire come i pixel si riferiscono alle dimensioni dei caratteri con cui hai familiarità in programmi più stampabili come Microsoft Word o Google Docs.
• Usa un font serif per gli stili della tua stampante, poiché la maggior parte delle persone trova più facile leggere sulla pagina stampata.
• Cambia i colori, soprattutto se stai usando un colore di sfondo molto intenso. La maggior parte dei browser utilizza per impostazione predefinita uno sfondo bianco in molte situazioni, ma è bene assicurarsi perché qualsiasi problema può significare una tonnellata di inchiostro sprecato.

Facendo solo le quattro cose sopra, dovresti già avere un sito web abbastanza facile da stampare. Ma se vuoi andare ancora oltre, puoi anche implementare tattiche più avanzate. Ad esempio, puoi usare :after per stampare l'URL di qualsiasi link. Ciò rimuove i media non necessari dai post (come i video, non molto utili nella stampa) e altro ancora.

Se desideri alcuni esempi più specifici di stili CSS compatibili con la stampante in azione, un buon post da leggere è questo di Smashing Magazine perché attraversa un'intera pagina di esempio.

Alcuni plugin per WordPress per rendere il tuo sito stampabile

Se preferisci non sporcarti le mani con i CSS, puoi, come al solito, rivolgerti a un plugin di WordPress per chiedere aiuto. Hai un sacco di opzioni diverse, ma qui ci sono un paio di consigli.

Prima di iniziare, tuttavia, voglio sottolineare che questi plug-in funzionano solo quando gli utenti fanno clic sul pulsante Print This dedicato fornito da ciascun plug-in. Non influenzeranno lo stile della stampante del tuo sito se un utente passa direttamente all'opzione di stampa nel proprio browser.

WP-Stampa

WP-Print è un popolare plug-in gratuito per aiutarti a creare un sito WordPress facile da stampare. Oltre ad aggiungere un pulsante Stampa questo dedicato, il plug-in offre anche un'interfaccia intuitiva. Questo ti consente sempre di personalizzare molte delle impostazioni di cui ho discusso nella precedente sezione CSS.

Ero curioso di vedere come funziona questo plugin con Divi e Divi Builder. Quindi, ho creato un post di prova rapido per vedere come funzionano le cose. Ecco come appare la versione web del mio post di prova:

Ed ecco come appare la versione stampabile di quel post ( ricorda: puoi personalizzare il modo in cui funzionano le immagini: il mio esempio usa solo l'impostazione predefinita ):

Una cosa particolarmente bella del plugin è che aggiunge automaticamente citazioni per i link nel contenuto. Rimuove anche tutte le opzioni di navigazione.

Tieni presente che dovrai essere a tuo agio a scavare nei file modello del tuo tema per aggiungere il pulsante "Stampa questo" . È praticamente solo un lavoro di copia e incolla, ma i principianti potrebbero trovarlo un po' confuso.

Prezzo: gratuito | Maggiori informazioni

Stampa, PDF, e-mail tramite PrintFriendly

Prima di andare oltre, voglio guidare con l'avvertenza principale di questo plugin: la versione gratuita è supportata dalla pubblicità. Non è l'ideale... ma il plugin in sé è piuttosto carino e gli annunci non sono particolarmente invadenti.

Se questo non è un rompicapo o se sei disposto a passare a pro, continua a leggere...

Il plugin WordPress di PrintFriendly integra il servizio PrintFriendly nel tuo sito. Questo è un servizio interessante che, oltre a eliminare le parti estranee del tuo tema WordPress, offre anche ai tuoi utenti un certo controllo sull'aspetto della loro pagina stampata.

Come WP-Print, il plugin ti offre un pulsante di stampa. Quando viene cliccato, quel pulsante apre una finestra lightbox. Qui è dove gli utenti possono visualizzare in anteprima la versione di stampa, nonché regolare il dimensionamento dell'immagine e del testo:

Non ha la fantastica funzione di citazione dei link di WP-Print, ma penso che sia fantastico per il controllo che offre ai tuoi visitatori. E un'altra cosa bella è che rende anche facile per i lettori condividere o scaricare il tuo post come PDF o e-mail.

Prezzo: gratuito con supporto pubblicitario. La versione Pro parte da $ 4 al mese | Maggiori informazioni

Concludere le cose

Anche se è vero che la maggior parte dei tuoi visitatori consumerà i tuoi contenuti online, ciò non significa che dovresti ignorare completamente le persone che vogliono stampare i tuoi contenuti su carta. La creazione di un sito Web compatibile con la stampante è una cosa da fare una volta sola. E una volta installato, i visitatori possono stampare i tuoi contenuti secondo necessità pur continuando a vivere un'ottima esperienza.

Ora tocca a te: stampi mai contenuti da un sito web? Cosa ti piace e/o non ti piace delle versioni stampabili della maggior parte dei siti web?

Immagine in miniatura dell'articolo di AVIcon / shutterstock.com