Är din WordPress-blogg skrivarvänlig?

Skriv ut CSS

När jag avslutade gårdagens inlägg den ROI för sociala medier, Jag ville skicka en förhandsgranskning av den till Dotsters VD Clint Page. När jag skrev ut till en PDF var sidan dock en enda röra!

Det finns fortfarande många människor där ute som gillar att skriva ut kopior av en webbplats för att dela, referera senare eller bara arkivera med några anteckningar. Jag bestämde mig för att jag ville göra min blogg utskriftsvänlig. Det var mycket lättare än jag trodde det skulle bli.

Så här visar du din utskriftsversion:

Du måste förstå grunderna i CSS för att uppnå detta. Den svåraste delen är att använda din webbläsares utvecklarkonsol för att testa att visa, dölja och justera innehållet så att du kan skriva din CSS. I Safari måste du aktivera utvecklarverktygen, högerklicka på din sida och välja Inspektera innehåll. Det visar det element och CSS som är associerade.

Safari har ett trevligt litet alternativ att visa utskriftsversionen av din sida i webbinspektören:

Safari - Utskriftsvy i webbinspektör

Så här gör du din WordPress-blogg utskriftsvänlig:

Det finns ett par olika sätt att specificera din styling för utskrift. En är bara att lägga till ett avsnitt i ditt nuvarande formatmall som är specifikt för mediatypen "utskrift".

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

Det andra sättet är att lägga till ett specifikt stilark i ditt barns tema som anger utskriftsalternativen. Här är hur:

  1. Ladda upp ett extra formatmall till din temakatalog som heter print.css.
  2. Lägg till en referens till det nya formatmallen i din functions.php fil. Du vill se till att din print.css-fil laddas efter ditt förälders och underordnade stilark så att dess format laddas sist. Jag lade också en prioritet på 100 på denna laddning så att den laddas efter plugin. Här ser min referens 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);

Nu kan du anpassa print.css-filen och ändra alla element som du vill dölja eller visas annorlunda. På min webbplats döljer jag till exempel all navigering, sidhuvuden, sidofält och sidfot så att endast innehållet jag vill visa skrivs ut.

My print.css filen ser ut så här. Lägg märke till att jag också lagt till marginaler, en metod som accepteras av moderna webbläsare:

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

Hur utskriftsvyn ser ut

Så här ser min utskriftsvy ut om den skrivs ut från Google Chrome:

WordPress-utskriftsvy

Avancerad utskriftsstil

Det är viktigt att notera att inte alla webbläsare är skapade lika. Du kanske vill testa varje webbläsare för att se hur din sida ser ut över dem. Vissa stöder till och med vissa avancerade sidfunktioner för att lägga till innehåll, ställa in marginaler och sidstorlekar, samt ett antal andra element. Smashing Magazine har en mycket detaljerad artikel om dessa avancerade utskrifter alternativ.

Här är några sidlayoutdetaljer som jag införlivade för att lägga till ett copyright-omnämnande längst ner till vänster, en sidräknare längst ner till höger och dokumenttiteln längst upp till vänster på varje sida:

@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

Vad tror du?

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.