WordPress – Druckversion einer Website mit print.css Stylesheet optimieren
Wer schon einmal eine Website gedruckt hat weiß, wie miserabel die Druckbarkeit von Websites sein kann. Auch bei WordPress Websites ist das nicht anders – falls man nichts dagegen unternimmt. Standardmäßig ist das Stylesheet des Themes zwar für media=“all“ festgelegt, also für Bildschirme und Drucker. Allerdings interessiert das die Durcken Funktion des Browsers wenig. Das Druck Layout ist trotzdem meist nicht zu gebrauchen. So bringt man mit wenigen Handgriffen etwas Ordnung in das Chaos.
Wie funktioniert das Drucken einer Website?
Das Drucken einer Website läuft sehr ähnlich ab wie die Ausgabe auf dem Bildschirm. Zuerst wird der HTML Code generiert, der die Elemente und Inhalte einer Website enthält und danach werden diesen Elemente mit Hilfe der Stylesheets bestimmte Design-Attribute gegeben, so dass am Ende die fertige Website zu sehen ist.
Dabei lässt sich Steuern, für welche Medien die Stylesheets zuständig sind, so dass für den Bildschirm und den Druck unterschiedliche Layouts möglich werden. Das ist sinnvoll, um in der Druckversion Tinte sparen zu können. Außerdem verhalten sich „Größen“ beim Druck anders als auf dem Bildschirm.
Wie integriere ich ein print Stylesheet?
Wenn man nach „WordPress print“ oder ähnlichen Suchbegriffen sucht, findet man einige Anleitungen dazu, wie man die Druckversion einer WordPress Website optmieren kann. Leider wird oft schon im ersten Schritt ein „Fehler“ gemacht. Damit man das Aussehen einer Website beim Druck unabhängig von der normalen Browserversion unterscheiden kann, muss man eine spezielle Stylesheet Datei in das System einbinden. Diese Stylesheet Datei liefert dann das Aussehen aller Elemente der Website für die Druckversion.
Erstellen der print.css Datei
Zuerst muss man eine neue Datei mit dem Namen „print.css“ erzeugen und diese in den Theme Ordner seiner WordPress installation verschieben.
Einbindung der print.css in WordPress
In einigen Artikeln wird geschrieben, dass man das Stylesheet in der header.php des Theme Ordners im <head> Bereich der Website integrieren soll.
Der Code dafür sieht so aus:
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>Allerdings sollte man Stylesheets (.css Dateien) und Javascript (.js Dateien) in der function.php über den Befehl wp_enqueue_style bzw. wp_enqueue_script in das System einbinden. Dadurch können z.B. Cache Plug-Ins diese Dateien minimieren oder zusammenfügen.
Man muss also in der function.php nach der Stelle suchen, in der auch die anderen Stylesheets eingebunden werden, und die print.css dann einfach hinzufügen. Außerdem erweitern wir die Angaben der style.css Datei, so dass diese nur noch für „screens“ verwendet wird.
wp_enqueue_style( 'style', get_stylesheet_uri(), array() );wird zu:
wp_enqueue_style( 'style', get_stylesheet_uri(), array(), $theme_version, 'screen' );
wp_enqueue_style( 'print', get_stylesheet_directory_uri(). "/print.css", array(), $theme_version, 'print' );Jetzt wird die print.css Datei automatisch in den <head> Bereich der Website integriert und damit bei jedem Seitenaufruf geladen.
Inhalt der print.css Datei
CSS bietet eine Vielzahl von Möglichkeiten an, die Druckversion der Website zu gestalten. Besonders hervorheben muss man, dass es zahlreiche druckspezifische Attribute gibt, die man anwenden kann. Eine ausführliche Liste findet man in diesem sehr interessanten Artikel: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/ .
An dieser Stelle möchte ich jedoch nicht so tief in die Materie einsteigen sondern zeigen, wie man mit einfacheren Mitteln gute Ergebnisse erzielen kann.
Um zu starten sollte man diesen Code in die print.css Datei einfügen:
/* Print Style Sheet */
@media print and (color) {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body { background:white; color:black; margin:0; width: 100%; }
/* ab hier eigenen Code einfügen */
}Der eigene css Code hängt jetzt davon ab, wie die HTML Struktur des Themea aufgebaut ist.
Allen Elementen, die über die volle Breite gehen, sollte man mit diesen css Eigenschaften versehen. Das Element mit der Klasse „container“ ist hier nur ein Beispiel.
.container {
width: 100%;
margin: 0 auto;
padding: 0 0px;
}Jetzt kann man alle Elemente, die in der Druckansicht nicht zu sehen sein sollen einfach ausblenden.
header, footer,#scrollup {
display: none !important;
}Natürlich kann man dieses Prinzip auch umkehren, und gezielt Inhalte für die Druckversion der Seite integrieren, die man dann in der style.css für die Bildschirmanzeige ausblendet. Um den Vorgang etwas zu optimieren, kann man dafür auch eigene Klassen erstellen.
In der style.css:
.hide-on-screen {
display: none !important;
}In der print.css:
.hide-on-print {
display: none !important;
}Damit kann man Elementen jetzt einfach diese Klasse zuweisen und damit die Sichtbarkeit auf dem Bildschirm und der Druckversion steuern.
Anpassung des individuellen CSS Codes
Um jetzt gezielt den CSS Code der Website für den Druck zu optimieren kann man theoretisch einfach die relevanten Teile aus der style.css Datei in die print.css kopieren und dann in der print.css Datei die Darstellung der Website gezielt modifizieren. Die Schriftgrößen und Größenangaben in Allgemeinen kann man etwas verringern und außerdem lassen sich unnötige Hintergründe entfernen. Speziellere Tipps kann ich an dieser Stelle nicht geben ohne den konkreten css Code zu kennen.
Und was ist mit Plug-Ins?
Es gibt einige Plug-Ins, die eine Optimierung der Druckversion der Website versprechen. Leider konnte ich noch keins davon testen. Falls ich mit dem ein oder anderen Plug-In in Zukunft noch Erfahrung sammeln kann werde ich diesen Artikel entsprechend updaten.
