Spannende Artikel oder gute Tutorials möchte man das ein oder andere mal auch ausdrucken.
Doch in den allermeisten Fällen gibt es da ein Problem: Druckt man die Seite über den Browserbefehl (bei Macs etwa Apfel + P), so bekommt man mehr, als man eigentlich möchte: Es werden die Anzeigen und alle Bilder, die Navigation und der Footer mit ausgedruckt. Also Dinge, die eigentlich nur stören.
Auch auf wpLove ist das so. So sieht etwa ein Artikel aus, wenn man ihn über den Browser druckt (zur Anschaulichkeit nur einmal die erste Seite):
Über den Browser ausdrucken
Das sieht wirklich blöd aus, so macht das Lesen (und klassische Markieren mit einem Stift) wirklich keine Lust. Und um unseren Lesern einen Mehrwert zu bieten und gleichzeitig die Funktionalität unseres Blogs zu verbessern, basteln wir uns heute eine Ausdrucken-Funktion.
Funktion anlegen
Wie immer beginnt auch dieses Tutorial mit der Grundfunktion, die wir später einmal brauchen werden. Wir müssen WordPress mit der Funktion erst einmal sagen, was genau wir vorhaben. Das Endergebnis sieht so aus:
function artikeldrucken() {
$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 '<p class="print"><a href="'.$drucklink.'" title="Diesen Artikel drucken">Artikel drucken</a></p>';
}
Mit dieser Grundfunktion tun wir zunächst nichts anderes, als die Pfade zum Artikel zu definieren. In einem zweiten Schritt wird dann die URL zur Druckseite definiert (je nachdem wie man die eigenen Permalinks angepasst hat) und im dritten Schritt wird die Ausgabe des Links zur Druckseite generiert.
Soweit unsere Funktion. Diese Funktion wird – natürlich – in der
functions.php
gespeichert!
single.php anpassen und Drucklink ausgeben
Die Funktion, die die Ausgabe der Druckseite erzeugt, gibt es nun. Allerdings müssen wir dem Besucher nun die Möglichkeit geben, den Artikel auch zu drucken.
Dafür bedarf es eines ersten Schritts: Wir müssen unterscheiden, ob die normale Seitenansicht gezeigt wird, oder ob wir schon auf der Druckansicht sind, bei der eben nicht das normale Design zu sehen ist.
Auch das kann man wieder über eine einfache IF-ELSE-Abfrage laufen lassen:
<?php
$print = $_GET['print'];
if($print != "true") { ?>
NORMALES LAYOUT
<?php } elseif ($print == "true") { ?>
<?php include( TEMPLATEPATH . '/single-drucken.php' ); ?>
<?php } ?>
Wichtig ist an dieser Stelle, dass du den ersten Teil vor dem Abfragen des Headers setzt und den letzten Teil auch erst nach dem Footer einbindest.
Sonst kommt es zu schweren Fehlern.
Wie du im Quelltext oben sehen kannst, binden wir unser Druck-Layout nicht in der single.php ein, um ein unnötiges Aufblähen der Datei zu verhindern und somit die Performance der Seite beizubehalten. Erst wenn der Besucher wirklich schon auf der Druckseite ist, wird ein neues, bzw. verändertes Layout angezeigt.
Drucklink einbinden
Wir müssen dem Besucher jetzt allerdings noch die Möglichkeit geben, das Drucklayout auch überhaupt aufrufen zu können. Dafür müssen wir den entsprechenden Link zur Druckseite setzen. Eine geeignete Stelle dafür zu finden, sei deine Aufgabe. Es empfiehlt sich hierfür immer das Ende des Artikels und der Seitenheader.
Hast du die passende Stelle gefunden, dann musst du nichts anderes tun, als die eben definierte Funktion aufzurufen. Das funktioniert mit dem bekannten PHP-Befehl um eine Funktion einzubinden:
<?php artikeldrucken(); ?>
Solltest du nach diesem Schritt eine Fehlermeldung erhalten, so wirst du dich vermutlich vertippt haben. Es ist ganz wichtig, dass Funktion und dieser “Link” denselben Namen haben.
Druck-Layout
In der Unterscheidung, ob sich der Besucher auf der normalen Ansicht oder schon in der Druck-Ansicht befindet, haben wir festgelegt, dass es ein neues Druck-Layout gibt. In diesem Fall heißt die dazu angelegte Datei single-drucken.php Diese Datei müssen wir nun anlegen.
Im Prinzip steht in der Datei nichts anderes, als in der single.php. Mit dem entscheidenden Unterschied, dass wir auf ganz viel verzichten können und dann doch ein paar Dinge anders machen müssen:
- Header, Footer, Sidebar müssen nicht eingebunden werden
- Die Kommentare werden nicht eingebunden
- Es muss eine neue HTML-Datei angelegt werden
- Wir brauchen eine neue Stylesheet, die unsere Druckansicht optimiert.
Ansonsten können wir aber die definierten Template-Tags benutzen, die WordPress vorgibt.
Im Prinzip sind den Ideen beim Druck-Layout keine Grenzen gesetzt. Man sollte es nur so clean wie möglich halten. Denn sonst braucht man ja kein Druck-Layout. Und auch auf Bilder kann man ruhig verzichten.
Als Idee möchte ich hier nun ein Beispiel für ein mögliches Layout angeben:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<title><?php bloginfo('name'); wp_title(); ?> » Drucken</title>
<meta name="Robots" content="noindex, nofollow" />
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
</head>
<body>
<div class="center">
<?php if(have_posts()): ?>
<?php while(have_posts()) : the_post(); ?>
<p id="titel"><?php the_title(); ?></p>
<p id="info">Datum: <strong><?php the_time('d. F, Y'); ?></strong> | Kategorie: <?php the_category(', '); ?></p>
<p id="link"><?php the_permalink(); ?></p>
<div id="inhalt">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
<p id="bloginfo">Dieser Artikel wurde veröffentlicht auf <?php bloginfo('name'); ?> - <?php bloginfo('url'); ?></p>
<p id="drucken"><a href="#print" onclick="window.print(); return false;" title="Klicken, um den Artikel zu drucken">Artikel drucken</a></p>
</div>
</body>
</html>
Die zugehörige CSS-Datei wäre in diesem Fall:
/***
Druckerfreundliches Layout
***/
body {
font-family: 'Georgia', 'Verdana', 'Arial';
font-size: 12pt;
color: black;
line-height: 120%;
}
.center {
width: 90%;
margin: 5% auto 5% auto;
}
#titel {
font-size: 25pt;
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;
}
#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;
}
#drucken {
margin: 0px;
}
SEO-Anpassung des Druck-Layouts
Wie du dein Layout anpasst, ist letztlich egal. Du musst nur unbedingt darauf achten, keinen Duplicate Content zu erzeugen! Denn sonst hat dein guter Willen dir geschadet und die Suchmaschinen kennzeichnen dich als “böse”. Bitte achte daher darauf, dass in deinem Druck-Layout angegeben ist, dass die Suchmaschinen den Content nicht indizieren und auch den Links nicht folgen. In der Beispiel Datei habe ich das angegeben.
Fertig!
Das war’s schon, viel Spaß beim Umsetzen und Drucken!
Fragen und Anregungen
Dem stehe ich sehr offen gegenüber, bitte schreibe einfach einen Kommentar! Bitte hab aber Verständnis dafür, dass ich Anfragen per Mail grundsätzlich nicht beantworte. Dieser Blog finanziert sich nur über die Werbung und wenn ich E-Mail-Support für meine Tutorials geben würde, dann wäre ich bald arm!
Ich versuche aber, die Kommentare so schnell wie möglich zu beantworten. Und wenn du einen Fehler entdeckt hast: Bitte sofort melden!
20 Kommentare zu "Druckfunktion für WordPress ohne Plugin"
Hey Adrian,
eine Frage, die hab ich eigentlich nicht. Aber ne Anmerkung! Nice Hack – obgleich ich mich immer noch frage, wieviele Menschen eigentlich (noch) Artikel ausdrucken!??
Hast Du da Zahlen? Also so eine prozentzahl an Lesern (von Nachrichtenseiten zum Beispiel)?
Cya
Phil
Nein, Zahlen habe ich da nicht.
Wobei mich diese Frage beim Schreiben des Tutorials auch nicht primär interessiert hat! 😉
Dieses Tutorial ist sicherlich ncihts für klassische Blogs. Ich glaube kaum, dass dort irgendein Leser den Wunsch zum Drucken verspürt.
Anders ist es aber bei Rezepten, Lexiko/Glossaren, Tutorials, etc…
Da drucke ich persönlich das ein oder andere Mal schon noch einen Artikel aus, um mich Schritt für Schritt an den Artikel/das Rezept/das Tutorial halten kann.
Nein, Zahlen habe ich da nicht.
Wobei mich diese Frage beim Schreiben des Tutorials auch nicht primär interessiert hat! 😉
Dieses Tutorial ist sicherlich ncihts für klassische Blogs. Ich glaube kaum, dass dort irgendein Leser den Wunsch zum Drucken verspürt.
Anders ist es aber bei Rezepten, Lexiko/Glossaren, Tutorials, etc…
Da drucke ich persönlich das ein oder andere Mal schon noch einen Artikel aus, um mich Schritt für Schritt an den Artikel/das Rezept/das Tutorial halten kann.
Hallo Adrian , Du sprichts mir aus der Seele – bin gerade bei unserem Blog dabei alles übersichtlich , funktional und druckbar anzulegen . Ist mir eine Hilfe .
Gruß Ralf
Hallo Ralf.
Vielen Dank für dein Feedback. Gern kannst du dich bei Fragen in den Kommentaren noch einmal melden!
Und ein Link hierher wäre natürlich schön. 😉
Hab aber bitte Verständnis dafür, dass ich gewerbliche Seiten hier nicht als Kommentarlink stehen lasse.
Werbung kannst du gern buchen.
Hallo Adrian,
ich habe bei mir nur eine zusätzliche css-Datei für den Ausdruck eingebunden mit der Angabe media=”print”.
Das funktioniert ganz ordentlich.
http://bit.ly/cYvkUp
Danke für diesen sehr wertvollen Tipp! 🙂
Werde ich mir mal näher anschauen, vielleicht waren meine 2 Stunden Arbeit für das Tutorial ja tatsächlich ganz umsonst. 😀
Ich habe über deinen Vorschlag nochmal nachgedacht und halte nun ein Erweiterung des Themes (wie in diesem Tutorial) durchaus für angebracht. Kann man doch mit den speziellen Druck-Templates auch Fußnoten einsetzen oder das Layout auch ganz verändern. In dem ein oder anderen Fall kann das durchaus Sinn machen. 😉
Hallo Adrian,
das ist natürlich ein Vorteil. So könnte man im Ausdruck eine Kontaktadresse oder Grafiken mit einbinden. Dürfte gerade für kommerzielle Seiten interessant sein.
Eben das.
Das muss nicht für einen privaten Blog wichtig sein, kann aber für alle größeren Sachen (und da gibt es ja auch einiges, was mit WordPress betrieben wird) durchaus hilfreich und interessant sein.
Nur könnte man die Funktion noch etwas flüssiger machen, das geb’ ich zu. Mal weiter rumexperimentieren… 😉
Hallo Adrian. Eigentlich kenne ich mich mit PHP und allem Kram recht wenig aus. Bin aber durch deinen Code neugierig geworden die Funktion einfach einmal auszuprobieren. Und ich muss sagen, nachdem ich anfänglich einige Fehler hatte, lief es im Nachhinein ganz gut. Bin total überrascht, wie wenig man von einer Programmiersprache verstehen, muss, um solche Funktionen in bestehenden Code integrieren zu können. Dich könnte ich gut als Tutor für meine weiteren Projekte gebrauchen. Aber ich habe ja auch die Möglichkeit regelmäßig auf deinen Blog zu schauen, um zu sehen, ob du schon wieder neue interessante Themen eingestellt hast. Ich finde es immer besonders toll, wenn Menschen anderen ihr Wissen zur Verfügung stellen, ohne gleich riesen Summen dafür zu verlangen. Vielleicht habe ich ja auch bald ein paar Sachen, die ich dann anderen als Hilfe mit an die Hand geben kann. Auf alle Fälle bemühe ich mich jetzt weiter in PHP einzudringen, um mein Wissen weiter auszubauen.
Hallo, interessanter Ansatz, jedoch finde ich ist CSS dafür da. Habe auch eine Print Funktion gemacht und eine zusätzliche printOnly und noPrint Klasse fürs CSS. Damit kann man dann wunderbar bestimmen welche Inhalte wo angezeigt werden sollen. Des weiteren habe ich einen QR-Code in die Druckausgabe aufgenommen, damit, wenn man den Artikel doch nochmal online lesen will, diesen einfach mit dem Handy einscannen kann. Grüße,
Tim
Hallo Adrian,
ich habe mir erlaubt, Deinen Code aufzunehmen, ihn neu zu schreiben, an einigen Stellen zu optimieren und zusätzlich noch einen QR-Code einzubauen. Außerdem erscheint automatisch eine Drucker-Abfrage beim Besucher, ob nun gedruckt werden soll. Desweiteren gibt es eine informative Kopfzeile, die (neben dem QR-Code) Angaben über den Artikel, die Urheberrechte etc. enthält. Siehe hier: http://blog.rockbaer.de/1598/wordpress-3-optimiertes-drucken-qr-code.html
Schöne Grüße
Sebastian
Hallo Sebastian!
Vielen Dank für deinen Kommentar und auch Dank und Anerkennung für deine Weiterentwicklung! 🙂
Ich hab nen dicken Serverumzug hinter mir… deswegen die kurze Info: wenn jemand Interesse an der erweiterten Druckfunktion hat, der möge folgenden aktuellen Link benutzen: http://www.rockbär.de/1598/wordpress-3-optimiertes-drucken-qr-code.html
Hello,
Dein Kommentarfeld (gelb, in dem auch Links zu Google+, twitter und facebook enthalten sind) hat folgenden Text:
“Wenn dir diesel Beitrag befallen hat, dannkommentiere inn dock bitte oder abonniere den RSS Feed um in Zukunft neue Artikel automatisch in deinem Feedreader zu lesen. Bitte teile diesen Beitrag auch im Web, damit ihn mehr Menschen finden können. Danke!!”
Sieht so aus, als ob der Text zu relativ später Stunde entstanden ist;-):
“diesel” -> dieser
“befallen” -> gefallen
“dannkommentiere” -> dann kommentiere
“inn” -> ihn
“dock” -> doch
Ansonsten vielen Dank für den Artikel. Ich werde ihn beherzigen, wenn ich wieder etwas Zeit für mein noch im Aufbau befindliches Template hab…
Danke für den Hinweis. 😀
Ich vermute das war die bekloppte neue Auto-Korrektur von Mac OS 10.7. 😉
Also bei hat es schon ganz am Anfang die functions.php zerschossen…
Parse error: syntax error, unexpected T_VARIABLE in …
Geht nicht. Schade.
Mal auf den Tacho geschaut? Der Artikel ist 6 Jahre alt.
Trackbacks zu diesem Artikel