Ist Ihr WordPress-Blog druckerfreundlich?

CSS drucken

Da habe ich den gestrigen Beitrag am fertiggestellt Social Media-ROIIch wollte eine Vorschau davon an Dotster CEO Clint Page senden. Als ich jedoch als PDF druckte, war die Seite ein Chaos!

Es gibt immer noch viele Leute, die gerne Kopien einer Website ausdrucken, um sie zu teilen, später zu referenzieren oder einfach nur mit einigen Notizen abzulegen. Ich habe beschlossen, mein Blog druckerfreundlich zu gestalten. Es war viel einfacher als ich dachte.

So zeigen Sie Ihre Druckversion an:

Sie müssen die Grundlagen von CSS verstehen, um dies zu erreichen. Am schwierigsten ist es, mithilfe der Entwicklerkonsole Ihres Browsers das Anzeigen, Ausblenden und Anpassen des Inhalts zu testen, damit Sie Ihr CSS schreiben können. In Safari müssen Sie die Entwicklertools aktivieren, mit der rechten Maustaste auf Ihre Seite klicken und Inhalt überprüfen auswählen. Das zeigt Ihnen das Element und das zugehörige CSS.

Safari hat eine nette kleine Option, um die Druckversion Ihrer Seite im Webinspektor anzuzeigen:

Safari - Druckansicht im Web Inspector

So machen Sie Ihren WordPress-Blog druckerfreundlich:

Es gibt verschiedene Möglichkeiten, Ihr Styling für den Druck festzulegen. Eine Möglichkeit besteht darin, Ihrem aktuellen Stylesheet einen Abschnitt hinzuzufügen, der für den Medientyp „Drucken“ spezifisch ist.

@media print {
     header, 
     nav, 
     aside { 
         display: none; 
     }
     #primary { 
         width: 100% !important 
     }
     .hidden-print, 
     .google-auto-placed, 
     .widget_eu_cookie_law_widget { 
         display: none; 
     }
}

Die andere Möglichkeit besteht darin, Ihrem untergeordneten Thema ein bestimmtes Stylesheet hinzuzufügen, das die Druckoptionen angibt. Hier ist wie:

  1. Laden Sie ein zusätzliches Stylesheet in Ihr Themenverzeichnis mit dem Namen hoch print.css.
  2. Fügen Sie einen Verweis auf das neue Stylesheet in Ihrem functions.php Datei. Sie sollten sicherstellen, dass Ihre print.css-Datei nach dem übergeordneten und untergeordneten Stylesheet geladen wird, damit die Stile zuletzt geladen werden. Ich habe diesem Laden auch eine Priorität von 100 zugewiesen, damit es nach dem Plugin geladen wird. So sieht meine Referenz aus:

function theme_enqueue_styles() {
    global $wp_version;
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
    wp_enqueue_style( 'child-style-print', get_stylesheet_directory_uri() . '/print.css', array(), $wp_version, 'print' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' , 100);

Jetzt können Sie die Datei print.css anpassen und alle Elemente ändern, die ausgeblendet oder anders angezeigt werden sollen. Auf meiner Website verstecke ich beispielsweise alle Navigations-, Kopf-, Seiten- und Fußzeilen, sodass nur der Inhalt gedruckt wird, den ich anzeigen möchte.

My print.css Datei sieht so aus. Beachten Sie, dass ich auch Ränder hinzugefügt habe, eine Methode, die von modernen Browsern akzeptiert wird:

header, 
nav, 
aside { 
    display: none; 
}
#primary { 
    width: 100% !important 
}
.hidden-print, 
.google-auto-placed, 
.widget_eu_cookie_law_widget { 
    display: none; 
}

Wie die Druckansicht aussieht

So sieht meine Druckansicht aus, wenn sie aus Google Chrome gedruckt wird:

WordPress-Druckansicht

Erweitertes Druckstyling

Es ist wichtig zu beachten, dass nicht alle Browser gleich sind. Möglicherweise möchten Sie jeden Browser testen, um festzustellen, wie Ihre Seite auf ihnen aussieht. Einige unterstützen sogar einige erweiterte Seitenfunktionen zum Hinzufügen von Inhalten, Festlegen von Rändern und Seitengrößen sowie einer Reihe anderer Elemente. Smashing Magazine hat eine sehr ausführlicher Artikel über diesen erweiterten Druck Optionen.

Hier sind einige Details zum Seitenlayout, die ich eingefügt habe, um unten links eine Copyright-Erwähnung, unten rechts einen Seitenzähler und oben links auf jeder Seite den Dokumenttitel hinzuzufügen:

@page { 
    size: 5.5in 8.5in;
    margin: 0.5in; 
}
@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "©  " attr(data-date) " DK New Media, LLC. All Rights Reserved.";
    font-size: 9pt;
    color: #333;
  }

  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }

  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

2 Kommentare

  1. 1
  2. 2

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.