Hè u vostru Blog di WordPress Printer-Friendly?

Cum'è aghju finitu u post d'eri ROI suciale suciale, Vuliu invià una vista in antìcipu à u CEO di Dotster Clint Page. Quandu aghju stampatu in un PDF, però, a pagina era un disordine!

Ci hè ancu parechje persone chì piaceru stampà e copie di un situ web da sparte, riferisce dopu, o solu archivà cun qualchì nota. Aghju decisu di vulè fà u mo blog stampabile. Era assai più faciule di ciò chì pensu chì seria.

Cumu Mostra a Vostra Versione Stampa:

Duvete capisce e basi di CSS per uttene questu. A parte più difficiule hè di aduprà a cunsula di sviluppatore di u vostru navigatore per pruvà a visualizazione, a nasconda è l'ajustamentu di u cuntenutu in modu da pudè scrive u vostru CSS. In Safari, duverete attivà l'utili di sviluppatore, cliccate cù u dirittu nantu à a vostra pagina, è selezziunate Verificate u cuntenutu. Chì vi mostrarà l'elementu è CSS assuciatu.

Safari hà una bella opzione per vede a versione stampata di a vostra pagina in l'ispettore web:

Cumu fà u vostru Blog WordPress Printer-Friendly:

Ci hè un coppiu di modi diversi per specificà u vostru stilu per a stampa. Unu hè solu per aghjunghje una sezione in u vostru fogliu di stile attuale chì hè specificu per u tipu media 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'altru modu hè di aghjunghje un fogliu di stile specificu à u tema di u to figliolu chì specifica l'opzioni di stampa. Eccu cumu:

1. Caricate un fogliu di stile addiziale à u vostru repertoriu di u tema chjamatu print.css.
2. Aghjunghjite una riferenza à a nova foglia di stile in u vostru functions.php schedariu. Vulete assicurà chì u vostru file print.css hè caricatu dopu à u vostru fogliu di stile parente è figliolu in modu chì i so stili sianu caricati l'ultimu. Aghju ancu piazzatu una priorità di 100 nantu à sta carica per chì si carichi dopu u plugin Eccu ciò chì pare a mo rifarenza:

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 pudete persunalizà u fugliale print.css è mudificà tutti l'elementi chì vulete nascosti o visualizzati in modu diversu. In u mo situ, per esempiu, piattaghju tutta a navigazione, i tituli, e barre laterali, è i footers in modu chì solu u cuntenutu chì vogliu visualizà sia stampatu.

My print.css u schedariu pare cusì. Notate chì aghju ancu aghjustatu margini, un metudu accettatu da i navigatori moderni:

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

Cumu pare a Vista di Stampa

Eccu cumu si vede a mo vista stampata se stampata da Google Chrome:

Stilu di Stampa Avanzatu

Hè impurtante di nutà chì micca tutti i navigatori sò creati uguali. Pudete vulete pruvà ogni navigatore per vede cumu a vostra pagina pare in elli. Alcuni supportanu ancu alcune funzionalità avanzate di a pagina per aghjunghje cuntenutu, definisce margini è dimensioni di pagina, è ancu una serie di altri elementi. Smashing Magazine hà una assai articulu detallatu nantu à queste stampa avanzata opzioni.

Eccu alcuni dettagli di layout di pagina chì aghju incorporatu per aghjunghje una menzione di copyright in basso à sinistra, un contatore di pagine in basso a destra, è u titulu di u documentu in cima à 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;
  }
}