Da li je vaš WordPress blog pogodan za štampu?

Ispis CSS-a

Kao što sam dovršio jučerašnji post na ROI za društvene medije, Htio sam poslati njegov pregled izvršnom direktoru Dotstera Clint-u Page. No kad sam ispisao u PDF, stranica je bila u neredu!

Još uvijek postoji mnogo ljudi koji vole otiskivati ​​kopije web stranica da bi ih podijelili, pozvali kasnije ili jednostavno poslali neke bilješke. Odlučio sam da svoj blog želim prilagoditi printeru. Bilo je mnogo lakše nego što sam mislio da će biti.

Kako prikazati verziju za štampu:

Morate razumjeti osnove CSS-a da biste to postigli. Najteži dio je koristiti razvojnu konzolu vašeg pretraživača za testiranje prikazivanja, skrivanja i prilagođavanja sadržaja tako da možete napisati svoj CSS. U Safariju ćete trebati omogućiti alate za programere, desnim gumbom miša kliknite stranicu i odaberite Inspect Content. To će vam pokazati povezani element i CSS.

Safari ima lijepu malu mogućnost prikazivanja verzije za ispis vaše stranice u web inspektoru:

Safari - prikaz ispisa u web pregledniku

Kako učiniti vaš WordPress blog pogodnim za štampu:

Postoji nekoliko različitih načina određivanja stajlinga za štampu. Jedno je samo dodati odjeljak u vaš trenutni tabelu stilova koji je specifičan za vrstu 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 dodavanje određenog stilskog lista svojoj podređenoj temi koja određuje opcije ispisa. Evo kako:

  1. Pošaljite dodatnu tablicu stilova u svoj direktorij tema pod nazivom print.css.
  2. Dodajte referencu na novu tablicu stilova u svom functions.php file. Morali biste osigurati da se datoteka print.css učita nakon vašeg stila roditelja i djeteta, tako da se stilovi učitavaju zadnji. Također sam stavio prioritet 100 na ovo učitavanje tako da se učitava nakon dodatka 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);

Sada možete prilagoditi datoteku print.css i izmijeniti sve elemente koje želite sakriti ili prikazati drugačije. Na svojoj web lokaciji, na primjer, sakrivam svu navigaciju, zaglavlja, bočne trake i podnožja tako da se ispisuje samo sadržaj koji želim prikazati.

My print.css datoteka izgleda ovako. Primijetite da sam također dodao margine, metodu koju prihvaćaju moderni preglednici:

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

Kako izgleda prikaz za štampu

Evo kako izgleda moj prikaz za štampu ako se štampa iz Google Chromea:

WordPress prikaz ispisa

Napredni stil ispisa

Važno je napomenuti da nisu svi pregledači stvoreni jednaki. Možda ćete htjeti testirati svaki preglednik kako biste vidjeli kako vaša stranica izgleda na njima. Neki čak podržavaju neke napredne funkcije stranica za dodavanje sadržaja, postavljanje margina i veličina stranica, kao i brojne druge elemente. Smashing Magazine ima vrlo detaljan članak o ovim naprednim ispisima opcije.

Evo nekoliko detalja o rasporedu stranica koje sam uključio da dodam spomen autorskih prava u donjem lijevom dijelu, brojač stranica u donjem desnom dijelu i naslov dokumenta u gornjem lijevom uglu svake stranice:

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

  1. 1
  2. 2

Šta ti misliš?

Ova stranica koristi Akismet kako bi smanjila neželjenu poštu. Saznajte kako se podaci vašeg komentara obrađuju.