Is uw WordPress-blog printervriendelijk?

CSS afdrukken

Toen ik de post van gisteren op ROI van sociale media, Wilde ik er een voorbeeld van sturen naar Dotster CEO Clint Page. Toen ik echter naar een pdf afdrukte, was de pagina een puinhoop!

Er zijn nog steeds veel mensen die graag kopieën van een website willen afdrukken om ze te delen, later te raadplegen of om gewoon wat notities te archiveren. Ik besloot dat ik mijn blog printervriendelijk wilde maken. Het was veel gemakkelijker dan ik dacht dat het zou zijn.

Hoe u uw afdrukversie kunt weergeven:

U moet de basisprincipes van CSS begrijpen om dit te bereiken. Het moeilijkste is om de ontwikkelaarsconsole van uw browser te gebruiken om het weergeven, verbergen en aanpassen van de inhoud te testen, zodat u uw CSS kunt schrijven. In Safari moet u de ontwikkelaarstools inschakelen, met de rechtermuisknop op uw pagina klikken en Inhoud inspecteren selecteren. Dat laat u het element en de bijbehorende CSS zien.

Safari heeft een leuke kleine optie om de gedrukte versie van uw pagina in de webinspecteur weer te geven:

Safari - Afdrukweergave in Web Inspector

Hoe u uw WordPress-blog printervriendelijk maakt:

Er zijn een aantal verschillende manieren om uw stijl voor afdrukken op te geven. Een daarvan is om een ​​sectie in uw huidige stylesheet toe te voegen die specifiek is voor het mediatype "print".

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

De andere manier is om een ​​specifiek stijlblad toe te voegen aan uw child-thema dat de afdrukopties specificeert. Hier is hoe:

  1. Upload een extra stylesheet met de naam print.css.
  2. Voeg een verwijzing toe naar de nieuwe stylesheet in je functions.php het dossier. U moet ervoor zorgen dat uw print.css-bestand wordt geladen na uw bovenliggende en onderliggende stylesheet, zodat de stijlen als laatste worden geladen. Ik heb ook een prioriteit van 100 op dit laden geplaatst, zodat het wordt geladen na de plug-in. Dit is hoe mijn referentie eruit ziet:

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 kunt u het bestand print.css aanpassen en alle elementen wijzigen die u wilt verbergen of anders wilt weergeven. Op mijn site verberg ik bijvoorbeeld alle navigatie, kopteksten, zijbalken en voetteksten, zodat alleen de inhoud die ik wil weergeven, wordt afgedrukt.

My print.css bestand ziet er als volgt uit. Merk op dat ik ook marges heb toegevoegd, een methode die door moderne browsers wordt geaccepteerd:

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

Hoe de afdrukweergave eruitziet

Zo ziet mijn afdrukweergave eruit als deze wordt afgedrukt vanuit Google Chrome:

WordPress afdrukweergave

Geavanceerde afdrukstijlen

Het is belangrijk op te merken dat niet alle browsers gelijk zijn gemaakt. Misschien wilt u elke browser testen om te zien hoe uw pagina eruitziet. Sommige ondersteunen zelfs enkele geavanceerde paginafuncties om inhoud toe te voegen, marges en paginaformaten in te stellen, evenals een aantal andere elementen. Smashing Magazine heeft een zeer gedetailleerd artikel over deze geavanceerde print opties.

Hier zijn enkele paginalay-outdetails die ik heb opgenomen om linksonder een copyrightvermelding toe te voegen, een paginateller rechtsonder en de documenttitel linksboven op elke pagina:

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

  1. 1
  2. 2

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.