Ang iyong WordPress Blog Printer-Friendly ba?

I-print ang CSS

Tulad ng pagkumpleto ko ng post kahapon sa ROI ng Social Media, Nais kong magpadala ng isang preview nito sa Dotster CEO Clint Page. Nang mag-print ako sa isang PDF, bagaman, ang pahina ay gulo!

Marami pa ring mga tao doon na nais mag-print ng mga kopya ng isang website upang ibahagi, mag-refer sa paglaon, o mag-file lamang ng ilang mga tala. Napagpasyahan kong nais kong gawing friendly ang aking blog printer. Napakadali kaysa sa inakala ko.

Paano Maipakita ang Iyong Nai-print na Bersyon:

Kakailanganin mong maunawaan ang mga pangunahing kaalaman ng CSS upang magawa ito. Ang pinakamahirap na bahagi ay ang paggamit ng console ng developer ng iyong browser upang subukan ang pagpapakita, pagtatago, at pag-aayos ng nilalaman upang maisulat mo ang iyong CSS. Sa Safari, kakailanganin mong paganahin ang mga tool ng developer, i-right click ang iyong pahina, at piliin ang Suriin ang Nilalaman. Ipapakita iyon sa iyo ng nauugnay na elemento at CSS.

Ang Safari ay may magandang maliit na pagpipilian upang ipakita ang naka-print na bersyon ng iyong pahina sa inspektor ng web:

Safari - Print View sa Web Inspector

Paano Gawin ang Iyong WordPress Blog Printer-Friendly:

Mayroong isang pares iba't ibang mga paraan ng pagtukoy ng iyong estilo para sa pag-print. Ang isa ay upang magdagdag ng isang seksyon sa iyong kasalukuyang styleheet na tukoy sa uri ng media na "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 iba pang paraan ay upang magdagdag ng isang tukoy na sheet ng estilo sa tema ng iyong anak na tumutukoy sa mga pagpipilian sa pag-print. Narito kung paano:

  1. Mag-upload ng isang karagdagang styleheet sa iyong direktoryo ng tema na tinawag print.css.
  2. Magdagdag ng isang sanggunian sa bagong styleheet sa iyong functions.php file Gusto mong tiyakin na ang iyong file na print.css ay nai-load pagkatapos ng iyong style ng magulang at anak upang ang mga istilo nito ay huling mai-load. Naglagay din ako ng isang priyoridad na 100 sa paglo-load na ito upang maglo-load ito pagkatapos ng plugin Narito kung ano ang hitsura ng aking sanggunian:

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

Ngayon ay maaari mong ipasadya ang file ng print.css at baguhin ang lahat ng mga elemento na nais mong itago o ipakita sa iba. Sa aking site, halimbawa, itinatago ko ang lahat ng nabigasyon, mga header, sidebar, at footer upang ang nilalaman lamang na nais kong ipakita ang nakalimbag.

My print.css ganito ang file. Pansinin na nagdagdag din ako ng mga margin, isang pamamaraan na tinatanggap ng mga modernong browser:

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

Paano Mukha ang Print View

Narito kung paano ang hitsura ng aking pag-print kung naka-print mula sa Google Chrome:

WordPress Print View

Advanced na Styling sa Pag-print

Mahalagang tandaan na hindi lahat ng mga browser ay nilikha pantay. Maaaring gusto mong subukan ang bawat browser upang makita kung paano ang hitsura ng iyong pahina sa kanila. Sinusuportahan din ng ilan ang ilang mga advanced na tampok sa pahina upang magdagdag ng nilalaman, magtakda ng mga margin at laki ng pahina, pati na rin ang bilang ng iba pang mga elemento. Ang Smashing Magazine ay mayroong napaka detalyadong artikulo sa advanced print mga pagpipilian.

Narito ang ilang mga detalye ng layout ng pahina na isinama ko upang magdagdag ng pagbanggit ng copyright sa kaliwang bahagi sa ibaba, isang counter ng pahina sa kanang bahagi sa ibaba, at ang pamagat ng dokumento sa kaliwang tuktok ng bawat pahina:

@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

Ano sa tingin ninyo?

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.