An bhfuil do bhlag WordPress cairdiúil le printéir?
Mar a chríochnaigh mé an post inné ar PÉ na Meán Sóisialta, Theastaigh uaim réamhamharc de a sheoladh chuig Dotster CEO Clint Page. Nuair a chlóbhuail mé chuig PDF, áfach, bhí an leathanach ina praiseach!
Tá go leor daoine ann fós ar mhaith leo cóipeanna de shuíomh Gréasáin a phriontáil le roinnt, tagairt dóibh níos déanaí, nó díreach a chomhdú le roinnt nótaí. Chinn mé go raibh mé ag iarraidh mo bhlag a dhéanamh cairdiúil don phrintéir. Bhí sé i bhfad níos éasca ná mar a cheap mé go mbeadh.
Conas Do Leagan Priontála a Thaispeáint:
Beidh ort buneilimintí CSS a thuiscint chun é seo a chur i gcrích. Is é an chuid is deacra ná consól forbróra do bhrabhsálaí a úsáid chun an t-ábhar a thaispeáint, a chur i bhfolach agus a choigeartú ionas gur féidir leat do CSS a scríobh. I Safari, beidh ort na huirlisí forbróra a chumasú, cliceáil ar dheis ar do leathanach, agus roghnaigh Inspect Content. Taispeánfaidh sé sin duit an ghné agus CSS a bhaineann leis.
Tá rogha beag deas ag Safari an leagan clóite de do leathanach a thaispeáint sa chigire gréasáin:
Conas Do Bhlag WordPress a Dhéanamh Cló-Chairdiúil:
Tá cúpla bealach difriúil ann chun do stíliú a shonrú le haghaidh priontála. Is é ceann amháin ach mír a chur i do bhileog stíl reatha a bhaineann go sonrach leis an gcineál “cló” atá ag na meáin.
@media print {
header,
nav,
aside {
display: none;
}
#primary {
width: 100% !important
}
.hidden-print,
.google-auto-placed,
.widget_eu_cookie_law_widget {
display: none;
}
}
Is é an bealach eile stílbhileog ar leith a chur le téama do pháiste a shonraíonn na roghanna priontála. Seo mar atá:
- Uaslódáil bileog stíl bhreise ar do eolaire téama ar a dtugtar cló.css.
- Cuir tagairt don stílbhileog nua i do functions.php comhad. Beidh tú ag iarraidh a chinntiú go mbeidh do chomhad print.css luchtaithe i ndiaidh do bhileog stíl do thuismitheoir agus do pháiste ionas go mbeidh a stíleanna luchtaithe go deireanach. Chuir mé tosaíocht de 100 ar an luchtú seo freisin ionas go mbeidh sé luchtaithe i ndiaidh breiseán Seo an chuma atá ar mo thagairt:
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);
Anois is féidir leat an comhad print.css a shaincheapadh agus gach ceann de na heilimintí a theastaíonn uait a chur i bhfolach nó a thaispeáint ar bhealach difriúil a mhodhnú. I mo shuíomh, mar shampla, ceiltim an nascleanúint, na ceanntásca, na barraí taobh agus na buntásca go léir ionas nach mbeidh ach an t-ábhar is mian liom a thaispeáint priontáilte.
My cló.css Breathnaíonn an comhad mar seo. Tabhair faoi deara gur chuir mé corrlaigh leis freisin, modh a nglacann brabhsálaithe nua-aimseartha leis:
header,
nav,
aside {
display: none;
}
#primary {
width: 100% !important
}
.hidden-print,
.google-auto-placed,
.widget_eu_cookie_law_widget {
display: none;
}
Conas a Breathnaíonn an Print Print
Seo an chuma atá ar mo dhearcadh priontála má tá sé clóite ó Google Chrome:
Styling Ardchló
Tá sé tábhachtach a thabhairt faoi deara nach gcruthófar gach brabhsálaí go cothrom. B’fhéidir gur mhaith leat gach brabhsálaí a thástáil le feiceáil conas a fhéachann do leathanach trasna orthu. Tacaíonn cuid acu fiú le roinnt gnéithe ardleibhéil leathanaigh chun ábhar, corrlaigh socraithe agus méideanna leathanaigh a chur leis, chomh maith le roinnt eilimintí eile. Tá an-iris ag Smashing Magazine alt mionsonraithe ar na hardchló seo roghanna.
Seo roinnt sonraí maidir le leagan amach leathanaigh a ionchorpraigh mé chun tagairt cóipchirt a chur leis ag bun na láimhe clé, cuntar leathanaigh ar thaobh na láimhe deise ag bun, agus teideal an doiciméid ar bharr na láimhe clé de gach leathanach:
@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;
}
}