WP HTML Mail Anleitung

YouTube

By loading the video, you agree to YouTube's privacy policy.
Learn more

Load video

Kann ich mit diesem Plugin Newsletter versenden?

Nein, dieses Plugin ist dazu gedacht die WordPress E-Mails zu gestalten, nicht um eigene Nachrichten zu versenden.

Wie kann ich den Abstand im Header von Contact Form 7 emails entfernen?

Gehe zu den Contact Form 7 Einstellungen und stelle den E-Mail Typ von HTML auf Text.

WP HTML Mail kümmert sich dann um die HTML Formatierung.

Wie kann ich den HTML Code des E-Mail Headers bearbeiten?

Es gibt einen Filter um diesen Code zu überschreiben. Füge den folgenden Code in die functions.php deines (Child-)Themes: ein:

add_filter('haet_mail_header', function( $header ){
  return 'hello <strong>world</strong>';
});

Natürlich kannst du damit mehr als nur Text ausgeben.

Wie kann ich den HTML Code der Fußzeile anzeigen?

Es gibt einen Filter mit dem du den Footer der E-Mails anpassen kannst. Füge diesen Code in die functions.php deines (Child-)Themes:

add_filter('haet_mail_footer', function( $header ){
  return 'hello <strong>world</strong>';
});

Wie kann ich eigenen CSS Code einfügen?

Du kannst für Desktop und Mobil getrennten CSS Code einfügen.

Füge dazu diesen Code in die functions.php deines (Child-)Themes ein:

add_filter( 'haet_mail_css_desktop', function( $css ){ 
  $css .= '
    h1{
      border-bottom: 2px solid green;
    }
  ';
  return $css;
});
add_filter( 'haet_mail_css_mobile', function( $css ){
  $css .= '
    h1{
      background:red;
    }
  ';
  return $css;
});

Abgerundeter Rahmen um den E-Mail Inhalt.

Ein Beispiel für eigenen CSS Code wäre ein gerundeter Rahmen um den Content. Beachte dabei allerdings, dass manche E-Mail Programme (wie zB die meisten Outlook-Versionen) die Rundung nicht unterstützen und einen eckigen Rahmen anzeigen werden.

add_filter( 'haet_mail_css_desktop', function( $css ){
    $css .= '  
            td.header{
            	border: 1px solid #ddd;
            	border-bottom: none;
            	border-top-left-radius: 10px;
            	border-top-right-radius: 10px;
            }
            td.content{
            	border: 1px solid #ddd;
            	border-top: none;
            	border-bottom: none
            }
            td.footer-text{
            	border: 1px solid #ddd;
            	border-top: none;
            	border-bottom-left-radius: 10px;
            	border-bottom-right-radius: 10px;
            }
        ';
    return $css;
});

 

Wie kann ich den kurzen Vorschau-Text (Preheader) in manchen E-Mail Programmen anpassen?

Füge dazu diesen Code in die functions.php deines (Child-)Themes ein:

add_filter( 'haet_mail_preheader', function( $pre_header, $email ){
  return 'this is my custom preheader';
}, 10, 2 );