Guru 2.0 › 3.0
Der Blog für alle die Spass am Web und Design haben…

Trotzdem wir alle stark mit elektronischen Medien arbeiten, brauchen oder wollen wir den einen oder anderen Artikel ausdrucken. Falls man WordPress einsetzt gibt es dafür ein praktisches PlugIn: WP-Print. Dies läuft relativ einfach, ich habe es ja gerade selbst eingerichtet um die Usability des Blogs zu verbessern.

WordPress anpassen

1. PlugIn herunterladen und installieren.
2. Danach auf der PlugIn-Seite aktivieren.
3. Die Permalinks neu generieren.
   1. Einstellungen > Permalinks
   2. Speichern anklicken.
4. Je nachdem ob man die einzelnen Artikel, einen Artikel von der Übersichtsseite oder eine Seite drucken wil, muss man die passenden php-Dateien verändern. Es muss an der passenden Stelle die Zeile “<?php if(function_exists(‘wp_print’)) { print_link(); } ?>” eingefügt werden.
   1. Die Übersichts-/Hauptseite anpassen:
      Suche den Teil “<?php while (have_posts()) : the_post(); ?>” in der index.php Deines Designs und füge dort wo der “Drucken-Link” erscheinen soll die oben angeführte Zeile ein.
   2. Den einzelnen Artikel anpassen:
      Hier suchst Du “<?php if (have_posts()) : while (have_posts()) : the_post(); ?>” in der Datei single.php und fügst danach an der gewünschten Stelle den oben angeführten Befehl ein.
   3. Die Seite anpassen:
      Hier suchst Du “<?php if (have_posts()) : while (have_posts()) : the_post(); ?>” in der Datei page.php und fügst danach an der gewünschten Stelle den oben angeführten Befehl ein.

Eine webSite anpassen

Falls Du kein CMS verwendest, welches die Funktion bereits enthält, gibt es hier ein paar Tipps.

1. Erstelle eigene css-Datein für die Ausgabemedien.

1
2

<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />

2. Ändere alles auf der Seite auf schwarz/weiß um.

1
2
3
4

body {
  color : #000000;
  background : #FFFFFF;
}

3. Ändere die Schrift auf 12 Punkt und serif.

1
2
3
4
5

body {
  font-family : "Times New Roman", Times, serif;
  font-size : 12pt;
}<strong>
</strong>

4. Stelle sicher, dass die URL und der Copyright-Hinweis auf der Seite gedruckt wird.

1
2
3
4

<div id="printFooter" name="printFooter">
  &copy; 2009 bei Guru 2.0<br />
  URL der Seite: http://www.guru-20.info/printer-css-datei/
</div>

Nun definierst Du im Stylesheet für den Bildschirm folgendens:

1
2
3

#printFooter {
  display : none;
}

5. Entferne alle Anzeigen und interaktiven Elemente (Flash, Videos, Sound, …) und auch die Navigation.

Am Besten umschliesst Du diese Elemente mit einem div-Tag und definiest die passende id dazu.

1
2
3
4
5
6
7
8
9
10
11
12

<div id="navigation" name="navigation">
  ...
</div>
<div id="werbung" name="werbung">
  ...
</div>
<div id="inhalt" name="inhalt">
  ...
</div>
<div id="sonst" name="sonst">
  ...
</div>

Nun kannst Du mit deiner print.css alles einfach ausblenden.

1
2
3

#navigation, #werbung, #sonst {
  display : none;
}

6. Entferne alle Frames.

Da webSites heute so oder so ohne Frames erstellt werden, brauchst Du hier eigentlich nichts machen, oder?

7. Entferne die Bilder, die nicht gebraucht werden (zum Beispiel Hintergründe)

Um den Hintergrund für den Druck zu entfernen, musst Du für beide css-Dateien die Klassen richtig definieren. Für den Bildschirm nimmst Du beispielsweise folgendes her:

1
2
3

#content {
  background : transparent url(../images/back) top left repeat;
}

und für den Drucker das:

1
2
3

#content {
  background : #FFFFFF;
}

8. Unterstreiche die Links, damit der Leser sie als solche erkennt.

Da die meisten Anwender bereits Farbdrucker haben, kannst Du die Links ruhig blau unterstreichen.

1
2
3
4

a {
  text-decoration : underline;
  color : #0000FF;
}

9. Füge einen Link zur Seite hinzu, um wieder auf die Original-Seite (nicht-druckerfreundlich) zu kommen.

Das kannst Du in der HTML-Datei einfach erledigen. Nur den a-Tag mit dem passenden href-Attribut einfügen und fertig.

10. Blende nicht benötigte Teile beim Ausdruck aus.

zum Beispiel blendet der folgende Code alle Klassen printLink und printImage aus:

1
2
3
4

@media print {
  .printLink, .printImage {
    display: none;
}

weiterführende Links:

• CSS Media Types Create Print-Friendly Pages [EN]
• Automating Print-Friendly Pages [EN]
• How to Make Printerfriendly Pages [EN]