Die Standard-E-Mails von WordPress sind schlicht und funktional, aber nicht gerade ein Aushängeschild für ein professionelles Auftreten. Wenn Sie Ihre WordPress-E-Mails mit Ihrem Logo, ansprechendem HTML-Design und einem individuellen Footer wie einem Impressum versehen möchten, zeigen wir Ihnen in diesem Beitrag, wie das ganz ohne Plugin möglich ist.
Bevor wir loslegen, ist es wichtig, Änderungen am Code der functions.php immer in einem Child-Theme vorzunehmen. So bleibt Ihre Anpassung auch beim Update Ihres Themes erhalten. Wenn Sie noch kein Child-Theme eingerichtet haben, lesen Sie unsere Schritt-für-Schritt-Anleitung zur Erstellung eines Child-Themes.
Schritt 1: HTML-E-Mails aktivieren
Von Haus aus versendet WordPress E-Mails im reinen Textformat. Damit Ihre E-Mails auch HTML unterstützen, müssen wir dies aktivieren. Fügen Sie den folgenden Code in die Datei functions.php Ihres Child-Themes ein:
add_filter('wp_mail_content_type', function() {
return 'text/html';
});
Mit diesem kleinen Snippet wird WordPress angewiesen, E-Mails im HTML-Format zu versenden.
Schritt 2: E-Mail-Template mit Logo und Impressum erstellen
Jetzt gestalten wir ein einfaches E-Mail-Template mit Ihrem Logo im Header, einem Nachrichtenbereich in der Mitte und einem zentrierten Impressum im Footer.
Der Code:
add_filter('wp_mail', function($args) {
// URL Ihres Logos anpassen
$logo_url = 'https://elbnetz.com/wp-content/uploads/2020/09/elbnetz-login.svg';
// HTML-Template
$html = '<html><body style="font-family: Verdana, sans-serif; line-height: 1.6; color: #333;">';
// Header mit Logo
$html .= '<div style="text-align: center; margin-bottom: 20px;">';
$html .= '<img src="' . $logo_url . '" alt="Logo" style="max-width: 200px;">';
$html .= '</div>';
// Nachrichtentext
$html .= '<div style="padding: 20px; background-color: #f9f9f9;">';
$html .= $args['message']; // Ursprüngliche Nachricht
$html .= '</div>';
// Trennlinie und Impressum
$html .= '<div style="margin-top: 20px; text-align: center; font-size: 12px; color: #666;">';
$html .= '<hr style="border: none; border-top: 1px solid #ddd; margin: 20px 0;">'; // Trennlinie
$html .= '<p>Impressum<br>';
$html .= 'Elbnetz GmbH | Hegestrasse 40 | 20251 Hamburg<br>';
$html .= 'Tel. 040 609 444 310 | Fax 040 609 444 319 | moin@elbnetz.com<br>';
$html .= 'Amtsgericht Hamburg HRB 125240<br>';
$html .= 'Geschäftsführer: Thorsten Faltings<br>';
$html .= 'USt-IdNr. (VAT ID): DE286313791</p>';
$html .= '</div>';
$html .= '</body></html>';
$args['message'] = $html;
// Sicherstellen, dass die Headers-Eigenschaft ein Array ist
if (!isset($args['headers']) || !is_array($args['headers'])) {
$args['headers'] = [];
}
// HTML-Header hinzufügen
$args['headers'][] = 'Content-Type: text/html; charset=UTF-8';
return $args;
});
Das Beispiel führt zu folgendem Ergebnis:
So funktioniert es:
- Logo einfügen: Ersetzen Sie den Platzhalter https://www.ihredomain.de/path-to-logo.jpg durch die URL Ihres Logos (hochgeladen in die WordPress-Medienbibliothek).
- Nachrichtentext: Der ursprüngliche Text der E-Mail wird im HTML-Template angezeigt.
- Impressum zentrieren: Das Impressum wird mit einer Trennlinie optisch vom Rest der E-Mail abgehoben und zentriert.
Schritt 3: Änderungen testen
Senden Sie sich eine Test-E-Mail, z. B. über die Passwort-zurücksetzen-Funktion in WordPress. Achten Sie darauf:
- Wird das Logo korrekt geladen?
- Ist das Layout ansprechend?
- Wird der Text korrekt angezeigt?
Tipp: Prüfen Sie die E-Mail auch in verschiedenen Clients wie Gmail, Outlook oder Apple Mail, um sicherzustellen, dass das Design überall funktioniert.
Fazit: Professionelle E-Mails mit wenig Aufwand
Mit diesen Schritten machen Sie aus den schlichten Standard-E-Mails von WordPress professionell gestaltete Nachrichten, die Ihr Branding und Ihre Unternehmensinformationen perfekt präsentieren. Das Beste daran: Sie benötigen kein zusätzliches Plugin und behalten die volle Kontrolle über das Design.
Vergessen Sie nicht, Änderungen immer zuerst in einem Child-Theme umzusetzen, um Ihre Anpassungen bei WordPress-Updates zu schützen.