Je li vaš WordPress blog pogodan za ispis?

Ispis CSS-a

Kao što sam dovršio jučerašnji post na ROI na društvenim mrežama, Htio sam poslati njegov pregled izvršnom direktoru Dotstera Clint Pageu. No kad sam ispisao u PDF, stranica je bila u neredu!

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

Kako prikazati verziju za ispis:

Morate razumjeti osnove CSS-a da biste to postigli. Najteži dio je koristiti razvojnu konzolu vašeg preglednika 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, desnom tipkom 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 svoj WordPress blog učiniti prilagođenim za ispis:

Postoji nekoliko različitih načina određivanja stila za tisak. Jedno je samo dodati odjeljak u vašu trenutnu tablicu 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 dječjoj temi koji određuje mogućnosti ispisa. Evo kako:

  1. Prenesite dodatnu tablicu stilova u svoj direktorij tema pod nazivom ispis.css.
  2. Dodajte referencu na novu tablicu stilova u vašem functions.php datoteka. Morat ćete osigurati da se datoteka print.css učita nakon što je tabela stilova roditelja i djeteta tako da se stilovi učitaju 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, skrivam svu navigaciju, zaglavlja, bočne trake i podnožja tako da se ispisuje samo sadržaj koji želim prikazati.

My ispis.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 ispis

Evo kako izgleda moj prikaz za ispis ako se ispisuje iz Google Chromea:

WordPress prikaz ispisa

Napredni stil ispisa

Važno je napomenuti da nisu svi preglednici stvoreni jednaki. Možda biste trebali testirati svaki preglednik kako biste vidjeli kako vaša stranica izgleda na njima. Neki čak podržavaju neke napredne značajke stranica za dodavanje sadržaja, postavljanje margina i veličina stranica, kao i niz drugih elemenata. Smashing Magazine ima vrlo detaljan članak o ovim naprednim ispisima Mogućnosti.

Evo nekih detalja o izgledu stranice koje sam uključio da bih dodao spomen autorskih prava u donjem lijevom dijelu, brojač stranica u donjem desnom dijelu i naslov dokumenta u gornjem lijevom kutu 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

Što vi mislite?

Ova web stranica koristi Akismet za smanjenje neželjene pošte. Saznajte kako se podaci vašeg komentara obrađuju.