Er WordPress-bloggen din utskriftsvennlig?

Skriv ut CSS

Da jeg fullførte gårsdagens innlegg den Avkastning på sosiale medier, Jeg ønsket å sende en forhåndsvisning av den til Dotster-sjef Clint Page. Da jeg skrev ut til en PDF, var siden imidlertid et rot!

Det er fortsatt mange folk der ute som liker å skrive ut kopier av et nettsted for å dele, referere senere, eller bare arkivere med noen notater. Jeg bestemte meg for at jeg ville gjøre bloggen min utskriftsvennlig. Det var mye lettere enn jeg trodde det skulle være.

Slik viser du utskriftsversjonen din:

Du må forstå det grunnleggende om CSS for å oppnå dette. Den vanskeligste delen er å bruke nettleserens utviklerkonsoll til å teste visning, skjuling og justering av innholdet slik at du kan skrive CSS. I Safari må du aktivere utviklerverktøyene, høyreklikke siden din og velge Inspiser innhold. Det vil vise deg elementet og CSS assosiert.

Safari har et fint lite alternativ for å vise utskriftsversjonen av siden din i webinspektøren:

Safari - Utskriftsvisning i Web Inspector

Hvordan lage WordPress-bloggen din utskriftsvennlig:

Det er et par forskjellige måter å spesifisere styling for utskrift. Den ene er bare å legge til en seksjon i det gjeldende stilarket som er spesifikt for medietypen "utskrift".

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

Den andre måten er å legge til et bestemt stilark til barnetemaet ditt som spesifiserer utskriftsalternativene. Dette er hvordan:

  1. Last opp et ekstra stilark til temakatalogen din print.css.
  2. Legg til en referanse til det nye stilarket i functions.php fil. Du vil sørge for at print.css-filen lastes inn etter foreldre- og barnestilarket, slik at stilene lastes inn sist. Jeg la også en prioritet på 100 på denne belastningen, slik at den lastes inn etter plugin. Slik ser referansen min ut:

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å kan du tilpasse print.css-filen og endre alle elementene du vil skjule eller vises annerledes. På nettstedet mitt skjuler jeg for eksempel all navigering, topptekster, sidefelt og bunntekster slik at bare innholdet jeg ønsker å vise blir skrevet ut.

My print.css filen ser slik ut. Legg merke til at jeg også la til marginer, en metode som er akseptert av moderne nettlesere:

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

Hvordan utskriftsvisningen ser ut

Slik ser utskriftsvisningen min ut hvis den skrives ut fra Google Chrome:

WordPress-utskriftsvisning

Avansert utskriftsstyling

Det er viktig å merke seg at ikke alle nettlesere er like. Det kan være lurt å teste hver nettleser for å se hvordan siden din ser ut over dem. Noen støtter til og med noen avanserte sidefunksjoner for å legge til innhold, angi marginer og sidestørrelser, samt en rekke andre elementer. Smashing Magazine har en veldig detaljert artikkel om disse avanserte utskriftene alternativer.

Her er noen sideoppsettdetaljer som jeg innarbeidet for å legge til en copyright-omtale nederst til venstre, en sideteller nederst til høyre og dokumenttittelen øverst til venstre på hver side:

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

  1. 1
  2. 2

Hva tror du?

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.