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

Kategorien
Allgemein Infrastruktur Server Services Shared Hosting Site Builder Webdesign Webserver Wunschthema

Entwicklungsworkflow für Deine Website(s)

Heute gibt es wieder ein Wunschthema. Es geht um die Art und Weise, wie du den Entwicklungsworkflow für deine Website organisierst.

Wenn du eine Website bei einem Service Provider wie NOVATREND hostest, musst du deine Entwicklungsarbeit an dieser Website organisieren. Im einfachsten Fall gibt es zwei Möglichkeiten.

  1. Du arbeitest live auf dem Server/Webhosting:
    Du installiert ein CMS per Installation-Skript, beispielsweise durch unser Installatron und arbeitest dann live weiter auf der Site.
    ACHTUNG: Seit November 2017 benutzen wir anstelle des Installatrons das Tool Softaculous. Im Beitrag Automatisierte Installation mit Softaculous beschreibe ich die grundlegenden Vorgehensweisen.
  2. Lokal auf deinem Rechner:
    Du installierst zunächst eine lokale Entwicklungsumgebung wie XAMPP, MAMP oder Vagrant/Virtual Box auf deinem lokalen Rechner. Du erstellt die Website lokal und irgendwann lädst du das Ergebnis „auf den Server“, beispielsweise mit einem FTP-Client.

Beide Varianten haben Vor- und Nachteile.
Der Vorteil (und Nachteil) bei Variante 1 ist, dass es nur eine Version der Website gibt und alle Änderungen sofort live sind. Der grösste Nachteil dabei ist, dass die Website offline ist, wenn du einen Fehler bei deinen Änderungen machst. Ausserdem hast du keine Testversion deiner Website, die du deinen Kunden zeigen kannst.
Bei Variante 2 umgehst du das Problem der Offline Zeiten durch eventuelle Fehler durch die Tatsache, dass du lokal auf deinem Rechner arbeitest. Du kannst deine Änderungen auch testen und dem Kunden auf deinem Rechner zeigen.  Du musst aber die von dir gemachten Änderungen irgendwie mit dem Server synchronisieren. Solange du allein arbeitest, klappt das noch ganz gut, spätestens wenn mehrere Personen an einer Seite entwickeln oder der Kunden nicht persönlich auf deinen Rechner gucken kann, wird es schwierig oder gar unmöglich.

Versionsverwaltung

Eine grundsätzlich gute Idee ist, den Quellcode deiner Website in einem Versionsverwaltungssystem zu lagern. Du kannst bei Fehlern zu einer älteren Version zurückkehren und mehrere Entwickler können am Code arbeiten. Für Kunden kann eine Testumgebung, meist stage genannt auf einem Live Server mit Passwortschutz bereitgestellt werden. Das von den meisten genutzte Versionsverwaltungssystem heisst Git. Es ist eine freie Software zur verteilten Versionsverwaltung von Dateien, die durch Linus Torvalds initiiert wurde. Quellcode wird in sogenannten Repositories gelagert. In einem Repository liegen alle Dateien. Das ist vergleichbar mit einem Fotoalbum, in dem Fotos liegen. Du kannst dir selbst einen Git Server einrichten, normalerweise benutzt man aber Services wie GitHub oder BitBucket, die den Quellcode lagern, auf Git basieren und viel komfortabler sind als eine selbst gehostete Lösung. Beide Services haben natürlich ein Geschäftsmodell. Bei GitHub musst du dafür bezahlen, wenn dein Code nicht öffentlich sichtbar, also privat, sein soll. Bei BitBucket sind private Repositories erlaubt, dein Team darf aber nicht mehr als fünf Entwickler haben. Du musst im Einzelfall entscheiden, was besser für dich passt.

Entwicklung und Deployment

Unter Entwicklung verstehe ich das Arbeiten am Code und unter Deployment die Übertragung der Änderungen auf ein Live System. Das ist auch für Nicht-Entwickler interessant, denn Design Anpassungen oder ganze Webseiten bei dateibasierten CMS stehen natürlich auch in Dateien.

Ein Beispiel mit BitBucket

Ich gehe im Beispiel davon aus, dass du deinen Website Quellcode nicht öffentlich verwalten möchtest. Da BitBucket es erlaubt, private Repositories kostenlos zu verwalten, werde ich es für das Beispiel nutzen. Ich möchte mit einer neuen Website in einer lokalen Entwicklungsumgebung beginnen, den Quellcode bei BitBucket versionieren und bei Bedarf mit dem Live Server synchronisieren.

Konto und Repository bei BitBucket anlegen

Als Erstes musst du dir ein BitBucket Konto anlegen. BitBucket kennt Projekte und Repositories. Du könntest beispielsweise ein Projekt anlegen und darin dann mehrere Repositories. Du kannst aber auch ein Repository ohne übergeordnetes Projekt anlegen.

BitBucket - Repository anlegen
BitBucket – Repository anlegen

Lokales Verzeichnis einrichten

Richte dir lokal ein Verzeichnis für deine Projekte ein, beispielsweise /dev, öffne eine Shell, gehe in dieses Verzeichnis und führe die folgenden Befehle aus.

git clone git@bitbucket.org:hagengraf/novatrendtest.git

Der Inhalt des novatrendtest Repositories wird „gecloned“, d.h. in das lokale Verzeichnis geladen. Git erstellt ein Verzeichnis mit dem Namen des Repositories. Wechsele in dieses Verzeichnis.

cd novatrendtest

Nun kannst du mit einem Texteditor oder dem folgenden Befehl eine Datei mit dem Namen README.md erzeugen und den Text „# My project’s README“ hineinschreiben. Du kannst sie auch test.txt oder meinewebsite.html nennen. Eine „read me“ Datei ist aber immer eine gute Idee, weil dort immer die wichtigste Informationen stehen.

echo "# My project's README" >> README.md

Die Datei muss dem Git System hinzugefügt werden, damit das die verschiedenen Versionen verwalten kann.

git add README.md

Dein lokales Git weiss nun, das es eine neue Datei gibt, weiss aber noch nicht, wann du mit deinen Änderungen soweit bis, das du sie abschliessen (commit) kannst. Der Befehl git commit signalisiert dem lokalen Git System, dass du deine Änderungen für abgeschlossen erklärst. Der Parameter -m übermittelt eine Bemerkung zu den Änderung (message), damit Dritte (und auch du selbst nach ein paar Monaten) nachvollziehen können, was du da geändert hast. Im unserem Fall ist es ein Initial commit, also eine erste Änderung

git commit -m "Initial commit"

Das lokale System ist nun up to date, das BitBucket System weiss aber noch nichts von deinen Änderungen. Der Befehl git push überträgt die letzten Änderungen (commits) an dein Bitbucket Repository (origin master).

git push -u origin master

Alles zusammen sieht in der Shell so aus:

Lokales Verzeichnis einrichten
Lokales Verzeichnis einrichten

Änderungen auf BitBucket angekommen?

Wenn du dein BitBucket Repository im Browser ansiehst, siehst du deinen ersten Commit mit der Nachricht Initial commit.

Initial commit
Initial commit

Wenn du auf die Nummer des Commits klickst, siehst du die Details. Du hast eine Zeile eingefügt!

Commit 5020980
Commit 5020980

Live Server

Zuletzt musst du auf deinem Live Server ebenfalls ein Verzeichnis einrichten, das mit dem BitBucket Repository verbunden ist. Um den Live Server zu aktualisieren, kannst du vom Server aus den Befehl git pull [option] eingeben und die Änderungen „pullen“ oder du konfigurierst sogenannte Webhooks, die die Änderungen aus BitBucket heraus auf den Server „pushen“.

Abhängig vom Provider und der Art des Servers gibt es viel Konfigurationsmöglichkeiten. Grundsätzlich benötigst du ein installiertes Git auf dem Server und einen Key, der in BitBucket hinterlegt werden muss. Ohne Key musst du bei jedem git pull ein Passwort eingeben, was auf die Dauer nicht praktikabel ist. Der Befehl für die Schlüsseleinrichtung ist ssh-keygen. Normalerweise wird der Key in ~/.ssh/id_rsa gespeichert. Im Dialog musst du bei der Abfrage, wo du den Key speichern willst, das Wort deploy_key eingeben und KEIN Passwort festlegen.

### SSH Key einrichten
$ ssh-keygen 
Generating public/private rsa key pair.
Enter file in which to save the key (~/.ssh/id_rsa): deploy_key
Enter passphrase (empty for no passphrase):

Gibt man wie oben gezeigt „deploy_key“ ein, erzeugt das Tool zwei Dateien im aktuellen Verzeichnis: deploy_key und deploy_key.pub.

Auf dem Server muss das Verzeichnis initialisiert werden (git init). Dann muss das existierende Verzeichnis geklont werden (git clone). Danach wird das remote Repository festgelegt (git remote add …).

Wenn diese Schritte erledigt sind, können Änderungen aus BitBucket mit dem Befehl git pull auf den Live-Server übertragen werden.

git init
git clone bitbucket git@bitbucket.org:hagengraf/novatrendtest.git
git remote add bitbucket git@bitbucket.org:hagengraf/novatrendtest.git
git pull

Hier in meinem Beispiel ist public_html das Live-Verzeichnis auf dem Server. Die Verzeichnisstruktur sieht folgendermassen aus (Befehl ls -al).

drwxr-xr-x 6 root root 4096 Nov 14 17:09 .
drwxr-xr-x 23 root root 4096 Nov 14 14:28 ..
-rw------- 1 novatrend novatrend 1675 Nov 14 16:39 deploy_key
-rw-r--r-- 1 novatrend novatrend 412 Nov 14 16:39 deploy_key.pub
drwxrwxr-x 7 novatrend novatrend 4096 Nov 14 16:37 .git
drwxr-xr-x 2 root root 4096 Jan 19 2016 logs
drwxrwxr-x 12 www-data www-data 4096 Nov 14 17:27 public_html

Wenn du Änderungen „pullen“ möchtest, musst du ins Verzeichnis public_html wechseln und den Befehl git pull eingeben.

Ein User-Interface für Änderungen (Source Tree)

Wenn die Basiseinstellungen eingerichtet sind, ist SourceTree eine hervorragende Software, mit der man die Änderungen in einfachen Projekten per Mausklick verwalten kann.

SourceTree
SourceTree

Ergebnis

Das Beispiel ist extrem einfach, enthält aber das Wesentliche. Es ist jetzt möglich

  1. lokale Änderungen an den Dateien vorzunehmen und zu „committen“ (git commit …).
  2. die Commits in das BitBucket Repository zu „pushen“ (git push).
  3. das BitBucket Repository mit dem Live-Server zu synchronisieren (git pull).

Auch wenn es anfangs aussieht als sei das alles sehr kompliziert, so überwiegen die Vorteile eindeutig. Zugegebenermassen ist es aber auch kompliziert :). Jede berechtigte Person kann sich nun eine lokale Entwicklungsumgebung einrichten, den Code „pullen“, Änderungen vornehmen und „committen“ und schliesslich auf den Live-Server einspielen. Wenn mehrere Entwickler am Code arbeiten, so können sie sogar in der gleichen Datei ändern, ohne sich „ins Gehege“ zu kommen. Genau das ist die wichtigste Voraussetzung für Team- und Remote-Arbeit.

Links


tl;dr: Versionsverwaltung ist die Basis einer geordneten Software Entwicklung und gar nicht so schwer!

Kategorien
Content Management Systeme Services Site Builder Webdesign

Ein Online Shop mit dem NOVATREND Site Builder

Der NOVATREND Site Builder bietet eine einfache Art der Erstellung von Websites. Im diesem Artikel habe ich den Site Builder bereits vorgestellt und die ersten Schritte beschrieben. Heute will ich zeigen, wie du deinen Online Shop konfigurieren kannst.

Shop einrichten

In der Administrationsoberfläche des Site Builders befindet sich in der linken Icon Leiste ein kleiner Warenkorb. Beim ersten Klick auf dieses Warenkorb Icon startet ein Dialog, in dem die wichtigsten Parameter abgefragt werden. Im ersten Schritt sind das der Name des Shops und die dazu gehörige E-Mail Adresse.

NOVATREND Site Builder - Shop einrichten
NOVATREND Site Builder – Shop einrichten

Zahlungsmethode

Im zweiten Schritt muss die Zahlungsmethode ausgewählt werden. Zur Auswahl stehen Stripe, PayPal und die Banküberweisung. Stripe ist ein relativ neuer Service, der in 25 Ländern angeboten wird. Er ermöglicht unter anderem Zahlungen per Kreditkarte und wiederkehrende, regelmäßige Zahlungen. PayPal und die klassische Banküberweisung kennst du vermutlich. In der Schweiz befindet sich Stripe momentan in einer privaten Betaphase.

NOVATREND Site Builder - Zahlungsmethode einrichten
NOVATREND Site Builder – Zahlungsmethode einrichten

Der folgende Screenshot zeigt die Stripe Konfigurationsmaske für Deutschland. Du gibst deine Firmeninformationen und deine Bankverbindung ein, den Rest erledigt Stripe!

Stripe - Nutzerdaten
Stripe – Nutzerdaten

In PayPal ist der Verbindungsaufbau ähnlich, ein existierender PayPal Account muss mit dem Site Builder verbunden werden.

PayPal Anbindung
PayPal Anbindung

Bei der Ersteinrichtung im Dialog kannst du nur eine Zahlungsmethode auswählen. Später kannst du weitere Zahlungsmethoden hinzufügen.

Versandkosten

Im nächsten Schritte kannst du beliebig viele Versandkosten konfigurieren. Die Kosten können abhängig vom Gewicht der Ware sein.

Versandkosten einrichten
Versandkosten einrichten

Shop Online stellen

Nach der Einrichtung der Zahlungsmethode und der Versandkosten kannst du deinen Shop bereits Online stellen und dann den Button Finish and manage products klicken.

Online / Offline
Online / Offline

Produkte anlegen

Bisher gibt es noch keine Produkte, also lege ich eins an. Du musst einen Titel, einen Beschreibungstext, beliebig viele Bilder, einen Preis und das Gewicht eingeben.

NOVATREND Site Builder - Produkt anlegen
NOVATREND Site Builder – Produkt anlegen

Nach dem Speichern musst du eine Kategorie zuordnen, die du im Dialog erstellen kannst. Eventuelle Produktvarianten kannst du ebenfalls festlegen. In meinem Fall biete ich Sand von unterschiedlichen Stränden an, normalerweise betrifft das eher Farbe und Grösse eines Kleidungsstücks oder eines anderen Produkts.

NOVATREND Site Builder - Produktvarianten
NOVATREND Site Builder – Produktvarianten

Shop auf der Website einbauen

Der Shop könnte nun beispielsweise im Menü verlinkt werden und/oder über einen Button aufrufbar sein. Ich nutze mein bereits existierendes Beispiel und verlinke den Button auf der Startseite. Dazu klicke ich erst auf Site und dann auf den Button. In der Seitenleiste erscheinen die Konfigurationsmöglichkeiten. Dort ordnest du dem Button einen Internal Link mit dem Ziel Store zu. Danach musst du die Site speichern und veröffentlichen.

Shop Link mit Button verbinden
Shop Link mit Button verbinden

Sand kaufen!

Nach dieser kurzen Konfiguration erscheint das Produkt nach einem Klick auf den Button und jeder kann es kaufen!
Die Variante Strand La Franqui ist voreingestellt.

Sand kaufen
Sand kaufen

Aufträge verwalten

Für den laufenden Betrieb des Shops gibt es eine Auftragsverwaltung und ein Analytics Modul, das die Zugriffe protokolliert und visualisiert. Steuern, Währungen und Maßeinheiten lassen sich in den Einstellungen konfigurieren. Du kannst Kommentare für individuelle Produkte zu den Bestellungen erlauben und auch beispielsweise Artikelnummern automatisch erzeugen lassen.

Fazit

Mit dem Site Builder lässt sich in kürzester Zeit ein Online Shop einrichten. Die Bedienung ist sehr intuitiv, komfortabel und, wenn möglich, in Dialogen organisiert.

Links


tl;dr: Jeder kann einen Online Shop mit dem NOVATREND Site Builder erstellen.

Save

Kategorien
Content Management Systeme Editoren Shared Hosting Site Builder Webdesign

Responsive Layouts mit dem WordPress Plugin Page Builder

Solange du einfache Layouts benutzt, sind Standard Content Management Systeme eine gute und nützliche Sache. Bei individuellen Layout Wünschen, wie beispielsweise einem Artikel, der aus mehreren Elementen wie Textteilen, Fotos und vielleicht einer Zeile mit drei Spalten besteht, wird die schnelle Umsetzung schon schwieriger. Erschwerend kommt hinzu, dass der Artikel natürlich responsiv sein sollte um auf einem mobilen Gerät gut dargestellt zu werden. Das Sahnehäubchen wäre noch, dass Autorinnen und Autoren bei besagtem Artikel das Layout selbst erledigen können.

Ein Beispiel für ein WordPress Plugin, dass genau das versucht, ist der Page Builder von SiteOrigin.

WordPress - Page Builder by SiteOrigin
WordPress – Page Builder by SiteOrigin

Als sinnvolle Ergänzung zum Haupt Plugin gibt es das SiteOrigin Widgets Bundle Plugin, das einen Editor und vordefinierte Widgets enthält, beispielsweise für Google Maps, selbst gehostete Videos, Slider und vieles andere mehr.

Wordpress - SiteOrigin Widgets Bundle
WordPress – SiteOrigin Widgets Bundle

Beitrags Layout verändern

Wenn du einen neuen Beitrag erstellst, musst du eine Überschrift und einen Text erstellen. Das Textfenster besteht normalerweise aus dem Visuell Tab mit einem WYSIWYG Editor und dem Text Tab. Nach der Installation des Page Builder Plugins erscheint ein zusätzliches Tab mit dem Namen Page Builder.

WordPress - Neuer Beitrag
WordPress – Neuer Beitrag

Das Page Builder Tab

Beim ersten Aufruf des Page Builder Tabs werden die verschiedenen Optionen angezeigt. Du kannst ein Widget, eine Zeile (Row) oder ein vordefiniertes Layout innerhalb des Beitrags erzeugen.

WordPress - Beitrag - Page Builder
WordPress – Beitrag – Page Builder

Beispiel: Ein Button

Ein einfaches Widget ist ein Button, der mit einem Link hinterlegt werden kann.

WordPress - Page Builder - Button
WordPress – Page Builder – Button

Nach dem Speichern siehst du in deinem Beitrag einen funktionsfähigen Button.

WordPress - Page Builder - Button im Beitrag
WordPress – Page Builder – Button im Beitrag

Außer dem Button stehen zahlreiche andere Widgets zur Verfügung. Page Builder nutzt neben eigenen Widgets natürlich auch die aus dem Widget Bundle Paket und bereits vorhandene WordPress Widgets.

WordPress - Page Builder - Widgets
WordPress – Page Builder – Widgets

Zeilen und Spalten

Mit Add Row lassen sich einzelne Zeilen einfügen, die wiederum aus beliebig vielen Spalten bestehen können. Die Spalten können mit beliebigen Widgets gefüllt werden. Du kannst also beispielsweise zwei Texte und einen Button in drei Spalten anzeigen.

WordPress - Page Builder - Zeile
WordPress – Page Builder – Zeile

Auf der Website sieht mein Beitrag dann so aus:

WordPress - Page Builder - Zeile mit drei Spalten
WordPress – Page Builder – Zeile mit drei Spalten

In einen Beitrag kannst du beliebig viele Zeilen einfügen.
Eine Spalte kann beispielsweise eine Google Map enthalten. Um die Karte anzeigen zu können, musst du über ein Google Konto verfügen und dir einen API Key erzeugen (kostenlos). Den Link zur Erstellung des API Keys findest du in den Einstellungen des Google Maps Widget.

Alle Layout Anpassungen wie beispielsweise das Verschieben der Reihen und Elemente werden in der Vorschau des Live Editors sofort nachvollzogen.

WordPress - Page Builder - Live Editor
WordPress – Page Builder – Live Editor

Vordefinierte Layouts

Auster den individuellen, selbst zusammengestellten Layouts, gibt es auch vordefinierte Layouts. Je nach verwendetem WordPress Template passen sie mehr oder weniger gut, sind allerdings vollständig anpassbar.

WordPress - Page Builder - vordefiniertes Layout
WordPress – Page Builder – vordefiniertes Layout

Fazit

Wenn du bereits WordPress benutzt und mit dessen Arbeitsweise vertraut bist, ist der Page Builder eine wirklich interessante Ergänzung. Der Arbeitsablauf ist übersichtlich und es stehen viele Widgets zur Verfügung.

Links


tl;dr: Mit dem Page Builder Plugin kannst das Layout von WordPress Beiträgen vielfältig verändern.

Save