DIVI Theme: Reply-To des Kontaktformular-Moduls ändern

Standardmäßig tut DIVI die Mail Adresse, die abgefragt wird, als „Reply-To“-Adresse einsetzen. Die „Reply-To“ Adresse ist die Mail-Adresse, an die eine Mail geschickt werden soll, wenn man in seinem Mail-Programm auf „Antworten“ klickt.

An sich ist das recht praktisch, als Website-Betreiber bekommt man eine Mail und kann direkt auf „Antworten“ klicken, um der Person zu schreiben. Was aber vermeintlich praktisch ist mögen einige Mail-Server nicht. Denn es ist nicht üblich, dass der Sender eine ganz andere Antwort-Adresse hat als die „Reply-To“. Spammer nutzen das u. a. in dem sie einen bekannten Sender faken und Sie die Antwort über das „Reply-To“ an eine andere Adresse schicken.

Leider bietet das DIVI Modul keine Einstellmöglichkeit, das „Reply-To“-Feld anders zu setzen. Daher muss es anders gelöst werden, wir nutzen einen Filter. Der Code wird einfach in die functions.php hinzugefügt.

function my_custom_headers($headers, $contact_name, $contact_email){

  $my_headers = array();
  $header_reply_to_found = false;
  $http_host = str_replace("www.", "", $_SERVER["HTTP_HOST"]);

  for( $i = 0 ; $i < sizeof($headers) ; $i++ ){

    if( preg_match("/Reply-To/", $headers[$i]) > 0 ){

      $my_headers[] = "Reply-To: info@" . $http_host;
      $header_reply_to_found = true;
    }else{

    $my_headers[] = $headers[$i];
    }
  }

  if( ! $header_reply_to_found ){

    $my_headers[] = "Reply-To: info@" . $http_host;
  }

  return $my_headers;
}

add_filter( 'et_contact_page_headers', 'my_custom_headers', 999, 3 );

In diesem Beispiel wird die Reply-To Adresse auf info@ der Website-Domain gesetzt.

Achtung, nicht vergessen: Standardmäßig schickt das Kontaktformular nur den Inhalt des Nachrichtenfeldes mit. Wenn also die Mail-Adresse des Formulars nicht mehr als „Reply-To“ verwendet wird, weiß man nicht mehr wer einen angeschrieben hat. Man muss also die Information mitschicken. Das geht über die Einstellung „E-Mail Adresse“ > „Meldungsschema“ wie hier in dem Screenshot.

DIVI Meldungsschema

Neue Website für den Karlsruher 24h Lauf – auf WordPress-Basis natürlich

Laufen, laufen, laufen

Der 24h Lauf ist schon lange Tradition in Karlsruhe: 24h Stunden lang laufen Teams ununterbrochen um möglichst viele Spenden einzusammeln - die Spenden sind nämlich (meist) Runden-basiert: also, je mehr Runden gelaufen werden, umso mehr Geld wird gespendet. Das Geld wird für ausgewählte Projekte ausgegeben.

>> 24 Stunden Lauf Website

SaaS Web hat diese Website kostenfrei programmiert und hostet diese ebenfalls gratis.

DSGVO kompatibles Kontaktformular mit Gravity Forms

Ab dem 25. Mai gilt die DSGVO (Datenschnutz Grundverodnung). Spätestens ab diesem Zeitpunkt müssen entsprechende Maßnahmen ergriffen werden, damit Websites und Shops kompatibel zu den Anforderungen sind. Dazu gehören Kontaktformulare.

So einfach erstellt man ein Kontaktformular mit WordPress

Es gibt bekannterweise viele Plugins für WordPress mit denen Kontaktformulare erstellt werden können. Wir nutzen oft Gravity Forms weil es besonders einfach zu nutzen ist.

Neben der Erstellung im Backend ist es wichtig, entsprechende Angaben in der Datenschutzerklärung vorzunehmen. Gravity Forms wie die meisten Form Builder speichert nämlich u. a. auch die IP Adresse des Absenders. Außerdem soll der Formular-Nutzer über seine Rechte informiert werden bzgl. der Verwendung seiner Daten.

Was bringt die DSGVO?

Die Datenschutzgrundverordnung vereinheitlicht das Datenschutzrecht in der EU. Wo früher jedes Mitgliedsland eigene Bestimmungen hatte, wird nun die gemeinsame GDPR angewendet.

Außerdem soll das Datenschutzrecht für Nutzer besser werden. Der Bürger soll die Hoheit über seine Daten zurückbekommen und dank größerer Transparenz besseren Einblick in der Verwendung seiner Daten erhalten.

Ferien-Karlsruhe.de: ein umfangreiches Reisebuchungsportal mit WooCommerce

Karlsruher Ferienportal ferien-karlsruhe.de

Das Ferienportal ferien-karslruhe.de bietet hauptsächlich Freizeiten in und um Karlsruhe sowie Sprach-, Spaß- und Entdeckungsreisen ins europäische Ausland. Das Angebot richtet sich an Kinder im Alter von 6 bis 16 Jahren und hat einen großen Fokus auf Inklusion - die Teamer sind geschulte Betreuer, die entsprechend individuell auf Bedürfnisse der Kinder eingehen können. Außerdem können Familien mit geringem Einkommen mit der Unterstützung durch verschiedene Förderprogramme rechnen, sodass die Kinder nicht auf wohltuenden Urlaub verzichten müssen.

Vom einfachen Reservierungssystem zum vollwertigen Buchungssystem

Schnell wurde erkannt, dass WooCommerce den benötigten Workflow nicht abbilden kann: denn anders als bei handfesten Produkten, die im Internet verkauft werden, und bei denen jede Bestellung sofort bezahlt wird und die verfügbare Menge im Lager heruntergezählt wird, werden bei ferien-karlsruhe.de Reservierungen kostenlos entgegengenommen und in einem zweiten Schritt eine Anzahlung zur verbindlichen Bestätigung der Reservierung gefordert. Erst kurz vor Antritt der Reise wird der Restbetrag beglichen und eine Teilnehmerkarte gedruckt.

Features, Features, Features

Eine Menge Features wurde speziell für das Ferienportal entwickelt. Hier solche aus der Kundensicht:

  • Warenkorb Zeitlimitierung: damit Überbuchungen vermieden werden, wird die Verfügbarkeit eines Angebots beim Klick in den Warenkorb heruntergezählt. Jedoch muss der Warenkorb innerhalb einer bestimmten Zeit eingelöst werden, sonst wird das Angebot zurückgesetzt.
  • Warteliste: wenn ein Angebot ausgebucht ist, kann ein Interessent sein Kind in die Warteliste eintragen. So kann das Kind eventuell dennoch teilnehmen, wenn eine andere Reservierung storniert wird.
  • Erweiterte Angaben im Checkout: anders als in den meisten Onlineshops gibt es einen Besteller und das Kind, für das das Angebot reserviert wird. Es können mehrere Angebote und mehrere Kinder in beliebiger Kombination reserviert werden. Zu jedem Kind werden Informationen wie Name, Geburtsdatum und etwaige Besonderheiten (z. B. ADS/ADHS, Behinderung, ...) angegeben.

Aus der Betreibersicht:

  • Angebotsstatus: ein neu erstelltes Angebot durchläuft verschiedene Stati: Entwurf, Freigegeben, Buchbar, Ausgebucht, Abgeschlossen um die wichtigsten zu nennen.
  • Kunden- und Reservierungsstatus: Besteller werden zu Bezugspersonen (es müssen nicht immer die Eltern sein), Kinder werden zu Teilnehmer, und Reservierungen zu Buchungen.
  • Zuschüsse: es lassen sich verschiedene Zuschüsse zu Angeboten eintragen.
  • Druckfunktion für Teilnehmerkarten: ist die Reise bezahlt, kann zu gegebenen Zeitpunkt die Teilnehmerkarte gedruckt werden. Hierzu wird der Druckauftrag mit dem netzinternen IIS Server übermittelt an dem die Drucker angebunden sind. Die Software (.NET) wurde hierfür von SaaS Web programmiert.
  • Kundenkommunikation: anders als im Standard, können die Mailtemplates bei jedem manuellen Aufruf angepasst werden. Auch beinhalten sie individuell erstellte PDF-Anhänge. Die gesamte Kundenkommunikation wird darüber hinaus archiviert.
  • Buchungsexport für Buchhaltungssoftware: der STJA arbeitet mit einer kommerziellen Buchhaltungssoftware zu der alle Geld Ein- und Ausgänge übermittelt werden müssen.
  • Kassen: in der Geschäftsstelle befinden sich Geldkassen, deren Inhalt buchhalterisch festgehalten werden muss.

WordPress und WooCommerce kompatibel

Besonders wichtig war bei der Entwicklung (immerhin ca. 400 Stunden Arbeit), dass das Ergebnis die Update-Fähigkeit von WordPress nicht beeinträchigt, was auch gelungen ist. Die im neuen Modul erstellten Angebote generieren (und überschreibt bereits existierende) WooCommerce Produkte, die auch über das entsprechende Menü gelistet und durchforstet werden können.

Professionelle WordPress Entwicklung von SaaS Web

Sie suchen einen kompetenten und erfahrenen WordPress-Entwickler für ein eigenes Projekt? Kontaktieren Sie das SaaS Web Team.

WordPress und WooCommerce – das perfekte Duo

WordPress ist bekannterweise die Nummer eins der CMS weltweit, das ist nun keine Neuheit mehr. Eigentlich nicht neu, aber weniger bekannt ist, dass WordPress mit WooCommerce auch die Nummer eins im Bereich Online Shops ist.

WooCommerce ist seit 2015 auch Teil von Automattic und damit ist auch sichergestellt, dass die Kompatibilität und die Entwicklung der Erweiterung dauerhaft sein wird.

Die Features von WooCommerce im Schnellüberblick

Nachdem WooCommerce installiert und aktiviert wird, werden neue Custom Post Types, Custom Taxonomy und Spezial-Seiten erstellt. Der Custom Post Type, Sie haben es erraten, ist das Abbild eines Produkts in WordPress, die Custom Taxonomy wird für die Produkkategorie und das Produktschlagwort verwendet. Die Spezial-Seiten sind die Shop-Seite (standardmäßig /shop) auf der alle Produkte angezeigt werden, die AGB-Site (/terms-conditions), der Kundenbereich (/my-account) damit Kunden ihre laufenden Bestellungen verfolgen können, der Einkaufswagen (/cart) und die Bestellseite (/checkout).

Hier die Funktionen, die mit WooCommerce bereitgestellt werden:

  • Produkte
    • Produkttypen: einfaches Produkt, variables Produkt, "nicht-materielle" Ware, Verlinkung zu anderem Produkt. Ein variables Produkt ist beispielsweise ein Produkt in mehreren Größen oder Farben. Die einzelnen Varianten können anhand von frei-definierbaren Attributen erstellt werden. Nicht-materielle Produkte sind z. B. PDF-Downloads, Codes zum Runterladen.
    • Produktdarstellung: zu jedem Produkt kann ein Name, eine kurze und eine ausführliche Beschreibung des Produkts eingetragen werden. Dazu noch ein großes Produktbild sowie zusätzliche Bilder (Galerie). Natürlich wird auch ein Preis angegeben.
  • Währung, Preise: sowohl die Währung kann eingestellt werden als auch ob die Preise mit oder ohne Mehrwertsteuer angezeigt werden. Es lassen sich auch unterschiedliche MwSt-Sätze angeben, abhängig vom Herkunftsland der Bestellung.
  • Lagerverwaltung: Eine einfache Lagerverwaltung kann aktiviert werden. Die Menge wird manuell eingegeben, der Stand wird anschließend automatisch anhand der Bestellungen angepasst. Die Lagermenge kann bei variablen Produkten für die jeweiligen Varianten angegeben werden. Auch lässt sich einstellen, ob ein Produkt bei Lagermenge 0 automatisch auf nicht verfügbar wechselt oder ob "Überbestellungen" erlaubt sein dürfen und wie viele.
  • Versand: es werden Versandzonen definiert. Eine Versandzone kann für ein oder mehrere Länder gelten und eine oder mehrere Versandarten werden dafür festgelegt wie Versandkostenpauschale oder kostenlose Lieferung.
  • Zahlungsoptionen: standardmäßig ist eine Paypal Integration aktivierbar, ansonsten stehen die Optionen zu Verfügung: Überweisung, Nachnahme und Scheck. Es lassen sich auch Gutscheine aktivieren und mit den Bestellungen verrechnen.
  • Kundenkonto: es besteht die Möglichkeit für Kunden die Konto-Funktion zu aktivieren und den Kunden somit einen Bereich anzubieten wo sie sich über laufende und vergangene Bestellungen informieren können.
  • E-Mails: für verschiedene Aktionen gibt es unterschiedliche E-Mail Templates (Bestellbestätigung, Storno, ..).
  • API: für Entwickler ganz wichtig! Die WooCommerce-API ermöglicht den Zugriff und die Verarbeitung aller Funktionen über REST.

Natürlich sind das nun nicht alle Features, es sind die wichtigsten (die mir einfallen während ich diesen Artikel schreibe).

WooCommerce und WPML

Mit WPML können Sie Ihren WooCommerce-Shop für mehrere Sprachen anpassen. Sie können Produkte analog zu normalen Seiten oder Beiträgen, Produkte und die dazugehörigen Attribute und Taxonomien übersetzen. Dazu wird idealerweise das Plugin WooCommerce Multilingual installiert und aktiviert.

Unterschiedliche Lagermengen pro Sprache

Hat man allerdings pro Sprache unterschiedliche Lagermengen hat man zunächst ein Problem.

Die Menge lässt sich nur zentral steuern über das Produkt in der Standardsprache. Das bedeutet, dass das übersetzte Produkt die gleiche Menge hat wie das aus der Standardsprache.

Eine Option besteht darin, das Produkt als variables Produkt anzulegen und Sprachvarianten zu erstellen (bei variablen Produkten kann die Lagermenge pro Variante festgelegt werden). Ganz so einfach ist es dann auch nicht: von WooCommerce mitgelieferte Widgets wie zum Beispiel die bestbewerteten Produkte können mit den Varianten nicht umgehen; sie nutzen die Lagermenge der als Standard definierten Variante, um den Add to cart Link anzuzeigen oder nur zum Produkt zu verlinken.

Außerdem möchte man wahrscheinlich (wir wollten es) dass die Sprachvariante der aktuellen Sprache vorausgewählt ist. Das lässt auch nicht über die Option Standard Attribut setzen, da diese Option dann für alle Sprachen gilt.

Das Ergebnis können Sie hier auf der Shop-Seite sehen: www.textilbox.de, www.textilbox.es und www.textilbox.fr.

Die unten angezeigten Filter sind alle einer init-Action zugeordnet und sind in der functions.php zu definieren:

add_action('init', function() {

 add_filter('function-name', function($args){
  .. Code ...
 },1,1);

}

Damit es wie in dem Code unten angegeben funktioniert, müssen Sie die Sprachvarianten mit den selben ISO Codes benennen wie es WPML macht. Wir haben 3 Sprachvarianten: Deutsch, Französisch und Spanisch und haben sie jeweils de, fr und es genannt. 

Außerdem haben wir die Eigenschaft Language erstellt, die genutzt wird um die Varianten zu erstellen.

Setzen der Add to cart URL auf der Shop-Seite

add_filter('woocommerce_product_add_to_cart_url', function($url, $product){
  if (is_a($product, 'WC_Product_Variable')) {
    $variations = $product->get_available_variations();
    $default_var = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE;
    if ($default_var) {
      foreach ($variations as $variation) {
        if (
          count($variation['attributes']) == 1 && 
          isset($variation['attributes']['attribute_pa_language']) && 
          $variation['attributes']['attribute_pa_language'] == $default_var && 
          $variation['variation_is_active'] &&
          $variation['variation_is_visible'] &&
          $variation['is_purchasable'] ) {
          $url = remove_query_arg( 'added-to-cart', add_query_arg( array( 'variation_id' => $variation['variation_id'], 'add-to-cart' => $product->get_id() ), $product->get_permalink() ) );
          return $url;
        }
      }
    }
  }
  return $url;
}, 99, 2);

Dieser Wert $default_var = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE; wird gesetzt, damit beim Klick auf Add to cart die Sprachvariante der aktuellen Sprache ausgewählt wird. Sollte ein Käufer eine andere Sprachvariante wünschen, muss er zuerst das Produkt anwählen und dort die gewünschte Variante auswählen.

Alternativ zur Konstante ICL_LANGUAGE_CODE, lässt sich auch diese Funktion nutzen:
global $sitepress;
$my_current_lang = $sitepress->get_current_language();

Setzen des Add to cart Textes auf der Shop-Seite

add_filter('woocommerce_product_add_to_cart_text', function($text, $product){
  if (is_a($product, 'WC_Product_Variable')) {
    $text = $product->is_purchasable() && $product->is_in_stock() ? __( 'Add to cart', 'woocommerce' ) : __( 'Read more', 'woocommerce' );
  }
  return $text;
}, 99, 2);

Setzen der Standard-Sprachvariante in der aktuellen Sprache auf der Produktseite

add_filter( 'woocommerce_dropdown_variation_attribute_options_args', function($args){
  $attribute = $args['attribute'];
  if (empty($args['selected']) && $attribute == 'pa_language') {
    $args['selected'] = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE;
  }
  return $args;
}, 10, 1 );

 

Was passiert mit dem Warenkorb wenn der Kunde die Sprache wechselt?

Das ist eine interessante Frage. Es gibt verschiedene Möglichkeiten:

  • Wenn Sie die Sprachen so eingerichtet haben, dass Ihre Website diese so unterteilt website.tld/de, website.tld/fr, dann ist es am einfachsten. Der Warenkorb wird einfach übersetzt (das Produkt bleibt gleich).
  • Wenn Sie pro Sprache eine eigene Domain (website.de, website.fr) eingerichtet haben, dann wird es etwas komplizierter. Denn Session und Cookies  immer an einer Domain gebunden sind; wechselt die Domain wird eine neue Session und ein neuer Cookie gesetzt. Daher muss in WPML eingestellt werden, dass die notwendigen Informationen entweder per GET oder POST übertragen werden (die Daten werden verschlüsselt).

Hier gibt es erweiterte Dokumentation zu dem Thema: https://wpml.org/documentation/getting-started-guide/language-setup/passing-session-data-between-languages-in-domains/

WooCommerce Germanized

In Deutschland wird man schnell abgemahnt, wenn man die Regeln nicht befolgt - das ist bekannt. Jedoch sollte man nicht nur aus Angst vor Strafe sich an bestimmte Regeln halten, manche sind durchaus sinnvoll, beispielsweise die Angabe eines Preises pro Einheitsmenge. So lässt sich bei Produkten, die in verschiedenen Größen angeboten werden schnell erkennen ob und wie sich ein möglicher Rabatt verhält.

Die Features von WooCommerce Germanized im Überblick

Das Plugin wird als Freemium-Erweiterung angeboten: es gibt eine kostenlose Variante, die einiges kann und eine kostenpflichtige Pro Version, die mehr Features anbietet. Wir interessieren uns in diesem Artikel lediglich um die kostenlose Version.

Die Features:

  • Matching von rechtlich relevanten Seiten wie Impressum, Datenschutz oder Widerrufsrecht
  • Widerrufsformular als Shortcode mit Bestätigung per E-Mail
  • Aktivierung der Anzeige eines Grundpreises, insbesondere wichtig für variable Produkte
  • Anzeige zu MwSt und Versandkosten zum Preis auf der Übersichtsseite und der Produkteinzelseite
  • Aktivierung der Kleinunternehmerregelung
  • Lieferzeitenangabe
  • Aktivierung einer Checkbox im Bestellprozess für Kunden um der Erstellung eines Kundenlogins zuzustimmen
  • Double Opt-in Verfahren für die Erstellung des Kundenlogins

Auch hier werden nicht alle Features aufgezählt, es sind zu viele 😉

Einen Shop mit WooCommerce Germanized können Sie hier besuchen: www.oelmanufaktur-bender.de.

Tausende Erweiterungen und immer professioneller

Mit der WordPress + WooCommerce Kombination profitieren Sie von einer Auswahl aus tausenden Erweiterungen. Außerdem lassen sich zahlreiche Anpassungen machen, ohne den Code des CMS oder von WooCommerce direkt anzufassen, sodass die Upgrade-Fähigkeit des Systems gewährleistet wird. In den oben genannten Beispielen werden  die Anpassungen über Hooks, Actions und Filter gemacht, WooCommerce an sich wurde nicht verändert.

Professionelle Anbieter, die sich bislang auf die traditionellen Shoplösungen konzentrierten wie Magento, OXID oder Prestashop, erweitern zunehmend ihre Lösungen für WooCommerce.

Ein weiterer Aspekt, den niemand außer Acht lassen sollte, sind die Entwicklungskosten. Je verbreiteter ein System ist, um so günstiger sind die Entwicklungskosten, da es viele Dienstleister gibt und sich gegenseitig Konkurrenz machen - das drückt die Preise. Allerdings hat Qualität bekanntlich nach wie vor seinen Preis...

Ferien-Karlsruhe: Start am 23.02. etwas holprig

Tausende Besucher und zighunderte Reservierungen in wenigen Minuten

Um Punkt 17h war verkaufsstart. Das wussten wir und das wussten die Leute. Warum sollte also etwas schief gehen?

So einfach ist es nicht. Tatsächlich war klar, dass es einen Ansturm auf die Angebote des Ferien Portals geben würde. Was bedeutet aber Ansturm in Zahlen? Wie dimensioniert man Server-Kapazitäten?

SaaS Web hostet das Ferien Portal seit 2015 nachdem der Verkaufsstart bei dem vorherigen Provider mit einem "rausgezogenen Stecker" endete. Seit dem werden Besucherzahlen und Serverlast von SaaS Web getrackt und darauf geachtet, dass das Portal gut läuft. Wie konnte es passieren, dass die Server überlastet waren, wenn SaaS Web zwei Verkaufsstarts (Frühjahr 2016 und 2017) betreut hat?

Anders als in den vergangenen Jahren, an denen der Verkaufsstart offline begann und einige Tage später erst online gebucht werden konnte, wurde erstmals komplett auf online gesetzt. Entsprechend gab es keine Erfahrungswerte über die Anzahl Nutzer und den Bestelltakt. Aber damit nicht genug: das Portal wurde komplett neu programmiert, sodass jeder Besuch, jede Bestellung bzw. Reservierung andere Lastwerte erzeugten wie bislang bekannt. Vor dem Launch wurden Lasttests durchgeführt, die uns die Größenordnung gaben, welche die Server aushalten sollten. Da diese Tests keine realen Bestellvorgänge simulierten, war die Annahme eine grobe Abwägung. An dieser Stelle sei gesagt, dass gute Lasttests einen erheblichen Aufwand bedeuten und entsprechende Kosten verursachen.

Hosting-Infrastruktur vor dem 23.02.

Hosting-Infrastruktur seit dem 23.02.

Was ist also passiert?

Chronik zusammengefasst:

  • Kurz vor 17h kommen immer mehr Besucher auf ferien-karlsruhe.de, können aber noch keine der neuen Angebote bestellen. Unmittelbar vor 17h sind es ca. 2.500 Besucher.
  • Um 17h wird die Möglichkeit zu bestellen automatisiert freigegeben
  • Unter der Last der vielen Bestellungen (denn erst diese erzeugen besonders viel Last) werden Aktionen wie das Klicken auf Weiter im Warenkorb nicht mehr möglich. Dadurch, dass die Server besonders langsam reagieren, werden auch verwirrende Seiteneffekte sichtbar wie z. B. ein Warenkorbsymbol oben mit einem Wert aber der Warenkorb selbst meldet leer zu sein.
  • In dieser Zeit sind wir dabei die Server zu monitoren und zu erkennen was genau nicht funktioniert wie es soll. Wir erhöhen schließlich die Performance aller Komponenten: Load Balancer 1 (von 2), Web Server 1, 2, 3 und 4 (ja, es waren 4 Application Server am Start), sowie Datenbank Server 1 (von 3).
  • Ab ca. 18h entspannt sich die Situation und die Reservierungen laufen in das System ein - bis 19h sind es ca. 1200 Reservierungen.

Das SaaS Web Team entschuldigt sich bei allen Familien für den nervenaufreibenden Verkaufsstart und bedauert sehr, den Buchungsansturm unterschätzt zu haben. Wir hoffen, dass alle trotz allem dazu kamen, die gewünschten Angebote reservieren zu können.

Managed WordPress Hosting: Ferienportal vom Stja geht um 17h live

Ferien Karlsruhe

Das Ferienportal ferien-karlsruhe.de geht in kurzer Zeit live.

Neben neuen Angeboten für die Kinder ist aus technischer Sicht einiges passiert: das Backend wurde komplett überarbeitet. Dazu wird es in Kürze ein eigenen Artikel geben mit detaillierten Informationen und Screenshots.

Public Cloud Multi Server Hosting

Die Hosting-Infrastruktur wurde außerdem ausgetauscht, um den Ansturm an Besuchern zu bewältigen - aber auch die Verfügbarkeit des Systems allgemein zu erhöhen. Insgesamt 9 Server laufen parallel mit verschiedenen Aufgaben, um möglichst viele Anfragen gleichzeitig bearbeiten zu können und eventuelle Ausfälle einzelner Komponenten zu überleben. Der Aufbau des Systems kann hier eingesehen werden: Profi Hosting für WordPress

Profi Hosting für WordPress

WordPress ist das meist genutzte Website CMS auf der Welt. Damit die mit WordPress erstellte Website für den Betreiber und für die Besucher eines gutes Erlebnis wird, insbesondere bei vielen Nutzern/Besuchern, stellt sich zwangsläufig die Frage nach dem Hosting.

In vielen Fällen wird WordPress beim (billig) Hoster über eine 1-Click Anwendung im Kundenbereich auf ein nicht näher spezifizierten Webspace eingerichtet. Der Nutzer muss ein bisschen warten und dann kann er sich in das Backend einloggen und seine Website konfigurieren und bearbeiten.

Ein solches Szenario ist im Unternehmenskunden Umfeld eher seltener. Denn ein Unternehmenskunde möchte wissen was er kauft und was es taugt. Daher wenden sich Unternehmen auch häufig an Agenturen und Spezialisten, die auch in der Lage sind, individuelle Setups aufzusetzen und zu betreiben.

Hostingtyp und Performance

Die Schnelligkeit einer Website, sprich die Ladezeit beim Aufruf von Seiten und bei verschiedenen Klicks hängt natürlich nicht nur von der darunterliegenden Performance (RAM, CPU, Speicher). Techniken wie Caching, Datenkompression, Minifying beispielsweise haben einen großen Einfluss auf die Ladezeit, die Ressourcennutzung und somit auf die Anzahl Nutzer die gleichzeitig die Website besuchen können. Da diese Techniken mehr oder minder von der Hosting-Infrastruktur unabhängig sind, vergleichen wir hier nur die Hostingtypen.

Shared WordPress Hosting

Traditionell besteht das Shared Hosting nur aus einem Webserver (oft old school Apache) und es werden möglichst viele Websites darauf betrieben. Die Websites teilen sich die Ressourcen. Es ist zwar möglich die maximale RAM Nutzung zu bestimmen aber eine Garantie den RAM auch nutzen zu können gibt es nicht - die anderen Websites sind gleichberechtigte Partner und alle versuchen, sich die Ressourcen zu nehmen, die sie brauchen und maximal nutzen dürfen.

Solche Plattformen sind für anspruchsvolle Setups mit vielen Besuchern/Nutzern nicht wirklich geeignet.

Dedicated WordPress Hosting

Für anspruchsvollere WordPress Websites kann man auch eine eigene virtuelle Maschine (VM) nutzen, die mit keinen anderen Websites geteilt wird. So stehen die Ressourcen wirklich dediziert für die WordPress Instanz zur Verfügung. Entsprechend wird eine leistungsstarke VM  für viele Fälle in denen es darauf ankommt, viele HTTP Anfragen zu bearbeiten, die passende Lösung sein.

Verfügbarkeit

Verfügbarkeit ist nicht nur ein Marketing-Wert. Mit einer professionellen Infrastruktur (in einem zertifizierten Datacenter) mit nachweislichen Maßnahmen zur Vermeidung von Ausfällen wie z. B. Redundanz von Netzwerkverbindungen, Servern und RAID-Systemen lässt sich die Verfügbarkeit durchaus verlässlich interpretieren. Außerdem werden in solchen Fällen meist auch Service Level Agreements vereinbart, die nicht vorgesehene Incidents regeln.

Alle Dienste auf einer VM

Wenn ein Webserver, die Datenbank und die Daten allesamt auf einem (virtuellen) Server laufen, hat man ein tendenziell performantes Setup. Wenn aber die darunterliegende Hardware kaputt geht, geht gar nichts mehr. Dann muss ein Backup auf einem neuen Server eingespielt werden (und die IP muss ggf. zum neuen umgeroutet werden).

Web, Datenbank und Daten auf separaten Servern

Damit ein physikalischer Ausfall nicht gleich alle Dienste (Webserver, Datenbankserver, Daten) trifft und einen Totalausfall mit sich bringt, kann man die Dienste getrennt von einander betreiben.

Sie können Daten auf einem NAS ablegen, das auf einer anderen Hardware liegt. Wenn also die VM ausfällt, kann eine neue aufgesetzt werden, die Daten müssen aber nicht erst kopiert werden, die Datenpartition wird einfach (z. B. per NFS) eingebunden. Dasselbe kann mit dem Datenbank-Server gemacht werden.

So haben wir 3 Server für unsere WordPress Anwendung. Das klingt zunächst nicht schlecht, aber so toll ist es auch nicht, denn ein einzelner Server-Ausfall wird nicht abgefangen. Fällt die Datenbank aus oder die Datenpartition, ist die WordPress Website down. Es wird also geboten, für Redundanz der einzelnen Komponenten zu sorgen.

Multi Server WordPress Hosting von SaaS Web

Erklärungen zu dem Multi Server Setup

Im SaaS Web Hosting Portfolio gab es bislang entweder Private Cloud Shared Hosting oder Private Cloud single VM Hosting. Damit lassen sich Websites mit vielen Besuchern, großem Ressourcen Verbrauch und hoher Verfügbarkeit nicht ganz so gut abbilden. Das Public Cloud Multi Server Setup ist nun die Antwort auf solche Anforderungen. Es lässt sich übrigens auch in der SaaS Web Private Cloud einrichten...

Parallel laufende Webserver

Der Webserver wird redundant betrieben: es laufen parallel zwei oder mehr Server (mit Nginx). Sie greifen alle auf dieselbe NFS Datenpartition zu.

Cloud NAS

Die Cloud NAS ist ein redundantes NFS Server-System, das sich ein Festplatten-Pool (RAID) teilt, sodass ein einzelner NFS-Server Ausfall abgefangen werden kann.

Galera Cluster

Die Datenbank Server werden als Galera Cluster (mindestens 3 Server) zusammengeschaltet. Selbst wenn 2 Server ausfallen geht der Anwendung das Licht nicht aus. Das Cluster wird als Reverse Proxy (localhost) zu der WordPress Installation eingebunden - so muss WordPress nicht selbst entscheiden, welchen Server für die DB Verbindung benötigt wird.

Master/Slave Load Balancer

Damit die Webserver parallel betrieben werden können, benötigt das Setup einen Load Balancer, der die eingehenden HTTP-Anfragen an die Webserver verteilt. Um einen Load Balancer Ausfall zu verkraften, bekommt dieser auch einen Zwillingsbruder.

Failover IP

Mit der Failover IP kann die öffentliche IP (die mit der Website Domain matcht) dynamisch zwischen den Load Balancer wechseln. Das geschieht automatisch: wenn der Slave Load Balancer merkt, dass der Master ausgefallen ist, beantragt er die Zuweisung der IP.

Hier geht es zu den SaaS Web Managed WordPress Hosting Angeboten.

WordPress Management mit WP Steve

Unabhängig vom Hosting ist das Management der WordPress Instanz besonders wichtig. WordPress sollte stets up to date sein genauso wie das Theme und die installierten Plugins. SaaS Web hat hierfür eine WordPress Management Anwendung entwickelt mit der alle gehosteten Websites zentral verwaltet werden können. Standardmäßig werden 1x am Tag und bei jedem Update-Vorgang ein Backup der WordPress-Installation  durchgeführt.

Helferlein für WordPress Websites mit vielen Seiten

Viele Websites haben tatsächlich nur wenige Seiten, da stellt sich die Frage erst gar nicht.

Aber was ist, wenn man eine Seite betreuen muss, die hunderte Seiten beinhaltet, teils verschachtelt, also auch mit Unterseiten? Da kommt an mit der normalen Seitenansicht von WordPress nicht mehr weit, bzw. es wird dann sehr unangenehm.

Zum Glück gibt es aber ein einfaches und kostenloses Plugin, das Abhilfe schafft: CMS Tree Page View.

Baumstrukturansicht mit CMS Tree Page View

Einmal installiert, ist die Standard-Einstellung, lediglich die Seiten als Baum zu strukturieren. Die Unterseiten sind zunächst zusammengeklappt und nehmen so keinen Platz ein. Mit CMS Tree Page View lassen sich hunderte WordPress Seiten auf einer Seite darstellen - je nachdem wie die hierarchische Struktur ist.

Stamdard Seitenansicht (arscurandi.de)

Seitenansicht mit CMS Tree Page View (arscurandi.de)

Drag & Drop, Kontextmenü

Die Seiten lassen sich per Drag und Drop verschieben. Die Reihenfolge wird automatisch verändert, sodass die neue Position auch in der Standard-Ansicht übernommen wird. Beim Mouse-Over über einen Eintrag werden Aktionen sichtbar wie Neue Seite vor oder danach hinzufügen, oder innerhalb, gleichbedeutend wie Unterseite erstellen.

Status Etiketten, Suchfunktion

Seitenstati wie Entwurf, Privat oder Passwortgeschützt werden mit farblichen Etiketten versehen. Außerdem hilft eine Suchfunktion, die gewünschte Seite schnell zu finden, sollte diese zum Beispiel als Unterseite eingeklappt nicht sofort sichtbar sein.

WPML kompatibel

Absolut erwähnenswert ist, dass das Plugin WPML (kostenpflichtiges WordPress Multilingual Plugin) kompatibel ist. Die Seitenbäume sind einfach nach Sprache getrennt.

Auch für andere Custom Post Types einrichtbar

Über den Bereich Einstellungen > CMS Tree Page View lassen sich auch andere Custom Post Types definieren die mit dem Plugin anders angezeigt werden können.

WordPress: Newsletter verschicken

Wenn man eine kommerzielle Website betreibt - ein populärer Blog, ein Shop oder eine Darstellung der eigenen Firma im Web -, möchte man vielleicht seinen Lesern oder Kunden mehr oder minder regelmäßig Informationen per E-Mail schicken, sogenannte Newsletter.

Es gibt zahlreiche Plugins für WordPress um das Erstellen von Newslettern und das Verwalten von Empfängern zu implementieren. Besonders populär sind MailPoet (ca. 300.000 aktive Installationen für die 2er Version, ca. 30.000 für die 3er Version) oder Newsletter (200.000 aktive Installationen).

Das Plugin Newsletter von Stefano Lissa & The Newsletter Team

Wir werden uns mit dem Plugin Newsletter beschäftigen, das wir gut kennen und in zahlreichen WordPress-Installationen eingerichtet haben.

Die wichtigsten Features in Kürze aufgelistet

  • Anmelde-Formular als Widget oder Shorcode
  • Double Opt-in Verfahren
  • Empfänger-Profilverwaltung und Unsubscribe-Link
  • Drag & Drop Template Tool
  • Einfache Verwaltung von Empfängerlisten
  • Premium Version: WooCommerce Integration, Erweiterte Statistiken

Der Installations-Wizard in 4 Schritten

Erst kürzlich eingeführt, bringt der Installationsassistent den Benutzer durch die Ersteinrichtung des Plugins. Diese Ersteinrichtung  ist sehr minimalistisch. Die Konfiguration der Sende-Technik (SMTP) oder Empfänger-Listen können später vorgenommen werden.

Schritt 1: Absender konfigurieren

In diesem Schritt legt man die Absender Adresse fest und den Namen, den der Empfänger sieht.

Schritt 2: Anmeldeformular

Hier können Sie ein "Minimal-Formular" konfigurieren, das als Widget in die Website platziert werden kann.

Zwischen-Info

Dieser Screen informiert lediglich über den Status der Installation. Vermutlich gehört diese Seite zu denen die bald aus dem Wizard verschwinden 😉

Schritt 3: Versand testen

Einfach eine Mailadresse eingeben - am Besten eine, zu der Sie Zugang haben.

Schritt 4: Widget mit Anmeldeformular platzieren

In Schritt 2 wurde das Formular erstellt, nun können Sie das Widget über den Menüpunkt "Design > Widgets" platzieren. Sie können diesen Schritt auch überspringen, wenn Sie die Einbindung später durchführen möchten oder das Formular auf andere Weise einbauen.

Erstinstallation: Ende

So, das war's. Am Besten nun auf Dashboard klicken und die Funktionen und Optionen des Plugins durchgehen.

Das Dashboard

Das Dashboard ist die zentrale Informationsstelle des Plugins. Hier können Sie auf einen Blick alle laufenden und vergangene Aktivitäten und Statistiken über die Klicks sehen.

Die Grundkonfiguration

Absender, Antwort- und Bounce-Adresse

Im Wizard haben wir die Absender-Adresse angegeben. Diese Mailadresse ist die, die der Empfänger in seinem Mailprogramm sieht. Darüber hinaus lassen sich 2 weitere Adressen einstellen:

  1. Der Return Path: das ist die Bounce Adresse. Wenn das Mailsystem des vermeintlichen Empfängers nichts mit der Adresse anfangen kann, schickt das Mailsystem eine entsprechende Benachrichtigung an die hier angegebene Adresse
  2. Die Reply-To Adresse: hier handelt es sich einfach um die Mailadresse, die automatisch eingesetzt wird, wenn ein Empfänger auf Antworten klickt.

Auf das Thema Lizenzschlüssel gehen wir später ein.

Wichtig: wenn Sie ein Mail Gateway Dienst nutzen, werden diese beiden Adressen (Return Path und Reply To) wohl möglich überschrieben. Die Adressen können Sie entweder direkt in dem Integrations-Plugin oder in dem Kunden-Interface des Mail Gateway Anbieters angeben. Mehr zu dem Thema gibt es in dem Abschnitt Spezialeinstellungen.

Auslieferungsgeschwindigkeit

Auch wenn es nervig ist für 1.000 Empfänger mal 3 oder 4 Stunden zu benötigen: ohne deutlich größeren Aufwand (bzw. Budget) ist es gar nicht möglich bzw. sinnvoll mehr als 300-400 Mails pro Stunde auszuliefern. Die empfangenden Systeme sind meist so eingestellt, dass sie ab einer bestimmten Anzahl E-Mails pro Stunde alle weiteren eintreffenden E-Mails des ausliefernden Mailsystems automatisch als Spam flaggen und ggf. sogar bouncen (zurück schicken - an die Bounce-Adresse).

Spezialeinstellungen

Hier lassen sich verschiedene Einstellungen einrichten, z. B. Zugangsberechtigung zum Plugin für Editoren, Log Level (Sammeln von technischen Informationen), Debug Mode (wenn das Plugin nicht korrekt funktionieren sollte). Interessanter ist der Punkt Send email directly. Diese Option ist wichtig und der Zustand An/Aus hängt davon ab, wie die E-Mails tatsächlich verschickt werden sollen. Es gibt mehrere Möglichkeiten:

  1. Direkter Versand über WordPress: WordPress generiert nicht nur die E-Mails sondern verschickt sie selbst. Diese Option wird bei vielen Hostern problematisch sein, da oftmals WordPress so eingestellt wird, dass nur wenige E-Mails verschickt werden können. Die Gefahr des Missbrauchs durch eine gehackten WordPress Installation ist einfach zu groß.
  2. Versand über Mail-Dienstleister und Plugin-Integration: anstatt direkt SMTP Zugangsdaten einzutragen wird die Mail Gateway Integration über ein eigenes Plugin erstellt.
  3. SMTP Versand über ein Mail Gateway: hier kann über den Bereich SMTP ein Mail Gateway eingetragen werden, der den Versand übernimmt.Das heißt, dass die E-Mails vom Plugin generiert und an den angegebenen Server vermittelt werden.

Für die erste und zweite Option muss auf Send email directly auf On eingestellt werden, ansonsten auf No.

Analog zum Mail-Versand ist das Encoding nur von Bedeutung wenn WordPress selbst die Mails ausliefert. Wenn die Mails über einen anderen Dienstleister verschickt werden, kann über diesen das Encoding bestimmt werden. Die deutsche Übersetzung an der Stelle ist übrigens falsch (es steht Email Verschlüsselung anstatt Codierung).

SMTP Einstellungen

Die Parameter, die einzustellen sind, sind im Prinzip die gleichen wie die zur Konfiguration einer normalen Mailbox. Die erforderlichen Daten bekommen Sie von Ihrem Anbieter.

An der Stelle sei erwähnt, dass SaaS Web auch einen Mail Gateway Dienst anbietet:

https://www.saasweb.net/de/managed-hosting/saas-web-mail-gateway

Ein Newsletter erstellen

Die Erstellung eines Newsletters ist recht einfach. Es gibt einige Templates zur Auswahl. In vielen Fällen dürfte der Responsive Drag & Drop Composer die erste Wahl sein. Diese Option schauen wir uns auch gleich mal Schritt für Schritt an.

Der Drag & Drop Editor

Hier lassen sich Content-Elemente per Drag & Drop in das Template platzieren und anschließend mit Inhalt befüllen.

Neues Mailing: Titel eingeben

In diesem Schritt wird lediglich ein Titel festgelegt. Das ist der Betreff des Newsletters, das was der Empfänger zunächst sieht. Hier sollte man vorsichtig sein. Titel wie "Super Sale! Alles kostenlos" etc. werden häufig als Spam wahrgenommen.

Neues Mailing: Empfänger einstellen

Standardmäßig sind alle Empfänger ausgewählt. Sie können aber eine oder mehrere Listen (oder andere Kriterien) auswählen, um den Empfängerkreis genauer zu definieren. 

 

Neues Mailing: Versand einstellen

Hier geht es hauptsächlich darum das Tracking zu aktivieren - die Statistiken kann man anschließend in Echtzeit verfolgen - und um die Festlegung des Versandstarts (Datum und Uhrzeit).

Die Option Keep Private bzw. Privat halten bezieht sich auf die Nutzung der Erweiterung Newsletter Archive Extension mit der ein Newsletter Archiv auf der Website angelegt werden kann. Die Newsletter, die privat sein sollen, werden dort nicht aufgeführt.

Newsletter testen

Newsletter Plugin - Action

Nachdem alles eingestellt ist, das Newsletter Versandfertig ist, speichert man sicherheitshalber den Stand (das kann und sollte man zwischendurch auch machen). Als nächstes empfiehlt sich ein Testversand, um zu prüfen ob das Newsletter auch so ist, wie es soll. Der Test funktioniert aber so: in der Empfänger-Liste muss mindestens ein Empfänger die Eigenschaft Test Abonnent haben.

Newsletter Plugin - Subscriber details

Newsletter mit Mail Tester testen

Dieser Dienst hat zunächst nichts mit dem Plugin zu tun. Es ist jedoch immer ganz gut zu prüfen wie die Chancen sind beim Empfänger in die Mailbox zu landen anstatt in den Spam-Ordner. Dafür gibt es Dienste wie Mail Tester. Mail Tester ist  kostenlos und wirklich einfach zu nutzen - und ohne Registrierung und sonstige werbliche Nervigkeiten.

Einfach einen Fake-Empfänger in die Liste der Empfänger eintragen und die vorgegebene Adresse verknüpfen. Anschließend das Ergebnis auswerten lassen. Einfach https://www.mail-tester.com/[mailbox-name] aufrufen.

Newsletter abschicken

Wenn man wirklich fertig ist - Newsletter wurde inhaltlich und technisch geprüft -  kann es losgehen. Einfach auf Senden klicken. Dann wird an der eingestellten Uhrzeit mit dem Versand begonnen.

Achtung: das WP Cron Problem! Beinahe hätten wir das Thema vergessen 😉 Siehe den Abschnitt WP Cron.

Das WP Cron Problem

Wie funktionieren normalerweise zeitgesteuerte Aktionen bei WordPress?

WordPress, wie die meisten Webanwendungen, läuft nicht permanent im Speicher des Servers. Erst wenn eine Seite aufgerufen wird, passiert etwas und eine oder mehrere Skriptdateien werden ausgeführt.

Das bedeutet:  wenn keiner die Website besucht, wird kein Skript ausgeführt und es wird auch kein Newsletter am Donnerstag um 15h30 verschickt.

wp-cron ausschalten bzw. cronjobs anders einrichten

Die Lösung des Problems ist ganz einfach:

  • wp-cron.php deaktivieren: dazu muss in der zentralen Konfigurationsdatei von WordPress eine Zeile hinzugefügt werden.
    define('DISABLE_WP_CRON', true);
  • System-Cronjob einrichten, der regelmäßig, z. B. alle 5 Minuten, die URL aufruft:
    https://blog.saasweb.net/wp-cron.php

Wie und wo man Cronjobs einrichtet ist für Anfänger nicht zwingend einfach. Am Besten einen Profi fragen. Hier ein Screenshot aus ISPconfig für die Website www.vinsdumonde.blog.

ISPconfig cronjob

Newsletter Premium

Gegen eine Jahresgebühr ab 49 € (Blogger - 3 Websites) kann das Plugin auf Premium geupgradet werden.

Die Premium Version beinhaltet einige interessante Zusatz-Plugins:

  • WooCommerce Integration: eingeschaltet klinkt sich das Plugin in den Bestellprozess von WooCommerce ein und bietet Käufern die Möglichkeit an, sich gleich auch für ein Newsletter anzumelden.
  • Erweiterte Statistiken: gewinnen Sie mehr Einblick über Ihre Kunden/Leser.
  • Mail Gateway Integrationen: die bekannten Anbieter sind verfügbar wie zum Beispiel Sengrid, MailJet oder MandrillApp.

Die komplette Liste der Zusatzfunktionen bzw. der Erweiterungen finden Sie hier:
https://www.thenewsletterplugin.com/premium

Keine WPML Unterstützung

Perfekt kann keiner sein: leider unterstützt das Newsletter Plugin kein WPML. Damit ist es etwas mühsam, z. B. mit der Premium Extension, die Newsletter Anmeldung im Checkout zu integrieren und mit entsprechenden Sprach-Listen zu verbinden. Es ist mühsam aber es geht.. dazu muss man allerdings den Umweg über Anpassungen in der functions.php  gehen und action "deregistrieren" und angepasste Versionen wieder registrieren.

Fazit

Newsletter verschicken ist etwas aufwändiger als man zunächst vielleicht denkt. Vor allem, wenn man es richtig machen möchte.

Obwohl viele Punkte angesprochen wurden, wurden einige ausgelassen oder nur oberflächlich behandelt.

Jedenfalls ist das Plugin Newsletter eine interessante Erweiterung von WordPress, auch in der kostenfreien Variante. Für eine Integration mit WooCommerce empfiehlt sich die Premium Version.

WordCamp Cologne 2017

KÖLN 2017 – WORDCAMP IM BARCAMP-STYLE

Seit dem letzten WordCamp Köln ist schon ein Jahr vergangen. Also höchste Zeit für eine Neuauflage:

Für alle WordPress-Interessierten wird es am 17./18./19. November 2017 in Köln wieder ein WordCamp geben, im zweiten Jahr als echtes BarCamp. Das heißt, die Sessions werden am Veranstaltungstag vor Ort vorgeschlagen. Die Sessions mit den meisten Interessierten bekommen einen Slot, also Uhrzeit und Raum. So ist sicher gestellt, dass auch wirklich das läuft, was Euch interessiert. Wir freuen uns auf Euch! Jeder Teilnehmer kann eine Session zu einem interessanten Thema vorschlagen. Das kann ein Vortrag, eine Diskussion oder ein Workshop sein.

WordPress: „EWWW Image Optimizer“ – ein super Plugin zur Optimierung von Bilder

Bildoptimierung leicht gemacht

Jeder möchte seine Website optimieren und meint, der Techniker müsse ran und etwas dafür tun, dass die Ladegeschwindigkeit besser wird... dabei sind die Bilder oftmals nicht für die Anzeige im Web optimiert und verursachen lange Ladezeiten.

Immerhin unterstützt WordPress seit der Version 4.4 responsive Images (mit dem srcset und sizes Attribute im <img /> Tag). So lassen sich die passenden Bildgrößen anzeigen jedoch sind die Bilder nicht zwingend optimiert.

Als Profi würde man sicherlich die Bildoptimierung auf dem Rechner mit Photoshop und anderen Tools manuell durchführen, das bedeutet jedoch viel Arbeit und Zeit, die man vielleicht anderweitig nutzen möchte.

Deshalb stelle ich Ihnen in diesem Beitrag ein WordPress-Plugin vor, mit dem Sie ohne Aufwand optimierte Bilder generieren. Aber Achtung: wenn das Theme schlecht programmiert ist, dann ist das Plugin auch dagegen machtlos...

Typ, Maße, Kompression, Gewicht: Was sind denn die wichtigen Parameter bei Bildern?

Bildtypen: für uns zählen aktuell nur .jpg und .png

Nicht jedes Bild ist für das Web geeignet

Prinzipiell unterscheidet man Bildformate anhand der einhergehenden Kompression:

  • Keine Kompression
  • Verlustbehaftete Kompression
  • Verlustfreie Kompression

Nun schauen wir welche Bildformate überhaupt von den Browsern unterstützt werden (es gibt eine gute Matrix auf Wikipedia). Es gibt vier durchgängig unterstützte Typen, bzw. von den meist genutzten Browsern (das sind Chrome/Chromium, Firefox, Internet Explorer/Edge, Opera, Safari):

  • BMP (Bitmap)

    BMP (sowie TIFF) gehört tendenziell der Kategorie "Ohne Kompression" an, obwohl es Verfahren gibt, die Daten zu komprimieren, aber aus historischen Gründen, kaum bekannt ist bzw. selten eingesetzt wird. Interessant aber ist, dass BMP sich durch das ZIP Verfahren beispielsweise gut komprimieren lässt (im Vergleich zu JPEG/PNG beispielsweise).

  • GIF (Graphics Interchange Format)

    GIF ist wie PNG ein Format der verlustfreien Kompression, unterstützt allerdings nur 8bit Farbkodierung und ist daher nicht wirklich für Fotos geeignet. GIF unterstützt jedoch Animationen.

  • JPEG (Joint Photographic Experts Group)

    JPEG (Dateiendung .jpg oder .jpeg) ist ein Grafikformat mit verlustbehafteten Kompression. JPEG eignet sich entsprechend gut für Fotografien jedoch nicht für Screenshots mit Text oder Zeichnungen.

  • PNG (Portable Network Graphics)

    PNG ist ein Format für verlustfreie Kompression und ist zunächst für alle möglichen Nutzungen geeignet.

Ach, da wäre noch ein interessantes Format: SVG (Scalable Vector Graphics). SVG ist ein Vektor-Bildformat, verlustfrei und skalierbar. Es eignet sich allerdings ausschließlich für zweidimensionale Formen oder Buchstaben (ggf. Logos), nicht aber für Grafiken oder Fotos. Ich wollte SVG einfach mal erwähnt haben..

Beinahe vergessen: WebP. WebP ist ein recht neues Grafikformat für verlustbehaftete oder verlustfrei komprimierte Bilder. WebP wird allerdings noch nicht von allen verbreiteten Browsern unterstützt (u. nicht von Firefox, Safari oder Internet Explorer/Edge - hier gibt es eine gute Übersicht).

Wir gehen an der Stelle nicht tiefer in die Materie. Aus technischer Sicht gibt es 5 interessante Formate (BMP, GIF, JPEG, PNG und WebP), aber aus Gründen der Browser-Unterstützung, Kompression und Farbpalette berücksichtigen wir in diesem Artikel nur noch JPEG und PNG.

Bildgröße: es gibt keine Standard- oder Idealgröße in Pixel

Mit Bildgröße meine ich Bildmaße (Breite x Höhe) in Pixel und nicht wieviele KB oder MB ein Bild "wiegt".

Warum ist das Thema Bildmaße so kompliziert?

Weil es so viele verschiedene Endgeräte (Smartphone, Tablett, Desktop-Monitor) und unterschiedliche Bildschirmgrößen (aktuell alles Mögliche von ca. 4 bis grob 27 Zoll Diagonale) gibt und die Ladezeit eine große Rolle spielt. Wenn die Ladezeit keine Rolle spielen würde, könnte man immer die maximale Bildgröße nehmen - der Browser könnte dann die Bilder für einen Skalieren... aber so einfach ist es nun mal nicht 😉

Außerdem werden Bilder manchmal in voller Browser-Fenster Breite angezeigt, komplett, ohne abgeschnitten werden (dabei ist die Höhe variabel), manchmal soll die Höhe unabhängig von der Breite gleich bleiben, was bedeutet, dass das Bild abgeschnitten werden soll oder verzerrt wird. Oftmals sollen die Bilder prozentual zur verfügbaren Breite angezeigt werden... es gibt viele verschiedene Nutzungsszenarien, weshalb es keine eindeutige Antwort gibt oder weiteres Details zur Nutzung zu kennen.

Um das Thema noch zusätzlich zu verkomplizieren gibt es noch den Spezialfall Mac und Retina: ein Retina Bildschirm hat, vereinfacht erklärt, die doppelte Pixeldichte verglichen mit einem herkömmlichen Bildschirm - Kanten und Schriften werden deutlich feiner dargestellt. Um ein Bild Retina-optimiert darzustellen, muss es die doppelten Maße haben.

Weil man keine Standardantwort hat, heißt es aber noch lange nicht, dass es keine Anhaltspunkte gibt. Wir wollen hier also ein paar Nutzungsszenarien durchgehen und Entscheidungen zu Bildmaße treffen:

  1. Headerbild in voller Breite
  2. Fullscreen Coverbild
  3. Bild im Content-Bereich einer Seite

1. Headerbild in voller Breite

Hierbei handelt es sich um ein weit verbreitetes Szenario. Startseite, großes Bild über die ganze Fensterbreite. Oftmals werden hierfür Bilder bei Bilddatenbanken wie Fotolia oder iStock gekauft und natürlich sind die Preise u. a. abhängig von den Bildmaßen.

In diesem Fall wurde ein JPEG Bild mit 2.000px Breite und 1.060px Höhe genommen. Das Bild "wiegt" 262 kB.

2. Fullscreen Coverbild

Bilder, die das ganze sichtbare Fenster ausfüllen ist eine eher moderne Darstellungsform, wird aber dennoch recht häufig angetroffen. Das ist ganz klar eine Design-Variante, die das größte Bildformat benötigt, wenn man möchte, dass das Bild "immer" unverpixelt angezeigt wird, sprich möglichst nicht hochskaliert wird.

In diesem Beispiel hat das Bild die Maße 3.000 px mal 1.776 px und wiegt 1 MB.

3. Bild im Content-Bereich einer Seite

Das ist wahrscheinlich die häufigste Nutzung von Bildern auf Websites, in Blogs oder Produktseiten: es gibt Bild und Text, oftmals nebeneinander. In unserem Beispiel hat das Bild die Maße 1.600px x 900px und hat ein Gewicht von 330 kB. Würde das Bild in voller Größe eingebunden, und bei den 15 anderen Artikeln der Startseite, hätten wir ca. 4,5 MB Artikelbilder runterzuladen, egal ob mit dem Smartphone oder auf dem Desktop. So oder so ist es zuviel...

Aber WordPress schafft Abhilfe: es gibt eine Funktion, Theme-abhängig, mit der beim Hochladen von Bildern automatisch Thumbnails unterschiedlicher Größe generiert werden. Entsprechend wird dann eine kleinere Variante in den Artikel eingebunden, und wenn man seinen Besuchern das große Bild anzeigen möchte, kann man es verlinken, so dass es beim Klick auf das Bild angezeigt wird.

In diesem Beispiel ist das Thumbnail-Bild 380px x 280px groß und wiegt 34,8 kB.

Bilder für Retina Displays optimieren

Vorhin haben ich das Thema erwähnt: damit Bilder auf Retina-Displays gut aussehen, müssen Bilder mit der doppelten Anzahl Pixel verwendet werden. Diese Bilder sind natürlich deutlicher schwerer, daher wäre es nicht besonders günstig standardmäßig die größeren Bilder zu nutzen, nur damit diese Besucher (aktuell in der Unterzahl) befriedigt werden.

Es gibt ein nettes und kostenloses Plugin (es gibt auch eine kostenpflichtige Pro-Variante mit mehr Features) namens WP Retina 2x, das sich der Sache annimmt. Dabei werden beim Upload der Bilder fortan die 2x-Varianten automatisch generiert. Die Inhalte werden wie zuvor erstellt, nur dass im HTML-Code  (<img /> Tag) die Retina-Variante hinzugefügt wird, sodass der Browser des Retina-Besuchers die 2x-Bildvariante darstellt.

Kompression und Gewicht

Wer seine Bilder selbst bearbeitet merkt schnell, dass bei gleichen Bildmaßen, die Kompression einen erheblichen Einfluss auf das Gewicht des Bildes hat. Allerdings, wenn die Kompression zu groß ist, werden Artefakte sichtbar und das Bild ist nicht mehr schön...

Kompression

Gewichtsabnahmen um 50%-60% sind keine Seltenheit wenn man mit selbst aufgenommenen Bildern arbeitet, ohne eine nennenswerte Verschlechterung der Bildqualität zu erkennen (solange das Bild nicht gedruckt wird).

Gewicht

Auch hier ist die Benennung exakter Werte nicht möglich, es hängt u. a. auch davon ab was einem wichtig ist: sollte eine Seite besonders schön und hochwertige, große Bilder haben, oder soll die Seite besonders schnell laden und für Google optimiert sein. Im ersten Fall werden wir die Bilder wahrscheinlich nicht so arg komprimieren, im zweiten wird so viel optimiert wie es geht und sowieso, die Anzahl Bilder zudem auch reduziert.

Ohne konkreten Nachweis würde ich empfehlen Headerbilder nicht größer als 200 kB zu machen (z. B. 2.000 px breit) und Artikelbilder nicht größer als 50 kB (z. B. 600px breit). Je nach dem wie viele Bilder auf der Seite sind und für welche Zielgruppe die Website optimiert sein soll, kann durchaus das eine oder andere Bild schwerer sein... 

Einen ganz guten Eindruck, wie gut die Bilder sind bekommt man wenn man eine Website-Analyse macht, z. B. auf  www.webpagetest.org. Dazu gibt es in Kürze einen Artikel auf diesem Blog...

EWWW Image Optimizer: weniger ist mehr

Nach der Theorie folgt die Praxis. Im ersten Abschnitt gab es eine Art Grundkurs zu Bildern, nun erkläre ich wie das kostenlose Plugin EWWW Image Optimizer uns viel Arbeit abnehmen kann und dabei hilft die Ladezeit der Website zu optimieren.

Mit weniger ist mehr ist natürlich das Gewicht der Bilder gemeint, denn EWWW explodiert fast vor Einstellmöglichkeiten...

Grundeinstellungen

Zunächst gibt es eine Option Cloud Optimierung API Key. Mit der Lizenzierung eines kostenpflichtigen Tarifs erwirbt man die Nutzung des Cloud-Services von EWWW. Somit werden die Bildoptimierungen nicht auf dem Server selbst durchgeführt, sondern auf der EWWW-Cloud. Wenn man viele Bilder in vielen Formaten hat und zahlreiche Optimierungen vornehmen möchte, kann dies eine nützliche Option sein. Die Kosten sind übersichtlich, Pre-Paid ab $9 für 3.000 Bilder. Weitere Informationen zu den Tarifen finden Sie hier.

Die Option Metadaten entfernen ist sehr interessant. Die Metadaten von Bildern sind u. a. EXIF (Exchangeable Image File Format) Informationen - oft Daten die die aufnehmende Kamera in das Bild speichert - und andere für die Darstellung im Web nicht wichtige Daten.

Die Optionen Optimierungsgrad der verschiedenen Bildtypen sind in der kostenlosen Variante etwas eingeschränkt. Standardmäßig ist für JPEG und PNG eine verlustfreie Kompression voreingestellt (änderbar auf keine Kompression bei JPEG und verlustbehaftete Kompression bei PNG).

Erweiterte Einstellungen

In diesem Bereich kann man die JPEG Qualität verändern für Bearbeitungs- und Skalierungsaktionen (PNG -> JPEG oder JPEG -> WebP). Sie können gerne mit dem Wert experimentieren.

Die anderen Option im Bereich Erweitert sind ansonsten weniger interessant in Bezug auf die Bilder selbst, es geht mehr um Ressourcen und Ordner für Bilddateien und andere im Normalfall nicht allzu wichtige Details.

Skalierungsoptionen

Hier wird es wieder interessant: sollen Bilder, die in die WordPress Mediathek hochgeladen werden skaliert werden und wenn ja, welche sind die maximalen Abmessungen? Genauso lassen sich auch bestehende Bilder skalieren.

Die Optimierung sowie die Deaktivierung der Generierung von spezifische Bildgrößen lässt sich hier einstellen - es ist ziemlich sicher, dass die Liste der Bildgrößen bei Ihnen eine andere ist, also seien Sie darüber nicht überrascht...

Konvertierungsoptionen

Hier gibt es Einstellungen um beispielsweise JPEG-Bilder zu PNG, PNG zu JPEG zu konvertieren, oder GIF zu PNG. Meines Erachtens ist es besser gleich beim Hochladen darauf zu achten, welches Bildformat man verwendet. Es kann schnell zu Problemen führen, wenn die veränderten Bild-URLs nicht übernommen werden (z. B. wenn in einem Theme eine Bild-URL fest im Template geschrieben wurde). Auch ist das Konvertieren rechenintensiv und kann zu Performance-Einbußen führen und somit die Ladezeit der Seiten für Besucher verschlechtern.

WebP Einstellungen

WebP wurde als Alternative zu älteren JPEG Implementierungen aufgestellt und soll bis zu 30% kleinere Dateien bei gleicher Bildqualität erzeugen.

WebP wird allerdings noch nicht durchgängig unterstützt weshalb ich davon abraten würde, den Fokus darauf zu setzen.

WordPress: Artikel oder Seiten mit Facebook oder Twitter teilen – Datenschutz konform

Früher fand man die Share Buttons ausschließlich in Blogs, unterhalb der einzelnen Beiträgen; inzwischen sind sie auch auf vielen Unternehmensseiten zu sehen. Mit den Share Buttons möchte man die Besucher der Homepage animieren ihren Netzwerken mitzuteilen dass sie einen Beitrag interessant finden (Like) oder diesen sogar empfehlen - dabei wird der Artikel (Titel, Einleitung und Bild) in den eigenen Feed gepostet, sodass alle "Freunde" oder "Follower" darüber informiert werden.

Wie funktioniert das, bzw. was muss man als Website Betreiber machen um diese Funktionalität bereitzustellen?

So funktioniert das Teilen (in den meisten Fällen)

Die meisten Share Buttons, die eingesetzt werden, werden schon aktiv, wenn ein Besucher die Seite aufruft auf der sie platziert wurden - dabei verraten sie, dass die Seite von einer IP geladen wurde inkl. Uhrzeit und aber auch Daten wie Browser, Gerät und Auflösung. Ist man zufällig parallel in dem Netzwerk eingeloggt, kann der Social Network Betreiber schon zu diesem Zeitpunk den Besucher identifizieren und die gesammelten Daten (für Werbezwecke) nutzen.

Besucher werden ohne ihr Wissen verfolgt

Nach deutschem Datenschutz ist es nicht erlaubt, die Daten eines Benutzer an Dritte weiterzugeben, ohne diesen darüber zu informieren. Das ist jedoch was sooft geschieht. Die Informationen über die Integration von sozialen Netzwerken wie Facebook oder Twitter werden meist auf der Impressum-Seite hinterlegt - diese Seite ist allerdings selten die Einstiegsseite. Außerdem muss man auch informiert werden BEVOR die Daten an Dritte weitergegeben werden...

Unabhängig von Datenschutzverordnungen oder -gesetzen: es ist eigentlich selbstverständlich die Daten seiner Gäste nicht heimlich an Dritte weiterzugeben, man sollte grundsätzlich dafür sorgen, dass die Daten privat bleiben.

Kleine Geschichte am Rande: vor einigen Jahren (2011) geriet Google mit einem Hamburger Datenschutzbeauftragten in Streit bzgl. der Integration von Google Analytics in Websites. Viele Websites nutzen diesen "kostenlosen" Dienst von Google, um die Besucheraktivitäten zu analysieren. Dabei werden bei jedem Seitenaufruf  Daten zum Besucher an Google geschickt (IP Adresse, Gerät, Browser, aufgerufene Seite, etc.). Der Datenschutzbeauftragte drohte damit alle Website-Betreiber abzumahnen, die Google Analytics auf ihrer Homepage integrieren. Es kam nicht dazu, Google machte einige Änderungen an seiner Integration, so dass die übermittelten Daten anonymisiert werden. Mein Kommentar hierzu: nutzt doch einfach Piwik.

Mit Shariff Datenschutz konform teilen

Für WordPress Websites gibt es eine kostenlose Erweiterung namens Shariff Wrapper um verschiedene "Teilen mit" Buttons zu integrieren. Shariff unterstützt u. a. folgende Netzwerke: Facebook, Twitter, Google+, Pinterest, Linkedin, Xing - insgesamt sind es 22.

Besonders interessant ist das Plugin, weil es nicht nur durch direkte Einstellungen, die Buttons und die Platzierung regelt, sondern auch mit Shortcodes individuell positioniert werden können. Und auch für Theme-Entwickler ist was dabei: die Funktion do_shortcode() gibt die Möglichkeit noch individuellere Integrationen zu machen.

Warum ist Shariff Datenschutz konform

Anders als bei den meisten "Teilen"-Integrationen, werden beim Seitenaufruf zunächst keine Daten an Dritte weitergegeben. Erst beim Klick auf das entsprechende Bildchen wird die Funktionalität (per Javascript) aktiviert. So einfach ist das!

Installation und Einrichtung von Shariff

Schritt 1

Einfacher geht es fast nicht:

  • Installieren von Shariff Wrapper und
  • das Plugin dann aktivieren.

Um die Konfiguration vorzunehmen, in die linke Sidebar auf Einstellungen > Shariff klicken.

Schritt 2: Basiseinstellungen

Hier geben wir an, welche Dienste und in welcher Reihenfolge sie angezeigt werden sollen. Die einzelnen Netzwerke werden mit Pipe (|) getrennt. Die anderen Optionen auf dieser Seite behandeln die Seiten/Element und die Position der Anzeige. Gelistet werden alle Standard und Custom Post Types.

Als Beispiel nach allen Beiträgen: das bewirkt, dass auf der Beitrags-Einzelseite, unterhalb des Textes, die Leiste mit den Share-Buttons angezeigt wird.

Wir haken also alle für uns in Frage kommende Elemente. In dem Screenshot sind Post Types gelistet, die sonst keiner so hat, daher sollten Sie nicht versuchen 1:1 die Ansicht zu haben wie in der Abbildung.

Bezüglich der Verbergung der Buttons in passwortgeschützten Beiträgen oder außerhalb der Hauptschleife, müssen Sie selbst entscheiden. Zur Info: das Teilen einer passwortgeschützten Seite wird sowieso nicht funktionieren bzw. nichts bringen, außer die Besucher haben das Passwort.

Schritt 3: Design der Buttons

Hier gehen wir nicht alle Optionen im Detail durch, lediglich die (wahrscheinlich) wichtigsten:

  • Design der Shariff-Buttons: zur Auswahl stehen 5 Button-Typen, mit oder ohne Zähler, eckig oder rund, farbig, weiß oder in grautönen
  • Button-Größe: klein, mittel oder groß
  • Strecke die Buttons horizontal auf volle Breite: ja/nein Auswahl - geschmackssache
  • Ordne die Shariff-Buttons vertikal an: standardmäßig sind die Buttons nebeneinander gereiht, sie können auch übereinander gestapelt werden. Achtung, wenn die Option "strecken" genutzt wird, sieht es ggf. nicht mehr so schön aus...
  • Ausrichtung der Shariff-Buttons (im Widget): links, rechts oder zentriert. Shariff unterscheidet ob die Buttons in einer Seite/Beitrag angezeigt werden oder innerhalb eines Widgets, daher beide Optionen.

Ganz nett sind auch diese Optionen:

  • Überschrift über allen Shariff-Buttons: kurze Einleitung, um die Buttons zu erklären bzw. visuell zu stärken
  • Buttons verstecken, bis die Seite vollständig geladen wurde: das ist ganz sinnvoll, um zu verhindern, dass beim Seitenaufbau Elemente hin und her springen
  • Öffne Links in einem Popup (erfordert JavaScript): würde ich persönlich nicht nutzen, aber es geht...

Hier kann auch die Sprache ausgewählt werden, obwohl es mit dem Design eigentlich nicht viel zu tun hat, vielleicht rutscht die Einstellung irgendwann in den Bereich Basiseinstellungen...

 

Schritt 4 und 5: Statistiken - Shares zählen

Schritt 4, Erweitert überspringen wir...

Der Bereich Statistik ist interessant wenn man vorhat mitzuteilen wie oft ein Beitrag oder eine Seite geteilt wurde.

  • Aktiviere die Statistik: hier muss man den Haken setzen, um den Zähler überhaupt zu aktivieren.
  • Zeige Zähler (Share Counts) auf den Buttons: wie auf dem Reiter Design zu sehen, werden die Counts auf dem Button dargestellt.
  • Verstecke Zähler (Share Counts) wenn sie null sind: ganz praktisch, um zu verbergen, dass der Beitrag niemanden dazu animiert hat, ihn zu teilen

Einstellungen zu Facebook: hier ist es etwas aufwändiger! Es muss eine Facebook App erstellt werden. Anschließend kann man die ID und den Secret von dort kopieren und hier einsetzen.

  • Facebook App ID: eine Zahlenkombination
  • Facebook App Secret: eine lange Zahlen und Buchstaben Kombination

So in etwa erstellen wir eine Facebook App

Man meldet sich hier an: https://developers.facebook.com. Natürlich muss man Facebook-Zugangsdaten haben, sonst muss man sich registrieren.

  • Eine neue App erstellen
  • Anzeigename + kontakt email -> App-ID erstellen
  • Sicherheitskontrolle (Captcha)
  • Einstellungen: Kategorie auswählen, Plattform hinzufügen -> Website -> URL eingeben (ohne Slash am Ende) (speichern)
  • App Review öffentlich machen und bestätigen
  • Codes kopieren und in Shariff einfügen

Andere Einstellungen und Informationen

Es gibt 3 weitere Reiter zu Shariff: Hilfe, Status und Ranking. Hilfe und Status sind zunächst nur interessant wenn, etwas nicht funktioniert oder Sie die Einstellung nicht genau hinbekommen wie Sie es gerne hätten. Im Bereich Ranking werden die Beiträge und Seiten gelistet nach Anzahl Shares, sofern die Statistik Option eingeschaltet wurde.

Individueller Einsatz von Shariff mit Shortcodes

Es kann sein, das man die Share-Buttons ganz woanders platzieren möchte, wie das Plugin zur Auswahl bietet. In diesem Fall, kann man die ganzen Checkboxen im Bereich Basiseinstellungen aushaken (damit die Buttons standardmäßig nirgends angezeigt werden) und mit einem Shortcode an die Stelle platzieren die man möchte. Ein Shortcode bietet die Möglichkeit das Ergebnis einer Funktion in dem Textbereich eines Beitrags oder einer Seite zu platzieren. Bei Shariff sieht es z. B. so aus:
[shariff theme="round" buttonsize="small" align="flex-end" services="facebook|twitter"]
Die genauen Attribute lassen sich von der Hilfe-Seite der Shariff Einstellungen entnehmen.

WordPress: Kontaktformulare erstellen mit optionaler Kopie für Absender

Mailto oder Kontaktformular - oft ist das die Frage

Soll ich für die Kontaktseite meiner Homepage ein schickes Kontaktformular anbieten oder doch nur eine Mailadresse, die der Besucher anklicken kann, um das lokal installierte Mailprogramm aufzurufen? Für die Beantwortung der Frage stellt man sich in die Position des Besuchers: was mag man mehr? Welche Erfahrungen hat man bisher gemacht?

Mailto - Web 1.0

Mailto steht für den Parameter des href-Attributs im Anchor-Tag <a href="mailto:mail@domain.tld">Mailadresse</a> mit dem der Browser angewiesen wird, den Standard Mailclient aufzurufen und das To: Feld mit der angegebenen Adresse vorauszufüllen. Es ist sogar möglich weitere Felder vorzudefinieren wie zum Beispiel die Betreffzeile oder sogar Text für den Inhalt der Mail.
Beispiel: <a href="mailto:mail@domain.tld?subject=Dies%20ist%20der%Betreff&body=Mailinhalt">Mailadresse mit vorausgefüllten Felder</a>. Weil in dem href-Bereich Leer- und andere Sonderzeichen nicht erlaubt sind, müssen diese mit HEX-Codes (%20) ersetzt werden.
Was man da alles machen klingt super, aber es gibt auch Kritik bzw. Probleme:

  • Wenn kein Mailprogramm auf dem Gerät installiert ist, passiert nichts (ggf. wird der Browser geöffnet, wenn man z. B. Gmail Nutzer ist). Immerhin kann man die Adresse aufschreiben und zu einem späteren Zeitpunkt eine Nachricht schicken.
  • Bösartige Crawler scannen alle Seiten von Websites nach Mailadressen und nutzen diese dann um Spam zu schicken (an die Adresse, oder als Absender). Das stimmt zwar, aber oftmals wird eh nur die info@-Mailadresse angegeben und diese Mailadresse wird so oder so von Spammern benutzt, da sie in den meisten Fällen einfach existiert.
  • Möchte man von Personen, bestimmte Informationen etwa für eine weitere Kontaktaufnahme oder sicherstellen, dass die Person Kunde ist, kommt man mit dem Mailto-Link nicht besonders weit.

Kontaktformular 1.0

Kontaktformulare gibt es nicht erst seit gestern. Die Qualität der Formulare hat sich aber im Durchschnitt deutlich verbessert, wohl deshalb, dass immer mehr Website-Betreiber ein CMS nutzen (die meisten WordPress) und dabei Erweiterungen einsetzen, die nur diese eine Funktion beherrschen, diese aber sehr gut.

Aber zurück zu den alten Formularen: oftmals waren diese nicht nur Buggy und ohne Validierung (man konnte sie ggf. sogar leer abschicken) weshalb man schon Zweifel hegte, dass die Nachrichten jemanden erreichen. Hinzu kam, dass der Absender selten eine Kopie seiner Nachricht erhalten hat, sodass ggf. wichtige Informationen für eine spätere Kommunikation einfach gefehlt haben.

Nutzerfreundliche Kontaktformulare mit Gravity Forms erstellen

Für WordPress gibt es zahlreiche Formular-Plugins, darunter auch kostenfreie wie Contact Form 7. Contact Form 7 ist sehr populär (mehrere Millionen aktive Installationen) und vertrauenswürdig.

Wir werden das Beispiel-Kontaktformular aber mit Gravity Forms erstellen, ein besonders ergonomisches Formular-Plugin, allerdings kostenpflichtig. Ich erwähne hier vielleicht mal, dass die Nutzung von Gravity Forms in den Managed WordPress Hosting Tarifen von SaaS Web kostenfrei ist.

Was können moderne Formulare...

.. oder was sollten sie können.

Zunächst für die Anwenderseite:

  • Responsive Layout, das Formular soll auf allen Endgeräten nutzbar sein
  • Klar beschriftete Felder, auch ob Pflichtfeld oder optional
  • Speicherung von bereits eingegebenen Daten bei Validierung, ggf. dynamische Validierung ohne Möglichkeit, das Formular abzuschicken bevor die benötigten Felder alle korrekt ausgefüllt wurden

Für die Barrierefreundlichkeit könnte man sich noch wünschen, dass:

  • Die einzelnen Formularfelder sollten in der richtigen Reihenfolge per Tab angesteuert werden
  • Die Felder sollten mit den wichtigen Attributen beschrieben werden, die z. B. Screenreader

Nun aus der Betreiberseite:

  • Einfache Erstellung des Formulars, z. B.
    • Felder mit vorgefertigten Funktionen zur Auswahl (Text, E-Mail, Telefon, Mehrfach-Auswahl...) und entsprechender Validierung
    • Validierung individuell anpassen, z. B. Pflichtfeld ja/nein
    • Konditionallogik: bestimmtes Feld anzeigen, wenn ein anderes ausgefüllt/angehakt wird
    • Felder per Drag & Drop zusammenstellen
  • Formulardaten an Betreiber oder weitere Personen schicken
  • Absender nach Abschicken der Daten über erfolgreichen Versand informieren, eventuell auf eine bestimmte Seite weiterleiten
  • Absender die Möglichkeit geben, eine Kopie der eingegebenen Daten zu erhalten

Für Designer und Admins ganz praktisch:

  • Formularfelder können mit selbstdefinierten CSS-Klassen erweitert werden
  • Optionale Honeypot- oder Captcha-Funktion

Formular Grundstruktur erstellen

Nach der Installation von Gravity Forms, kann man ein erstes Formular erstellen - dafür muss lediglich ein Name vergeben werden. Anschließend kann man die Felder bestimmen.

  • Schritt 1: wir erstellen eine Checkbox, die der Nutzer anhaken kann, falls er die Kopie per E-Mail bekommen möchte
  • Schritt 2: wir erstellen die Benachrichtigung inklusive der Logik, dass diese nur geschickt wird, wenn das Feld angehakt wurde

Option einbauen um als Absender Kopie der Daten zu erhalten

Schritt 1 wird einfach in der Formularerstellungsseite durchgeführt. Checkbox-Feld von rechts an die gewünschte Stelle mit der Maus schieben. Auch können wir die Checkbox als Default anhaken.

Für den zweiten Schritt muss man die Option "Einstellungen" > "Benachrichtigung" innerhalb des ausgewählten Formulars anklicken. Hier haben wir folgende Einstellungen vorgenommen:

  • Name: es ist ein Pflichtfeld, aber eigentlich unwichtig
  • Senden an festgelegt: "Wähle Feld aus" > "E-Mail" aus dem Dropdown-Feld ausgewähl; wenn Sie das E-Mail Feld anders benannt haben, tauch in der Auswahlliste natürlich ein anderer Name auf. Bitte beachten Sie, dass das E-Mail Feld auch ein Pflichtfeld ist, sonst funktioniert es natürlich nicht...
  • Von-Name: das sieht der Nutzer des Formulars als Absender der E-Mail
  • Absender E-Mail: kann geändert werden; habe ich so gelassen wie voreingestellt
  • Betreff: das ist die Betreffzeile der E-Mail
  • Nachricht: hier gibt es die Möglichkeit die ausgefüllten Felder als Funktion einzufügen. Dazu klicken Sie auf das Symbol rechts neben visuellen Editor. Sie können natürlich auch eine persönliche Begrüßung einbauen oder anderen Text hinzufügen.
  • Bedingte Logik: Häkchen um die Logik zu aktivieren. Anschließend, das Feld auswählen, welches als Kondition dienen soll und welcher Zustand erfüllt sein soll

So einfach geht's mit Gravity Forms

Prinzipiell kann man sich die Auswahlmöglichkeit für den Versand der eingegebenen Daten an den Absender auch sparen und immer eine Mail schicken.. aber gerade Personen, die in der Vergangenheit schlechte Erfahrungen gemacht haben, könnten so darauf aufmerksam gemacht werden, dass es passieren wird.

Um die ganz oben angefangene Diskussion abzuschließen: warum nicht beides anbieten? Die Mailadresse anzeigen und ein Formular anzeigen.. dann kann ein Besucher selbst entscheiden und wird das nutzen, was ihm am Besten liegt.

WordPress: individuelle Layouts mit dem SiteOrigin Page Builder

WordPress braucht Erweiterungen

Ein bisschen Background

WordPress war vor einigen Jahren noch ein einfaches Blogsystem, daher waren komplexe Layouts für Seiten und Artikel nicht wirklich von Bedeutung. WordPress ist inzwischen aber das verbreiteste System für die Erstellung von privaten und geschäftlichen Websites, sogar von Online-Shops.

WordPress bietet daher standardmäßig immer nur ein Inhaltsfeld pro Seite oder Artikel, den man mit dem visuellen Editor bearbeiten kann. Darin lassen sich bekannterweise auch Medien integrieren, beispielsweise Bilder oder Videos. Ergänzend dazu können Shortcodes verwendet werden um andere Inhalte, etwa von anderen Plugins erstellte, in den Content-Bereich zu platzieren.

SiteOrgin ist DIE Erweiterung

Kostenlos aber wertvoll

SiteOrigin ist ein Page Builder Plugin, das die Funktionalität von WordPress im Bereich der Inhaltsverwaltung (extrem) erweitert. Mit dem Page Builder lassen sich im Prinzip Theme-unabhängig, soweit das Theme den Nutzer nicht schon zwangsbeglückt, beliebige Inhalte einfügen und Inhaltsstrukturen erstellen. Wichtig zu wissen ist, dass SiteOrigin eine Struktur erstellt, die sich responsive verhält - sofern die Widgets mitspielen (die Widgets aus dem Bundle sind alle responsive).

Es gibt eine Premium Erweiterung für den SiteOrigin Page Builder, mit der zusätzliche Widgets zur bestehenden Auswahl hinzugefügt werden können. Ehrlich gesagt kommt aber ohne "Premium" aber sehr gut aus.

Individuelle Struktur erstellen

Einmal installiert und aktiviert, bietet WordPress neben dem visuellen und dem Text-Editor einen Tab, "Page Builder". Im Page Builder Modus ändert sich der Editor komplett. Es kann nicht mehr direkt Text eingegeben werden, sondern man muss zuerst die Inhaltsstruktur vorgeben: dazu erstellt man Zeilen, die in Spalten aufgeteilt werden können. Zu jedem erstellten Bereich kann man ein oder mehrere Widgets einfügen - die Widgets sind dann letztendlich die tatsächlichen Inhalte.

Interessant ist auch die Möglichkeit den Page Builder selbst zu verschachteln: der Page Builder lässt sich als Widget einfügen und darin kann man eine neue Struktur erstellen.

Inhalte werden via Widgets eingefügt

Mit dem Page Builder lassen sich beliebige Widgets einfügen also auch die, die mit WordPress bereits, oder solche die von installierten Plugins zur Verfügung gestellt werden. Besonders interessant sind die Widget-Plugins, die man sich zusätzlich installieren kann, z. B. vom SiteOrigin Widgets Bundle. Wenn man Effekte mag, gibt es auch Erweiterungen für Spezialeffekte wie z. B. mit dem Plugin SO Page Builder Animate.

Inhalte über die volle Bildschirmbreite anzeigen

In der Strukturübersicht lassen sich für jede Zeile individuelle Einstellungen setzen - praktisch ist zum Beispiel eine Row ID (CSS ID für die Zeile), wenn man sich mit CSS auskennt - und somit das Seitenlayout für sein Projekt pixelgenau definieren. Eine besondere Einstellung in der Sektion "Layout" ist die Option "Gesamte Breite". Damit lässt sich die Zeile über die gesamte Bildschirmbreite strecken. Die Inhalte bleiben jedoch mit den anderen bündig (meist ist der Inhaltsbereich ein zentrierter Bereich im Browserfenster); wird die Option "Gesamte Breite gestreckt" genommen, wird auch der Inhalt über die gesamte Bildschirmbreite gestreckt - diese Option wird meist für Slider oder Headerbilder genutzt.

Etwas Fine Tuning

Die Grundstruktur einmal angelegt, die Inhalte via Widgets eingefügt, ist eigentlich alles gut. Es gibt jedoch noch Stellschrauben mit denen sich verschiedene Parameter individuell drehen lassen. Ein wichtiger Punkt wären die Breakpoints - die Breite des Browsers in Pixel zu der, die Spalten "zusammenfließen", um beispielsweise zweispaltige Inhalte mobil einspaltig anzuzeigen.

SiteOrigin im Vergleich zu anderen Page Builder

Natürlich gibt es nicht nur den Page Builder von SiteOrigin. Hier sind weitere gelistet:

  • Divi Builder, Elegant Themes (kostenpflichtig).
  • Elementor, Elementor (Freemium)
  • Virtual Composer, WP Bakery (kostenpflichtig)

Diese Page Builder gehören mit Sicherheit zu den Verbreitetsten, es gibt aber noch andere... Jeder Page Builder hat seine eigene UI, seine eigenen Funktionen, die der eine oder andere Nutzer besonders schätzt. Meines Erachtens hat aber der Page Builder von SiteOrigin einen entscheidenden Vorteil: die Inhaltselemente, die man in die selbst geschaffenen Content-Blöcken hinzufügt sind Widgets, ganz normale Widgets. Somit ist die Flexibilität besonders groß und die Erweiterbarkeit quasi unbegrenzt.

WordPress: PDF aus Formulardaten generieren kinderleicht

Beispiel: online SEPA-Lastschriftmandat erteilen

Es gibt sicherlich viele Gründe aus einem vom Benutzer ausgefüllten Formular ein PDF Dokument zu erstellen, das dieser nach dem Absenden runterladen kann. In diesem Artikel werden wir zusammen eine Seite erstellen, zu der ein Geschäftskunde sich anmelden kann und uns das Mandat erteilen kann, künftige Beträge per Lastschrift einzuziehen.

Achtung: diese fiktive Anleitung ist nicht dazu gedacht, 1:1 abgekupfert zu werden; sie dient lediglich als Inspiration für eigene Prozesse.

Die verschiedenen Bausteine: was müssen wir machen?

Geplanter Ablauf: der Kunde besucht die vorgegebene Website, z. B. https://sepa-mandat.meine-website.tld und gibt dort ein Passwort ein, um auf die gewünschte Seite zu gelangen. Dort findet er alle notwendigen Informationen und ein Formular, um sein Mandat zu erteilen. Er soll im Anschluss die eingegebenen Daten als PDF runterladen können. Wir als Betreiber möchten informiert werden, dass der Kunde das Formular ausgefüllt hat und die Daten speichern (insbesondere Datum der Erteilung da beispielsweise für Online Banking für Lastschrift Erstellung benötigt).

Für dieses kleine Projekt werden wir Folgendes umsetzen:

  • Mini WordPress Website (1 Seite) erstellen mit Informationen zu SEPA und Formular
  • Formular mit Gravity Forms erstellen
  • Formular- und PDF-Einstellungen vornehmen

Wir nutzen Gravity Forms, weil es ein wirklich einfach zu nutzendes Plugin ist. Es ist zwar kostenpflichtig, jedoch für SaaS Web Kunden kostenfrei in den Managed WordPress Hosting Paketen nutzbar. Mit Gravity Forms lassen sich Formulare - auch komplexe - per Drag & Drop erstellen. Ich möchte nicht unerwähnt lassen, dass es auch kostenfreie Formular-Plugins gibt wie z. B. Contact Form 7.

WordPress Seite einrichten und möglich einfaches Theme nutzen

Ich gehe davon aus, dass die Einrichtung einer WordPress Website kein Problem ist - sonst können Sie auch gerne die Agentur des Vertrauens fragen 😉

Hier geht es nicht um die nahtlose Integration in eine bestehende Website bzw. Übernahme der Corporate Identity. Dafür sind weitere Schritte notwendig, jedoch abhängig von der bereits eingesetzten Technologie...

Die Startseite wird als statische Seite gesetzt (Einstellungen > Lesen > Startseite zeigt: statische Seite - Beitragsseite lassen wir leer) und bearbeitet. Den Passwortschutz setzen wir schon mal gleich: rechts im Bereich "Sichtbarkeit", den Punkt Passwortgeschützt auswählen, und ein Passwort festlegen. Gleich mal aktualisieren/veröffentlichen, dann ist diese Einstellung schon mal festgelegt.

Schneller am Ziel mit SiteOrigin Page Builder

Ich benutze gerne den (kostenlosen) Page Builder von SiteOrigin, weil er schlicht ist und dennoch sehr individuelle Layouts ermöglicht. Außerdem integriert er sich bestens in allen möglichen Themes und bestehenden WordPress Installationen. Füttern tun man ihn mit Widgets, weshalb sich auch wunderbar Plugins nutzen lassen können, die nicht zwingend für SiteOrigin entwickelt wurden.

Für unser Projekt erstelle ich 2 Zeilen, die erste um eine einfache Einleitung für den Kunden anzuzeigen, die andere mit den tatsächlichen Inhalten. Die zweite Zeile wird in 2 Spalten geteilt, die linke mit dem Formular und die rechte mit unseren Firmeninformationen.

Um das Formular in der linken Spalte anzuzeigen habe ich 2 Optionen: entweder ich nutze das Gravity Forms widget oder schreibe den Shortcode in ein Editor Widget. Ich habe mich für die zweite Option entschieden. So oder so, wir müssen nun ein Formular erstellen.

Formular mit Gravity Forms in 5 Minuten erstellen

Per Drag & Drop erstellen wir also unser Formular: Firma, Vor- und Nachname, Adresse, IBAN, SWIFT/BIC und Name des Kreditinstituts. Um eine IBAN auch semantisch zu prüfen, gibt es auch eine Extension: Gravity Forms IBAN (kostenfrei - zwar nach aktuellem Stand schon lange nicht mehr aktualisiert, aber noch einwandfrei funktionsfähig). Das Plugin erstellt ein Feld des Typs IBAN, dagegen wird die Nutzereingabe geprüft. Nachdem das Formular fertig eingerichtet ist, wird der Shortcode in das Editor Widget eingefügt:
[gravityform id=1 title=false description=false ajax=true]

PDF Download mit Gravity PDF

Neben der Felder, die in dem Bestätigungstext wieder ausgegeben werden sollen, erstellen wir einen Link, den der Nutzer anklicken kann:
<a class="pdf-download-button" href="https://sepa-mandat.meine-website.tld/?gf_pdf=1&fid={form_id}&lid={entry_id}&template=default-template.php&download=1">DOWNLOAD PDF</a>
Weshalb der Link so auszusehen hat entnimmt man aus den PDF-Einstellungen des erstellten Formulars (Formular > Einstellungen > PDF).

Viele Einstellmöglichkeiten mit Gravity Forms PDF

In diesem Beispiel sind wir den schnellen Weg gegangen: keine Sondereinstellungen, keine Komplikationen. Es gibt mit dem PDF Plugin zahlreiche Optionen, um das PDF zu formatieren und stylen etc. Dazu lesen Sie sich lieber selbst die Dokumentation durch: https://gravitypdf.com/documentation/v4/five-minute-install/.

 

Mit SaaS Web Gravity Forms kostenfrei nutzen

Wie bereits in dem Artikel erwähnt, bieten wir unseren Kunden die kostenfreie Nutzung von Gravity Forms an. Neben Gravity Forms können Sie auch andere lizenzpflichtige Plugins kostenfrei einsetzen, etwa: WPML (Plugin für Mehrsprachigkeit), SearchWP (überarbeitete Suchfunktion für WordPress) oder Newsletter Pro (u. a. WooCommerce Integration für Newsletter). Hier finden Sie unsere Managed WordPress Hosting Angebote.

WordPress: Multilinguale Websites mit WPML einfach gemacht

Nicht selten werden Websites in verschiedenen Sprachen angeboten. Das was simpel und selbstverständlich erscheint, ist tatsächlich komplizierter, vor allem, wenn man nicht die richtigen Werkzeuge nutzt.

Was gilt es denn in Bezug auf Mehrsprachigkeit zu beachten?

  • Möchte ich eine 1:1 Übersetzung haben, sprich jede einzelne Seite wird auch in einer anderen Sprache übersetzt?
  • Sollen die anderen Sprachen für äquivalente Inhalte eigene URLs haben? Sollen eventuell unterschiedliche Sprachen sogar eigene Domains nutzen?<(li>
  • Benötige ich einen Sprachumschalter? Leitet dieser auch direkt zu der entsprechenden andersprachigen Seite oder immer zur Startseite der ausgewählten Sprache? Gibt es eine automatische Sprachauswahl anhand der eingestellten Sprache im Browser des Besuchers?
  • Gibt es ein Suchfeld? Sollen nur Suchergebnisse der aktuellen Sprache ausgegeben werden?
  • Wird der Quelltext entsprechend der Sprache auch für Suchmaschinen markiert?
  • Sollen unterschiedliche Teams die verschiedenen Sprachen bearbeiten?

WordPress und Multilang

Zunächst sollte man wissen, dass WordPress nativ keine Mehrsprachigkeit beherrscht - zumindest nicht direkt.
Über den Umweg des Multisite Modes (Network), lassen sich mehr oder minder unabhängige Sub-Sites erstellen, die dazu genutzt werden können um Sprachvarianten abzubilden. Dazu aber später mehr.
WordPress wird erst durch Plugins zu einem Multilang-CMS: da gibt es um einige (bekannte) zu nennen: WPML (kostenpflichtig), Polylang (freemium) oder MultilingualPress (kostenpflichtig).

Multilang mit Hand und Fuß

Rein theoretisch ließe sich eine Multilinguale Website auch ohne Plugins realisieren - mit etwas Programmieraufwand: die Sprachvarianten werden als Hauptseiten angelegt, z. B. de und fr, darunter werden die jeweiligen Seiten der Sprachvarianten angelegt und der Content in der jeweiligen Sprache geschrieben. Damit aber bei der Auswahl /de ein deutsches Menü erscheint und bei /fr ein französisches, müssen die für die unterschiedlichen Seitenbäume andere Templates genutzt werden (bzw. eine Weiche einbauen reicht). Die unterschiedlichen Templates ermöglichen Quelltext mit HTML-Sprachindikatoren (wo man sonst mit WordPress-Mitteln nicht hinkommt)  zu versetzen bzw. sprachspezifische Menüs anzuzeigen. Um Widget-Bereiche braucht man sich nicht im Template gesondert zu kümmern, diese lassen sich im Backend z. B. mit Plugins wie z. B. Content Aware Sidebars lösen. Etwas komplizierter wird es mit dem Sprachumschalter, bzw. der logischen Konnektierung von gleichen Seiten als Sprachvarianten. Und noch komplizierter wenn man einen Shop betreiben möchte, z. B. mit WooCommerce.
Lassen wir es mal mit diesem Beispiel, es ist unschwer zu erkennen, dass es aufwändig ist und zudem einschlägige Kenntnisse in der WordPress Theme-Programmierung erforderlich sind. Es geht viel einfacher.

Multilang mit WordPress Multisite

Wie schon beschrieben, kann man auch mit nativen WordPress Bordmitteln eine mehrsprachige Website erstellen. Zunächst muss man WordPress in der Multisite Variante installieren. Das ist nicht schwierig, aber die wenigsten 1-Clic Installer dürften dies ermöglichen, also ist Handarbeit angesagt.
Einmal eingerichtet geht es schon mit den Eigenarten dieser Betriebsart los: es gibt einen Super-Admin. Der Super-Admin darf als einziger weitere Sub-Sites anlegen sowie Themes und Plugins installieren. Die "normalen Admins" sind jeweils für ihre zugewiesene Sub-Site zuständig, sie können aber nicht wie im normalen WordPress-Modus Themes oder Plugins installieren. Sie können lediglich welche aus der vom Super-Admin installierten Auswahl aktivieren oder deaktivieren. Wichtig zu wissen an dieser Stelle ist, dass nicht alle Plugins Mutlisite kompatibel sind.
Der Super-Admin erstellt z. B. 2 Sub-Sites, einmal "de", einmal "fr" und definiert 2 Teams die er den 2 Sub-Sites zuweist. Es können die gleichen User sein, die auf beiden Sub-Sites zugreifen können, oder getrennte. Genau diese mögliche Trennung ist ein Feature, das bestimmte Website-Betreiber nicht missen möchten: getrennte Teams für getrennte Sprachvarianten. Klar ist, dass ein solches Feature eher für größere Unternehmen interessant ist bzw. für solche mit streng geregelten Workflows.
Diese Trennung der Sub-Sites hat den Vorteil komplett eigene Websites erstellen zu können, aber birgt gleichzeitig die Gefahr, dass sich zwei Sub-Sites (Sprachvarianten) mit der Zeit auch optisch voneinander trennen - was wohl die wenigsten möchten.
Um gleiche Seiten der verschiedenen Sub-Sites logisch miteinander zu verbinden gibt es (mal wieder) Plugins, wie z. B. Multisite Language Switcher.

Multilang mit WPML

So, nun kommen wir zu dem eigentlichen Thema des Artikels: WPML (WPML = WordPress MultiLingual). Ich werde nicht alle Features des Plugins erklären, nur die Wesentlichen. Anders als bei dem Multisite Mode, kann man mit WPML auch im Nachhinein der Website Mehrsprachigkeit einhauchen, die Vorkehrungen müssen also nicht lange im Voraus geplant werden (strenggenommen kann man auch im Nachhinein eine normale Website in Multisite umwandeln bzw. in eine Sub-Site importieren, das ist aber recht kompliziert und fehleranfällig).
WPML besteht aus mehreren Komponenten, von denen man nicht zwingend alle benötigt. Die zentrale Einheit ist das WPML Multilingual CMS, in den meisten Fällen werden die Komponenten "WPML String Translation", "WPML Translation Management", "WPML Sticky Links" und "WPML CMS Nav" mit installiert.

WPML Grundeinstellungen

Einmal installiert definiert man die zusätzlichen Sprachen die angelegt werden sollen und kann verschiedene Punkte einstellen wie:

  • Festlegung der Standardsprache
  • Sollen Sprachvarianten als Unterverzeichnissse angezeigt werden ("/de", "/fr") oder als URL-GET-Parameter ("?lang=de", "?lang=fr")
    Sprachumschalter Optionen, z. B. Umgang mit Inhalten, die es nur in einer Sprache gibt, Umschalter als Dropdown-Feld bzw. mit Flaggen oder ausgeschriebene Sprache, ...
  • Einrichtung eienr automatischen Sprachweiterleitung anhand der eingestellten Browsersprache der Besucher

Seiten mit WPML für Übersetzung duplizieren

Ist man mit den Grundeinstellungen fertig, kann es mit dem Übersetzen losgehen: die einzelnen Seiten und Blogartikel lassen sich in der Übersichtsliste jeweils per Mausklick in die gewünschte Sprache duplizieren (mit oder ohne den Inhalt zu kopieren). Ein interessantes Feature dabei ist die Übersetzung alleine zu bearbeiten oder am Original zu binden. Im letzteren Fall wird man bei Ansicht der Übersetzung auf Änderungen im Original aufmerksam gemacht.

Sprachabhängige Menüs

Nicht nur die Seiten müssen übersetzt werden. Die Menüs sollen auch automatisch der ausgewählten Sprache zugeordnet werden. Das geht mit WPML ganz einfach. Entweder man nutzt die Synchronisationsfunktion (Menüpunkt "Menüs synchronisieren") oder man erstellt eine neue Navigation, selektiert die Sprache und definiert wessen Sprachalternative es ist.

Viele weitere Features

Ich gehe dabei nicht in die Tiefe, aber WPML hat Module für eine optimierte Lokalisierung von:

  • Gravity Forms (ein kostenpflichtiges Plugin zum Erstellen von Formularen)
  • Verschiedene Page Builder: Page Builder sind Plugins, die den visuellen Editor von WordPress ersetzen; sie ermöglichen die einfache Einrichtung von komplexen Layouts im Content Bereich. Zu den bekannten Page Buildern gehören u. a. das kostenlose SiteOrigin Page Builder oder das kostenpflichtige Visual Composer.
  • WooCommerce - die eShop Erweiterung für WordPress

Mit SaaS Web Managed WordPress WPML kostenfrei nutzen

Schon lange bieten wir kostenfrei die Nutzung von verschiedenen lizenzpflichtigen Plugins mit den WordPress Hosting Tarifen an. Neben WPML sind es auch Gravity Forms, SearchWP - eine verbesserte Suchfunktion - und die Pro Version des Newsletter Plugins.

Hier finden Sie die Managed WordPress Hosting Angebote.

WordPress: Wechsel von HTTP zu HTTPS ganz einfach

Seit geraumer Zeit ist es quasi ein Standard, seine Website mit einem SSL-Zertifikat zu versehen und die Verbindungen zum Webserver entsprechend zu verschlüsseln. Damit sind nicht nur Online-Shops gemeint, sondern alle Websites und damit auch WordPress Websites.

Warum überhaupt https?

Es gibt mehrere Gründe dafür:

  • Google hat angekündigt Websites mit SSL in den Ergebnissen zu bevorzugen
  • Die meisten Browser kennzeichnen Websites ohne SSL als unsicher – ein Besucher kann dadurch verunsichert werden

Wenn man schon eine WordPress Website ohne https hat, sollte man überlegen, ein Upgrade durchzuführen – schließlich ist ein SSL-Zertifikat heute meist kostenlos (z. B. Let’s Encrypt). Es liegt allerdings am Provider, die Einrichtung eines Zertifikats zu ermöglichen.

Bei WordPress ist die Umstellung nicht schwierig, aber dennoch nicht gerade intuitiv. Im Bereich „Einstellungen“ > „Allgemein“ gibt es die Möglichkeit die WordPress URL (WordPress Installations-URL) und die Website-Adresse (Adresse wie sie im Browser aufgerufen wird) zu definieren. Ich gehe nicht näher darauf ein, warum es zwei URLs gibt, ich gehe davon aus, dass die Einstellung einfach stimmt und in beiden Zeilen das selbe steht, z. B. http://wwww.meine-website.tld.

Einfach https anstatt http in den WordPress-Einstellungen reicht nicht

Wer an der Stelle von http://wwww.meine-website.tld einfach https://wwww.meine-website.tld schreibt, wird nicht glücklich. Denn diese Änderung ersetzt tatsächlich nur die beiden Einträge in der Datenbank. Alle anderen Links, wie z. B. Links zu Medien werden nicht geändert. Also nicht machen!

Vielleicht hilft da ein Plugin?

Tatsächlich gibt es Plugins, die einem helfen, wie z. B. das kostenlose Plugin „Really Simple SSL„. Das Schöne an diesem Plugin (wie der Name es andeutet) ist die Einfachheit. Installiert und aktiviert prüft es ob das SSL-Zertifikat auch eingerichtet und, bietet an mit einem Klick, die Website auf HTTPS zu ändern. Ggf. in den Einstellungen des Plugins noch die Funktion einrichten, HTTP automatisch zu HTTPS weiterzuleiten und so hat man im Prinzip das Problem schon gelöst.

Vor- und Nachteil der Lösung mit dem Plugin

  • Vorteil: Really Simple SSL ist einfach und schnell eingerichtet (und kostet nichts). Als Nutzer braucht man eigentlich keine besonderen Kenntnisse.
  • Nachteil: es wird ein Plugin genutzt wo eigentlich keins benötigt wird.

HTTP zu HTTPS mit WP CLI

Die richtigere Methode eine WordPress Website auf HTTPS umzustellen besteht darin, alle Links in der Datenbank umzuschreiben. Damit serialisierte Datenbank-Inhalte nicht kaputt gehen, sollte man die Umschreibung nicht einfach auf einen SQL-Dump mit Suchen & Ersetzen durchführen. Dazu gibt es WP CLI: mit WP CLI lässt sich eni Suchen & Ersetzen direkt auf der Live-Datenbank ausführen.

Um WP CLI nutzen zu können, muss der Provider einen SSH Zugang zu der WordPress-Instanz anbieten. Einmal über SSH angemeldet und im Wurzelvereichnis, können Sie diesen Befehl ausführen:
wp search-replace --all-tables-with-prefix "http://www.meine-website.tld" "https://www.meine-website.tld"

Sollten Sie „root“ sein, dann muss der Aufruf mit „sudo -u <user>“ (user ist entweder www-data oder der Inhaber der Dateien in dem Vereichnis) ergänzt werden, das ergibt also:
sudo -u <user> wp search-replace --all-tables-with-prefix "http://www.meine-website.tld" "https://www.meine-website.tld"

In manchen Fällen muss zusätzlich diese Variante ausgeführt werden:
wp search-replace --all-tables "http://www.meine-website.tld" "https://www.meine-website.tld"
Diese Option ist für den Fall, dass Links in allen Tabellen zu ersetzen sind, auch solche, die eventuell nicht zu der Installation gehören.

Hier gibt es mehr Informationen zu den Optionen für den wp search-replace Aufruf:
https://developer.wordpress.org/cli/commands/search-replace/

Achtung: bevor Sie irgendwelche Links ersetzen, sollten Sie ein Backup Ihrer WordPress Website erstellen.

 

[Update]Steve: jetzt mit Bildvergleich – WordPress Management für Profis

Die Aufgabe: WordPress Updates

WordPress Core Updates verlaufen in aller Regel ohne Probleme. Bei Plugin- oder Theme-Updates sieht die Sache schon ganz anders aus. Die Ursachen können sehr unterschiedlich sein: Bugs in dem Plugin selbst, Kompatibilität zu anderen Plugins... Die möglichen Auswirkungen der Fehler sind auch höchst unterschiedlich, in manchen Fällen ist es die komplette Homepage, die nicht mehr angezeigt wird oder PHP-Fehlermeldungen, die mitten auf der Seite zu sehen sind. Oftmals sind es eher kleine Veränderungen, dennoch unerwünschte.

 

Screenshots nach einem Update vergleichen

Mit dem Vergleich "davor und danach" von automatischen Bildschirmfotos der Website, können auch kleine Fehler entdeckt werden. Das System sucht nämlich automatisiert nach Veränderungen und gibt die Anzahl gefundener Unterschiede (in %) an.

So lassen sich Fehler auch viel später erkennen (Steve behält die Historie der Updates und die entsprechenden Screenshots) und ermöglicht, wenn notwendig, das Einspielen des richtigen Backups - standardmäßig wird bei jedem Update-Vorgang, das kann ein einzelnes oder mehrere Updates direkt hintereinanderer, ein Backup erstellt.

Die Zukunft: Auto Backup Restore, Auto Plugin Tagging uvm

Als nächstes ist geplant, die SLA-Funktionalität für unsere WordPress-Kunden auszubauen:

  • Kunden können nach Updates eine Mail mit einem Link zu dem Screenshot-Vergleich erhalten, um selbst zu prüfen, dass alles in Ordnung ist
  • Kunden können angeben, dass die Prüfung in Ordnung war, oder Fehler beinhaltet; daraufhin werden Meldungen an Steve übergeben, um die Updates ggf. rückgängig zu machen und ggf. die Plugins (in der vorhandenen Version) als "broken" zu taggen.
  • Wenn das automatisierte Staging integriert sein wird, kann dieser Prozess auch darauf abgebildet werden: erst nach Freigabe vom Kunden wird das Update auf die Live-Instanz durchgeführt

Position in Google Ergebnisliste zu Managed WordPress Hosting – Große Unterschiede ob FR oder DE

Managed WordPress Hosting seit 6 Jahren

Als SaaS Web waren wir unter den ersten Anbieter von Managed WordPress Hosting in Deutschland: schon 2011 haben wir erkannt, dass WordPress ein großartiges CMS für Unternehmenswebsites ist und vor allem, dass Unternehmen sich nicht selbst um die Wartung der Software kümmern möchten (oder nicht können). So haben wir bereits damals für Kunden WordPress installiert (keine APS Pakete) und im Betrieb Core, Theme und Plugins aktualisiert. Dabei haben wir uns auch zu WordPress Spezialisten entwickelt und programmieren individuelle Websites (bunte Mischung aus Themes, Plugins und Widgets) am laufenden Band.

Google Search: in Frankreich auf Seite 2

Wir haben erst 2017 (Ende Februar) die französische Version der SaaS Web Homepage live gestellt und dabei den Großteil der angebotenen Produkte ins französischsprachige Portfolio übernommen, darunter natürlich WordPress.

Interessant ist, dass SaaS Web mit dem Suchbegriff "Hébergement WordPress managé", auf denglisch übersetzt "Managed WordPress Hosting" bereits auf Seite 2 (Platz 1) gefunden werden kann.

Google Search: in Deutschland auf Seite 10

Wie bereits erklärt, ist das Managed WordPress Hosting Angebot schon gut 6 Jahre im Web zu finden - in seiner aktuellen Form etwa seit 2,5 Jahren. Erstaunlich ist allerdings, dass unser WordPress Angebot bei Google erst auf Seite 8 Platz 10 erscheint, manchmal auch Seite 9 sogar Seite 10.

Das lässt sich bestimmt erklären: wahrscheinlich gibt es mehr Anbieter in Deutschland. Aber auch die Tatsache, dass in Deutschland die englischen Begriffe genutzt werden erklärt so manch andere Ergebnisse. Tatsächlich finden sich in den Google-Ergebnissen, obwohl die Abfrage auf google.de eingegeben wurde, zahlreiche englischsprachige Anbieter und Websites zum Thema WordPress, auch solche, die sicher nicht auf deutsche Kunden abzielen.

Suchmaschinenoptimierung ist das Zauberwort

Eigentlich sollte es Google-Optimierung heißen, schließlich gibt es faktisch keine anderen (relevanten) Suchmaschinen. Jedenfalls sind auch wir darauf angewiesen im Web gefunden zu werden, auch wenn unsere treue Kundschaft uns immer mehr Hosting-Projekte beschert und wir durch Empfehlungen neue Kunden gewinnen.

 

Textilbox: Nähprojekte für Anfänger – Einzeln oder als Abo

Es gibt sie in vielen Variationen: Rasierer in der Box, Weine in der Box… es gibt auch Textilbox! Nähen ist seit einiger Zeit wieder richtig IN und Textilbox trägt seinen Teil dazu bei. Interessierte können entweder eine einzelne Box (= ein Nähprojekt) kaufen oder ein Abo über 6 oder 12 Monate abschließen und erhalten dafür 2 oder 4 Boxen.

Textilbox

Textilbox ist schon seit gut zwei Jahren auf dem Markt und bedient die Märkte Frankreich, Spanien und Deutschland. Das e-Unternehmen fußt auf WordPress, genauer gesagt WooCommerce. Mit den steigenden Umsätzen und der wachsenden Bekanntheit wird der Bedarf an professioneller Unterstützung immer größer. So kommt es, dass Textilbox sich – nach dem sorgenfreien Start – zu SaaS Web wendet.

Violeta - Gründerin Textilbox„Das Erstellen neuer Boxen und die Bedienung meiner Kunden steht für mich im Vordergrund. Natürlich muss die Plattform sicher und immer erreichbar sein – ich bin froh einen Partner gefunden zu haben, der mir die Freiheit gibt, mich auf meine Tätigkeit zu konzentrieren.“ Violeta.

Hier geht es zu Textilbox: https://textilbox.de.

WordCamp EU 2017

ABOUT WORDCAMP EUROPE

WordCamp Europe 2017, the fifth of its name, will be held in Paris, France from June 15th to 17th, 2017. WordCamp Europe is the place where, each year, the European WordPress community hosts our friends from all other the World, for three days of talks, networking, business, parties and above all, friendship. In previous years, WordCamp Europe traveled from Leiden to Sofia, then Sevilla, and finally Vienna, where the 2016 edition just ended, with attendees from 68 countries around the World.

On this page, you will find all relevant information for traveling to Paris, how to reach us, where to stay and we’ll try to answer any question you might have. In the meantime, make sure to follow us on social networks Twitter (@wceurope) and Facebook, and ask us anything that crossed your mind.

A day of REST 2017

A Day of REST is a one-day conference all about the WordPress REST API. Speakers include members of the team building the REST API, and those using it in production websites. Attendees will have a chance to learn how to use the REST API in their own projects, with insights into best practices, tools, coding, and how other people are using it. A Day of REST Boston will be accompanied by two days of workshops that will teach frontend technologies to WordPress developers.

A Day of REST is committed to creating a welcoming and inclusive event for everyone. We expect all of our staff, volunteers, attendees, sponsors, and speakers to adhere to our code of conduct.

WORKSHOPS

A Day of REST will be accompanied by two days of frontend workshops, hosted by our friends at Bocoup. These workshops will be tailored to WordPress developers who want to hone their front-end skills in preparation for building REST API-powered applications. Details of the workshops, along with tickets, will be available when ticket sales open.