Solaz - An Elegant Hotel & Lodge WordPress Theme

Solaz Theme

Das Solaz Them von Arrowpress ist ein Hotel Theme, das u. a. durch seine Schlichtheit auffällt.

Einen Vorgeschmack bekommt man auf der Demoseite des Herstellers wo man sich gleich mal für eine von 4 Homepages entscheiden kann - im konkreten Fall haben wir uns für Home 2 entschieden.

Nachdem das komplette Theme käuflich erworben und heruntergeladen ist, finden sich der Ordner Dokumentation, Import, Licensing, Plugins und Theme files.

Die Dokumentation besteht aus einem Textfile, dass auf eine Internetseite verweist, die nicht existiert ... das ist enttäuschend (aber zumindest ist die Dokumentation noch im Google Cache und kann von dort gesichert werden - Stand Ende September 2017)

Theme Installation

Über die WordPress Theme-Installation können das Solaz und das Solaz-child Theme auf den Server geladen werden.

Plugin Installation

Die Ansage von Solaz überrascht zunächst ein wenig:

This theme requires the following plugins: ArrowPress Importer, ArrowPress Shortcodes, Contact Form 7, Redux Framework, Revolution Slider, Ultimate Addons for Visual Composer, WP Hotel Booking, WPBakery Visual Composer, Woocommerce and Yith Woocommerce Wishlist.

This theme recommends the following plugins: ArrowPress Social, MailChimp for WordPress, WP Store Locator and WP User Avatar.

  • ArrowPress Importer
  • ArrowPress Shortcodes,
  • Revolution Slider
  • WPBakery Visual Composer
  • Ultimate Addons for Visual Composer
  • und ArrowPress Social

... sind zumindest schon mal im Downloadpaket enthalten und können als ZIP-Datei auf den Server geladen werden.

WPBakery Visual Composer will mir bei der Gelegenheit gleich eine Premium Lizenz aufs Auge drücken und verbindet sich dazu gleich frech mit der Verkaufsplattform, über die das Theme bezogen wurde, um dann festzustellen, dass darin keine Premium Lizenz enthalten ist ... no na ned ;-)

Ebenso biedert sich Slider Revolution mit Premium Benefits (für Premium Geld) an.

Im Dashboard muss bei Ultimate Addons for Visual Composer => Google Maps ein API-Key eingetragen werden

Contact Form 7, Redux Framework, WP Hotel Booking,Woocommerce und Yith Woocommerce Wishlist

Woocommerce schlägt gleich mal vor den Einrichtungsassistenten auszuführen ... das kann erst mal warten. Was aber eingestellt gehört ist unter Einstellungen => Kundenkonten => Kundenregistrierung =>  Aktiviere Kunden-Registrierung auf der "Mein Konto"-Seite.

Demo Content Import

Das ist zunächst etwas verwirrend, weil die Importfunktion NICHT die in Solaz => Import/Export ist sondern die unter in Design => Import Demos .... dort ist entsprechend unserer Vorlage Home 2 zu wählen.

Als nächstes muss noch der Slider importiert werden. Slider Revolution => Slider importieren => Datei auswählen ... die entsprechende Datei ist in unserem Fall die home2.zip im Import/home_2 Verzeichnis des heruntergeladenen Themes.

Es fällt allerdings auf, dass das Theme (noch?) keine Sprachauswahl aufweist.

Viele Stunden später ... Con­clu­sio

Es stellt sich die Frage, wie viele Stunden die Theme-Ersteller benötigten, um die Vorlage so aussehen zu lassen, wie sie auf deren Homepage abgebildet ist.

Und dann stellt sich die Frage wie steil die Lernkurve bei der Vielzahl an zusätzlichen Plugins subjektiv empfunden wird.

Kommt dann noch hinzu, dass Sprachauswahl und Schnellanfrage nicht funktionieren, ist der Aufwand plötzlich im Bereich der Nichtabschätzbarkeit - und damit auch die Kosten für den Kunden.

Man könnte daraus lernen, dass nicht alles Gold ist, das (auf den ersten Blick) glänzt und dass eine 90%-Lösung mitunter eher einem pragmatischen Ansatz entspricht im Vergleich zur 100% Lösung die mit den budgetierten Mitteln nicht zu erreichen ist.

Somit empfiehlt es sich das KISS-Prinzip anzuwenden ... keep it simple and stupid ... oder "Weniger ist mehr". Einfache Vorlagen verwenden und diese wenn es (unbedingt) sein muss mit der Funktionalität von Plugins erweitern.

BackWPup - für das WordPress-Backup?

UpdraftCentral ist ein vorzügliches Tool, um ein WordPress-Backup zu erstellen.

Wordpress-Backup

Es gibt die Möglichkeit Backups für fremde (verbundene) Seiten mit dem UpdraftCentral Dashboard Plugin durchzuführen. Ebenso können Backups auf Dropbox, Google Drive u. a. ausgelagert werden, was besonders bei beschränktem eigenen Speicherplatz oder auch im Sinne der Redundanz von Vorteil ist. Ein WordPress-Backup kann sogar per E-Mail versendet werden, wobei typische E-Mailgrößenbeschränkungen (meist zwischen 10 und 20 MB) zu beachten sind.

Wozu also ein neues Plugin um ein Backup der WordPress Dateien durchzuführen?

Ganz einfach ... UpdraftCentral sichert NICHT die Verzeichnisse wp-includes und wp-admin. Das ist in der Regel auch nicht notwendig, weil diese Dateien ganz leicht im Original wieder hergestellt werden können - und dann auch noch in der aktuellsten Version. Zudem sollten Dateien in diesen Verzeichnissen von Nutzer auch nicht geändert werden. Geänderte (im Vergleich zu den Originaldateien) und hinzugekommene Dateien werden unter anderem vom Sicherheits-Plugin Sucuri Security entdeckt.

Wurden die Dateien dennoch geändert, stellt sich die Frage, ob legitim oder durch einen Hacker-Angriff. Hat man keinen FTP-Zugriff, kann man den Inhalt "verdächtiger" Dateien nicht prüfen ... und mit UpdraftCentral auch nicht herunterladen.

Somit kommt BackWPup für ein WordPress-Backup wieder ins Spiel. Auf der Plugin-Seite auf WordPress.org gibt es das Plugin zum Download.

Für das praktische WordPress-Wartungs-Tool MainWP gibt es (so wie für UpdraftCentral) eine Extension wodurch ein WordPress-Backup auch für ferngewartete Seiten einfach wird.

Welches Tool mittel- oder auch langfristig das Bessere ist, kann zur Zeit nicht eindeutig beantwortet werden. Wie so oft scheint es Geschmacksache zu sein.

Alternativen?

Das Duplicator-Plugin mit dem man ebenfalls ein WordPress-Backup durchführen kann, ist in der kostenfreien Version aber hinsichtlich des Speicherorts eingeschränkt. Hier kann nur auf der eigenen Seite (dem eigenen Webspace) gesichert werden. Duplicator wurde in der Vergangenheit eingesetzt um Seiten zu migrieren - d.h. von einem Server zum anderen oder von einem Verzeichnis in ein anderes zu transferieren.

Allerdings ist Letzteres eine Funktion, die auch mit UpdraftCentral und BackWPup möglich ist - obgleich ich es selbst noch nicht verwendet habe.

Responsive Images in WordPress 4.4

WordPress 4.4 führt Responsive Images ein.

Responsive Images im Responsive-Web-Design

Responsive Images zur Suchmaschinenoptimierung?

Oft wird ja die Frage gestellt, ob ein regelmäßiges Update von WordPress und Plugins

<img class="alignnone wp-image-1910 size-large" src="http://domain.com/wp-content/uploads/2016/05/Bild-650x397.jpg" alt="Responsive Images im Responsive-Web-Design" width="650" height="397" srcset="http://domain.com/wp-content/uploads/2016/05/Bild-650x397.jpg 650w, http://domain.com/wp-content/uploads/2016/05/Bild-300x183.jpg 300w, http://domain.com/wp-content/uploads/2016/05/Bild.jpg 900w" sizes="(max-width: 650px) 100vw, 650px">

 

wirklich notwendig sei. Einerseits heißt es "Never change a running system" und andererseits bringen neue Versionen so feine Dinge wie Responsive Images.

Was ist der Unterschied von Responsive Images zu Responsive Design? Während Responsive Design die Anordnung von (block level) Elementen auf dem entsprechenden Gerät regelt, weisen responsive Bilder den Browser an, die jeweils passendste Größe eines Bildes zu laden.

Der Vorteil liegt auf der Hand - kleinere Bilder werden schneller geladen was die Suchmaschinen freut und somit der Suchmaschinenoptimierung (SEO) dient.

Zuvor wurde ein Bild, das in der Desktopversion z. B. über die ganze Seite ging, auf einem Smartphone lediglich mithilfe des responsive Designs verkleinert (zuvor aber in der vollen Größe). Da aber WordPress in der Regel Bilder in den Größen Vorschaubild, Mittel, Groß und vollständige Größe anlegt (manche Themes und Plugins auch noch weitere Größen), können auf den kleinen Handybildschirmen die kleineren Formate der Bilder geladen werden.

Wie macht WordPress das?

Gottseidank automatisch mit den HTML Attributen srcset und sizes des <IMG>-Tags.

 

In srcset sind drei Bilder mit den Größen (eigentlich Breiten = width) 650w, 300w und 900w hinterlegt.

In sizes= wird angegeben, dass bis zu einer maximalen Breite des Browserfensters von 650 Pixel (max-width: 650px) das Bild in 100% Breite angezeigt wird (100vw = 100% der Viewport Width = Breite des Browserfensters). In allen anderen Fällen wird eine Breite von 650 Pixel verwendet.

Responsive Bilder in eigenen Plugins

Die Automatik von WordPress, die Bilder responsive macht greift allerdings nicht, wenn eigene Plugins den Content mit get_the_content() aus der Datenbank abfragen.

Hie muss zusätzlich die Funktion wp_make_content_images_responsive() auf den Content angewendet werden.

$content=get_the_content(); 
$content=wp_make_content_images_responsive(do_shortcode($content));

 

Awesome Responsive Menu

Dieses Plugin zum Einfügen eines mobilen Menüs ist eindeutig die bessere Wahl im Vergleich zum WPTouch-Plugin. Vor allem wenn es lediglich darum geht ein mobiles Menü in ein WordPress-Theme einzubauen, dass dieses selbst nicht vorsieht (z. B. das WordPress Twenty Eleven Theme).

Awsome Responsive Menu

Während Awesome Responsive Menu im Grunde macht was es soll (ein mobiles Menü einfügen), drängt einem WPTouch ein komplett neues Theme auf, dass in der nicht-Pro-Version auch nicht wirklich anzupassen ist. D.h. man muss unter anderem die Schriftfarben für Überschriften von WPTouch übernehmen. Die eigenen Farbeinstellungen gehen verloren.

Aber auch Awesome Responsive Menu hat so seine Schwächen ... oder sagen wir mal Schönheitsfehler.

Der Menu Breakpoint muss in den Einstellungen manuell eingegeben werden. Also die Breite in Pixel, ab der das Menü erscheint. Ich habe mich da für die Breite 800 entschieden, weil ab dieser Breite auch der Sidebar von Twenty Eleven ans Seitenende verschoben wird.

Die Verwendung der WordPressfunktion wp_is_mobile () wäre an dieser Stelle praktisch, weil größere Pads zwar die Breite im Browser erreichen, aber die Navigation dennoch eine andere ist (die Maus kann über einem Menüpunkt hovern, der Finger am Tablet nicht).

Und das man bei den Advanced Settings die ID des Menü-Containers zuerst suchen und dann eingeben muss, erschließt sich mir auch nicht auf den ersten Blick.

Awasome-Responsive-Menu-Settings

Absolute Sicherheit ist eine Illusion

100%-ige Sicherheit wird es am Computer nie geben. Sei es der Laptop zu Hause, das Smartphone oder der Webserver auf dem die eigene Website liegt.

Wordpress SicherheitInternet-Sicherheit gegen Hackerangriffe

Gerade populäre und weit verbreitete Software wie Windows oder WordPress ist anfällig für Hackerangriffe. Nicht weil sie schlechter wäre, sondern weil es doch durchaus mehr Sinn ergibt mit einer Schadsoftware sehr viele potentielle Ziele zu erreichen.

Für WordPress (wie für Betriebssysteme) gilt, regelmäßige Updates machen das System stabiler, sicherer und in der Regel anwenderfreundlicher. Gleiches gilt für die verwendeten Plugins.

Oft liegt es aber nicht an der Software. Das schwächste Glied in der Sicherheitskette ist manchmal der Nutzer selbst. Wenn meine WordPress-ID Franz (oder wie auch immer) und mein Passwort ebenfalls Franz lautet, ist es für einen Brute-Force-Angriff in der Regel nicht schwer einzudringen und das System zu infizieren. Also um ein Mindestmaß an Sicherheit zu gewährleisten am besten sichere Passwörter wählen, die Groß- und Kleinbuchstaben, Ziffern und Sonderzeichen wie Tilde, Klammeraffe, Prozent o. dgl. enthalten.

Während früher Systeme durch Schadsoftware oft zum Absturz gebracht oder Daten gelöscht wurden, ist es heute wohl zielführender Software (oder Codezeilen) zu installieren, die unbemerkt Spam-Mails verschicken oder Links zu dubiosen Seiten setzen, um im Suchmaschinen-Ranking nach vorne zu kommen (Black-Hat-SEO-Spam). Weiterlesen

Geschwindigkeit in WordPress mit W3 Total Cache

W3 steht zwar nicht unbedingt für Warp Geschwindigkeit, aber eine WordPress-Installation um den Faktor 3 zu beschleunigen ist schon möglich. Eine schnelle Website wird in einer schnelllebigen Zeit immer wichtiger, wenn man nur einen Mausklick oder Fingertip von der nächsten (womöglich schnelleren) Seite entfernt ist.

Geschwindigkeit durch WordPress PluginDadurch, dass die Seite nicht jedesmal neu am Webserver "zusammengebaut" werden muss, sondern fix fertig aus dem Cache kommt, ist die Zeit für das sogenannte First Byte natürlich wesentlich und spürbar kürzer. Da macht das Surfen dann auch wieder Spaß, wenn auch die Gesamtladezeit der Seite nicht durch das Caching verkürzt wird. Es müssen immerhin noch genau so viele Bytes vom Server übertragen werden.

Was aber die Geschwindigkeit erhöht ist das sogenannte Minify, bei dem Leerzeichen, Tabulatoren, Absätze u. dgl. aus dem Quelltext von HTML-, CSS- und Javascript-Dateien entfernt wird.

Geschwindigkeit für Kundenwebsite

Für ein Kundenprojekt habe ich mal die Vorher-Nachher-Werte protokoliert und der Unterschied ist gewaltig. Nicht nur, dass die Seite gefühlt wesentlich schneller ist, der Geschwindigkeitsvorteil macht sich auch bei der Bewertung du Googles PageSpeed Insight deutlich bemerkbar. Die Tools zur Geschwindigkeitsmessung sind auf einer eigenen Seite beschrieben.

Also zunächst das Plugin installieren und dann aktivieren und zu den Einstellungen wechseln. Die sind in der Auswahlleiste ganz links unter Performance zu finden.

Das hat sich bislang bewährt (nur die Änderung zur Standardeinstellung sind angeführt):

General Settings

  • Page Cache Enable
  • Minify Enable, Minify Mode Manual (Auto bringt eine Fehlermeldung auf meinem Server)
  • Database Cache Enable
    Wenn Woocommerce verwendet wird _wc_session_ unter Database Cache Ingnored Query Strings hinzufügen
  • Object Cache Enable
  • Browser Cache Enable

Minify

Wird das Sucuri Security Plugin verwendet, muss die now.php von W§ Total Cache im Plugins-Verzeichnis (wp-content) auf die Whitelist Blockes PHP Files gesetzt werden.

  • Disable minify for logged in users ... sonst wird das Debugging schwierig (optional)
  • Minify error notification: Admin Notification kann hier nützlich sein
  • HTML minify settings: Enable, Inline CSS minification, Inline JS minification, Line break removal
  • JS minify settings: Enable, Embed type: Non-blocking using "async", Preserved comment removal, Line break removal

    Wenn MinifyMode Manual dann müssen hier alle Javascripts eingetragen werden. Die jqery.js, die Javascripts von

    • Awsome Responsive Menu,
    • Background Manager,
    • T(-) Countdown und
    • Wp Lightbox Bank Plugin

      können z. Zt. nicht erfolgreich minified (bzw. in den Fußbereich der Seite gestellt) werden. Um zumindest die Dateigröße zu vermindern, kann der Inhalt der Dateien manuell verkleinert werden. Ein Online-Tool hierzu findet sich unter Online Javascript Compression Tool.

      Die JS's von Visual Form Builder und MapPress Easy Google Maps Plugin scheinen dankenswerterweise nur auf Seiten auf, auf denen es auch Formulare gibt.

  • CSS minify settings: Enable, Preserved comment removal,  Line break removal, @import handling: Process.

    Auch hier müssen im manuellen Minify Modus die CSS-Dateien eingetragen werden.

    Mit <!-- W3TC-include-css --> kann man die zusammengefassten CSS in der footer.php ans Ende stellen (vor </body>). Analog dazu gibt es auch einen Tag für JavaScript: <!-- W3TC-include-js-head -->

Database Cache

  • Wenn Woocommerce verwendet wird _wc_session_ unter Database Cache Ignored

Browser Cache

General

  • Set expires header
  • Set cache control header
  • Set entity tag (eTag)

Install

  • WordPress SEO by Yoast Extension aktivieren falls WordPress SEO verwendet wird

Suchmaschinenoptimierung ...

... schnell, schneller am schnellsten zur Suchmaschinenoptimierung

Suchmaschinenoptimierung leicht gemachtDie Geschwindigkeit einer Seite wird offenbar zum Thema beim Suchmaschinen-Ranking und somit zur Suchmaschinenoptimierung. Warum? Ganz einfach, kein Besucher mag 4 Sekunden auf den Seitenaufbau einer Seite warten, wenn schnellere Seiten nur einen Mausklick entfernt sind.

PageSpeed Insights

PageSpeed Insights liefert Ranking und Tipps für die Mobil- und die Desktopversion einer Seite. Ab einem Ranking von 85 ist man im grünen Bereich.

Es gibt auch ein Plugin für Chrome, dass dann PageSpeed als Reiter bei den Entwicklertools einfügt.

Test auf Optimierung für Mobilgeräte

Dieser Google Developers Test zeigt eine kurze Übersicht ob eine Site für Mobilgeräte optimiert ist. Allerdings ist das Ergebnis nicht so aufschlussreich wie unter PageSpeed Insights.

YSlow

YSlow gibt es als Plugin für viele Browser (nicht für den Internet Explorer)

GTmetrix

GTmetrix 

WebPagetest

WebPagetest 

Pingdom Tools

Pingdom 

Weiterlesen

Query Strings Remover

Googles PageSpeed InsightsDie Geschwindigkeit mit der eine Website abgerufen werden kann, ist offenbar mittlerweile Faktor für das Ranking von Suchmaschinen.

Google sagt dazu:

PageSpeed Insights analysiert eine Seite, um festzustellen, ob diese unseren Empfehlungen für das Rendering einer Seite in einem Mobilfunknetz in weniger als einer Sekunde entspricht. Studien haben gezeigt, dass bei einer Dauer von mehr als einer Sekunde der Gedankenfluss des Nutzers unterbrochen und das Nutzererlebnis dadurch beeinträchtigt wird. Unser Ziel ist es, dafür zu sorgen, dass der Nutzer sich kontinuierlich mit der Seite beschäftigt und unabhängig von Geräte- oder Netztyp ein optimales Erlebnis erhält.

Was spricht also dagegen den Empfehlungen von PageSpeed Insights und YSlow zu folgen?

Bringt es nichts im Ranking, so wird die Seite zumindest für den Besucher schneller.

Query Strings Remover entfernt dazu die Query-Strings von CSS uns JS Dateien, wodurch ein caching auf allen Servern ermöglicht wird.

Update: Query Strings Remover schafft es nicht alle Versionsinformationen zu entfernen. Deshalb wurden die Hooks script_loader_src und style_loader_src im PriMa-General-Plugin eingefügt um die Versionsinfo mit der Funktion remove_query_arg() zu entfernen,

Welche Plugins braucht man ...

Escape NextGen Gallery

Es gab Zeiten, in denen die NextGen Gallery eine echte Alternative zur Galeriefunktion von WordPress war. Das hat sich mittlerweile geändert.

Ältere Installationen, die dieses Plugin verwenden, können nicht ganz einfach auf die wordpresseigene Galerie umsteigen, weil die Bilder z. B. in einem eigenen gallery-Verzeichnis gespeichert werden.

Escape NextGen Gallery wandelt vorhandene Galerien um. Das funktioniert aber nur mit jeweils einem [nggallery] Shortcode pro Seite. Und wenn eine WordPress-Galerie und ein [nggallery] Shortcode auf einer Seite sind, werden mitunter Bilder aus der vorhandenen Wordpress-Galerie in die neu konvertierte übernommen. Nachdem aber das Rauslöschen der überzähligen Bilder schneller geht als die Fehlersuche, sollte man hier den pragmatischen Ansatz wählen.


Media Library Assistant

Media Library AssistantZugegeben, das Plugin kann echt viel und ich nutze vermutlich nur ganz wenig.

Eine Funktion, die sehr zeitsparend ist, nennt sich "IPTC/EXIF Mapping". Damit kann man JPG's bereits im Betriebssystem (Windows) mit einem Titel versehen und diesen anschließend automatisch in Titel, Alternativtext und Beschreibung der WordPress-Medien-Datei einfügen.

Weiters werden zusätzliche Filter und Suchfunktionen in die Mediathek eingebaut.

Mediathek ohne Media Library Assistant

Mediathek mit Media Library Assistant


 

qTranslate-X

Dies ist eine Weiterentwicklung von qTranslate, das aber zum heutigen Stand am 26.1.2014 zuletzt upgedated wurde. Nachdem zuletzt Probleme mit qTranslate aufgetreten sind, bin ich auf mqTranslate umgestiegen. Und nachdem das nicht mehr weiterenwickelt wird, bin ich jetzt bei qTranslate-X gelandet. Der Umstieg zwischen den Versionen verlief übrigens jeweils ohne Probleme.

Mit diesem Plugin können Seiten mehrsprachig gestaltet werden.

In-line syntax:

[:en]English Text[:de]Deutsch[:]

<!--:en-->English Text<!--:--><!--:de-->Deutsch<!--:-->

[:en]English Text[:]<html-language-neutral-code>[:de]Deutsch[:]<another-html-language-neutral-code>

qTranslate-XT

Das ist nun die Weiterentwicklung der Weiterentwicklung. Auch wenn das Plugin nicht direkt von WordPress hochgeladen werden kann, steht es zumindest für den manuellen Upload auf GitHub bereit. Ich gehe davon aus, dass sich das in Zukunft noch ändern wird.

qTranslate slug

Ist ein Plugin, das den Permalink in der jeweils ausgewählten Sprache anzeigt.


Resize Images before upload

Ist eigentlich schon selbsterklärend. Dafdurch können Fotos direkt vom Speichermedium raufgeladen werden, ohne, dass man befürchten muss, eine 5 MB Datei in die Seite einzubauen.


Sucuri Security

Mit diesem feinen Plugin kann einerseits geprüft werden, ob man sogenannten Brute-Force-Angriffen (Passwort erraten) ausgesetzt ist und andererseits die WordPressinstallation sicherer gemacht werden.

Siehe dazu auch die Artikel Sicherheit gegen Hackerangriffe bei WordPress und Das Salz in der Suppe für die WordPress-Sicherheit.


WP-Mail-SMTP

Sollte die standardmäßig am Server eingestellte Absendeadresse nicht den eigenen Vorstellungen entsprechen, kann dies mit diesem Plugin geändert werden.

Zudem kann ausgewählt werden, ob E-Mails mit SMTP oder der PHP mail()-Funktion gesendet werden.