Ali je vaš WordPress Blog prijazen do tiskanja?

Natisnite CSS

Ko sem zaključil včerajšnjo objavo dne ROI za družabne medije, Predogled sem želel poslati direktorju družbe Dotster Clint Pageu. Ko sem tiskal v PDF, pa je bila stran v neredu!

Še vedno je veliko ljudi, ki radi natisnejo kopije spletnega mesta, da bi jih dali v skupno rabo, pozneje se sklicevali ali pa samo poslali nekaj opomb. Odločil sem se, da želim svoj blog narediti tiskalniku prijazen. Bilo je veliko lažje, kot sem mislil.

Kako prikazati tiskano različico:

Za to boste morali razumeti osnove CSS. Najtežji del je uporaba konzole za razvijalce brskalnika za testiranje prikaza, skrivanja in prilagajanja vsebine, tako da lahko napišete svoj CSS. V Safariju boste morali omogočiti orodja za razvijalce, z desno miškino tipko kliknite svojo stran in izberite Preveri vsebino. To vam bo pokazalo element in CSS, povezan.

Safari ima lepo majhno možnost, da v spletnem pregledovalniku prikaže tiskano različico vaše strani:

Safari - Pogled tiskanja v spletnem pregledovalniku

Kako narediti svoj spletni dnevnik WordPress tiskalniku prijazen:

Obstaja nekaj različnih načinov določanja stila za tisk. Eno je samo dodati razdelek v vaš trenutni tabelo slogi, ki je specifičen za vrsto medija "print".

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

Drugi način je, da otroški temi dodate poseben slog, ki določa možnosti tiskanja. Takole:

  1. Naložite dodaten tabelo slogov v imenik tem z imenom print.css.
  2. Dodajte sklic na novo tabelo slogi v vašem functions.php mapa. Zagotovite, da se bo datoteka print.css naložila po nadrejeni in podrejeni tabeli, tako da bodo njeni slogi naloženi zadnji. Temu nakladanju sem dal tudi prioriteto 100, da se naloži po vtičniku. Evo, kako izgleda moja referenca:

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

Zdaj lahko prilagodite datoteko print.css in spremenite vse elemente, ki jih želite skriti ali prikazati drugače. Na svojem spletnem mestu na primer skrijem vso navigacijo, glave, stranske vrstice in noge, tako da se natisne samo vsebina, ki jo želim prikazati.

My print.css datoteka izgleda tako. Upoštevajte, da sem dodal tudi robove, metodo, ki jo sprejemajo sodobni brskalniki:

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

Kako je videti pogled za tiskanje

Evo, kako je videti moj pogled tiskanja, če je natisnjen iz Google Chroma:

Pogled tiska WordPress

Napredno oblikovanje tiska

Pomembno je omeniti, da niso vsi brskalniki enaki. Morda boste želeli preizkusiti vsak brskalnik, da vidite, kako izgleda vaša stran na njih. Nekateri celo podpirajo nekatere napredne funkcije strani za dodajanje vsebine, nastavitev robov in velikosti strani ter številnih drugih elementov. Smashing Magazine ima zelo podroben članek o teh naprednih tiskih opcije.

Tu je nekaj podrobnosti o postavitvi strani, ki sem jih vključil, da sem spodaj levo dodal omembo avtorskih pravic, števec strani spodaj desno in naslov dokumenta zgoraj levo na vsaki strani:

@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 Komentarji

  1. 1
  2. 2

Kaj menite?

Ta stran uporablja Akismet za zmanjšanje nezaželene pošte. Preberite, kako se vaš komentar obravnava.