Cum'è aghju finitu u postu 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 drittu 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:
- Caricate un fogliu di stile addiziale à u vostru repertoriu di u tema chjamatu stampa.css.
- 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 stampa.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 unepoche 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) " Highbridge, 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;
}
}
Interessante Douglas, stava ghjustu à circà un situ chjamatu PrintFriendly quandu aghju lettu u vostru postu. Face assai di questu per voi è qualsiasi altru situ chì vulete stampà. Piuttostu dolce, verificate:
http://www.printfriendly.com
Grazie per avè sparte sta.