Stile stampa WordPress CSS: articoli pronti da stampare

Uno stile stampa WordPress CSS permette di creare una versione dedicata degli articoli quando l’utente seleziona la stampa dal browser. Il foglio può nascondere menu, pubblicità, sidebar, pulsanti social e commenti, lasciando visibili titolo, autore, testo e immagini utili. La configurazione si basa sulla regola CSS @media print, applicabile dal pannello CSS aggiuntivo o tramite un tema child. Il risultato è una pagina più leggibile, con meno sprechi di carta e una resa migliore anche quando l’utente salva l’articolo in formato PDF. La procedura richiede un controllo con l’anteprima di stampa di Google Chrome, Mozilla Firefox, Microsoft Edge o Safari.

Come preparare lo stile stampa WordPress CSS

Il modo più semplice per aggiungere un foglio di stile per la stampa consiste nell’inserire le regole dentro @media print. Il CSS contenuto in questo blocco viene applicato soltanto durante la stampa o nella modalità di anteprima di stampa del browser.

Prima di scrivere i selettori, è necessario individuare le classi HTML usate dal tema WordPress. I nomi più comuni sono .site-header per l’intestazione, .site-footer per il piè di pagina, .sidebar per la barra laterale, .comments-area per i commenti e .entry-content per il contenuto dell’articolo. I temi basati sui blocchi possono usare invece classi come .wp-block-post-content.

Per verificare i nomi effettivi, apri un articolo, fai clic con il tasto destro su un elemento e seleziona “Ispeziona” oppure “Analizza elemento”, in base al browser utilizzato. Un selettore errato non genera errori visibili, ma semplicemente non applica la regola all’elemento previsto.

Passo 1: aprire il campo CSS aggiuntivo

Nel pannello di amministrazione di WordPress, il percorso dipende dal tema attivo:

  • Nei temi classici, vai in Aspetto > Personalizza > CSS aggiuntivo.
  • Nei temi a blocchi, apri Aspetto > Editor, accedi a Stili e verifica la presenza dell’area per il CSS aggiuntivo.
  • Se il tema non offre un campo CSS personalizzato, usa un tema child e un file dedicato come print.css.

Il CSS aggiuntivo è adatto a modifiche rapide, ma un tema child è preferibile per siti gestiti a lungo termine. Il file del tema principale può infatti essere sovrascritto durante gli aggiornamenti.

Passo 2: inserire le regole di base

Il seguente codice nasconde gli elementi che normalmente non servono su carta e migliora la leggibilità del testo. I nomi delle classi devono essere adattati alla struttura del tema WordPress installato.

@media print {
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,
.social-sharing,
.advertisement,
.cookie-banner,
.back-to-top {
display: none !important;
}

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

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

img {
max-width: 100% !important;
height: auto !important;
}
}

La proprietà display: none rimuove gli elementi dalla pagina stampata, mentre width: 100% consente al testo di sfruttare l’area disponibile. Il colore nero su sfondo bianco riduce il consumo di inchiostro e migliora la leggibilità delle stampanti monocromatiche.

Se il tema usa classi diverse, sostituisci .main-navigation, .sidebar o .entry-content con i selettori individuati tramite gli strumenti per sviluppatori. Evita di nascondere l’elemento article o .wp-block-post-content, perché contiene il testo principale dell’articolo.

Come migliorare pagine, collegamenti e immagini

Una versione per la stampa deve conservare le informazioni utili, ma non necessariamente l’aspetto grafico del sito. Colori di sfondo, animazioni, effetti ombra e layout a più colonne spesso peggiorano il risultato su carta.

Puoi aggiungere queste regole al blocco @media print per controllare titoli, collegamenti e immagini:

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

p,
li,
blockquote,
figure,
img,
pre,
table {
page-break-inside: avoid;
break-inside: avoid;
}

.entry-title,
.wp-block-post-title {
font-size: 24pt;
margin-bottom: 12pt;
}

.entry-content h2,
.wp-block-post-content h2 {
font-size: 16pt;
margin-top: 18pt;
}

.entry-content h3,
.wp-block-post-content h3 {
font-size: 13pt;
}

.entry-content a[href^="http"]::after,
.wp-block-post-content a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 9pt;
overflow-wrap: anywhere;
}
}

La proprietà break-inside: avoid prova a impedire che immagini, tabelle e blocchi di testo vengano divisi tra due pagine. I nomi precedenti page-break-inside e page-break-after restano utili per la compatibilità con motori di stampa meno recenti.

L’aggiunta automatica dell’URL dopo ogni collegamento esterno è utile per documenti cartacei, ma può rendere il testo molto lungo. Se gli indirizzi sono complessi o numerosi, puoi eliminare le due regole con ::after e lasciare i collegamenti senza URL visibile.

Per inserire un’interruzione di pagina prima di una sezione specifica, aggiungi una classe CSS al blocco o all’elemento HTML:

@media print {
.interruzione-stampa {
break-before: page;
page-break-before: always;
}
}

Nel blocco WordPress interessato, assegna interruzione-stampa al campo Classe CSS aggiuntiva. La sezione inizierà così su un nuovo foglio, caratteristica utile per articoli lunghi, ricette, schede didattiche e documenti tecnici.

Come creare un file print.css in un tema child

Per separare il CSS di stampa dal resto dello stile, crea un file chiamato print.css nella cartella del tema child. Il file può essere caricato soltanto quando il browser prepara la pagina per la stampa, riducendo il caricamento di regole non necessarie nella visualizzazione normale.

Nel file functions.php del tema child inserisci:

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

La funzione wp_enqueue_style() è il metodo standard di WordPress per caricare fogli di stile. Il parametro print indica al browser che il file è destinato al supporto di stampa; la documentazione ufficiale è disponibile nella referenza di wp_enqueue_style.

Nel file print.css puoi usare direttamente le regole, anche senza il contenitore @media print, perché il foglio è già associato al supporto di stampa:

body {
background: #fff;
color: #000;
font-family: Georgia, "Times New Roman", serif;
}

.site-header,
.site-footer,
.sidebar,
.comments-area,
.share-buttons {
display: none !important;
}

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

Il file deve trovarsi nella cartella del tema child attivo, non nella directory del tema principale. Dopo averlo modificato, svuota la cache di WordPress, del plugin di ottimizzazione e del browser se le nuove regole non compaiono subito.

Come verificare il risultato prima di pubblicarlo

Apri un articolo dal frontend e usa il comando di stampa del browser, generalmente disponibile con Ctrl+P su Windows e Linux oppure Cmd+P su macOS. L’anteprima consente di controllare il risultato senza consumare carta.

Verifica soprattutto questi aspetti:

  • Il titolo dell’articolo è visibile e non viene tagliato.
  • Il testo occupa la larghezza del foglio senza essere compresso in una colonna stretta.
  • Menu, pubblicità, sidebar e pulsanti non compaiono nell’anteprima.
  • Le immagini non vengono ingrandite oltre i margini della pagina.
  • Tabelle e blocchi di codice restano leggibili.
  • I collegamenti mostrano l’URL soltanto se questa informazione è davvero utile.
  • Il piè di pagina del browser non crea sovrapposizioni con il contenuto.

Puoi definire anche i margini e l’orientamento del foglio con la regola @page:

@page {
size: A4;
margin: 18mm 16mm;
}

@page imposta le dimensioni richieste al motore di stampa, ma il browser o la stampante possono applicare impostazioni proprie. Per questo è importante provare il foglio A4 e controllare anche l’opzione “Grafica di sfondo”, che deve restare disattivata se il CSS è stato progettato per una stampa essenziale.

Un buon stile stampa WordPress CSS deve essere verificato su almeno un tema desktop e su un dispositivo mobile, perché i selettori e la struttura HTML possono cambiare tra temi e plugin.

Potrebbe interessarti anche:

FAQ

Sì, puoi inserire le regole dentro @media print in Aspetto > Personalizza > CSS aggiuntivo, se il tema rende disponibile questa sezione. Nei temi a blocchi il percorso può variare.

Il selettore CSS probabilmente non corrisponde alla classe usata dal tema. Controlla l’HTML con gli strumenti per sviluppatori e sostituisci .sidebar con il nome effettivo dell’elemento.

Sì, la funzione “Stampa” del browser e il salvataggio come PDF applicano normalmente le regole @media print. Il risultato può cambiare in base alle impostazioni del browser.

Assegna al blocco una classe CSS, per esempio solo-schermo, e aggiungi .solo-schermo { display: none !important; } dentro @media print.

Il CSS aggiuntivo è pratico per modifiche rapide, mentre print.css in un tema child è più ordinato e mantiene separate le regole dedicate alla stampa.

Altri articoli di questa serie:

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