CSS stampa articoli WordPress: foglio pulito

Un foglio di stile per la stampa in WordPress permette di trasformare un articolo web in una pagina ordinata, senza menu, banner, sidebar, pulsanti social o elementi pubblicitari inutili. Il CSS di stampa si applica solo quando l’utente stampa la pagina o la salva in PDF dal browser. Con un file separato, collegato al tema child, puoi mantenere intatto l’aspetto online e controllare margini, colori, immagini, link e interruzioni di pagina. Il metodo è compatibile con gli articoli WordPress, ma i nomi delle classi HTML cambiano da un tema all’altro.

Perché usare un foglio CSS per la stampa in WordPress

Il CSS stampa articoli WordPress serve a definire una versione specifica della pagina per la carta, distinta dal layout visualizzato sullo schermo. Un articolo progettato per il web spesso contiene elementi utili alla navigazione ma ingombranti sulla pagina stampata, come intestazione completa, menu, colonne laterali e moduli per i commenti.

Un foglio di stile dedicato può migliorare la leggibilità in diversi modi:

  • nasconde menu di navigazione, sidebar, footer complessi e pulsanti di condivisione;
  • rimuove sfondi, ombre, animazioni e decorazioni che consumano inchiostro;
  • amplia l’area occupata dal contenuto principale;
  • imposta margini e dimensioni del testo più adatti alla carta;
  • evita che titoli, immagini e paragrafi vengano spezzati in punti poco leggibili;
  • mantiene visibili i collegamenti importanti o ne mostra l’indirizzo.

Il browser applica le regole contenute in @media print quando l’utente seleziona la stampa, usa l’anteprima di stampa o crea un PDF tramite la funzione di stampa. Le impostazioni del browser, come la stampa dei colori di sfondo, possono comunque modificare il risultato finale.

Come creare un file CSS per la stampa con un tema child

Il metodo più ordinato consiste nel creare un file print.css all’interno del tema child. Il tema child evita che gli aggiornamenti del tema principale cancellino le personalizzazioni, a differenza della modifica diretta dei file del tema installato.

Passo 1: crea il file print.css

Accedi ai file del tema child tramite il gestore del tuo hosting, SFTP o un plugin per la gestione dei file. Nella cartella principale del tema child crea un file chiamato print.css.

Inserisci una base simile a questa:

@media print {
@page {
margin: 1.5cm;
}

html,
body {
background: #fff !important;
color: #000 !important;
font-family: Georgia, "Times New Roman", serif;
font-size: 11pt;
line-height: 1.5;
}

.site-header,
.site-footer,
.main-navigation,
.sidebar,
.widget-area,
.comments-area,
.share-buttons,
.advertisement,
.cookie-banner,
.back-to-top {
display: none !important;
}

.site-content,
.content-area,
.entry-content,
.article-content {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}

a {
color: #000 !important;
text-decoration: underline;
}

img,
figure,
table,
blockquote {
max-width: 100%;
}

h1,
h2,
h3 {
color: #000 !important;
page-break-after: avoid;
break-after: avoid;
}

p,
li,
blockquote {
orphans: 3;
widows: 3;
}
}

I selettori .site-header, .sidebar e .entry-content sono comuni, ma non universali. Il tema WordPress potrebbe usare classi diverse, quindi devi verificare il codice HTML della pagina con gli strumenti per sviluppatori di Google Chrome, Mozilla Firefox o Microsoft Edge.

Passo 2: collega il foglio al tema child

Apri il file functions.php del tema child e aggiungi una funzione che carichi il foglio soltanto per la stampa:

<?php
function backdigit_enqueue_print_styles() {
wp_enqueue_style(
'backdigit-print',
get_stylesheet_directory_uri() . '/print.css',
array(),
'1.0',
'print'
);
}
add_action('wp_enqueue_scripts', 'backdigit_enqueue_print_styles');

Il parametro finale print indica a WordPress di associare il foglio al tipo di supporto destinato alla stampa. Il file print.css deve trovarsi nella cartella principale del tema child; se viene collocato in una sottocartella, il percorso deve essere modificato.

Se il tema child carica già un foglio per la stampa, evita di registrare due volte le stesse regole. Dopo il salvataggio, svuota la cache del sito e quella del browser prima di verificare il risultato.

Come nascondere gli elementi inutili senza rimuovere il contenuto

La regola display: none elimina dalla versione stampata gli elementi indicati, ma non li rimuove dal sito né dalla pagina visualizzata normalmente. È quindi adatta per menu, barre laterali, pulsanti social, moduli di iscrizione, pubblicità e widget.

Per esempio, se il tema utilizza classi specifiche, puoi aggiungere:

@media print {
.top-bar,
.header-tools,
.post-meta .edit-link,
.post-navigation,
.related-posts,
.newsletter-box,
.social-sharing {
display: none !important;
}
}

Usa !important con moderazione, ma può essere necessario quando il tema assegna agli elementi una visibilità più forte o utilizza regole con una specificità maggiore. Non nascondere .entry-content o il contenitore principale dell’articolo: in caso contrario l’anteprima potrebbe mostrare una pagina vuota.

La sidebar deve essere nascosta insieme alle regole che limitano la larghezza del contenuto. Se rimuovi soltanto la colonna laterale, l’articolo potrebbe continuare a occupare una porzione ridotta del foglio. Le proprietà width, max-width, margin e padding del contenuto principale devono essere riportate a valori compatibili con l’intera pagina.

Come ottimizzare testo, immagini e pagine stampate

Un articolo stampato deve privilegiare contrasto e leggibilità. Il bianco e nero riduce i problemi causati da colori chiari, sfondi scuri e link poco visibili. La regola background: #fff non obbliga il browser a stampare gli sfondi, ma prepara il layout a una resa più pulita.

Per mostrare gli indirizzi dei link dopo il testo puoi usare questa soluzione:

@media print {
.entry-content a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 9pt;
overflow-wrap: anywhere;
}

.entry-content a[href^="#"]::after,
.entry-content a[href^="/"]::after {
content: "";
}
}

Questa regola può allungare molto le righe quando l’URL è lungo. Applicala solo agli articoli in cui i collegamenti stampati sono realmente utili, oppure limita il comportamento a una classe come .show-print-links.

Per evitare immagini troppo grandi, mantieni max-width: 100% e height: auto. Per immagini o figure che non devono essere separate dal relativo testo puoi usare:

@media print {
figure,
img,
pre,
table,
blockquote {
break-inside: avoid;
page-break-inside: avoid;
}

.print-only {
display: block !important;
}

.no-print {
display: none !important;
}
}

Le proprietà break-inside e page-break-inside aiutano a mantenere insieme i contenuti, ma il risultato dipende dal browser, dalla stampante e dalla struttura HTML. Tabelle molto lunghe possono comunque essere distribuite su più pagine.

Come testare il CSS di stampa in WordPress

Apri un articolo pubblicato e usa la funzione di stampa del browser, normalmente disponibile nel menu principale o tramite la scorciatoia da tastiera prevista dal sistema operativo. Controlla l’anteprima prima di inviare il documento alla stampante.

Verifica in particolare questi aspetti:

  • il titolo dell’articolo resta visibile e non viene tagliato;
  • il testo usa tutta la larghezza disponibile;
  • menu, sidebar, pubblicità e pulsanti non occupano spazio;
  • le immagini non escono dai margini;
  • i titoli non rimangono isolati in fondo alla pagina;
  • i link importanti sono distinguibili anche senza colore;
  • intestazioni e piè di pagina aggiunti dal browser non dipendono dal CSS del sito.

In Google Chrome puoi simulare la stampa dagli strumenti per sviluppatori aprendo il pannello di rendering e impostando il tipo di supporto su print. Questa simulazione è utile per il layout, ma l’anteprima di stampa resta il controllo più affidabile perché considera margini, formato carta e opzioni del browser.

Se usi un tema a blocchi, il percorso per aggiungere CSS può cambiare. Nei temi classici puoi trovare “Aspetto > Personalizza > CSS aggiuntivo”, mentre nei temi compatibili con l’Editor del sito l’area può trovarsi in “Aspetto > Editor”, nella sezione degli stili o del CSS aggiuntivo. Il CSS inserito da queste aree può essere sufficiente per regole semplici, ma un file print.css nel tema child è più facile da versionare e mantenere.

Un CSS stampa articoli WordPress ben strutturato conserva il contenuto essenziale e rimuove soltanto ciò che serve alla navigazione online.

Potrebbe interessarti anche:

FAQ

No. Le regole inserite dentro @media print vengono applicate alla stampa e all’anteprima di stampa, non alla visualizzazione standard sullo schermo.

Nel tema child, preferibilmente nella cartella principale, collegandolo con wp_enqueue_style() nel file functions.php del tema child.

Il selettore CSS probabilmente non corrisponde alla classe usata dal tema oppure una regola più specifica sovrascrive display: none. Controlla l’HTML con gli strumenti per sviluppatori del browser.

Sì. La funzione “Stampa” del browser usa normalmente le stesse regole CSS anche quando la destinazione selezionata è un file PDF.

Usa break-after: avoid o page-break-after: avoid sul titolo e verifica il risultato nell’anteprima, perché il comportamento può variare tra browser e documenti.

Altri articoli di questa serie:

PDF Strumenti PDF gratis Nel browser, senza upload Apri gli strumenti