wpLove.de

Samstag, 30. Januar 2010, Geschrieben von adkorte, 12 Kommentare Bild: Marcin Wichary, Lizenz

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):

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(); ?> &raquo; Drucken</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="screen" />

</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 Dublicated 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!

---

Dieser Beitrag wurde am 30. Jan 2010 geschrieben und ist abgelegt in der Kategorie Tipps & Tricks.
Du kannst über neue Kommentare informiert werden, wenn du den RSS 2.0 Feed abonnierst!

Du kannst Druckfunktion für Wordpress ohne Plugin kommentieren, oder einen Trackback von deiner Seite setzen.