Spam verhindern mit „Contact Form 7“

Wer unter WordPress ein Kontaktformular einrichten möchte, hat möglicherweise schon von „Contact Form 7“ den Namen gelesen. Es ist eins der meistgenutzten Kontaktformular-Plugins. Sein großer Vorteil liegt darin, besonders anpassungsfähig zu sein.

Heute nun ein Beitrag darüber, wie man ohne fremde Scripte anderer Webdienstanbieter und ohne Googles „reCAPTCHA“ das Formular gegen Spam sichern kann.

Inhaltsverzeichnis

Spam verhindern mit „Contact Form 7“ weiterlesen

WordPress hängt sich auf im Wartungsmodus

Problem
Wie im vorherigem Beitrag ein eher seltenes Problem. Wenn ein Plugin nicht aktualisiert wird oder aus anderen Gründen der Wartungsmodus sich nicht selbst ausschaltet.

Lösung
Mit FTP auf das Wurzelverzeichnis von der WordPress-Installation gehen und die versteckte Datei, erkennbar am führenden Punkt, .maintenance löschen. Nicht vergessen sich die versteckten Dateien anzeigen lassen, meist im Menü „Ansicht“ des FTP-Programms zu finden.

WordPress manuell aktualisieren

Es ist mir schon mehrmals vorgekommen, dass ich „WordPress“ händisch updaten musste. Beispielsweise wenn ich mehrere Updates übersprungen habe.

Hier eine Lösung für Enthusiasten. Vorkenntnisse von Dateiverwaltung, kleines PHP-Wissen und verantwortungsvolles Handeln sollten ausreichend sein für diesen Lösungsansatz.

Wie immer, erst Backup erstellen, dann Handeln.

Inhaltsverzeichnis

WordPress manuell aktualisieren weiterlesen

WordPress missachtet W3C-Standards


Inhaltsverzeichnis

  1. Heute am Beispiel des Unterstrich von Hyperlinks, auch Selektor „a“
  2. Die Normung von HTML5 und CSS3 sind große Erleichterungen
  3. WordPress und die Ehrlichkeit
  4. Noch Open Source Software oder doch nicht mehr zu empfehlen
  5. Beispiel der Deklarationen „outline“ und „border“

Immer wieder werden von „WordPress“ bewährte Standards missachtet. Hier im Theme „Twenty Sixteen“ von WordPress.org.


Heute am Beispiel des Unterstrich von Hyperlinks, auch Selektor „a“

Das CSS, Cascading Style Sheets, gibt dem Inhalt das Aussehen. Diese Trennung ist vom W3C, World Wide Web Consortium, auch genauso gewollt. Das CSS gibt es mittlerweile in der 3. Version und deckt für die meisten Webdesigner auch gefühlte 99% der gewünschten Funktionen ab.


Die Normung von HTML5 und CSS3 sind große Erleichterungen

Wird ein Link gesetzt, so wird dieser sofort ohne weitere Layout-Einstellungen in der Farbe Blau und mit Unterstrich dargestellt. Außerdem bekommt der Mauszeiger die Form des Pointers zugewiesen. Das sind die 3 Standards die in jedem HTML-Dokument für Hyperlinks schon vordefiniert sind. Der Unterstrich wird dabei von der Deklaration „text-decoration“ mit dem Wert „underline“ dargestellt.
Dieser Standard soll gewährleisten, das nachfolgende Arbeiten an der Webseite und seinem CSS, ohne weiteren Aufwand und von jedem anderem Bearbeiter fortgesetzt werden können. Denn das schlussendliche Werk, für das ein Webdesigner bezahlt wird, gehört dem Kunden.


WordPress und die Ehrlichkeit

Jetzt das Aber, aber warum versuchen Webdesigner diese Standards mit nicht konformen Winkelzügen auszuhebeln? Das bleibt wohl deren Geheimnis. Das es getan wird, das ist zweifellos Tatsache. Doch das es bei den empfohlenen und von der eigenen Plattform verbreitete Themes von WordPress sind, das ist ärgerlich und widerspricht auch dem Gedanken von Open Source Software, nämlich der Nichtdiskriminierung, und dem wichtigstem Designprinzip, dem KISS-Prinzip.

In verschieden Themes, die von WordPress vertrieben werden, sind mir solche nicht standardkonformen Deklarationen von Elementen vorgekommen und sie ärgern mich so sehr das ich nun einen Beitrag zum WordPress Standart-Theme „Twenty Sixteen“ schreibe. Denn hier wird der Unterstrich von Links erstellt mit „box-shadow: 0 1px 0 0 currentColor;“.

Versucht nun jemand diesen Unterstrich zu ändern oder zu entfernen wird er nicht fündig mit der Suche nach „text-decoration“. Bei einem anderem Theme von WordPress wird der Unterstrich mit „border-bottom“ erstellt, das zu dem selbem Ärger beim Webdesigner führt.


Noch Open Source Software oder doch nicht mehr zu empfehlen

Jetzt stellt sich mir die Frage, sind diese Themes denn dann überhaupt noch Open Source Software und wenn nicht, dann sind diese auch nicht mehr zu empfehlen!

Beispiele
standardkonformer Hyperlink der W3C-Empfehlung
Hyperlink mit „border-bottom“
Hyperlink mit „box-shadow“
Es sind keine Unterschiede zu erkennen, genau das ist die fatale Situation, vor dem der Webdesigner steht. Zudem sind in dem Theme „Twenty Sixteen“ 6(sechs) CSS-Dateien mit 53kB, das entspricht etwa 9000 Wörter, da ist die Suche nach der entsprechenden Deklarationen schon sehr schwer.


Beispiel der Deklarationen „outline“ und „border“

Hier liegt kein Fehler vor, nur scheint „outline“ doch sehr redundant zu sein. Die Deklaration „outline“ ist ohne sie zu kennen nicht gleich von „border“ zu unterscheiden. Der Unterschied liegt darin, „border“ legt sich zuerst um den Inhalt und „outline“ beinhaltet „border“ und den Content. Aber einzeln gesetzt, ist „outline“ nicht von „border“ zu unterscheiden.

Hyperlink mit „border“
Hyperlink mit „outline“
Hyperlink mit blauer gepunkteter Linie für „outline“ und roter Linie für „border“

Standard-Hyperlink mit text-decoration: underline;

Hyperlink mit border-bottom: 1px solid #3A78E0;

Hyperlink mit box-shadow: 0 1px 0 #3A78E0;

outline : 0;

Telefonnummer direkt zum anwählen

Die Internetnutzung durch Smartphones verlangt Veränderungen des Webdesigns um weiterhin oder anders Benutzerfreundlich zu sein oder zu verbessern.

Inhaltsverzeichnis

  1. Beispiel
  2. Symbole
  3. Verweise

Hier am Beispiel einer sofort anwählbaren Telefonnummer direkt aus der Webseite heraus.
Mobil: 0172 – 3062373

Der entsprechende Code ist:

Mobil: <a href="tel:+491723062373">0172 - 3062373</a>

Symbole
Mit verschiedenen UTF-Symbolen ist das ganze auch noch individueller anzupassen.

Ausführung Code
📱 &#128241;
&#9990;
&#9742;
🖁 &#128385;
🕽 &#128381;
📴 &#128244;

Das letzte Symbol wäre geeignet um Ruhepausen in Kliniken, Kindertagesstätten, Seniorenheime anzuzeigen oder andere sensible Orte zu kennzeichnen.


Verweise
http://unicode-table.com/de/search/?q=Phone
UTF8 mit Google suchen

SVG in WordPress einbinden

Diese Anleitung gilt auch für andere Web-CMS.

Warum sind SVG-Dateien, also skalierbare Grafiken so interessant?
Weil diese schneller im Internet transportiert werden und sich somit die Webseite schneller öffnend. Außerdem entlastet es die Datenbank.

Vorsicht, nur selbst erstellte SVG-Dateien hochladen, den SVG-Dateien werden bewusst gesperrt um ausführbaren Code, der in SVG-Dateien versteckt werden kann, keinen Zugang zur Webseite und somit auch zu den Webseiten-Besuchern zu gewähren.

Hier am Beispiel des Farbrades mit 256 Farben.
Colorwheel-small

150 kB die Original-SVG-Datei
 65 kB als komprimierte PNG-Datei
 17 kB als optimierte JPEG-Datei
 20 kB als SVGZ-Datei, verlustfrei komprimierte SVG-Datei

Nun sieht es so aus, das JPEG die kleinste Datei ist und nicht die verlustfreie komprimierte SVGZ-Datei, aber JPEG hat die schlechteste Qualität und SVG ist das Original. Gerade für Zeichnungen und Logos sind Artefakte wie in JPEG-Dateien keine Option!
Bei JPEG-Dateien besteht noch das Problem die Original-Datei aufzuheben, zusätzlich zur eingesetzten Datei mit den speziellen Abmessungen für die jeweilige Webseite.


Um SVG-Dateien und auch komprimierte SVGZ-Dateien in WordPress zu nutzen, werden zwei Arbeitschritte benötigt.

1. muss dem Apache-Server mitgeteilt werden das diese Dateiformate, die zu Recht als gefährlich eingestuft werden, zulässig sind.
.htaccess

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

2. wird WordPress dieselbe Mittelung gemacht über das aktivierte Theme.

/wordpress-webseite/wp-content/benutztes-theme/
functions.php

/* MIME-Type svg und svgz zulassen */
    function custom_mtypes( $uwd ){
        $uwd['svg'] = 'image/svg+xml';
        $uwd['svgz'] = 'image/svg+xml';
        return $uwd;
    }
    add_filter( 'upload_mimes', 'custom_mtypes' );

3. Im Header der Seite muss ein eventuelles „no-svg“ gelöscht oder auskommentiert werden.

WordPress WooComerce – Zu wenig PHP-Speicher

Problem:
Wenn Sie mehrere Artikel in WooCommerce einstellen und eine umfangreiche Konfiguration haben, kann schnell das vorgegeben Limit von 40MB ausgereizt sein.

Lösung:
In der eigenen WordPress-Installation können Sie mit Hilfe von FTP die Einstellungen optimieren.

1. Hier eine Bildschirmaufnahme [Screenshot] des Problems.
Auf der Bearbeitungsseite [Backend] sehen Sie beispielsweise unter WooCommerce, dann Systemstatus, unter dem Eintrag WordPress PHP-Memory Limit, die standardmäßig eingestellten 40 MB.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-01


2. Sie Auf Ihren Server mit einem FTP-Programm Ihrer Wahl, wie FileZilla, einlogen und
im Verzeichnis wp-includes die Datei defaults-constants.php zum Bearbeiten öffnen.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-02


3. Setzen Sie diese Werte ein um einen Engpass im Speichermanagement auszugleichen:
Zuerst den 1. Wert WP_MEMORY_LIMIT auf 96M setzen.
Nun 2. Wert WP_MEMORY_LIMIT auf 128M setzen.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-03


4. Falls wider Erwarten doch keine Änderung sofort sichtbar ist, kann
im WordPress-Wurzelverzeichnis die Datei wp-config.php zum Bearbeiten geöffnet werden.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-04


5. Folgenden Eintrag können Sie hier unter den ersten großen Kommentar setzen:
define( 'WP_MEMORY_LIMIT', '96M' );
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-05

Nun sollte Ihr Onlineshop für 1.000 Artikel und mehrere Bestellungen am Tag gerüstet sein.