Nilalaman Marketing

Ang iyong WordPress Blog Printer-Friendly ba?

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 nito sa iyo ang 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;
  }
}

Douglas Karr

Douglas Karr ay CMO ng OpenINSIGHTS at ang nagtatag ng Martech Zone. Nakatulong si Douglas sa dose-dosenang matagumpay na mga startup ng MarTech, tumulong sa angkop na pagsusumikap ng higit sa $5 bil sa mga pagkuha at pamumuhunan ng Martech, at patuloy na tinutulungan ang mga kumpanya sa pagpapatupad at pag-automate ng kanilang mga diskarte sa pagbebenta at marketing. Si Douglas ay isang kinikilalang internasyonal na digital na pagbabago at eksperto at tagapagsalita ng MarTech. Si Douglas ay isa ring nai-publish na may-akda ng isang Dummie's guide at isang business leadership book.

Kaugnay na Artikulo

Bumalik sa tuktok na pindutan
Pagsasara

Natukoy ang Adblock

Martech Zone ay kayang ibigay sa iyo ang nilalamang ito nang walang bayad dahil pinagkakakitaan namin ang aming site sa pamamagitan ng kita ng ad, mga link na kaakibat, at mga sponsorship. Ikinalulugod namin kung aalisin mo ang iyong ad blocker habang tinitingnan mo ang aming site.