Vorlagen (Layouts)¶

Eine Vorlage ist die Hülle, in der ein Newsletter versendet wird: Kopf, Logo, Trennlinien, Fuß, Impressum und der Abmeldelink. Ihr Text aus dem Editor steht darin in einer einzigen Zelle.

Warum es das gibt: Eine E-Mail ist keine Webseite. Outlook rendert mit der Engine von Word und kennt weder Flexbox noch moderne Stylesheets. Die Vorlagen sind darauf gebaut — Tabellen, Stile an den Elementen, Bedingungskommentare für Outlook. So etwas schreibt man nicht im Editor nebenbei.

Die Galerie¶

Newsletter → Vorlagen

Gezeigt wird nicht ein Werbebild des Herstellers, sondern Ihre Vorlage: mit Ihrem Logo, Ihrer Akzentfarbe und dem Namen Ihrer Website. Der Text ist Blindtext; in einem echten Newsletter kommt er aus dem Editor.


In voller Größe ansehen	Öffnet die Vorlage allein im Fenster
Als Voreinstellung übernehmen	Ab jetzt schlägt jeder neue Newsletter diese Vorlage vor. Bereits geschriebene bleiben, wie sie sind

Für eine einzelne Ausgabe wählen Sie die Vorlage in der Newslettermaske unter Layout (HTML).

Die zehn Vorlagen¶

Drei davon liegen in der kostenlosen Fassung, sieben kommen mit den Editionen Pro und Enterprise dazu.

Schlicht · Lite¶

Nur Typografie, eine Akzentlinie, knapper Fuß. Die Vorgabe für eine frische Installation — sie macht nichts falsch und lenkt von nichts ab.

Kopfbalken · Lite¶

Logo über einem farbigen Balken, in dem der Name der Ausgabe steht. Die Wahl, wenn der Newsletter eine Marke tragen soll.

Rahmen · Lite¶

Weiße Karte mit farbigem Rand auf getöntem Grund. Hebt den Inhalt vom Postfach ab.

Zeitung · Pro¶

Serifenschrift, Datumszeile, doppelte Linie unter dem Kopf. Für Ausgaben, die gelesen und nicht überflogen werden.

Karte · Pro¶

Runde Ecken, viel Luft, kurze Akzentlinie über dem Titel.

Breit · Pro¶

640 statt 600 Pixel, farbiger Kopfbereich über die volle Breite. Für Newsletter mit Bildern.

Dunkel · Pro¶

Heller Text auf dunklem Grund — immer, unabhängig vom Gerät des Empfängers.

Dunkel zeigt den Namen statt des Logos

Ein dunkles Logo auf dunklem Grund verschwindet, und ob Ihr Logo hell ist, weiß die Vorlage nicht. Wenn Sie diese Vorlage mit Logo wollen, hinterlegen Sie unter Voreinstellungen ein eigenes Bild in heller Fassung.

Kompakt · Pro¶

Enge Zeilen, kleine Schrift. Für kurze Ausgaben, die oft kommen.

Zweispaltig · Pro¶

Inhalt einspaltig, Fuß zweispaltig — für Impressum neben Kontaktangaben.

Brief · Pro¶

Absenderzeile, viel Rand, Serifenschrift. Liest sich wie ein Brief und nicht wie eine Aussendung.

Aus früheren Versionen¶

In der Galerie stehen unter einer eigenen Überschrift noch Standard und Beispiel. Sie kamen mit Version 1.

Sie bleiben, weil bereits versendete Newsletter sie namentlich nennen — eine Vorlage, die verschwindet, nimmt jeder archivierten Ausgabe ihre Gestalt. Für einen neuen Newsletter gibt es keinen Grund mehr, sie zu wählen.

Was sich für Bestandsinstallationen ändert

Nichts. Wer schon ein Layout gewählt hat, behält es beim Update. Nur eine frische Installation schlägt seit 2.0 Schlicht statt Standard vor.

Die Akzentfarbe¶

Newsletter → Konfiguration → Einstellungen → Voreinstellungen → Akzentfarbe

Sie färbt in allen mitgelieferten Vorlagen die Kopfbalken, Knöpfe und Trennlinien. Die Schrift darauf wird von selbst schwarz oder weiß, je nachdem, was lesbar bleibt — Sie müssen keine zweite Farbe wählen und können sich nicht in eine unlesbare Kombination hineinstellen.

Eigene Layouts bleiben unberührt.

Das Logo¶

Vier Einstellungen unter Voreinstellungen entscheiden, was im Kopf der Mail steht:

Einstellung
Logo im Newsletter	Logo der Website · Eigenes Bild · Keines, der Name der Website
Eigenes Logo	Ein Bild aus der Mediathek. Gilt nur bei Eigenes Bild
Ausrichtung	Wie die Vorlage es vorsieht, links, mittig, rechts
Größte Breite	Zwischen 40 und 600 Pixel, Vorgabe 280

Bei Logo der Website sucht das Plugin in dieser Reihenfolge:

das Logo des Themes (Customizer → Website-Informationen → Logo),
das Website-Symbol (Favicon),
sonst nichts — die Vorlage schreibt dann den Namen der Website als Text.

Wenn im Newsletter kein Logo erscheint

Dann ist im Customizer keines hinterlegt. Das ist der häufigste Fall, und das Plugin kann es nicht erraten.

Ein Newsletter braucht oft ein anderes Logo als eine Website: eines mit Rand darum herum, oder eine helle Fassung für die dunkle Vorlage. Dafür ist Eigenes Bild da.

Gespeichert wird die Kennung des Bildes, nicht seine Adresse — wer die Datei in der Mediathek ersetzt, hat sie damit auch im Newsletter ersetzt.

Die Pflichtangaben im Fuß¶

Jede Vorlage trägt im Fuß eine Zeile in Kursiv:

Hier gehören Ihre Pflichtangaben hin: Anschrift, Vertretungsberechtigter, Kontakt.

Sie steht dort mit Absicht sichtbar. Ein Newsletter ist geschäftliche Kommunikation und braucht dieselben Angaben wie Ihr Impressum. Ein Platzhalter, der unauffällig aussieht, bliebe stehen.

Ersetzen lässt sie sich auf zwei Wegen:

Eine eigene Fassung der Vorlage anlegen (siehe unten) und den Satz dort austauschen. Der saubere Weg, wenn Sie bei einer Vorlage bleiben.
Die Angaben in den Inhalt schreiben, ganz unten in den Editor. Umständ licher, dafür ohne eigene Datei — und Sie müssen daran denken, sie in jede Ausgabe zu übernehmen. Der Knopf Kopieren in der Newsletterliste hilft dabei.

Eine eigene Vorlage¶

Vorlagen sind PHP-Dateien. Eine eigene entsteht am schnellsten als Kopie einer mitgelieferten.

Nicht im Pluginordner arbeiten

Eine Datei unter wp-content/plugins/…/views/layouts/ ist beim nächsten Update weg. Eigene Vorlagen gehören an einen der beiden Orte darunter.

Ort	Pfad
Im Theme	`<Ihr Theme>/wpng_views/layouts/`
Im Uploadverzeichnis	`wp-content/uploads/wpng/user_views/layouts/`

Eine Datei an einem dieser Orte ersetzt die gleichnamige mitgelieferte. Eine Datei mit einem neuen Namen kommt als weitere Vorlage dazu — in der Galerie und in der Auswahlliste des Newsletters.

Der Kopf der Datei¶

<?php
/**
 * Vorlagenname: Unser Hausbrief
 */
defined( 'ABSPATH' ) || exit;
?>

Die Zeile Vorlagenname: setzt den Namen in der Auswahl. Fehlt sie, steht dort der Dateiname. Gelesen werden nur die ersten 2 KB der Datei.

Die Zeile defined( 'ABSPATH' ) || exit; ist Pflicht. Ohne sie lässt sich die Datei direkt über den Browser aufrufen.

Was in einer Vorlage stehen muss¶

<?php echo $this->view['content']; ?>

Der Inhalt aus dem Editor. Hier wird nicht escapt — es ist HTML, und es soll HTML bleiben.

<?php $this->callMods( 'html_content', array( &$this->view['abonnent'], &$this->view['nl'] ) ); ?>

Der Haken für die Module. Daran hängt unter anderem der Zählpixel der Statistik. Fehlt er, werden keine Öffnungen gezählt — ohne Fehlermeldung.

Daneben stehen zur Verfügung: $this->view['name'] (der Name des Newsletters, bereits escapt) und $this->view['abonnent'] (das Abonnentenobjekt oder false).

Platzhalter schreiben Sie als %name% direkt in die Vorlage. Gebraucht werden dort vor allem %deregisterurl%, %deregisterformurl% und %nl_onlineurl%.

Vier Regeln, die aus Fehlern entstanden sind¶

1. Kein Universalselektor. * { … } trifft auch Ihren Inhalt aus dem Editor. Bis 2.0 setzte standard.phtml damit font-weight: normal auf alles — was der Betreiber fett schrieb, kam normal an. In der Vorschau fiel es nicht auf, weil der Browser dort dasselbe Stylesheet benutzt.

2. Dokumenttyp, Sprache, Viewport, Farbschema in den Kopf. <!DOCTYPE html> in die erste Zeile, sonst rechnen Webmailer im Quirks-Modus. <html lang="…"> für Vorleseprogramme. <meta name="viewport">, sonst zeichnet ein Telefon die Mail in 980 Pixeln Breite und verkleinert sie. Und <meta name="color-scheme" content="light"> — ohne das dunkelt Apple Mail eine helle Mail von selbst ab und rechnet Farben um.

3. Keine Einheit im width-Attribut. width="600px" ist ungültig und wird verworfen; es heißt width="600". Die Pixelangabe kommt zusätzlich als style, weil Outlook das Attribut liest und die übrigen Programme den Stil.

4. Alles, was nach draußen zeigt, gehört ins Paket. Kein Stylesheet von einem fremden Server, keine Schrift von Google. Ein Mailprogramm lädt das nicht nach, und wo es das täte, wäre es ein Datenschutzproblem.

Was mit dem nächsten Update passiert¶

Nichts. Ihre Dateien liegen außerhalb des Pluginordners und werden nicht angefasst. Kommt eine mitgelieferte Vorlage in einer neuen Fassung, bekommen Sie sie nicht, solange eine gleichnamige eigene Datei darüberliegt — das ist der Sinn der Sache, aber sehen Sie bei einem großen Update einmal nach.

Ein Dunkelmodus, der sich nach dem Gerät richtet¶

Gibt es nicht, und zwar mit Absicht. Die Anzeigeprogramme handhaben prefers-color-scheme zu verschieden:

Programm	Was es tut
Apple Mail	liest `prefers-color-scheme` und `color-scheme`
Outlook.com, Outlook mobile	schreibt Farben um, in eigener Syntax
Gmail-App	invertiert stur und ignoriert Medienabfragen
Outlook für Windows	folgt dem Design von Office

Gemacht wird deshalb nur, was verlässlich wirkt: Jede Vorlage nennt ihr Schema, damit die Programme, die es lesen, die Farben in Ruhe lassen. Die Vorlage Dunkel ist etwas anderes als ein Dunkelmodus — sie ist immer dunkel, und Sie wählen sie.