Is uw WordPress-blog printervriendelijk?

CSS afdrukken

Zoals ik het bericht van gisteren heb voltooid 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 de inhoud te testen, te verbergen en aan te passen, 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 toont u het element en de CSS die zijn gekoppeld.

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 aan uw child-thema toe te voegen 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 na uw bovenliggende en onderliggende stijlblad wordt geladen, zodat de stijlen als laatste worden geladen. Ik heb ook een prioriteit van 100 bij dit laden geplaatst, zodat het na de plug-in wordt geladen. Hier ziet mijn referentie eruit:

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 zo 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. U kunt 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 details van de pagina-indeling die ik heb opgenomen om een ​​copyrightvermelding linksonder, een paginateller rechtsonder en de documenttitel linksboven op elke pagina toe te voegen:

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

  1. 1
  2. 2

Wat denk je?

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