Er WordPress bloggið þitt prentvænt?

Prentaðu CSS

Eins og ég kláraði færsluna í gær þann 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:

Þú þarft að skilja grunnatriði CSS til að ná þessu fram. Erfiðasti hlutinn er að nota forritaravélar vafrans til að prófa að sýna, fela og stilla efnið þannig að þú getir skrifað CSS. Í Safari þarftu að gera verktakatækin virk, 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. Svona:

  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 sjá til þess að prent.css skráin þín sé hlaðin á eftir foreldri þínu og barn stílblaði svo að stílarnir séu hlaðnir síðast. Ég setti einnig forgangsröðina 100 á þessa hleðslu svo að hún hlaðist eftir viðbótina Hérna lítur viðmiðun 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 búnir til 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 síðuútlit sem ég innlimaði til að bæta við höfundarréttarumtali neðst til vinstri, blaðsíðu neðst til hægri og skjalheitinu 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) " 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

Hvað finnst þér?

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