A bheil do bhlog WordPress clò-bhualadair càirdeil?

Clò-bhuail CSS

Mar a chrìochnaich mi am post an-dè air ROI nam meadhanan sòisealta, Bha mi airson ro-shealladh dheth a chuir gu Duilleag Clint Ceannard Dotster. Nuair a chlò-bhuail mi gu PDF, ge-tà, bha an duilleag na bhreugan!

Tha mòran dhaoine a-muigh an sin a tha dèidheil air lethbhric de làrach-lìn a chlò-bhualadh airson a roinn, iomradh a thoirt orra nas fhaide air adhart, no dìreach faidhleadh le cuid de notaichean. Cho-dhùin mi gu robh mi airson mo bhlog a dhèanamh càirdeil do chlò-bhualadair. Bha e tòrr na b ’fhasa na bha mi a’ smaoineachadh a bhiodh.

Mar a sheallas tu an dreach clò-bhualaidh agad:

Feumaidh tu bunaitean CSS a thuigsinn gus seo a choileanadh. Is e am pàirt as duilghe a bhith a ’cleachdadh consol leasaiche do bhrobhsair gus deuchainn a dhèanamh air taisbeanadh, falach, agus atharrachadh an t-susbaint gus an urrainn dhut do CSS a sgrìobhadh. Ann an Safari, feumaidh tu innealan an leasaiche a chomasachadh, cliog deas air do dhuilleag, agus tagh Sgrùdadh susbaint. Bidh sin a ’sealltainn dhut an eileamaid agus CSS co-cheangailte.

Tha roghainn bheag snog aig Safari an dreach clò de do dhuilleag a thaisbeanadh san neach-sgrùdaidh lìn:

Safari - Clò-bhuail sealladh ann an neach-sgrùdaidh lìn

Mar a nì thu do bhlog WordPress clò-bhualadair càirdeil:

Tha dòigh no dhà eadar-dhealaichte ann airson do stoidhle a shònrachadh airson clò. Is e aon dhiubh dìreach earrann a chur ris an duilleag stoidhle gnàthach agad a tha sònraichte don t-seòrsa meadhanan de “chlò”.

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

Is e an dòigh eile duilleag stoidhle sònraichte a chur ri cuspair do phàiste a tha a ’sònrachadh nan roghainnean clò-bhualaidh. Seo mar a leanas:

  1. Luchdaich suas duilleag stoidhle a bharrachd ris an eòlaire cuspair agad ris an canar clò-bhualadh.css.
  2. Cuir iomradh air an duilleag-stoidhle ùr anns an functions.php faidhle. Bidh tu airson dèanamh cinnteach gu bheil am faidhle print.css agad air a luchdachadh às deidh do dhuilleag stoidhle pàrant is pàiste gus am bi na stoidhlichean aige air an luchdachadh mu dheireadh. Chuir mi cuideachd prìomhachas de 100 air an luchdachadh seo gus am bi e a ’luchdachadh às deidh plugan Seo an coltas a th’ air an iomradh agam:

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);

A-nis faodaidh tu am faidhle print.css a ghnàthachadh agus na h-eileamaidean uile a tha thu ag iarraidh falaichte no air an taisbeanadh ann an dòigh eadar-dhealaichte atharrachadh. Air an làrach agam, mar eisimpleir, bidh mi a ’falach a h-uile seòladh, bann-cinn, bàr-taoibh agus coisichean gus nach bi ach an susbaint a tha mi airson a thaisbeanadh air a chlò-bhualadh.

My clò-bhualadh.css faidhle a ’coimhead mar seo. Sanas gun do chuir mi iomaill ris cuideachd, dòigh ris an gabh brobhsairean an latha an-diugh:

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

Mar a tha an clò-bhualadh a ’coimhead

Seo mar a tha mo shealladh clò-bhualaidh a ’coimhead ma thèid a chlò-bhualadh bho Google Chrome:

Sealladh Clò WordPress

Styling Clò-bhualadh adhartach

Tha e cudromach cuimhneachadh nach eil a h-uile brobhsair air an cruthachadh co-ionann. Is dòcha gum bi thu airson deuchainn a dhèanamh air gach brabhsair gus faicinn mar a tha do dhuilleag a ’coimhead thairis orra. Bidh cuid eadhon a ’toirt taic do chuid de fheartan adhartach duilleag gus susbaint a chuir ris, oirean suidhichte agus meudan dhuilleagan, a bharrachd air grunn eileamaidean eile. Tha glè mhath aig Iris Smashing artaigil mionaideach air a ’chlò adhartach seo roghainnean.

Seo cuid de dh ’fhiosrachadh cruth duilleig a chuir mi a-steach gus iomradh dlighe-sgrìobhaidh a chuir ris aig a’ bhonn air an taobh chlì, cuntair duilleag air an taobh dheas aig a ’bhonn, agus tiotal na sgrìobhainn air mullach clì gach duilleag:

@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;
  }
}