Pixelbart

Bilder zuschneiden und HTML E-Mails mit WordPress senden

Diese Woche wurde ich gleich mit mehreren Problemen konfrontiert und musste dafür natürlich Lösungen finden, die sich einfach in eine bestehende WordPress-Installation einbauen lassen. Dazu zählten die Suche nach einem gutem jQuery Plugin mit dem ich Bilder zuschneiden kann, das Festlegen von HTML als Inhaltstyp für E-Mails die von WordPress aus versendet werden und das Anpassen der E-Mail die an neue Benutzer gesendet wird.

Bilder zuschneiden

Hier habe ich lange gesucht und bin nur kostenpflichtig richtig fündig geworden. Alle anderen Plugins waren nicht „schick“ genug oder haben mir nicht so einfache Einbindungen geboten. Fündig bin ich letztendlich dann auf Codecanyon mit dem Plugin Slim Image Cropper geworden. Das Plugin lässt sich einfach einbinden, hat eine sehr gute Dokumentation und sieht auch noch schick aus. Das Ganze lässt sich auch einfach in WordPress einbinden, wenn man weiß was das Plugin zurückgibt.

Wenn man beispielsweise die Daten mittels Ajax übergeben und dann das Bild in die Mediathek laden möchte, muss man folgendes machen:

<?php

$attachment_id = media_handle_upload( 'slim_output_0', $candidate_id );

wp_die();Code-Sprache: HTML, XML (xml)

Wie man im Beispiel erkennt, nennt sich der $_FILES array mit der für uns wichtigen und zugeschnittenen Datei slim_output_0. Das lässt sich auch mit print_r($_FILES) gegenprüfen.

E-Mails als HTML mit WordPress senden

Da wir unsere E-Mails anpassen und individualisieren wollten, musste irgendwie der Content-Type von versendeten E-Mails durch WordPress geändert werden. Damit man das nicht in jeder Hook per Hand erledigen muss, kann man folgendes tun:

<?php
/**
 * Content-Type von WordPress versendeten E-Mails ändern
 * @return string
 */
add_filter( 'wp_mail_content_type', 'emailContentType' );
function emailContentType() {
  return 'text/html';
}Code-Sprache: HTML, XML (xml)

Die automatische E-Mail bei der Registrierung anpassen

In Kombination mit dem vorherigen Punkt, musste vor allem die E-Mail angepasst werden, die der Benutzer erhält sobald er sich registriert. In dieser E-Mail wird standardmäßig der Link eingefügt (roh). Den wollten wir zumindest mit einem <a> verstecken. Die richtige Hook dafür und wie man den Inhalt der Nachricht verändert:

<?php
/**
 * E-Mail Nachricht mit "Meine Nachricht" ersetzen
 * @param array $data Daten der E-Mail, inkl. Headers usw.
 * @param object $user WP_User Object
 * @param string $blogname Der Name der Seite (unter Allgemein im wp-admin)
 * @return array
 */
add_filter( 'wp_new_user_notification_email', 'emailCallback', 10, 3 );
function emailCallback( $data, $user, $blogname ) {
  $data['message'] = 'Meine Nachricht';
  return $data;
}

/**
 * E-Mail Nachricht mit eigenem HTML aus einer PHP-Datei im Theme-Ordner
 * @param array $data Daten der E-Mail, inkl. Headers usw.
 * @param object $user WP_User Object
 * @param string $blogname Der Name der Seite (unter Allgemein im wp-admin)
 * @return array
 */
add_filter( 'wp_new_user_notification_email', 'emailCallback', 10, 3 );
function emailCallback( $data, $user, $blogname ) {

  // @see getUserRegisterUrl();
  // Die URL kann man jetzt im Template verwenden, indem man $register_url tippt
  $register_url = getUserRegisterUrl( $user );

  ob_start();
  // mein-theme/template-parts/mails/register.php
  include_once locate_template('template-parts/mails/register.php');
  $data['message'] = ob_get_contents();  
  ob_end_clean();

  return $data;
}

/**
 * Eine Funktion zum Ausgeben der Registrierungs-URL
 * @param object $user WP_User Object
 * @return string
 */
function getUserRegisterUrl( $user ) {    
  global $wpdb, $wp_hasher;
    
  $key = wp_generate_password( 20, false ); 
  do_action( 'retrieve_password_key', $user->user_login, $key );
  
  if ( empty( $wp_hasher ) ) {
    require_once ABSPATH . WPINC . '/class-phpass.php';
    $wp_hasher = new PasswordHash( 8, true );
  }

  $hashed = time() . ':' . $wp_hasher->HashPassword( $key );
  $wpdb->update( $wpdb->users, [ 'user_activation_key' => $hashed ], [ 'user_login' => $user->user_login ] ); 
  $switched_locale = switch_to_locale( get_user_locale( $user ) );

  // site_url nur verwenden, wenn keine multisite im einsatz ist
  return site_url( "wp-login.php?action=rp&key=$key&login=" . rawurlencode( $user->user_login ) );
}Code-Sprache: HTML, XML (xml)

Wenn du die Funktion für das Ändern des Inhaltstyp der E-Mails nutzt, kannst du hier auch HTML verwenden. Falls das nicht direkt funktioniert, dann kannst du die Hook auch einfach mit in die Funktion packen:

<?php

/**
 * E-Mail Nachricht mit "Meine Nachricht" ersetzen
 * @param array $data Daten der E-Mail, inkl. Headers usw.
 * @param object $user WP_User Object
 * @param string $blogname Der Name der Seite (unter Allgemein im wp-admin)
 * @return array
 */
add_filter( 'wp_new_user_notification_email', 'emailCallback', 10, 3 );
function emailCallback( $data, $user, $blogname ) {
  // einfach oberhalb der Ausgabe platzieren
  add_filter( 'wp_mail_content_type', 'emailContentType' );

  $data['message'] = 'Meine Nachricht';  
  return $data;
}

/**
 * Content-Type von WordPress versendeten E-Mails ändern
 * @return string
 */
add_filter( 'wp_mail_content_type', 'emailContentType' );
function emailContentType() {
  return 'text/html';
}Code-Sprache: HTML, XML (xml)

Und wie immer gilt: Der Beitrag ist für mich eine Gedankenstütze. Wenn er dir bei deinen Projekt hilft, freut mich das. Du kannst mir auch gerne einen Kommentar dazu hinterlassen oder unten Feedback geben.

Wenn du auf der Suche nach WordPress Plugins bist, die dir dabei helfen deine Bilder zu optimieren und zu verkleinern, dann ist dieser Beitrag vielleicht etwas für dich: WordPress Plugins zum Verkleinern und Optimieren deiner Bilder. Hier liste ich sortiert WordPress Plugins auf, die dir dabei helfen deine Bilder zu optimieren. Die Bilder lassen sich auch im Nachgang optimieren, also perfekt um ältere Bilder unter die Lupe zu nehmen.

In