Er WordPress bloggið þitt prentvænt?

Prentaðu CSS

Eins og ég kláraði færsluna í gær á Arðsemi félagslegra fjölmiðla, Ég vildi senda forsýningu á það til Clint Page forstjóra Dotster. Þegar ég prentaði á PDF var síðan þó rugl!

Það eru enn margir fólk þarna úti sem finnst gaman að prenta afrit af vefsíðu til að deila, vísa seinna eða bara skrá með nokkrum athugasemdum. Ég ákvað að ég vildi gera bloggið mitt prentaravænt. Þetta var miklu auðveldara en ég hélt að það yrði.

Hvernig á að birta prentútgáfu þína:

Þú verður að skilja grunnatriði CSS til að ná þessu. Erfiðasti hlutinn er að nota forritaravél vafrans til að prófa að sýna, fela og aðlaga efnið þannig að þú getir skrifað CSS. Í Safari þarftu að virkja verktakatækin, hægrismella á síðuna þína og velja Skoða efni. Það mun sýna þér þáttinn og CSS tengdan.

Safari hefur fínan lítinn möguleika á að birta prentútgáfu síðunnar þinnar í vefskoðandanum:

Safari - Prentskoðun í vefskoðanda

Hvernig á að gera WordPress bloggið þitt prentvænt:

Það eru nokkrar mismunandi leiðir til að tilgreina stíl fyrir prentun. Einn er bara að bæta við kafla í núverandi stílblaði þínu sem er sértækur fyrir fjölmiðlategundina „prenta“.

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

Hin leiðin er að bæta við sérstöku stílblaði við þema barnsins þíns sem tilgreinir prentvalkostina. Hér er hvernig:

  1. Sendu viðbótar stílblað í þemaskrána þína sem heitir prent.css.
  2. Bættu við tilvísun í nýja stílblaðið í þínum functions.php skjal. Þú vilt tryggja að print.css skráin þín sé hlaðin eftir stílblað foreldris þíns og barns svo að stíll þess sé hlaðinn síðast. Ég setti einnig forgangsröðina 100 á þessa hleðslu svo að hún hlaðist upp eftir viðbótina Hér lítur tilvísun mín út:

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

Nú er hægt að sérsníða print.css skrána og breyta öllum þeim þáttum sem þú vilt fela eða sýna á annan hátt. Til dæmis á síðunni minni fel ég öll flakk, haus, hliðarstikur og undirfætur svo að aðeins efnið sem ég vil sýna er prentað.

My prent.css skrá lítur svona út. Taktu eftir að ég bætti einnig við spássíum, aðferð sem er samþykkt af nútíma vöfrum:

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

Hvernig prentútlitið lítur út

Svona lítur prentskoðun mín út ef hún er prentuð frá Google Chrome:

WordPress prentskoðun

Ítarlegri prentstíll

Það er mikilvægt að hafa í huga að ekki allir vafrar eru jafnir. Þú gætir viljað prófa hvern vafra til að sjá hvernig síðan þín lítur út fyrir þá. Sumir styðja jafnvel nokkra háþróaða síðueiginleika til að bæta við efni, setja framlegð og blaðsíðustærðir, svo og fjölda annarra þátta. Smashing Magazine hefur mjög ítarleg grein um þessa lengra komnu prentun Valkostir.

Hér eru nokkrar upplýsingar um blaðsíðuskil sem ég innlimaði til að bæta við höfundarrétti sem minnst var á neðst til vinstri, blaðsíðuteljara neðst til hægri og titil skjalsins efst til vinstri á hverri síðu:

@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) " Highbridge, 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

Hvað finnst þér?

Þessi síða notar Akismet til að draga úr ruslpósti. Lærðu hvernig ummæli þín eru unnin.