Ang Imong WordPress Blog Printer-Friendly?

Pag-print sa CSS

Samtang nahuman nako ang post kagahapon sa ROI sa Social Media, Gusto nakong ipadala ang usa ka preview niini sa Dotster CEO Clint Page. Sa diha nga nag-print ako sa usa ka PDF, bisan pa, ang panid gubot!

Daghan pa usab nga mga tawo didto nga gusto mag-print sa mga kopya sa usa ka website aron ipaambit, pakigsulti sa ulahi, o pagsumite ra uban ang pipila nga mga nota. Nakahukom ko nga gusto nakong himuon ang akong blog printer-friendly. Kini labi ka kadali kaysa sa gihunahuna ko.

Giunsa ang Pagpakita sa Imong Bersyon sa Pag-print:

Kinahanglan nimo nga mahibal-an ang mga sukaranan sa CSS aron mahimo kini. Ang labing lisud nga bahin mao ang paggamit sa console sa developer sa imong browser aron masulayan ang pagpakita, pagtago, ug pag-ayos sa sulud aron masulat nimo ang imong CSS. Sa Safari, kinahanglan nimo nga mapagana ang mga himan sa developer, i-klik sa tuo ang imong panid, ug pilia ang Susihon ang Sulud. Ipakita kanimo ang elemento ug ang CSS nga kauban.

Ang Safari adunay maayo nga gamay nga kapilian aron ipakita ang giimprinta nga bersyon sa imong panid sa web inspector:

Safari - Print View sa Web Inspector

Giunsa ang Himua ang Imong WordPress Blog Printer-Friendly:

Adunay usa ka pares nga lainlaing mga paagi sa pagtino sa imong estilo alang sa pag-print. Ang usa mao ang pagdugang usa ka seksyon sa imong karon nga styleheet nga piho sa tipo sa media nga "print".

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

Ang uban pang paagi mao ang pagdugang usa ka piho nga style sheet sa imong anak nga tema nga nagpiho sa mga kapilian sa pag-print. Ania kung giunsa:

  1. Pag-upload sa usa ka dugang nga styleheet sa imong direktoryo sa tema nga gitawag pag-print.css.
  2. Pagdugang usa ka pakisayran sa bag-ong estilo sa estilo sa imong Functions.php file Gusto nimong masiguro ang imong print.css file nga ningkarga pagkahuman sa imong style sa ginikanan ug anak aron ang mga istilo niini ang ulahi nga ikarga. Nagbutang usab ako usa ka prayoridad nga 100 sa kini nga pagkarga aron kini mag-load pagkahuman sa plugin Ania kung unsa ang hitsura sa akong pakisayran:

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

Karon mahimo nimo ipasadya ang file nga print.css ug usbon ang tanan nga mga elemento nga gusto nimo nga gitago o gipakita nga lahi. Pananglitan sa akong site, gitago nako ang tanan nga nabigasyon, mga header, sidebar, ug footer aron ang sulud ra nga gusto nako ipakita ang naimprinta.

My pag-print.css ingon niini ang file. Timan-i nga nagdugang usab ako mga margin, usa ka pamaagi nga gidawat sa mga modern browser.

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

Giunsa ang pagtan-aw sa Pag-print

Niini kung giunsa ang pagtan-aw sa akong pag-print kung giimprinta gikan sa Google Chrome:

Pagtan-aw sa WordPress Print

Advanced nga Estilo sa Pag-print

Mahinungdanon nga hinumdoman nga dili tanan nga mga browser gimugna nga parehas. Mahimo nimo nga sulayan ang matag browser aron makita kung unsa ang pagtan-aw sa imong panid sa tabok niini. Gisuportahan usab sa pipila ang pila ka mga advanced nga bahin sa panid aron makadugang sulud, magtakda sa mga margin ug gidak-on sa panid, ingon man daghang mga elemento. Ang Smashing Magazine adunay kaayo detalyado nga artikulo sa kini nga advanced print Mga kapilian.

Ania ang pipila ka mga detalye sa layout sa panid nga akong gilakip aron makadugang usa ka paghisgot sa copyright sa ubus nga wala, usa ka counter sa panid sa tuo nga tuo, ug ang titulo sa dokumento sa wala sa taas nga bahin sa matag panid:

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

2 Comments

  1. 1
  2. 2

Unsay imong hunahuna?

Kini nga site naggamit sa Akismet sa pagpakunhod sa spam. Hibal-i kon giunsa ang pagproseso sa datos sa imong komento.