DSGVO kompatibles Kontaktformular mit Gravity Forms

Veröffentlicht am 11. Mai 2018 von Matthias Wulkow

WordPress und WooCommerce – das perfekte Duo

Veröffentlicht am 4. April 2018 von Matthias Wulkow

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).

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);

}

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);

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/

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.

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...

Helferlein für WordPress Websites mit vielen Seiten

Veröffentlicht am 17. Januar 2018 von Matthias Wulkow

WordPress: Newsletter verschicken

Veröffentlicht am 22. Dezember 2017 von Matthias Wulkow

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:

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
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.

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:

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ß.
Versand über Mail-Dienstleister und Plugin-Integration: anstatt direkt SMTP Zugangsdaten einzutragen wird die Mail Gateway Integration über ein eigenes Plugin erstellt.
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).

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.

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.

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

Ladegeschwindigkeit der Website mit webpagetest.org testen

Veröffentlicht am 4. Dezember 2017 von Matthias Wulkow

Das Thema Ladegeschwindigkeit ist kein Neues: schon zu Beginn des Webs war die Ladezeit ein wichtiger Faktor für den Erfolg einer Website - die Bandbreite der Internetanschlüsse war so gering - erinnern wir uns: 57k Modems waren vor 20 Jahren oftmals das Höchste der Gefühle; heute sind 50 MBit Anschlüsse keine Seltenheit mehr -, dass bereits ein paar hundert Kilobyte die Obergrenze für eine Seite war, bei der eine anständige Ladezeit möglich war.

Mit steigender Bandbreite hat sich die Lage im Bereich Desktop Computer zumindest theoretisch einigermaßen entspannt. Die immer größere Nutzung von mobilen Endgeräten und immer größerer Bildschirme mit hoher Auflösung (damals, vor 20 Jahren, z. B. 19" mit 1.200 x 800 Pixel, heute, z. B. 27" mit 2.560 x 1.440 Pixel) versetzt die Website Betreiber in eine ähnliche Lage wie vor zwanzig Jahren - es ist ein bisschen dasselbe Problem wie das Smartphone-Akku Problem: Akkus werden immer leistungsfähiger, aber die Geräte verbrauchen immer mehr Strom.

Es gibt mehrere Ebenen auf denen sich Optimierungen bemerkbar machen können. Einerseits die mit der Verbindung an sich zu tun haben, bzw. mit der "Power" - im Autovergleich: die Anzahl PS, ob das Auto aerodynamisch ist, wie viel es wiegt... Andererseits ob eine Website gut gebaut ist, unnötige Ladevorgänge von Elementen verhindert - im Autovergleich: der Fahrer; fährt er denn optimal, kennt er die Strecke oder muss er an allen Ampeln stehen bleiben? Es gibt sicher bessere Vergleiche als die mit dem Auto 😉 Jedenfalls werden die 2 Ebenen in den folgenden Absätzen genauer erklärt.

Infrastruktur: generell spielt es eine Rolle ob die Website auf einem Shared Hosting Server oder einem dedicated Server betrieben wird. Die Geschwindigkeit beginnt bereits bei der Internet-Anbindung des Rechenzentrums und wie die Router des Anbieters die verschiedenen Server verbindet. Daraus resultiert nicht nur die Geschwindigkeit sondern auch der sogenannte Time to first Byte, eine Messgröße für die Zeit, die benötigt wird bis der erste Byte vom Server beim Client ankommt.
Web Server: der Webserver spielt ebenfalls eine Rolle in der Optimierung. Ganz allgemein sind Webserver mit Nginx schneller als Apache - das muss nicht unbedingt so sein, mit etwas Konfigurationsarbeit kann auch Apache fliegen. Aber nicht nur der Wechsel der Software bringt Geschwindigkeit. Auch Einstellungen wie Keep-Alive führen dazu, dass die Verbindung zum Webserver nicht nach jedem Request neu verhandelt werden muss.
Caching ist ein komplexes Thema, da es auf vielen Ebenen Caching gibt (CDN, HTTP Reverse Proxy wie Varnish Cache, local Cache, Datenbank Cache wie memcached oder Redis, ...). Caching gehört zu den effektivsten Optionen, um die Ladezeit zu verkürzen, je nach dem wie es eingesetzt wird. Es sei angemerkt, dass nicht immer alles gecacht werden kann - Seiten mit hoher Änderungsfrequenz wie z. B. Nachrichtenportale möchten, dass Besucher immer die neuesten Artikel zu sehen bekommen.

Eine korrekte Seitenstruktur spielt eine große Rolle - wir reden gar nicht von kaputtem HTML. Die HTML-Struktur eines Dokuments sollte immer nur so schlank sein wie nötig und bizarre Verschachtelungen sollten möglichst vermieden werden. Entsprechend, wenn nicht zwingend notwendig, sollten Elemente nicht erst per Javascript eingefügt werden.
Media-Elemente, sprich Bilder sollten stets für das Endgerät optimiert sein - ein großes Bild für Desktop sollte in einer entsprechend kleineren Version auf einem Smartphone geladen werden.

Um eine Analyse der Website zu starten braucht man nur:

URL: Die Website URL eingeben, am Besten inklusive https und www, sonst wird die ggf. vorhandene Umleitung mit in die Ladezeit aufgenommen
Location: von wo soll denn gemessen werden? Tatsächlich spielt die geografische Lage auch eine Rolle - wobei webpagetest.org auch diesen Faktor in den Ergebnissen berücksichtigt und einen Korrekturfaktor implementiert.
Browser: es kann durchaus eine Rolle spielen welcher Browser getestet wird. Es lassen sich übrigens je nach Anbieter und Location auch mobile Browser auswählen
Anzahl Tests: es wird empfohlen mehrere Tests auszuführen um einen aussagekräftigeren Mittelwert zu erhalten
Repeat View: hier handelt es sich um die Ladezeit, wenn ein Client (Browser) wiederholt eine Seite lädt und ggf. Caching Effekte besser bemerkbar sein sollten - es wird empfohlen first view and repeat view auszuwählen

Hier in kürze die Bedeutung der 6 Punkte:

First Byte Time: Dauer für den Empfang des ersten Bytes des Webservers. Dieser Wert lässt sich nicht wirklich verändern. Der Wert ist abhängig von der physikalischen Hosting-Umgebung (Rechenzentrum, Server) und der momentanen Auslastung der Systeme.
Keep-alive enabled: Option des Webservers, die bewirkt, dass die Verbindung zwischen Server und Browser offen bleibt und somit vermieden wird, dass jedes Mal der TCP-Handshake neu ausgehandelt werden soll. Eine Webseite hat oftmals 100 oder mehr Elemente, die geladen werden sollen - da kann eine vermeintlich kleine Optimierung schon mal was bewirken.
Compress transfer: ebenfalls eine Webserver-Einstellung. Der Webserver kann die Daten komprimiert übertragen, sodass weniger Daten übertragen werden brauchen. Moderne Browser können inzwischen alle mit komprimierten Datenübertragung umgehen.
Compress images: hier sind die Website-Betreiber gefragt. Der Indikator zeigt wie gut die Bilder, die geladen werden, komprimiert sind. Lässt sich die Größe (ohne Qualitätsverlust) verringern?
Cache static content: kommen die angezeigten Elemente vom Cache oder wurden diese frisch vom Webserver ausgegeben?
Effective use of CDN: werden die Inhalte von einem CDN (Content Delivery Network) ausgegeben?

Load Time: die Zeit entspricht der Ladezeit der Website. Die Fully Loaded Zeit hingegen misst noch alle Aktivitäten bis zu 2 Sekunden nach der Load Time, also Elemente, die beispielsweise per Javascript nachgeladen werden.
First Byte (TTFB): die Zeit, die für den ersten Byte vom Server zum Browser benötigt, wenn die Website erstmals aufgerufen wird.
Start Render: Zeit, die der Browser benötigt, um mit der Anzeige der Website zu beginnen.
Speed Index: der Speed-Index ist ein Wert, um die gemessene Geschwindigkeit zu bewerten. Je kleiner dieser Wert ist, umso besser. Hier gibt es ausführliche Informationen wie dieser Index errechnet wird: https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

Der relativ neue Punkt "Image Analysis" bietet die Analyse der Bilddateien. Der Dienst prüft jedes einzelne Bild, bewertet die Kompression und benotet diese auch (A-F). Es ist dort auch möglich, den Cloud-Dienst kostenpflichtig in Anspruch zu nehmen, jedoch keine Pflicht. Die Optimierungen, falls welche sinnvoll möglich sind, können Sie selbst durchführen - es gibt dafür zahlreiche Bildbearbeitungsprogramme, die dafür genutzt werden können. Es gibt auch ein Artikel in diesem Blog zum Thema Bildoptimierung.

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

Veröffentlicht am 18. August 2017 von Matthias Wulkow

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...

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.

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:

Headerbild in voller Breite
Fullscreen Coverbild
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.

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.

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...

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).

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.

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

Veröffentlicht am 8. August 2017 von Matthias Wulkow

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?

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.

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.

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.

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, 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

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: so erstelle ich eine private Homepage für die Familie und den Freundeskreis

Veröffentlicht am 21. Juli 2017 von Matthias Wulkow

Im privaten Umfeld ist es nicht selten, dass man Fotos, Videos und Texte nicht mit jedem teilen möchte.

Aber mit Freunden und Familie möchte man schon Inhalte teilen können, und einfach soll es auch sein (außerdem sollen sie auch keine Berechtigungen bekommen, die Homepage zu verändern)... Viele greifen daher bevorzugt auf Facebook, weil Sie meinen, die Inhalte seien dort privat - nun ja, lassen wir Kommentare hierzu beiseite...

Widmen wir uns einer anderen Option: wir erstellen eine WordPress Homepage, zu der nur registrierte User Zugriff haben. Damit aber nicht jeder Login und Passwort sich merken muss, bieten wir zusätzlich zur Standard-Anmeldung, die Möglichkeit, sich via Facebook Login anzumelden.

Wie erreichen wir unser Ziel?

Zugriff einschränken
- Members Plugin einrichten, um die Rollendefinition von WordPress anzupassen und den Zugang zur Homepage über die Anmeldeseite umzuleiten
- User Role Editor Plugin installieren, um eine individuelle Capability (Berechtigung) zu erstellen
- functions.php Datei des Themes anpassen, um die Inhalte der Homepage für Abonnenten zu verbergen
- Erstellen einer Seite mit Informationen für angemeldete Nutzer, die aber nicht die geeigneten Berechtigungen besitzen
Facebook Plugin installieren/konfigurieren, um Facebook-Usern die Möglichkeit zu geben, sich ohne Login/Passwort anzumelden
- Facebook-App erstellen
- WordPress Social Plugin einrichten

Das Members Plugin hat für unseren Use-Case 2 Funktionen:

Allgemeinen Zugriff auf die Inhalte unterbinden: Besucher muss angemeldet sein
Neue Rolle "Family & Friends" erstellen: als Admin können wir manuell Abonnenten (die keine Berechtigungen haben) in die neue Rolle umziehen

Wir installieren das Plugin Members und kümmern uns um die Einstellungen davon:

Enable Private Site: anhaken - wir möchten, dass nur angemeldete Nutzer die Inhalte sehen können, daher sollen unangemeldete Nutzer auf die Anmelde-Seite umgeleitet werden, egal welche Seite sie ansteuern
Disable Feed: anhaken - andere Personen oder Dienste sollen keine Informationen über die Inhalte erhalten

Die anderen voreingestellten Parameter können so bleiben.

Das Plugin User Role Editor ist ein populäres und kostenfreies Plugin zum Bearbeiten der Nutzer und der Nutzerrollen von WordPress. Für unser Vorhaben erstellen wir eine neue Capability und werden anhand dieser prüfen, ob der Besucher diese Berechtigung hat oder nicht. Die Abfrage ob er berechtigt ist oder nicht folgt im nächsten Absatz zu der functions.php.

Wir erstellen also eine Capability namens oooooxooooo und weisen sie der Rolle "Family & Friends" zu, bzw. auch der Admin-Rolle. Sollten auf der WordPress-Installation auch andere Rollen besetzt sein (Redakteur, ..), dann können Sie die Capability auch diesen Rollen zuweisen. Jedenfalls NICHT der Rolle "Subscriber" (Abonnent) vergeben!

Das Members-Plugin ist leider nicht ausreichend für unser Vorhaben bzw. etwas umständlich. Mit dem Members-Plugin wird nämlich nur erzwungen, dass Besucher sich anmelden müssen. Standardmäßig hat aber ein eingeloggter User Zugriff auf alle Inhalte (Seiten / Artikel). Aber selbst wenn man bei allen Seiten und Artikeln, die User-Berechtigungen setzt, bekommt der nicht-autorisierte Besucher z. B. die Artikel-Titel angezeigt, lediglich der Inhalt wird gesperrt.

Das ist nicht was wir haben möchten; wir möchten den Zugriff komplett unterbinden.

Damit nicht-berechtigte Besucher auf eine Seite weitergeleitet werden, auf der z. B. Infos stehen, weshalb der Zugriff verboten ist, fügen wir der functions.php des Themes zusätzlichen Code. Kurze Erklärungen:

Jedes Theme hat eine functions.php. Diese zentrale Datei steuert das Verhalten eines Themes und verbindet verschiedene Dateien zusammen
Der zusätzliche Code prüft 3 Dinge:
- ob der Besucher angemeldet ist,
- ob der Besucher die Capability "oooooxooooo" hat
- und ob der User bereits auf der Seite "Stop" ist
Wenn alle drei Bedingungen zutreffen, wird der Besucher auf die Seite "Stop" weitergeleitet, ansonsten kann der Besucher sich die Seiten/Artikel anschauen. Die dritte Bedingung ist deshalb wichtig: wenn man die Seite "Stop" aufruft, darf keine weitere Weiterleitung stattfinden, sonst wandelt sich die Anfrage in eine unendliche Loop.

Damit man als Homepage-Betreiber nicht all seine Bekannte erstmal anlegen muss - diese würden sich mit Sicherheit schwer tun, die Anmeldedaten zu behalten - installieren wir eine Facebook-Login Funktion. Wie Sie es wahrscheinlich schon mal gesehen haben, gibt es auf der Anmelde-Seite der Homepage neben der Eingabefelder für Benutzername und Passwort, ein Button "Connect with Facebook" oder mit ähnlicher Beschriftung.

Egal welches Facebook Login Plugin verwendet wird, wir benötigen eine Facebook-App, zu der das Plugin eine Verbindung aufnehmen kann, wenn ein Facebook-Nutzer sich anmelden möchte.

Wir verwenden nun als Plugin WordPress Social Login: das Plugin ist kostenfrei und kann sogar mehr als nur Facebook zu verbinden, es kann auch Google, Twitter und viele andere Netzwerk-Zugänge verbinden.

Damit das Plugin tut was wir wollen, müssen wir folgendes einstellen:

Daten aus der Facebook App kopieren und in das Plugin eintragen
Registrierungen und Anmeldungen sollen erlaubt sein
Die sich über Netzwerke verbindenden User erhalten zunächst die Role "Abonnent" (Subscriber) - das ist zwar die Standardgruppe, aber wir legen es zusätzlich fest: sicher ist sicher!

Wenn ein neuer Facebook-User sich registriert, möchten wir auch informiert werden, um die Berechtigungen, zu ändern (oder nicht, wenn es sich nicht um erwünschte Personen handelt). Dazu diese Einstellung vornehmen: Einstellungen > WP Social Login > Widget > Advanced Settings > Notification > "Notify only the blog admin of a new user".

Wenn man möchte, dass Benutzer aus der Gruppe "Family & Friends" bzw. solche die keine Admins sind (oder Admin-Berechtigungen haben), die Admin-Bar nicht sehen sollen, dann kann man diese entsprechend ausblenden. Dazu wird erneut in der functions.php Code hinzugefügt:function remove_admin_bar() { if( ! current_user_can('administrator') && ! is_admin() ){ show_admin_bar(false); } } add_action('after_setup_theme', 'remove_admin_bar');

Achtung: das bedeutet natürlich, dass diese Benutzer nicht ohne Weiteres in ihr Profil gelangen können und entsprechend ihre eigenen Daten nicht bearbeiten können. Dafür können wir aber in einem passenden Menü einen Eintrag hinzufügen z. B. "Profil bearbeiten" der https://meine-website.tld/wp-admin/profile.php verlinkt.

Wir haben eine bestehende Homepage verändert, sodass Inhalte erst nach Anmeldung gesehen werden können - wenn die Berechtigung stimmt.

Die Anmeldung alleine reicht nicht aus, der Besucher darf nicht der Gruppe (Rolle) Abonnent gehören (das ist übrigens die Standard-Rolle, wenn Nutzer angelegt werden) und muss eine Zusatz-Berechtigung oooooxooooo besitzen. Nicht erlaubte Besucher werden auf die Seite "Stop" weitergeleitet.

Zu alledem haben wir einen "Facebook-Connector" eingerichtet: Facebook-User können sich anmelden ohne Login und Passwort einzugeben. Neu angemeldete Facebook-User gehören automatisch der Gruppe Abonnent und dürfen vorerst nichts sehen. Achtung: wenn der Besucher einen Adblocker benutzt, kann es sein, dass die Facebook-Anmeldung fehlschlägt.

Als Administrator werde ich automatisch über Neuregistrierungen informiert: wenn ich den Facebook-User kenne, dann weise ich ihm die Rolle "Family & Friends" zu.

WordPress: Kontaktformulare erstellen mit optionaler Kopie für Absender

Veröffentlicht am 13. Juli 2017 von Matthias Wulkow

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.

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.

.. 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

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

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

Veröffentlicht am 11. Juli 2017 von Matthias Wulkow

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.

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.

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.

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.

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.

OpenProject – Schnellanleitung – Teil 2

Veröffentlicht am 10. Juli 2017 von Matthias Wulkow

OpenProject – Schnellanleitung – Teil 1

Veröffentlicht am 28. Juni 2017 von Matthias Wulkow

Kürzlich wurde die Version 7 von OpenProject veröffentlicht, ein guter Anlass um die Anwendung in einem kleinen Artikel bzw. zwei zu präsentieren.

OpenProject ist eine Open Source Webanwendung für Projektmanagement basierend auf Redmine, jedoch mit einem komplett überarteiteten Frontend. OpenProject ist insbesondere für Startups und KMU (kleine und mittelständische Unternehmen) interessant, zumindest für Unternehmen, die eine gewisse Struktur für die Verwaltung und Durchführung ihrer Projekte benötigen.

SaaS Web bietet schon seit einigen Jahren ein Managed OpenProject Produkt: als Kunde nutzen Sie stets die aktuelle Version von OpenProject, ohne sich um die Updates oder sonstige technischen Aspekte kümmern müssen.

Projekt anlegen

Um ein Projekt anzulegen, werden folgende Parameter zur Eintragung erwartet:

Projektname - das einzige Pflichtfeld
Verantwortlicher: optional.In Projekten mit vielen Teilnehmern ist es durchaus sinnvoll, dieses Feld auszufüllen.
Abhängigkeit eines anderen Projekt (ist es ein Unterprojekt von XXX?): wenn ja, dann lässt sich das Projekt auswählen.
Beschreibung: hier ist es aus mehreren Gründen sinnvoll, das Projekt in ein paar Sätzen zu beschreiben. Einerseits das gemeinsame Verständnis des Projekts in groben Zügen schwarz auf weiß zu verewigen, andererseits für Personen, die ggf. später hinzugefügt werden, damit sie sich schnell ein Bild machen können - falls sie nicht umfasssend mündlich gebrieft werden.
Projekttyp: dafür müssen zuvor in der Administration Projekttypen definiert worden sein. Das Feld kann leer bleiben.
Ist das Projekt öffentlich einsehbar? Hiermit werden die Informationen zu dem Projekt und die komplette Kommunikation für Personen, die nicht zum Projekt gehören, aufruf- und einsehbar. Diese Personen haben die Rolle "Non Member". Was sie letztlich sehen und verändern können, hängt von der Definition dieser Rolle ab - sie kann individuell eingestellt werden.

Projektaktionen

Einmal ein Projekt angelegt, werden meist die Arbeitspakete definiert. Arbeitspakete sind allerdings nicht nur Aufgaben ("Task"), die einem Teilnehmer vergeben werden. Arbeitspakete können verschiedenartig sein:

Phase ("Phase")
Meilenstein ("Milestone")
Evaluierung
Aufgabe
Verbesserung ("Enhancement")
Support

Die Arbeitspakettypen können in OpenProject frei definiert werden, es können neue hinzugefügt und bereits voreingestellte gelöscht werden. Die Liste hier ist also nicht zwingend, die die Sie selbst vorfinden werden.

Phase und Meilenstein sind besondere Arbeitspakete, die eigentlich selbst keine Aufgabe darstellen, sondern man könnte Sie als Container beschreiben zu denen Arbeitspakete verknüpft werden können. Eine Phase entspricht zum Beispiel einem Abschnitt des Gesamtprojektes (zum Beispiel "Demo") und ein Meilenstein einem wichtigen Teil des Gesamtprojektes (zum Beispiel "Website für Produkt fertiggestellt").

Meistens werden neue Arbeitspakete im Zustand "Neu" angelegt. Der Zustand kann von den bearbeitenden Teilnehmern je nach Fortschritt als "In Bearbeitung" ("In Progress") markiert werden bzw. ggf. "Geschlossen" ("Closed") oder "Gelöst" ("Resolved"). Es ist allerdings auch hier durch individuelle Einstellungen möglich zu definiert welcher Teilnehmer den Zustand eines Arbeitspaketes ändern darf - dies kann in den Ablaufplänen ("Workflows") definiert werden.

Arbeitspakete können selbst auch Abhängigkeiten aufweisen, die entsprechend eingestellt werden können.

Typischerweise werden diese Felder angezeigt, manche sind optional andere müssen ausgefüllt werden:

Projekt (ist vorausgefüllt, kann aber geändert werden, wobei dabei danach in das andere Projekt gewechselt wird)
Status (standard ist Neu, kann aber direkt in ein anderen Status gesetzt werden)
Beschreibung (wichtig)
Zugewiesen an (wichtig: wer soll zunächst das Paket zugewiesen bekommen)
Verantwortlicher (optional)
Kategorie (es gibt auch Arbeitspaketkategorien zu denen, je nach Einstellungen, automatisch eine Verantwortliche Person definiert ist)
Datum (von - bis)
Fortschritt (in %)
Priorität
Version
Zu dem können auch Dokumente direkt per Darg & Drop hochgeladen werden

Neu hier ist u. a. die "Zen" funktion, mit der das Eingabefeld im Vollbildmodus angezeigt wird.

Projektfeatures

Hier liste ich einfach ein paar Features auf, ohne zu tief in die Details zu gehen. Mit diesen Features lassen sich Zusatzinformationen zum Projekt ablegen, Zeitpläne erstellen, Meetings planen uvm.

Wiki: mit dem Wiki ist hier lediglich eine einfache Seite gemeint, in der allgemeine Informationen geteilt werden können. Oftmals gibt man allen den Zugriff auf diese Seite.
Kalender: in dem Kalender finden sich die Arbeitspakete wieder
Zeitpläne: hier werden Gantt Charts dargestellt
Neuigkeiten: hier können aktuelle Meldungen zum Projekt eingestellt werden. Die Teilnehmer erhalten Sie auf deren Home-Seite ("Meine Seite") und können die News auch als RSS Feed abonnieren.
Besprechungen: es können Meetings geplant, Teilnehmer dazu eingeladen und Protokolle davon direkt hinterlegt werden. Die Besprechungen erscheinen auch in dem Kalender.

Die verschiedenen Tools, die zur Verfügung stehen, können vom Projektadministrator festgelegt werden.

Praktisch ist auch der Aktivitäten-Stream, in dem alle Aktionen gebündelt und chronologisch angeordnet angezeigt werden.

Neu in der Version 7 ist, dass die Zeipläne nun in den Arbeitspaketen verlegt werden und ab der Version 8 aus dieser übergeordneten Ansicht entfernt werden.

WordPress: PDF aus Formulardaten generieren kinderleicht

Veröffentlicht am 26. Juni 2017 von Matthias Wulkow

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.

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.

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.

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:


        
        	Schritt 1 von 3
        	
            
                33%
            
                        
                                    Name
                            
                            
                                                    
                                                    Vorname
                                                
                            
                            
                                                    
                                                    Nachname
                                                
                            
                        
                    
                    
                          
                    
                
                
                    
                        E-Mail
                            
                        
                    
                    
                          
                    
                
                
                    
                        Webseite
                    
                
Email
Dieses Feld dient zur Validierung und sollte nicht verändert werden.

WordPress: Multilinguale Websites mit WPML einfach gemacht

Veröffentlicht am 23. Juni 2017 von Matthias Wulkow

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?

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.

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.

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.

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

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

WordPress mit WP CLI einfach und schnell installieren

Veröffentlicht am 16. Mai 2017 von Matthias Wulkow

Dieses kurze Video-Tutorial zeigt wie man in wenigen Schritten, eine neue WordPress-Website installieren kann. Voraussetzung für die erfolgreiche Ausführung sind: ein SSH-Zugang, WP CLI und eine bereits eingerichtete Datenbank. Die Domain sollte auf dem Webserver auch bereits angelegt worden sein.

So einfach erstellt man ein Kontaktformular mit WordPress

Was bringt die DSGVO?

Die Features von WooCommerce im Schnellüberblick

WooCommerce und WPML

Unterschiedliche Lagermengen pro Sprache

Setzen der Add to cart URL auf der Shop-Seite

Setzen des Add to cart Textes auf der Shop-Seite

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

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

WooCommerce Germanized

Die Features von WooCommerce Germanized im Überblick

Tausende Erweiterungen und immer professioneller

Baumstrukturansicht mit CMS Tree Page View

Drag & Drop, Kontextmenü

Status Etiketten, Suchfunktion

WPML kompatibel

Auch für andere Custom Post Types einrichtbar

Das Plugin Newsletter von Stefano Lissa & The Newsletter Team

Die wichtigsten Features in Kürze aufgelistet

Der Installations-Wizard in 4 Schritten

Schritt 1: Absender konfigurieren

Schritt 2: Anmeldeformular

Zwischen-Info

Schritt 3: Versand testen

Schritt 4: Widget mit Anmeldeformular platzieren

Erstinstallation: Ende

Das Dashboard

Die Grundkonfiguration

Absender, Antwort- und Bounce-Adresse

Auslieferungsgeschwindigkeit

Spezialeinstellungen

SMTP Einstellungen

Ein Newsletter erstellen

Der Drag & Drop Editor

Neues Mailing: Titel eingeben

Neues Mailing: Empfänger einstellen

Neues Mailing: Versand einstellen

Newsletter testen

Newsletter mit Mail Tester testen

Newsletter abschicken

Das WP Cron Problem

Wie funktionieren normalerweise zeitgesteuerte Aktionen bei WordPress?

wp-cron ausschalten bzw. cronjobs anders einrichten

Newsletter Premium

Keine WPML Unterstützung

Fazit

Immer mehr Speed

Ladegeschwindigkeit als Ranking-Faktor

Faktoren, die die Ladezeit beeinflussen

Hosting-Ebene: Infrastruktur, Webserver, Caching

Website-Ebene: HTML/JS/CSS, Media-Elemente

Online Geschwindigkeitscheck mit www.webpagetest.org

So einfach geht's

Übersicht des Ergebnisses

Performance Results

Details - Wasserfall Diagramm

Content Breakdown

Bildanalyse

Ein professionelles Tool für null Euro

Bildoptimierung leicht gemacht

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

BMP (Bitmap)

GIF (Graphics Interchange Format)

JPEG (Joint Photographic Experts Group)

PNG (Portable Network Graphics)

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

Warum ist das Thema Bildmaße so kompliziert?

1. Headerbild in voller Breite

2. Fullscreen Coverbild

3. Bild im Content-Bereich einer Seite

Bilder für Retina Displays optimieren

Kompression und Gewicht

Kompression

Gewicht

EWWW Image Optimizer: weniger ist mehr

Grundeinstellungen

Erweiterte Einstellungen

Skalierungsoptionen