Eine ordentliche Druckfunktion gibt es noch immer nicht bei WordPress; selbst bei der Version 3.x kann der Besucher keinen großen Komfort genießen. Zwar gibt es für den einen oder anderen Internetbrowser Plugins oder Zusatzfunktionen, die den Druck etwas verbessern. Aber mal im Ernst: Den meisten Bloggern geht es doch so: Ein schickes Weblayout (und das in nicht wenigen Stunden) zusammengestellt, mit Mühe die Styles so angepasst, dass sie unter Firefox, Opera, Safari, Chrome und (von mir aus auch) dem Internet Explorer gut laufen, aber der Druck sieht katastrophal aus. Dabei gibt es nicht wenige, die längere Artikel nicht am Computerbildschirm lesen wollen, sondern sie lieber ausdrucken möchten. Bei mir erschien beispielsweise die Navigation auf der ersten DIN-A4-Seite, erst bei der zweiten der eigentliche Content. Ein Graus!

Optimiertes Drucken mit WordPress 3.x Optimiertes Drucken mit WordPress 3.x
  • Die „neue“ Druckversion (ohne Firlefanz, nur der reine Artikel):
Optimiertes Drucken mit WordPress 3.x
  • Fußzeile des Ausdrucks (inkl. Infos zum Artikel und der QR-Code):
Optimiertes Drucken mit WordPress 3.x

Bei einem normalen Ausdruck überlappen unnötige Elemente den eigentlichen Artikel. Im besten Falle gibt es zwar keine Überschneidungen, dafür erscheint im Kopf der Seite unnötiger Web-Krimskrams. Zeit also, es nicht bei einer Clientlösung zu belassen, sondern eine zeitgemäße druckoptimierte Funktion den Lesern anzubieten. Neben der Druckfunktion möchte ich zusätzlich einen praktischen QR-Code einbinden, der den Link des Artikels enthält. Inspiriert wurde ich von WPlove.de (für die Druckfunktion) und von ZonaW (für den QR-Code). Sie benötigen kein Plugin!

Die Druckfunktion

Öffnen Sie die functions.php Ihres Themes (wahlweise über Administration -> Design -> Editor -> Theme-Funktionen) und fügen Sie den nachfolgenden Code am besten direkt vor einer anderen Funktion ein. Denken Sie daran, keine Leerzeilen stehen zu lassen (sonst kommt es zu Validierungsproblemen mit dem RSS-Newsfeed!). Wir legen nun die Funktion drucken an:

function drucken() {
$stammurl = get_bloginfo('url');
$permalink = get_permalink();
$permalink = str_replace("$stammurl", "", $permalink);
$alternativerpermalink = str_replace("?p=", "", $permalink);
if($permalink != $alternativerpermalink) {
$urlbasis = get_permalink();
$drucklink = $urlbasis."&print=true";
}
elseif($permalink == $alternativerpermalink) {
$urlbasis = get_permalink();
$drucklink = $urlbasis."?print=true";
}
echo '<a href="'.$drucklink.'" title="Diesen Artikel ausdrucken" Target="_blank">Drucken</a>';
}

Wie Sie sehen, enthält dieser Code bereits die „Drucken“-Linkausgabe. Wenn Sie noch ein Druck-Icon einbauen oder den Linktext ändern wollen, dann müssen Sie es in dieser Funktion vornehmen. Erinnerung: Nach dem Bearbeiten unten auf „Datei aktualisieren“ klicken, um den Quellcode zu speichern. Anschließend öffnen Sie die single.php (im Design-Editor unter „Einzelner Artikel“ zu finden) und fügen dort in die erste Zeile (also VOR allem anderen) folgenden Code ein:

<?php
$print = $_GET['print'];
if($print != "true") { ?>

Danach gehen wir an das Ende des Quellcodes (der single.php) und fügen ans Ende (also NACH dem vorhandenen Code) dieses ein:

<?php } elseif ($print == "true") { ?>
<?php include( TEMPLATEPATH . '/single-drucken.php' ); ?>
<?php } ?>

Wir bleiben in der single.php, um den Link zum Drucken in den Artikel einzubauen. Erfahrungsgemäß sollte die Druckfunktion vor oder nach dem eigentlichen Text stehen; manchmal bietet sich auch beides an. Bei mir steht beispielsweise der Drucken-Link im Artikelkopf neben dem Datum. Den Link fügen wir ganz einfach mit folgendem Code ein, der die Funktion drucken aufruft:

<?php drucken(); ?>

Nun die single.php speichern! Wenn im späteren Artikel der Druck-Link angeklickt wird, leitet der Browser zu einer speziellen Theme-Seite weiter, die wir nun neu erstellen müssen. Sie heißt (in Anlehnung an die Artikelseite) single-drucken.php – über das Webformular lässt sie sich jedoch nicht erstellen. Das bedeutet, wir benutzen z.B. ein FTP-Programm und gehen zu wp-content -> themes -> theme-Name und erstellen dort eine neue (leere) Datei mit dem Namen single-drucken.php (setzen Sie die Schreibrechte CHMOD 0777). Die neue Datei erscheint nun auch im Design-Editor; dort kehren Sie wieder zurück. Die Datei können Sie nach Herzenslust befüllen. Beim Drucken gilt allerdings: Weniger ist mehr! Wir brauchen weder Header oder Footer, noch eine Seitenleiste; auch die meistens Stylesheets werden für den Druck überflüssig. Im nachfolgenden Code ist bereits der QR-Code eingebunden, der „on the fly“ anhand des Artikel-Links erstellt wird. Über den zweidimensionalen Strichcode gibt es hier ein gutes Basiswissen. Das sollten Sie vorher gelesen haben, falls das Thema für Sie völlig neu ist. Ich finde, das ist eine spannende Geschichte und eine spannende Entwicklung. Wer den ausgedruckten QR-Code (z.B. mit dem Handy) einscannt, erfährt den Original-Link und wird ggf. zum Online-Artikel weitergeleitet. Ein toller Service für Ihre Website! In die single-drucken.php fügen Sie nun folgenden Code ein:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php wp_title(); echo " | "; bloginfo('name'); ?> | Druckversion</title>
<meta name="Robots" content="noindex, nofollow">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/drucken.css" media="all" />
<script type='text/javascript'>
window.onload = function () {
if(confirm('Möchten Sie diese Seite JETZT ausdrucken?')) {
window.print();
}
}</script>
</head>
<body>
<div>
<?php if(have_posts()): ?>
<?php while(have_posts()) : the_post(); ?>
<p id="titel"><?php the_title(); ?></p>
<p id="info">von <?php the_author(); ?> | <?php the_time('d.m.Y'); ?> | Shortlink: <?php $key="yourls_shorturl"; echo get_post_meta($post->ID, $key, true); ?></p>
<div id="inhalt">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
<div id="fusszeile">
<hr style="width:100%; color:black; height:2px;margin-top:20px;">
<table border="0" cellspacing="0" cellpadding="0"><tr><td valign="top"><img style="margin-left:0px;margin-top:0px;margin-right:5px;margin-bottom:5px;" src="http://chart.apis.google.com/chart?chs=130x130&chld=H|0&cht=qr&chl=<?php the_permalink(); ?>&choe=UTF-8" title="Dieser QR-Code enthält den Link zum Online-Artikel" alt="Dieser QR-Code enthält den Link zum Online-Artikel"></td>
<td  valign="top" id="bloginfo">Quelle: <?php bloginfo('name'); ?><br>
Website: <?php bloginfo('url'); ?><br>
Artikel-Shortlink: <?php $key="yourls_shorturl"; echo get_post_meta($post->ID, $key, true); ?><br>
Autor: <?php the_author(); ?><br>
Veröffentlichung: <?php the_time('d. F Y'); ?><br>
Ressorts: <?php the_category(', '); ?><br>
Lizenz: <img title="CreativeCommons Lizenz [Version 3.0 Deutschland]: Namensnennung - Nicht kommerziell - Keine Bearbeitung" alt="CreativeCommons Lizenz [Version 3.0 Deutschland]: Namensnennung - Nicht kommerziell - Keine Bearbeitung" src="http://i.creativecommons.org/l/by-nc-nd/3.0/de/80x15.png"></td></tr></table>
<p id="bloginfo">Der Artikel ist urheberrechtlich geschützt und darf nur zu privaten Zwecken weiterverwertet werden. Jede andere Verwendung bedarf der schriftlichen Genehmigung des Autors. Für Leserbriefe nutzen Sie bitte die Kommentarfunktion unterhalb des Online-Artikels; für anderweitige Rückfragen nutzen Sie bitte das Kontaktformular im Impressum.</p></div>
</div>
</body>
</html>

Den Quellcode können Sie natürlich nach Bedarf und Belieben verändern. Für die Shortlink-Funktion nutze ich YOURLS und das dazugehörige WP-Plugin. Nun fehlen noch die CSS-Stylesheets! Wir gehen wie beim Anlegen der single-drucken.php vor und erstellen im selbigen Ordner die Datei drucken.css und vergeben wieder Schreibrechte (CHMOD 0777). Wir kehren zum Design-Editor zurück und fügen folgenden Code ein:

body {
font-family: 'Georgia', 'Verdana', 'Arial';
font-size: 12pt;
color: black;
line-height: 120%;
}
a {
color: #000000;
text-decoration:none;
bottom:none;
}
a:hover {
color: #000000;
text-decoration:none;
bottom:none;
}
.center {
width: 90%;
margin: 5% auto 5% auto;
}
#titel {
font-weight: bold;
font-size: 23pt;
margin: 0px;
line-height: 100%;
}
#info {
font-size: 13pt;
color: #666666;
margin: 10px 0 0 0;
}
#info strong {
font-weight: normal;
color: gray;
}
#info a {
color: #666666;
text-decoration: none;
}
#link {
padding-bottom: 25px;
color: #333333;
margin: 5px 0 0 0;
}
#inhalt {
padding-bottom: 10px;
text-align:justify;
}
#inhalt p {
line-height: 150%;
font-size: 11pt;
}
#inhalt p a {
text-decoration: none;
}
#inhalt h3 {
font-weight: normal;
font-size: 15pt;
}
#inhalt ul {
font-size: 12pt;
line-height: 150%;
}
#bloginfo {
color: #666666;
margin: 10px 0 10px 0;
text-align:justify;
}
#bloginfo a {
color: #666666;
}

Nun kommen wir zum anstrengsten, zumindest doch langwierigsten Teil. Ein „Drucken“-Button ist zwar eine feine Sache, aber ich behaupte, dass mehr als 2/3 aller Besucher eben nicht auf diesen Link klicken, sondern stumpf den Internetbrowser (z.B. mit Strg+P oder über Datei->Drucken) anweisen zu drucken. Dafür müssen wir in der header.php die drucken.css hinzufügen, um auch dort druckerfreundliche Angaben zu machen. Öffnen Sie im Design-Editor die header.php und suchen nach dem Tag link rel=“stylesheet“ – Dort befindet sich der normale CSS-StyleSheet für Ihren Blog. Sollte sich in diesem Tag bei media die Angabe „all“ befinden, ändern Sie dies in „screen,handheld“ um. Bei „all“ wird auch beim Drucken dieses CSS verwendet, was wir aber vermeiden möchten (siehe Screenshot-Beispiel ganz oben). Diesen Tag kopieren Sie nun und fügen ihn eine Zeile darunter ein. In der zweiten Zeile ändern wir style.css in drucken.css und den media-Part in print. Beispiel:

<link rel="stylesheet" href="http://meinedomain.de/wp-content/themes/meintheme/style.css" type="text/css" media="screen,handheld">
<link rel="stylesheet" href="http://meinedomain.de/wp-content/themes/meintheme/drucken.css" type="text/css" media="print">

Speichern! Jetzt verwendet der Internetbrowser die Datei drucken.css beim Ausdrucken. Nervig ist nun das Heraussuchen aller Elemente in Ihrem Blog, die Sie für den Druck ganz einfach ausblenden möchten (denken Sie da nur mal an das Menü oder die Seitenleiste!). Ggf. müssen Sie zusätzlich id-Tags vergeben, wie in diesem Beispiel:

<table id="undruckbaretabelle">

Dieser Vorgang ist manchmal ganz schön aufwendig. Öffnen Sie die drucken.css und benutzen für jedes auszublendene Element die Angabe display:none; (das klappt aber leider nicht immer, so kriege ich z.B. den Facebook-Button nicht weg). Beispiel:

#undruckbaretabelle {
display:none;
}

In meinem Blog habe ich die Fußzeile mit den Infos zum Artikel sowie dem QR-Code (siehe Screenshot oben!) auch in die normale single.php eingebaut. Den nachfolgenden Quellcode (der identisch mit dem Part in der single-drucken.php ist) müssen Sie in die single.php unmittelbar vor <?php comments_template();?> eingefügen.

<div id="fusszeile">
<hr style="width:100%; color:black; height:2px;margin-top:20px;">
<table border="0" cellspacing="0" cellpadding="0"><tr><td valign="top"><img style="margin-left:0px;margin-top:0px;margin-right:5px;margin-bottom:5px;" src="http://chart.apis.google.com/chart?chs=130x130&chld=H|0&cht=qr&chl=<?php the_permalink(); ?>&choe=UTF-8" title="Dieser QR-Code enthält den Link zum Online-Artikel" alt="Dieser QR-Code enthält den Link zum Online-Artikel"></td>
<td  valign="top" id="bloginfo">Quelle: <?php bloginfo('name'); ?><br>
Website: <?php bloginfo('url'); ?><br>
Artikel-Shortlink: <?php $key="yourls_shorturl"; echo get_post_meta($post->ID, $key, true); ?><br>
Autor: <?php the_author(); ?><br>
Veröffentlichung: <?php the_time('d. F Y'); ?><br>
Ressorts: <?php the_category(', '); ?><br>
Lizenz: <img title="CreativeCommons Lizenz [Version 3.0 Deutschland]: Namensnennung - Nicht kommerziell - Keine Bearbeitung" alt="CreativeCommons Lizenz [Version 3.0 Deutschland]: Namensnennung - Nicht kommerziell - Keine Bearbeitung" src="http://i.creativecommons.org/l/by-nc-nd/3.0/de/80x15.png"></td></tr></table>
<p id="bloginfo">Der Artikel ist urheberrechtlich geschützt und darf nur zu privaten Zwecken weiterverwertet werden. Jede andere Verwendung bedarf der schriftlichen Genehmigung des Autors. Für Leserbriefe nutzen Sie bitte die Kommentarfunktion unterhalb des Online-Artikels; für anderweitige Rückfragen nutzen Sie bitte das Kontaktformular im Impressum.</p></div>

Anschließend muss in der normalen style.css noch folgende Angabe gemacht werden, damit diese Fußzeile nicht auf dem Bildschirm auftaucht, sondern nur gedruckt werden soll:

#fusszeile {
display:none;
}

FERTIG. Sie haben nun eine elegante Druckfunktion inklusive dem QR-Code in Ihren WordPress-Blog etabliert. Der Aufwand hat sich gelohnt, Ihre Besucher werden es Ihnen danken. Zumindest im Stillen ;-) Zum Schluss sei noch das WordPress-Plugin „wp-Typography“ empfohlen, das u.a. eine Silbentrennung vornimmt. Diese augenfreundlichere Version kommt nicht nur dem Bildschirmlesen, sondern auch dem Ausdruck zugute.