Post navigation

Nützlich: So erstellst Du ein Print-Stylesheet mit Button für Deinen Blog

Viele Menschen möchten auch heute noch Artikel aus den verschiedensten Gründen ausdrucken. Jeder Blog mit professionellem Anspruch sollte eine Druckfunktion mit einem Button bereitstellen. Heute zeige ich dir, wie du ein gutes Print-CSS und einen Druck-Button für deinen Blog erstellen kannst.

So einfach erstellst du ein Druck-CSS für deinen Blog

Die grundlegenden Arbeiten und die Erklärungen zu den einzelnen Bereichen des print.css habe ich bereits auf Dr.Web.de eingehend beschrieben. Daher verlinke ich hier nur das print.css.

Wichtige Arbeiten, die noch auszuführen sind, bevor du das Stylesheet einsetzen kannst:

  • Zeile 11: Finde die richtigen IDs oder Klassen für den Inhaltsbereich deines Blogs.
  • Zeile 100: Finde die Klassen oder IDs der Elemente, die du in der Druckansicht ausblenden möchtest. Das wären zum Beispiel die Navigation, die Kommentare, die Sidebar, die Autor-Bio, der Footer und so weiter…
  • Zeile 111 und 117: Füge eigene Nachrichten ein, die du vor und nach dem Inhalt anzeigen möchtest. Du wirst die Klassen oder IDs anpassen müssen, ansonsten zeigt der Code die Nachrichten nicht an.

So findest du die richtigen IDs und Klassen heraus:

Klicke mit der rechten Maustaste auf ein Element, dass du ausblenden möchtest und wähle aus dem Kontext-Menü von Firefox oder Google Chrome »Element untersuchen« aus. Im Fenster rechts kannst du dann die verwendeten Klassen oder IDs ablesen und musst sie dann nur noch in das Druck CSS übertragen.

So einfach findest Du mit den Entwicklerwerkzeugen Deines Browsers die richtigen Klassen und IDs raus.

So einfach findest Du die richtigen Klassen und IDs raus.

Dafür benötigst du einen HTML-Editor, ich kann dir den kostenlosen Editor Brackets empfehlen. Du bekommst ihn für Windows und Mac OS X.

/**
 * Print Stylesheet fuer Deinewebsite.de
* @version         1.0
* @lastmodified    16.06.2016
*/

@media print {
 
/* Inhaltsbreite setzen, Floats und Margins aufheben */
/* Achtung: Die Klassen und IDs variieren von Theme zu Theme. Hier also eigene Klassen setzen */
#content, #page {
width: 100%; 
margin: 0; 
float: none;
}
    
/** Seitenränder einstellen */       
@page { margin: 2cm }

/* Font auf 16px/13pt setzen, Background auf Weiß und Schrift auf Schwarz setzen.*/
/* Das spart Tinte */
body {
font: 13pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
background: #fff !important;
color: #000;
}

h1 {
font-size: 24pt;
}

h2, h3, h4 {
font-size: 14pt;
margin-top: 25px;
}    
 
/* Alle Seitenumbrüche definieren */
a {
    page-break-inside:avoid
}
blockquote {
    page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 { page-break-after:avoid; 
     page-break-inside:avoid }
img { page-break-inside:avoid; 
     page-break-after:avoid; }
table, pre { page-break-inside:avoid }
ul, ol, dl  { page-break-before:avoid }
    
/* Linkfarbe und Linkverhalten darstellen */
a:link, a:visited, a {
background: transparent;
color: #520;
font-weight: bold;
text-decoration: underline;
text-align: left;
}

a {
    page-break-inside:avoid
}

a[href^=http]:after {
      content:" <" attr(href) "> ";
}

$a:after > img {
   content: "";
}

article a[href^="#"]:after {
   content: "";
}

a:not(:local-link):after {
   content:" <" attr(href) "> ";
}
    
/**
 * Eingebundene Videos verschwinden lassen und den Whitespace der iframes auf null reduzieren.
 */
.entry iframe, ins {
    display: none;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    line-height: 0pt !important;
    white-space: nowrap;
}
.embed-youtube, .embed-responsive {
  position: absolute;
  height: 0;
  overflow: hidden;
}
    
/* Unnötige Elemente ausblenden für den Druck */

#header-widgets, nav, aside.mashsb-container, 
.sidebar, .mashshare-top, .mashshare-bottom, 
.content-ads, .make-comment, .author-bio, 
.heading, .related-posts, #decomments-form-add-comment, 
#breadcrumbs, #footer, .post-byline, .meta-single, 
.site-title img, .post-tags, .readability 
{
display: none;
}
    
/* Benutzerdefinierte Nachrichten vor und nach dem Inhalt einfügen */
.entry:after {
content: "\ Alle Rechte vorbehalten. (c) 2014 - 2016 TechBrain - techbrain.de";
color: #999 !important;
font-size: 1em;
padding-top: 30px;
}
#header:before {
content: "\ Vielen herzlichen Dank für das Ausdrucken unseres Artikels. Wir hoffen, dass auch andere Artikel von uns Ihr Interesse wecken können.";
color: #777 !important;
font-size: 1em;
padding-top: 30px;
text-align: center !important;    
}

/* Wichtige Elemente definieren */    
p, address, li, dt, dd, blockquote {
font-size: 100%
}

/* Zeichensatz fuer Code Beispiele */
code, pre { font-family: "Courier New", Courier, mono}

ul, ol {
list-style: square; margin-left: 18pt;
margin-bottom: 20pt;    
}

li {
line-height: 1.6em;
}    
    
}

Wichtig:

Nachdem du dein Druck-CSS angepasst hast, lädst du es in den CSS-Ordner deines Themes per FTP hoch. Sollte noch kein CSS-Ordner vorhanden sein, erstelle ihn im Theme-Hauptverzeichnis.

Solltest du ein Child-Theme nutzen, musst du den folgenden Code anpassen. Tausche dann get_stylesheet_directory_uri() gegen get_template_directory_uri() aus.

Im Anschluss fügst du noch folgenden Code in die functions.php deines Themes ein:

/* Die korrekte Funktion zum Hinzufügen des print.css */

function drweb_print_styles(){
    wp_enqueue_style(
        'drweb-print-style', 
        get_stylesheet_directory_uri() . '/css/print.css', 
        array(), 
        '20130821', 
        'print' // print styles only
    );
}
add_action( 'wp_enqueue_scripts', 'drweb_print_styles' );

Jetzt sollte dein neues Print-Stylesheet geladen werden. Schau dir zur Vorsicht den Quellcode deiner Website an und suche das Stylesheet im Header-Bereich.

Der Print-Button für das Theme

Im Grunde genommen ist ein Print-Button nicht sonderlich aufregend, es ist ein einfacher Link mit etwas JavaScript kombiniert. Dazu kommt ein wenig CSS, damit der Button schick aussieht, eine Überschrift darüber und fertig.

Mit einer kleinen PHP-Funktion versehen erscheint der Button unterhalb des Inhalts, ohne dass du die Theme-Dateien anfassen musst. Zusätzlich bekommt der Button noch etwas CSS, damit er auch schick aussieht.

Sollte dein Theme den Font Awesome verwenden, dann bekommt der Button noch automatisch ein schickes Icon verpasst. Füge diesen Code in die functions.php deines Themes ein.

Der Code für den Button

<?php

// Ab hier den Code kopieren
function tb_print_button($content) {
if( is_single() ) { // Fügt den Print-Button nur unterhalb der Beiträge ein
$beforecontent = '';
$aftercontent = '<div id="printcomment"><h5 id="printthis">ARTIKEL AUSDRUCKEN</h5><a class="druck" href="javascript:window.print()" title="Beitrag ausdrucken">Beitrag ausdrucken</a></div>';
}
$fullcontent = $beforecontent . $content . $aftercontent;
return $fullcontent;

}
add_filter('the_content', 'tb_print_button');

// Etwas CSS, damit der Button gut aussieht. Wenn Dein Theme den Font Awesome verwendet, bekommt der Button noch automatisch ein Icon
function tb_print_button_css() {
?>
<style>
a.druck {
    font-family: Arial, sans-serif;
    background: #3b8dbd;
    display: inline-block;
    white-space: nowrap;
    font-size: 14px;
    color: #fff;
    padding: 3px 15px;
    margin: 0 5px 2px 0;
    -webkit-border-radius: 2px;
    border-radius: 3px;
    text-decoration: none !important
}
a.druck:hover {opacity: .7; border-bottom: none !important; color: #fff !important; text-decoration: none !important}
a.druck:before {content: '\f02f'; font-family: FontAwesome; font-size: 16px; padding-right: 8px}
#printcomment { padding: 25px 0; margin: 30px 0; border-top: 2px solid #eee; border-bottom: 2px solid #eee}
#printcomment h5 { margin: 0 0 20px 0 !important}    
</style>    
<?php }
add_action( 'wp_head', 'tb_print_button_css' );

Fazit

Mit einer geschätzten halben Stunde Aufwand wird dein Blog wesentlich benutzerfreundlicher für deine Leser. Nun können sie auch deine Beiträge ausdrucken und finden sogar einen Button dafür vor. So müssen sie nicht extra in die Einstellungen des Browsers, um drucken zu können.

ist WordPress-Entwickler und bietet dir WordPress Sicherheit Service und WordPress Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.