Il tuo blog WordPress è stampabile?

Stampa CSS

Come ho completato il post di ieri su ROI dei social media, Volevo inviarne un'anteprima al CEO di Dotster Clint Page. Quando ho stampato su un PDF, però, la pagina era un disastro!

Ci sono ancora molte persone là fuori che amano stampare copie di un sito Web da condividere, fare riferimento in seguito o semplicemente archiviare alcune note. Ho deciso che volevo rendere il mio blog adatto alla stampa. È stato molto più facile di quanto pensassi.

Come visualizzare la versione stampata:

Avrai bisogno di comprendere le basi dei CSS per ottenere questo risultato. La parte più difficile è utilizzare la console per sviluppatori del browser per testare la visualizzazione, l'occultamento e la regolazione del contenuto in modo da poter scrivere il CSS. In Safari, dovrai abilitare gli strumenti per sviluppatori, fare clic con il pulsante destro del mouse sulla tua pagina e selezionare Ispeziona contenuto. Questo ti mostrerà l'elemento e il CSS associato.

Safari ha una piccola opzione per visualizzare la versione stampata della tua pagina nel web inspector:

Safari - Stampa vista in Web Inspector

Come rendere il tuo blog WordPress stampabile:

Esistono un paio di modi diversi per specificare lo stile per la stampa. Uno è solo quello di aggiungere una sezione nel tuo foglio di stile corrente che è specifica per il tipo di supporto di "stampa".

@media print {
     header, 
     nav, 
     aside { 
         display: none; 
     }
     #primary { 
         width: 100% !important 
     }
     .hidden-print, 
     .google-auto-placed, 
     .widget_eu_cookie_law_widget { 
         display: none; 
     }
}

L'altro modo è aggiungere un foglio di stile specifico al tema figlio che specifica le opzioni di stampa. Ecco come:

  1. Carica un foglio di stile aggiuntivo nella directory del tema chiamata print.css.
  2. Aggiungi un riferimento al nuovo foglio di stile nel tuo file functions.php file. Dovrai assicurarti che il tuo file print.css sia caricato dopo il foglio di stile genitore e figlio in modo che i suoi stili vengano caricati per ultimi. Ho anche assegnato una priorità di 100 a questo caricamento in modo che venga caricato dopo il plug-in Ecco come appare il mio riferimento:

function theme_enqueue_styles() {
    global $wp_version;
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
    wp_enqueue_style( 'child-style-print', get_stylesheet_directory_uri() . '/print.css', array(), $wp_version, 'print' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' , 100);

Ora puoi personalizzare il file print.css e modificare tutti gli elementi che desideri nascondere o visualizzare in modo diverso. Nel mio sito, ad esempio, nascondo tutta la navigazione, le intestazioni, le barre laterali e i piè di pagina in modo che venga stampato solo il contenuto che desidero visualizzare.

My print.css il file ha questo aspetto. Si noti che ho anche aggiunto i margini, un metodo accettato dai browser moderni:

header, 
nav, 
aside { 
    display: none; 
}
#primary { 
    width: 100% !important 
}
.hidden-print, 
.google-auto-placed, 
.widget_eu_cookie_law_widget { 
    display: none; 
}

Come appare la visualizzazione di stampa

Ecco come appare la mia visualizzazione di stampa se stampata da Google Chrome:

Visualizzazione di stampa di WordPress

Stile di stampa avanzato

È importante notare che non tutti i browser sono uguali. Potresti voler testare ogni browser per vedere come appare la tua pagina su di essi. Alcuni supportano anche alcune funzionalità avanzate della pagina per aggiungere contenuto, impostare margini e dimensioni della pagina, nonché una serie di altri elementi. Smashing Magazine ha molto articolo dettagliato su queste stampe avanzate opzioni.

Ecco alcuni dettagli del layout di pagina che ho incorporato per aggiungere una menzione sul copyright in basso a sinistra, un contatore di pagine in basso a destra e il titolo del documento in alto a sinistra di ogni pagina:

@page { 
    size: 5.5in 8.5in;
    margin: 0.5in; 
}
@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "©  " attr(data-date) " DK New Media, LLC. All Rights Reserved.";
    font-size: 9pt;
    color: #333;
  }

  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }

  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

Commenti

  1. 1
  2. 2

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.