Kategorien
Content Management Systeme E-Commerce Messenger Site Builder Soziale Netze

Facebook Messenger für WordPress

Nach Aussage von Facebook hat das soziale Netzwerk im 1. Quartal 2017 etwa 1,9 Milliarden Mitglieder, die die Site mindestens ein Mal pro Monat besuchen. Der Facebook Messenger wurde im Juli 2016 von einer Milliarde Menschen genutzt. Die Facebook Messenger App ist eine der am meisten heruntergeladenen und gebrauchten Apps auf iOS und Android. Facebook und der Messenger sind zentral verwaltete Systeme.

Beim Content Management System WordPress ist die Statistik nicht so klar beschreibbar, weil die Firma Automattic, die hinter WordPress steht, einfach nicht weiß, wie viele Installationen aktiv sind. Eine WordPress Installation kann über Plugins mit Automattic Kontakt aufnehmen, muss es aber nicht. Die Menge aller WordPress Sites kann man, verglichen mit dem zentralen Facebook System, durchaus als dezentral einstufen. Je nach Statistik basieren zwischen 50% und 60% aller Websites, die mithilfe eines Content Management Systems erstellt werden, auf WordPress.

Nun liegt es natürlich nahe, die Vorteile beider Systeme zu verbinden. Kreativität funktioniert besser dezentral, Kommunikation besser eher zentral.

Wenn du eine Website besuchst, nutzt du vermutlich eher selten das Kontaktformular. Aufdringliche Chatbots sind auch nicht jedermanns Sache. So grundsätzlich ist es aber für Besucher und Betreiber einer Website praktisch, einen Kommunikationskanal auf der Website anzubieten.

Das Facebook-Messenger for WordPress Plugin lässt sich im Monat Mai 2017 kostenlos beim Online Marktplatz Envato herunterladen (nach einer ebenfalls kostenlosen Registrierung). Envato hat etwa 1,5 Millionen Kunden, die etwas kaufen und bietet Millionen von digitalen Gütern zum Verkauf an.

WordPress bietet in dieser Kombination die flexible Basis Plattform, Envato die notwendigen Plugins und Facebook die Nutzer. Die Kombination ist effektiv um Kontakt zu seinen Besuchern aufzunehmen und ihnen „Dinge“ zu verkaufen oder online Support zu leisten.

Ich betreibe privat ein WordPress Blog und probiere die Kombination aus. Ich lege mir eine Facebook Page an, einen Account bei Envato, lade das Plugin und los geht’s.
Um ehrlich zu sein, ganz so schnell ging es nicht, aber nun ist alles da. Ich habe jetzt sogar eine Facebook Page.

Installation & Konfiguration

Die Installation des  Plugins in WordPress erfolgt über einen einfachen Upload der Zip-Datei des Plugins im Browser.

Facebook Messenger for WordPress - Installation
Facebook Messenger for WordPress – Installation

Nach der Aktivierung des Plugins muss die Adresse der Facebook Page in den Einstellungen festgelegt werden. Die anderen Werte können zunächst so bleiben wie sie sind.

Konfiguration
Konfiguration

Auf dem Blog erscheint nun das Facebook Messenger Icon und erlaubt es, mir eine Nachricht zu schicken.

Facebook Messenger for WordPress
Facebook Messenger for WordPress

Auf dem Telefon erscheint zusätzlich die Möglichkeit in die Messenger App zu wechseln,

Anzeige Mobile
Anzeige Mobile
Wechsel zur Messenger App
Wechsel zur Messenger App

Falls ich auf meiner WordPress Seite das Shop Plugin WooCommerce installiert hätte (habe ich momentan nicht), so könnte ich einen individuellen Button neben den Produkten und im Warenkorb platzieren. Die Farben könnte ich individualisieren und natürlich wird alles responsiv dargestellt.

Das Plugin tut, was es verspricht und eine Kontaktaufnahmen ist auf dem Desktop und auf dem Telefon sehr einfach möglich.

Fazit

Es ist interessant, die Kombination auszuprobieren. Die Integration ist gleichzeitig faszinierend und auch ein wenig erschreckend.
Faszinierend, weil es für einen Online Shop Betreiber vorteilhaft ist, nahe bei der Kundschaft zu sein.
Erschreckend, weil Facebook natürlich die kompletten Kommunikationsdaten besitzt, auswertet und zu seinem Vorteil nutzen wird.

Ich werde das Plugin bis Ende Mai aktiv auf meinem Blog lassen.
Mal sehen ob sich jemand bei mir meldet 🙂

Links


tl;dr: Kundenkommunikation in Kombination mit WordPress und dem Facebook Messenger

 

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save

Kategorien
Content Management Systeme Editoren Shared Hosting Site Builder Webdesign

Wie geht das genau mit CSS?

In CSS (Cascading Stylesheets) stehen Anweisungen, die deiner Website sagen, wie die Dinge auszusehen haben. Mit „die Dinge“ meine ich beispielsweise die Farbe von Text oder die Grösse von Überschriften.

CSS ist so ähnlich wie Wohnung einrichten. Du pinselst eine Wand an, hängst ein Bild auf, stellst eine Blume daneben und schiebst die Blume solange hin und her, bis es dir gefällt.

Mit CSS kannst du alle Dinge zu jedem Zeitpunkt verändern.
Dir gefällt die Wandfarbe nicht, kein Problem.
Anstelle der Blume soll ein interaktives Kunstwerk erscheinen, kein Problem 🙂

Ein Beispiel

Weil das ja doch alles sehr abstrakt ist, hier ein sehr einfaches Beispiel:

Das ist das HTML Markup:

<p>Ich bin ein Absatz, der ein <em>betontes</em> Wort enthält.</p>

das sind die CSS Anweisungen:

p {size: 16px;}
em {color: red;}

Im Editor jsfiddle.net kannst du das sofort online ausprobieren.
Du musst dich nicht registrieren.

https://jsfiddle.net/HagenGraf/zryonLs4/
https://jsfiddle.net/HagenGraf/zryonLs4/

Es macht Spass in dieser Umgebung zu probieren und im Ergebnis versteht man die Zusammenhänge vermutlich viel besser.

Wo gebe ich die CSS Anweisungen auf meiner Website ein?

Nach dem Ausprobieren auf jsfiddle möchtest du natürlich sofort auf der eigenen Website deine Idee umsetzen. Aber wo werden die CSS Befehle eingetippt?

HTML Site

Wenn du eine HTML/CSS Site ohne Datenbank betreibst, kannst du die CSS Anweisungen in der entsprechenden Datei per FTP auf den Server laden und/oder online verändern. Bei unseren Web Hostings geht das in der Dateiverwaltung im cPanel.

cPanel Dateiverwaltung
cPanel Dateiverwaltung

Content Management Systeme

Bei den klassischen Content Management Systemen WordPress, Joomla und Drupal kannst du auf unterschiedliche Weise zusätzliche CSS Anweisungen eingeben.

Joomla

Joomla besitzt einen vollwertigen Online Template Editor. Lege einfach im CSS Verzeichnis eine neue Datei mit dem Namen user.css an und füge die gewünschten Befehle ein.
Joomla lädt diese Datei nach dem Speichern automatisch.

user.css in Joomla
user.css in Joomla

Im Quellcode der Website taucht die neue Datei user.css auf.

Quellcode Joomla Website
HTML-Quellcode Joomla Website

WordPress

In WordPress gibt es im Bereich Design den Customizer. Hier kannst du deine CSS Befehle eintragen.

WordPress Customizer
WordPress Customizer

Im Quellcode der Site werden deine Anpassungen „inline“ eingebunden.

WordPress - HTML Quellcode
WordPress Website – HTML Quellcode

Die englische WordPress Dokumentation enthält eine Übersicht über gebräuchliche WordPress CSS-Klassen (WordPress and CSS).

Drupal

In Core Drupal kannst du das CSS nicht so einfach über den Browser anpassen. Es gibt aber natürlich ein Modul für Drupal 7 und Drupal 8, das dir einen CSS Editor mit Seitenvorschau zur Verfügung stellt (CSS Editor).

Drupal CSS Editor
Drupal CSS Editor

Auch hier wieder ein kurzer Blick in den Seitenquellcode. Wie bei WordPress wird das CSS Inline in die Seite eingefügt.

Drupal Website - HTML Quellcode
Drupal Website – HTML Quellcode

Wir finde ich die passende CSS Klasse?

Wer schon mal gesucht hat, an welcher Stelle diese oder jene Änderungen eingefügt werden muss, weiß die aktuellen Browser zu schätzen. Einfach die Stelle markieren und im Browser Inspektor anzeigen, hier ein Beispiel in Google Chrome.

Google Chrome Inspektor
Google Chrome Inspektor

Hinweis:  Wie beim Einrichten deiner Wohnung kannst du mit der Verwendung von individuellem CSS sehr schnell übers Ziel hinaus schießen, daher ein paar ganz einfache Dinge, die du beachten solltest:

  • Keine Mischung von Schriftarten
  • Benutze aufeinander abgestimmte Farben
  • Trenne Inhaltselemente wie Seitenleisten, Kopf- und Fußzeilen klar voneinander
  • Benutze nicht all zu viele Fotos und Grafiken
  • Achte auf einen hohen Kontrast zwischen Schrift und Hintergrund

Design lernt man nicht in ein paar Stunden. Es ist ein Prozess, der sich über Jahre erstreckt und nie zu Ende ist. Gerade deswegen bereitet er vielen Menschen auch soviel Freude.  

Links


tl;dr: Mit CSS kannst du deine Website „verschönern“.

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; top: 3669px; left: 50px;">Save

Kategorien
Content Management Systeme Infrastruktur Performance Server Shared Hosting Site Builder

Joomla + LiteSpeed Cache = Speed

Um die Performance der Websites unserer Kunden auch bei hohem Besucheraufkommen zu maximieren, verwenden wir bei NOVATREND seit fast zwei Jahren den LiteSpeed Webserver. Damals haben wir dabei auch entschieden, die Sicherheit und die Vertrauenswürdigkeit der Kundenwebsites durch die einfache und kostenlose Bereitstellung von SSL Zertifikaten zu erhöhen.

Die Übertragung von verschlüsselten Websites ist komplexer als die Übertragung unverschlüsselter Websites und von daher langsamer. Durch den Einsatz des LiteSpeed Webservers konnte dieser Nachteil allerdings mehr als ausgeglichen werden. Die verschlüsselten Websites laufen unter dem LiteSpeed Webserver schneller als die unverschlüsselten Sites unter anderen Servern. Wir haben den Effekt in einem ausführlichen Blogpost mit Geschwindigkeitsmessungen dokumentiert: Schnellere Antwortzeiten mit dem LiteSpeed Web Server.

Im letzten Jahr wurde dann PHP 7 released. Die Version 7 gab der gesamten PHP Welt einen Leistungsschub und wir berichteten über die  Kombination WordPress + PHP7 + LiteSpeed Cache = Richtig Schnell! Neben dem WordPress Plugin gibt es auch ein Plugin für Magento. Weitere Plugins sollen folgen.

Es geht auch ohne Plugin!

Um in den Genuss einer Geschwindigkeitssteigerung durch den LiteSpeed Cache zu kommen, müssen nur wenige Kommandozeilen in die .htaccess Datei eingetragen werden. Das hört sich kompliziert an, ist aber ganz einfach.

LiteSpeed Cache für Joomla konfigurieren

Um die Joomla Konfiguration für den Einsatz des LiteSpeed Caches durchzuführen, musst du die .htaccess Datei deiner Joomla Installation in einem Editor öffnen. Die Datei befindet sich im root Verzeichnis deiner Joomla Installation.

.htaccess Datei im Joomla Verzeichnis
.htaccess Datei im Joomla Verzeichnis

In der Zeile 64 findest du folgende Zeile:

## Begin - Joomla! core SEF Section.

Direkt davor musst du die folgenden Kommandos einfügen und natürlich meine Testdomain joomla.seafolly.ch durch deinen Domainamen austauschen:

## End - Rewrite rules to block out some common exploits.
<IfModule LiteSpeed>
 CacheDisable public /
 RewriteEngine On
 RewriteCond %{REQUEST_METHOD} ^HEAD|GET$
 RewriteCond %{HTTP_HOST} ^joomla.seafolly.ch$ [NC,OR]
 RewriteCond %{HTTP_HOST} ^www.joomla.seafolly.ch$ [NC]
 RewriteCond %{HTTP_COOKIE} !loginuser
 RewriteCond %{ORG_REQ_URI} !^/index.php$
 RewriteCond %{ORG_REQ_URI} !administrator
 RewriteCond %{ORG_REQ_URI} (\.php|\.html|\.htm|\.feed|\.pdf|\.raw|/[^.]*)$ [NC]
 RewriteRule .* - [E=Cache-Control:max-age=120]
</IfModule>
########## End - Litespeed cache

Du musst entscheiden, wie lange der Cache erhalten bleiben soll. Im Beispiel beträgt die Haltbarkeit 120 Sekunden. Das wird durch diesen Befehl ausgedrückt:

RewriteRule .* - [E=Cache-Control:max-age=120]

Je nachdem, wie deine Website aufgebaut ist, kannst du diese Zeit verändern. Eher statische Websites mit gleich bleibenden Seiteninhalten können auch länger gecached werden. Sites mit vielen dynamischen Elementen, wie beispielsweise Kommentaren, benötigen unter Umständen eine kürzere Cache Haltbarkeit, damit aktuelle Kommentare schnell auf der Seite erscheinen.

Funktioniert alles?

Es gibt mehrere Methoden zu überprüfen, ob der LiteSpeed Cache korrekt funktioniert.

  • Zunächst sollte deine Seite nach ein paar mal „hin- und herklicken“ deutlich schneller laden. Das „hin- und herklicken“ dient dazu, den Cache zunächst testweise aufzubauen. Auf einer gut besuchten Site erfolgt der Aufbau des Caches sehr schnell und automatisch über die Aufrufe der Besucher.
  • Wenn der Cache funktioniert, befinden sich im lscache Verzeichnis Dateien wie diese:
LiteSpeed Cache Dateien
LiteSpeed Cache Dateien
  • Der LiteSpeed Server liefert den Header X-LiteSpeed-Cache: hit an deinen Browser aus. Das kannst du einfach, beispielsweise im Chrome Browser, überprüfen (Inspect -> Network -> All -> Deine Domain):
    Header im Chrome Browser
    Header im Chrome Browser

Hausputz

Einmal pro Tag wird dein LiteSpeed Cache von uns automatisch geleert. Wenn du willst, kannst du die abgelaufenen Cache Dateien auch öfter löschen. Dazu erstellst du dir einfach einen Cronjob mit folgendem Inhalt:

*/10 * * * * find /home/seafoll1/lscache -type f -mmin +8 -delete 2>/dev/null

Der Name seafoll1 muss durch den Namen deines Webhostings ersetzt werden. In diesem Beispiel löscht der Cronjob alle 10 Minuten (*/10) die Dateien, die älter als 8 Minuten (-mmin +8) sind.

Wie funktioniert der Cache und was sagt Google dazu?

In einem Cache werden Seiten oder Teilbereiche von Seiten als Datei abgespeichert.

  • Mit LiteSpeed Cache liefert der Webserver die gecachete Seite ohne einen Datenbankzugriff aus.
  • Ohne LiteSpeed Cache wird die Site auf herkömmliche Art ausgeliefert (PHP wird interpretiert und fragt bei der Datenbank an). Diese Variante dauert länger.

Um den Effekt zu verdeutlichen, schalte ich in der Joomla Administration den Debug Mode an.

Joomla Debug
Joomla Debug

Wenn ich nun auf das Joomla Frontend zugreife, erscheinen unten Informationen zum Systemzustand (Joomla Debug Konsole). Dort wird neben anderen Informationen auch die Anzahl der durchgeführten Datenbankabfragen und deren Dauer angezeigt.

Joomla Debug Konsole
Joomla Debug Konsole

Um die Standard Startseite einer „frischen“ Joomla Installation anzuzeigen, wird 24 mal auf die Datenbank zugegriffen. Das dauert in meinem Fall 16.43 Millisekunden.

Jetzt kommt Google ins Spiel. Googles Page Speed Tools sind oft wichtig in Kundengesprächen. Neben anderen Parametern zeigen sie die Server Response Time als Möglichkeit an, die Performance deiner Website zu erhöhen.

Google Page Speed
Google Page Speed

In diesem Fall beträgt die Server Response Time 0.27 Sekunden. Die Zeit, die Joomla benötigt um in der Datenbank zu suchen, ist 0.01643 Sekunden. Ohne den Datenbankanteil müsste die Auslieferung der Site um diesen Betrag schneller sein. Ich konfiguriere den LiteSpeed Cache und siehe da: die Meldung bezüglich der Server Response Time verschwindet, die Punktzahl erhöht sich sogar um einen Punkt. Andere Möglichkeiten des Tunings werden angezeigt.

Google Page Speed - mit Cache
Google Page Speed – mit Cache

Hinweis: Es handelt sich bei diesem Beispiel um die einfachste mögliche Joomla Installation. Bei jeder individuellen Joomla Installation ist der Effekt größer! Außer dem Seitencache spielen auch zahlreiche andere Faktoren bei Google Page Speed eine Rolle. 

Nun denkt man sich vielleicht

Hhm … einen Punkt besser, das haut mich aber nicht um!

Der eine Punkt ist nicht das Ziel. Das Ziel ist die Server Response Time so niedrig wie möglich zu bekommen, so dass Google gar nicht auf die Idee kommt, dass es noch schneller funktionieren könnte. Je mehr Teile vom Server geladen werden, und das sind bei aktuellen Websites viele Teile, desto effektiver wird alles. Um den Effekt nochmal deutlich anhand der Ladezeiten im Browser zu zeigen:

  • Die Variante ohne Cache lädt in 1.96 Sekunden
Ladezeiten ohne Cache
Ladezeit ohne Cache (1.96 Sekunden)
  • Die Variante mit Cache lädt in 1.05 Sekunden
Ladezeit mit Cache (1.05 Sekunden)
Ladezeit mit Cache (1.05 Sekunden)

Der Unterschied ist immens und für den Besucher der Site deutlich spürbar!

Links


tl;dr: LiteSpeed Cache sorgt für eine erhebliche Performance Steigerung deiner Website

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; top: 5615px; left: 50px;">Save

Kategorien
Content Management Systeme Editoren Site Builder Webdesign Webserver Wunschthema

Debugging mit PHPStorm und MAMP

In der letzten Woche ging es um die Erstellung einer Galerie mit der PhotoSwipe Library in WordPress. Das Ergebnis war gut, aber wie so oft fehlte noch eine Kleinigkeit. Unter dem Einzelbild sollte außer der Beschreibung des Bildes noch ein Link zum Artikel sein, in dem das Bild verwendet wird. Als Entwickler muss man nun suchen, wo man diesen Link am Besten einfügt und wie man an die gewünschten Daten kommt. Glücklicherweise merkt sich WordPress in welchem Beitrag ein Bild verwendet wird, so dass es grundsätzlich relativ einfach möglich sein müsste, einen korrekten Link einzufügen.

Wer öfter programmiert, hat einen Lieblingseditor oder eine Lieblingsentwicklungsumgebung (IDE). Im PHP Umfeld ist vermutlich das Produkt PHPStorm „die IDE“. PHPStorm ist ein proprietäres Produkt aber auch im Open Source Umfeld sehr beliebt. Du kannst dir eine kostenlose 30 Tage Version von der Website des Herstellers laden.

Die Aufgabe mit dem Link ist eine gute Gelegenheit um das Debbuging mit PHPStorm zu zeigen. Unter Debugging versteht man den Vorgang, Fehler in Computersystemen zu diagnostizieren und zu finden. Der Name geht tatsächlich auf Käfer und Motten (bugs) zurück, die in frühen Computern zu Kurzschlüssen an den Elektronenröhren führten. Webentwickler nutzen für die lokale Entwicklung oft eine Zusammenstellung freier Software für Webserver, Datenbank und Programmiersprache. Im macOS Umfeld ist das oft MAMP, im Windows Umfeld XAMP, bei Linux sind alle benötigten Programme bereits enthalten. Eine Website wird meistens lokal erstellt und in einem Git Repo gelagert (siehe auch Entwicklungsworkflow für Deine Website(s)). Die Änderungen am Code werden dann auf unterschiedliche Weise (git pull, FTP, Browser-Upload, etc.) auf den produktiven Server übertragen.

Die Fehlersuche und überhaupt das Verständnis von Programmcode ist bei modernen Content Management Systemen nicht mehr ganz einfach. WordPress ist glücklicherweise immer noch relativ leicht zu verstehen, die Innereien der Variablen und Arrays sind aber oft unübersichtlich.

Eine wichtige Funktion eines Debuggers ist das Setzen von Haltepunkten an bestimmten Code Zeilen. Die Programmausführung wird an so einem Haltepunkt unterbrochen und man kann sich dann in der IDE die Werte aller im Speicher vorhandenen Variablen ansehen. Ein für meinen Zweck sehr hilfreiches Feature.

Was wir hier machen nennt sich Remote Debugging. PHPStorm wird so konfiguriert, dass es weiß, welcher Server auf welchem Port verwendet wird und wartet dann auf einen speziellen Parameter beim Aufruf der lokalen Website. MAMP/XAMPP muss ebenfalls vorbereitet werden und den Parameter an PHPStorm weitergeben. Ich beschreibe die Vorgehensweise bei MAMP, da ich mit macOS arbeite.

MAMP vorbereiten

Dein PHP Interpreter benötigt die entsprechenden Informationen in seiner Konfigurationsdatei php.ini. Damit du die richtige Datei änderst, musst du in den Preferences herausfinden, welche PHP Version dein MAMP benutzt. In meinem Fall ist das PHP 7.0.12.

MAMP - PHP-Version
MAMP – PHP-Version

Nun musst du die passende php.ini Datei finden und ein paar Änderungen vornehmen. Die Datei liegt bei mir in /Applications/MAMP/bin/php/php7.0.12/conf.

php.ini
php.ini

Ganz am Ende der Datei müssen folgende Zeilen eingefügt werden, bzw. auskommentiert werden.

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php7.0.12/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so"
xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000
xdebug.idekey=PHPSTORM

Danach muss der Webserver neu gestartet werden.

PHPStorm vorbereiten

Ich lege mir für jede Website einen Unterordner in meinem /dev Ordner an, also in diesem Fall /dev/wordpress. In PHPStorm ist jede Website dann ein Projekt.

PHPStorm
PHPStorm

Das Remote Debugging muss in den PHPStorm Preferences konfiguriert werden (einfach nach dem Wort debug suchen). Die Standardwerte kannst du übernehmen, wichtig ist der Debug port 9000. Es muss der gleiche Port wie in der php.ini von MAMP sein.

Debug - Einstellungen
Debug – Einstellungen

In PHPStorm kann nun der Debugger eingeschaltet werden. Oben im Menu ist ein kleiner Telefonhörer, der im oberen Bereich rot ist (ausgeschaltet). Nach einem Mausklick ist er oben und unten grün, „hört“ also mit.

Debugger einschalten
Debugger einschalten

Jetzt fehlt noch die Verbindung zum MAMP. Rufe im Menü den Punkt Run -> Edit Configurations auf.

Remote Einstellungen
Remote Einstellungen

Unter dem Eintrag PHP Remote Debug musst du einen neuen Server einrichten (Name MAMP) und als IDE key den gleichen Schlüssel wie in der php.ini eintragen (PHPSTORM).

PHP Remote Debug
PHP Remote Debug

Debugging

Jetzt kann es losgehen. PHPStorm wartet auf das vereinbarte „Zauberwort“ (PHPSTORM) und MAMP auf einen Seitenaufruf. Bevor der kommt, musst du allerdings einen Haltepunkt festlegen. In meinem Beispiel nutze ich das PhotoSwipe Masonry Plugin (siehe Beitrag WordPress Galerie mit PhotoSwipe und Masonry Effekt) und möchte dort etwas in Erfahrung bringen. Ich öffne die Datei photoswipe-masonry.php und klicke die Zeilen 474 und 480 an. An dieser Stelle wird der Titel erzeugt, der unter der Einzelansicht eines Fotos angezeigt wird. Mein Ziel ist herauszufinden, ob die ID des mit dem Foto verknüpften Artikels als Variablenwert zur Verfügung steht.

Haltepunkte setzen
Haltepunkte setzen

Ich rufe die Website mit folgendem Parameter auf:
http://127.0.0.1/?XDEBUG_SESSION_START=PHPSTORM
und navigiere dann auf der Website an die Stelle mit dem Foto, wo der zusätzliche Link erscheinen soll.

PHPStorm hält tatsächlich automatisch an der von mir markierten Codezeile an und ich kann im Debug Fenster die Variablenwerte durchgehen. Der Aufbau der Website stoppt ebenfalls an diesem Punkt.
(Ein Klick auf den kleinen grünen Play Button im Debugger Fenster lässt das Programm zum nächsten Haltepunkt laufen).

Debugging Session
Debugging Session

WordPress behandelt ein Bild im Medienbereich intern als Post. Mein Bild hat die ID 23. Im Attachment Array sehe ich einen Eintrag mit dem Namen post_parent und der richtigen ID des Beitrags in dem das Bild benutzt wird (26). Hurra! Jetzt kann ich eine WordPress Funktion suchen, die mir den Titel des Beitrags liefert. Den Link zum Artikel kann ich mit der ID zusammenbauen (Vielleicht Stoff für einen neuen Beitrag 😉 ).

Fazit

Auch wenn es Anfangs etwas mühselig und zeitaufwendig ist und sicher nicht beim ersten Mal klappt, halte durch! Der Debugger spart dir viel Zeit und macht manche Dinge erst möglich, so dass du ihn nicht mehr missen möchtest.

Links:


tl;dr: Debugging ist nützlich, gar nicht schwer und funktioniert auch mit MAMP und XAMPP.

Kategorien
Content Management Systeme Site Builder Webdesign Wunschthema

WordPress Galerie mit PhotoSwipe und Masonry Effekt

Heute gibt es wieder ein Wunschthema. Es geht es um die Darstellung von Fotos in WordPress.

Im Zeitalter von Facebook, Pinterest, Instagram und ähnlichen Services sind die Ansprüche an die Darstellung von Fotos gestiegen. Besucher erwarten auch auf selbst gehosteten Websites eine schicke Darstellung. Auf allen denkbaren Geräten sollte eine Galerie einfach per Touch, Swipe, Pinch und Klick bedienbar sein und schnell laden.

Vermutlich hast du das Problem auch schon mal gehabt. Du wolltest Fotos auf deiner Website in einer Art Slideshow oder einem Grid darstellen. Nachdem die Galerie lief, hast du schnell festgestellt, dass es eben doch nicht auf allen Geräten gleich gut bedienbar war, ganz zu schweigen von der Ladezeit. Wenn dann noch individuelle Wünsche des Kunden kommen oder es einfach viele Fotos sind, verzweifelt man schnell.

PhotoSwipe

Die JavaScript Library PhotoSwipe ist eine echte Hilfe in solchen Fällen.

PhotoSwipe
PhotoSwipe

Sie zeichnet sich durch die folgenden drei Eigenschaften aus:

  • Modular: PhotoSwipe besteht aus zahlreichen Modulen, die es ermöglichen, nur die Teile der Bibliothek zu nutzen, die du wirklich brauchst. Das hält den JavaScript Code klein.
  • Responsiv: Photoswipe lädt das zur Bildschirmgröße passende Foto.
  • Touch Unterstützung: PhotoSwipe unterstützt die meisten Touch Gesten wie beispielsweise das „größer ziehen mit zwei Fingern“ und das Schließen der Einzelansicht durch „nach oben wischen“.

Photoswipe hat nur einen Haken. Es ist ein Stück Code, das nicht so einfach out of the Box funktioniert und Kenntnis von JavaScript erfordert.

Glücklicherweise gibt es eine gute Dokumentation und so etwas wie offizielle Plugins für RubyEmber.jsEagerKokenOrchardYellow CMSKirby und Drupal.

Es gibt kein offizielles WordPress Plugin aber es gibt mehrere WordPress Plugins, die die Bibliothek nutzen um die im WordPress Core bereits vorhandene Galeriefunktion zu erweitern.

WordPress Galerien erstellen

Bevor ich die PhotoSwipe Bibliothek hinzufüge, beschreibe ich zunächst den Weg, wie du in WordPress Galerien erstellst. Eine WordPress Galerie besteht aus existierenden Fotos, die du innerhalb eines Beitrags hinzufügen kannst. Klicke einfach auf den Dateien hinzufügen Button und wähle die entsprechenden Bilder aus.

WordPress - Galerie zusammenstellen
WordPress – Galerie zusammenstellen

Hinweis: Falls noch keine Fotos vorhanden sind, kannst du in diesem Schritt auch welche hochladen. Wechsle einfach in das Tab Dateien hochladen und wähle danach die Bilder aus.

Nach einem Klick auf den Galerie erstellen Button kannst du weitere Eigenschaften der Galerie wählen. Du kannst die Größe der Vorschaubilder auswählen, was bei einem Klick auf das Bild passieren soll, die Art der Sortierung, die Anzahl der Spalten und den Typ des Layouts.

Galerie Einstellungen
Galerie Einstellungen

Nach dem Speichern erscheinen die Bilder innerhalb der visuellen Ansicht im Editor. Du kann die Einstellungen weiterhin bearbeiten.

Galerie in der visuellen Ansicht des Editors
Galerie in der visuellen Ansicht des Editors

Wenn du in den Text Modus wechselst, siehst du, was hinter der Galerie steckt. Sie ist ein WordPress ShortCode, dem Parameter und Id’s der Bilder übergeben wurden.

Galerie - ShortCode
Galerie – ShortCode

Damit ist deine WordPress Galerie fertig und sieht auch o.k. aus (Ich probiere das hier beim Schreiben des Artikels im NOVATREND Blog aus, deshalb steht im Titel Privat).

WordPress-Galerie
WordPress-Galerie

Hier ein Beispiel einer Darstellung mit der WordPress Slideshow Option (noch ohne PhotoSwipe).

WordPress - DiaShow
WordPress – DiaShow

Beide Darstellungsarten funktionieren sehr gut, sehen aber doch recht „hausbacken“ aus.

Plugin PhotoSwipe Masonry Gallery

An dieser Stelle kommt das PhotoSwipe Masonry Gallery Plugin ins Spiel. Es arbeitet auf der Basis von WordPress Galerien und verändert deren Darstellung.

PhotoSwipe Masonry Gallery
PhotoSwipe Masonry Gallery

In den Einstellungen des Plugins kann die Größe der Thumbnails und die Maximalgröße des Einzelbildes eingestellt werden. Außerdem lässt sich ein weißer Hintergrund konfigurieren und der Masonry Effekt deaktivierten.

PhotoSwipe Einstellungen
PhotoSwipe Einstellungen

Das Ergebnis sieht sehr beeindruckend aus (Beispiel). Die Thumbnails ordnen sich je nach verfügbarem Platz an. In der Einzelansicht auf Touch Geräten kannst du dich durch die Bilder „wischen“ und diese auch auf Pinterest, Twitter und Facebook teilen. Jede Einzelansicht hat einen eindeutigen URL.

WordPress Galerie mit PhotoSwipe Masonry Plugin
WordPress Galerie mit PhotoSwipe Masonry Plugin

Durch die Nutzung der WordPress Galerien hat das Plugin einen angenehmen Nebeneffekt. Du musst keine Galerien separat erstellen und WordPress wird das eigene Galerie Feature sicherlich weiter pflegen.

Achtung: Die Anzahl der Bilder und die Größe der Thumbnails müssen beachtet werden, sonst kommt es zu langen Ladezeiten und dem Gegenteil dessen, was ich letzte Woche noch bemängelt habe. Das zur Neuberechnung der Thumbnails in den PhotoSwipe Einstellungen vorgeschlagene AJAX Thumbnail Rebuild Plugin funktioniert gut und sollte bei einer Änderung der Thumbnailgröße genutzt werden.

Links:


tl;dr: Mit PhotoSwipe lassen sich Fotos ansprechend darstellen