Share
Das Hinzufügen eines Druck-Stylesheets zu Ihrer Wordpress-Site ist ein vernünftiger Schritt. Die Umgebung wird es Ihnen danken, dass Sie diesen Artikel auf Ihrer Website angewendet haben. Es ist so einfach zu implementieren, und die meisten Leute übersehen es einfach. Ich zeige Ihnen, wie einfach es ist, Ihrer Wordpress-Site ein einfaches Druck-Stylesheet hinzuzufügen. Ich werde Ihnen eine großartige Grundlage für eine Website geben, die Sie sofort für Ihre Website verwenden können, und Ihnen ein paar Tipps geben, damit Sie die nächste Stufe erreichen können.
Sie müssen die Datei "header.php" Ihres Themas aktualisieren, damit das Stylesheet, das wir aktualisieren, auch zum Drucken verwendet wird. Öffnen Sie die header.php, suchen Sie nach:
Wir müssen das Medienattribut aktualisieren, um den Druck einzuschließen. Der Bildschirm sagt dem Browser: "Dies ist das Stylesheet, das Sie verwenden sollten, um zu wissen, wie die Elemente im Browser angezeigt werden". Wir müssen es sagen "Sie können dieses Stylesheet auch verwenden, wenn der Benutzer druckt". So sieht es jetzt aus:
Als nächstes öffnen Sie Ihr Stylesheet, style.css. Fügen Sie am Ende des Dokuments Folgendes hinzu:
@import "print.css";
Es ist wichtig, dass sich der Code unten im Stylesheet befindet, um sicherzustellen, dass Ihre Bildschirmstile nicht die zum Drucken verwendeten Stile erben und die Druckstile nicht mit den Stilen Ihrer Website überschrieben werden. Erstellen Sie danach eine Datei im selben Verzeichnis mit dem Namen print.css. Hier fügen wir unseren gesamten Druckstil hinzu.
Nachfolgend finden Sie eine modifizierte Version des Druckstils für das WordPress-Standarddesign "TwentyTen". Viele Websites haben dieselben Elemente, so dass das Rad bei der Entwicklung nicht neu erfunden werden muss. Was ich tun werde, ist die Schlüsselelemente aufzuschlüsseln, damit Sie wissen, warum sie enthalten sind und welche Stile Sie beachten sollten, um sie zu Ihren eigenen benutzerdefinierten Elementen hinzuzufügen.
@media print body background: #fff none! important; Farbe: # 000; #wrapper clear: beide! wichtig; Anzeige: Block! wichtig; Float: keine! wichtig; Position: relativ! wichtig; #header border-bottom: 2pt feste # 000; Polsterung unten: 18pt; #colophon border-top: 2pt fest # 000; # site-title, # site-description float: none; Zeilenhöhe: 1.4em; Marge: 0; Polsterung: 0; # site-title font-size: 13pt; .entry-content font-size: 14pt; Zeilenhöhe: 1.6em; .entry-title font-size: 21pt; #access, #branding img, #respond, .com-edit-link, .edit-link, .navigation, .page-link, .widget-area display: none! important; #container, #header, #footer margin: 0; Breite: 100%; #content, .one-column #content margin: 24pt 0 0; Breite: 100%; .wp-caption p font-size: 11pt; # site-info, # site-generator float: none; Breite: Auto; #colophon width: auto; img # wpstats display: none; # site-generator a margin: 0; Polsterung: 0; # entry-author-info border: 1px fest # e7e7e7; #main display: inline; .home .sticky border: keine;
Zunächst sollten Sie feststellen, wie alle Ihre Druckstile darin eingeschlossen sind:
@media print
Alle Objekte, die der Druckfunktion entsprechen, werden zwischen diesen Klammern dargestellt. Wenn Sie einen Stil hinzufügen, stellen Sie sicher, dass er sich innerhalb dieser Klammern befindet. Wenn es draußen ist, weiß CSS nichts besser und nimmt an, dass es Teil des Bildschirmmediums ist.
body background: #fff keine! wichtig; Farbe: # 000;
Dies ist eines der Schlüsselelemente zum Erstellen eines Druckstils. Normalerweise sollten druckfreundliche Inhalte keinen Hintergrund haben, und alle Farben sollten schwarzweiß sein.
#wrapper clear: beide! wichtig; Anzeige: Block! wichtig; Float: keine! wichtig; Position: relativ! wichtig;
Dies sind grundlegende Stile, die sicherstellen, dass alles übereinander angezeigt wird. Durch das Löschen wird sichergestellt, dass alles in #wrapper unter das vorherige Element fällt und alles, was danach passiert, nach dem Wrapper, damit die Dinge nicht nebeneinander geschoben werden. Es sollte keinen Float haben und die Position sollte relativ bleiben. Dadurch wird sichergestellt, dass der Inhalt von links nach rechts gelesen wird und sich keine Objekte überlappen. es wird ein fließendes Dokument sein.
#header border-bottom: 2pt fest # 000; Polsterung unten: 18pt;
Sie werden einige Eigenschaften bemerken, die das Element im gesamten Stylesheet des Styles enthalten. Diese sind absolut akzeptabel. In vielen Fällen trennt Farbe Elemente in einem Design. Da alles schwarz und weiß ist, ist das schwierig. Wenn Sie zum Beispiel einen schwarzen Rand am unteren Rand eines Elements hinzufügen und darunter etwas Platz hinzufügen, können Sie diese klar voneinander trennen.
.Eintragsinhalt font-size: 14pt; Zeilenhöhe: 1.6em; .entry-title font-size: 21pt;
Es ist eine gute Idee, die Textgröße des Inhalts, den Sie drucken, zu berücksichtigen. Die Größe, die Sie auf dem Bildschirm sehen, ist im Vergleich zu dem, was die Augen lesen können, sehr unterschiedlich. Betrachten Sie eine kleinere Schriftgröße, 14 pt ist viel ich fühle mich. Ich kann mir vorstellen, noch kleiner zu werden. Eine Zeilenhöhe, die den Inhaltsfluss unterstützt, ist ebenfalls sehr hilfreich. Stellen Sie sicher, dass zwischen den Zeilen etwas Abstand ist, damit der gedruckte Text nicht unleserlich ist. Wenn Sie Titeln eine größere Schriftgröße geben, können Sie sie auch vom Inhalt unterscheiden.
#access, #branding img, #respond, .com-edit-link, .edit-link, .navigation, .page-link, .widget-area display: none! important;
Dies ist eines der am häufigsten verwendeten Elementattribute. 'display: none' wird das Element vollständig ausblenden. Die gedruckte Seite wird so behandelt, als wäre sie anfangs gar nicht vorhanden. Wenn Sie also alle Ihre Bilder ausblenden, wird keine leere Stelle angezeigt, an der sie sich normalerweise befinden würden. Das Element wird vollständig aus dem Layout entfernt und der nächste verfügbare Inhalt wird gerendert. Ich benutze dies häufig, um unnötige Elemente wie Bilder, Navigation und Seitenleisten in meinen Druck aufzunehmen.
#container, #header, #footer margin: 0; Breite: 100%;
Dieses Element stellt sicher, dass alle Elemente, die den Seiteninhalt umschließen, eine Breite von 100% haben, sodass der gesamte verfügbare Rand des gedruckten Dokuments belegt wird. Manchmal legen Designer eine Breite von 900 Pixeln oder dergleichen fest, was den Druck nur in einem 900 Pixel-Bereich zulässt.
#content, .one-column #content margin: 24pt 0 0; Breite: 100%;
Im Bildschirm-Stylesheet wäre dies der linke Inhalt. Es würde eine Sidebar auf der rechten Seite haben. Sie werden jetzt bemerken, dass die Breite nicht mehr auf diesen Bereich beschränkt ist, sondern den gesamten verfügbaren Rand des gedruckten Dokuments ausfüllt. Es hat eine Breite von 100% und die Seitenleiste kann nicht mehr daneben passen. Tatsächlich sollte die Seitenleiste eine Anzeige haben: keine im Druck-Stylesheet. Es gibt auch ein Randattribut, das es vom Inhalt umgibt, sodass es hervorstechen kann.
img # wpstats display: keine;
Dies ist ein hervorragendes Beispiel für das Ausblenden von Bildern mit der ID "wpstats". Sie können Ihre eigene Klasse namens hideInPrint erstellen, um Bilder hinzuzufügen, die Sie beim Drucken entfernen möchten. Der Code dafür würde folgendermaßen aussehen:
img.hideInPrint display: none;
Dieser Artikel ist nur eine Grundlage - Sie können natürlich Ihre eigenen Markenstile hinzufügen, um einen individuellen Druckstil zu erstellen. Hier haben wir Ihnen die Elemente gezeigt, die Sie beim Implementieren eines Druck-Stylesheets in Ihr eigenes Projekt berücksichtigen sollten. Der Rest des Stylings bleibt Ihnen in Ihrem eigenen Projekt überlassen! Wenn Sie wissen, warum bestimmte Attribute verwendet wurden, können Sie wissen, was Ihr Projekt benötigt.
Accentsconagua