Menü

abhijit bossotto

personal thoughts in an impersonal world

«WordPress»-Development (Workflow Teil 1)

Seit vielen Jahren, genauer seit 2006, setze ich für meinen Weblog die «Open Source»-Software «Wordpress» ein. «Wordpress» bietet nebst vielen anderen Vorteilen auch die Möglichkeit, an die eigenen Wünsche mittels einem «Template» angepasst zu werden. Neben schier unendlichen Möglichkeiten der Erweiterung durch «Plugins» ist der Bereich des «FrontEnd»-Designs ein äusserst spannendes Feld.

Für meinen Arbeitgeber realisierte ich auf Basis von «Wordpress» und unzähliger Erweiterungen ein eigenes «Intranet» mit umfangreichen Funktionen. Im Zuge dessen entwickelte ich auch ein eigenes «Template» welches den Prinzipien von «Mobile First» folgt. «Mobile First» besagt letztlich nichts anderes, als dass ein Design zuerst auf mobilen Endgeräten (Smartphones, Tablets, etc.) funktionieren soll und erst in zweiter Linie auf konventionellen Computern.

Da ich mich nun vermehrt mit der «FrontEnd»-Entwicklung in «WordPress» beschäftigen möchte, musste ein (für mich) idealer «Workflow» her.

In einer losen Folge werde ich meinen «Workflow» näher vorstellen.

1) Tools

«Wireframing»: «Balsamiq Mockups»

Gerade wenn es darum geht, sich über ein zukünftiges Design ein Bild zu machen, können kleine Skizzen ungemein helfen. Ich verwende hierzu schon seit Jahren das kleine Werkzeug

«Balsamiq Mockups», welches Ideal für die Web-Entwicklung ist. Es bietet zahlreiche Möglichkeiten das Design in groben Zügen darzustellen. Es gibt auch einige Erweiterungen, mit denen man das kostenpflichtige Programm an seine Bedürfnisse anpassen kann.

IDE: «PhpStorm»

In einem meiner letzten Beiträge habe ich meine «IDE» kurz vorgestellt: «PhpStorm». Es ist immer noch meine erste Wahl wenn es um die Webentwicklung geht. Wie man « PhpStorm » für die Entwicklung das «Debugging» für «WordPress» verwenden kann, hat Stephen Carnam in einem Blog-Beitrag ausführlich geschildert. Und hier noch einige offizielle Worte der Entwickler über den «WordPress» Support in «PhpStorm». Ich verwende «PhpStorm» allerdings nur für die Entwicklung von «Themes». Natürlich kann man damit (und das wird mit «PhpStorm» wahrscheinlich ein Kinderspiel sein) auch «Plugins» entwickeln…

«Compiler»: «CODEKIT»

Seit einiger Zeit verwende ich «SASS» (http://sass-lang.com/) um meinen «Design»-«Workflow» zu beschleunigen. Bei «SASS» handelt es sich um einen Präprozessor, der mir die Erzeugung von «CSS»-Files ungemein erleichtert. So ermöglicht es «SASS», mit Variablen zu arbeiten oder mit Mixins gewisse Patterns abzubilden und wiederzuverwenden. Daneben ermöglicht es natürlich auch ein strukturierteres Handling der «CSS»-Files, man ist nicht mehr darauf angewiesen, alle Styles in ein Dokument zu werfen. Das wird anschliessend von «CODEKIT» automatisch erledigt. Damit man nun eine «CSS»-Datei erhält, die der Browser auch lesen kann, benötigt man einen «Compiler». Hier kommt nun «CODEKIT» ins Spiel. Mit diesem kleinen Werkzeug kann man verschiedene Sprachen kompilieren. Als nützliches Feature wird bei jedem Abspeichern der Dateien der Browser neu geladen und somit die Änderung sichtbar.

Anmerkung: Natürlich gibt es auch «SASS»-Support in «PhpStorm». Jedoch empfinde ich das Arbeiten mit «CODEKIT» als einfacher und mehr «mac-like».

FTP: «Transmit»

Zugegeben: Auch mit «PhpStorm» kann ich Dateien, die ich bearbeite, hochladen. Gerade die automatisierte Funktion, auch extern geänderte Dateien hochzuladen möchte ich nicht mehr missen. Manchmal jedoch ist ein modernes und schnelles FTP-Programm trotzdem nützlich. Hier setze ich seit vielen Jahren «Transmit» (http://panic.com/transmit/) der amerikanischen Firma «Panic». Eine besonders nützliche Funktion, die mir «Transmit» bietet, ist das erstellen von «gemounteteten Disks» (bei «Transmit» heisst das «Transmit Disk Feature»). Dabei handelt es sich um entfernte Ordner, die wie herkömmliche Volumen im Finder angezeigt werden und auch so reagieren.

Papier & Stifte

Für mich die wohl wichtigsten Werkzeuge sind immer noch Papier und Stift. Gerade wenn ich abends einmal eine Idee habe, möchte ich nicht immer an den Computer rennen und mir diese irgendwo in irgendeiner «App» festhalten. Deshalb habe ich immer ein «Moleskine Sketchbook» und ein paar Stifte («uni-ball broad waterproof um-153») in meiner Nähe oder in meiner Tasche um Ideen festzuhalten.

«WordPress» mit «Plugins» anpassen

Seit 2006 blogge ich auf www.abhijitbossotto.com. Mal mit mehr, mal mit weniger Effort und in höchst unregelmässigen Abständen. Das einzige, was relativ konstant ist, ist die Plattform, die ich verwende: «Wordpress» (darüber habe ich 2013 einmal einen Vortrag gehalten. Diesen kann man sich hier herunterladen).

«Wordpress» hat den unschätzbaren Vorteil, das man es mit einigen nützlichen «Plugins» erweitern und so neuen Anwendungsbereichen zuführen kann. Im folgenden möchte ich diejenigen kurz vorstellen, die ich momentan für www.abhijitbossotto.com nutze. Nach einer gründlichen Reinigung und «Speed»-Optimierung (https://www.cyon.ch/blog/WordPress-mit-5-Tricks-pfeilschnell-machen) (mit Dank an @cyon) läuft mein Blog nun so schnell wie eine Neuinstallation – und das immerhin mit über 600 Artikeln und einer Laufzeit von über 8 Jahren…

«All in One SEO Pack Pro»

semperplugins.com/plugins/all-in-one-seo-pack-pro-version

Bisher war ich ja eigentlich nicht unbedingt für «SEO»-Optimierungen zu haben. Habe nun aber dennoch beschlossen, dieses Tool einmal auszuprobieren. Es vereint im Grunde viele einzelne kleine Helfer unter einem übersichtlichen und einheitlichen Layout. Man kann damit ebenso die für Google so relevante «XML-Sitemap» bereitstellen wie die «Robots.txt» bearbeiten oder Daten für «Social Media» aufbereiten. Insgesamt ein sehr nützliches kleines Tool zu einem moderaten Preis.

«Antispam Bee»

antispambee.de

Normalerweise wird «Wordpress» mit «Akismet» als «SPAM»-Lösung ausgeliefert. Es kann aber verschiedene Gründe geben, die gegen den Einsatz dieser Lösung sprechen. Die Gründe hat Pascal Birchler in einem lesenswerten Beitrag veröffentlicht.

Gerade die Datenschutzbedenken haben mich dazu bewogen, mir Antispam Bee anzusehen. Das Tool verrichtet klaglos seinen Job und ich bin damit sehr zufrieden.

«BackUpWordPress Backup Plugin»

(inkl. «BackUpWordPress To Google Drive»)

wordpress.org/plugins/backupwordpress

Zugegeben, Cyon, mein Hoster, ist sehr zuverlässig. Dennoch kann ein Backup der eigenen Daten nie schaden. Genau dazu sind das Plugin «BackUpWordPress Backup Plugin» und dessen Erweiterung «BackUpWordPress To Google Drive» gedacht. Die Erweiterung ermöglicht es, völlig autonom erstellte Backups auf meinen «Google Drive»-Account zu verschieben. Ziemlich nützliche Sache. Zum Glück habe ich das bisher nie benötigt.

«Cachify»

cachify.de

Das kleine äusserst nützliche Gratis-«Plugin» vom Entwickler von «Antispam Bee» ermöglicht einer «Wordpress»-Installation einen ungeahnten Schub. Es «cacht» die bestehenden Seiten und minimiert so die Datenbankabfragen.

«Crazy Lazy»

wordpress.org/plugins/crazy-lazy

Wie «Cachify» und «Antispam Bee» stammt dieses kleine «Plugin» von Sergej Müller (weitere sehr coole «Plugins» findet man auf seiner Webseite). Es sorgt dafür, dass Bilder erst dann geladen werden, wenn sie auch tatsächlich auf dem sichtbaren Teil des Screens benötigt werden. Eben, ganz «lazy»…

«Last Year Post Widget»

wordpress.org/plugins/last-year-post-widget

Damit lasse ich mir Beiträge anzeigen, die sich in einem bestimmten Zeitraum befinden. Wie der Name schon sagt geht es um solche, die vor einem Jahr veröffentlicht wurden. Eine ganz nette Spielerei, die ich dafür verwende, um auf ältere Beiträge von mir hinzuweisen.

«NewStatPress»

wordpress.org/plugins/newstatpress

Natürlich möchte ich auch wissen, wie mein Blog so besucht wird. Obwohl mir die Besucherzahlen eigentlich egal sind, macht es dennoch Spass sie zu beobachten. Dazu verwende ich, nebst «Google Analytics» dieses kleine «Plugin».

«Pretty Link Pro»

prettylinkpro.com

Eine (optische) Spielerei stellt «Pretty Link Pro» dar. Das kostenpflichtige Tool ermöglicht es mir, eine eigene Kurz-Url verwenden zu können (in meinem Fall http://abi.mx/). Eine ausführliche Anleitung findet man drüben bei Philippe Wampfler.

«P3» («Plugin Performance Profiler»)

wordpress.org/plugins/p3-profiler

Gerade wer viele «Plugins» im Einsatz hat, bemerkt oftmals nicht, welche für eine Verlangsamung der Seite zuständig sein könn(t)en. Da hilft «P3», welches mit übersichtlichen Diagrammen die «Übeltäter» aufzeigt.

«Widget Logic»

wordpress.org/plugins/widget-logic

Das oben erwähnte «Plugin» «Last Year Post Widget» möchte ich nur für mich anzeigen lassen. Um eine gewisse «Logik» in meine «Sidebar» zu bringen, benutze ich das kleine Plugin «Widget Logic», welches ich bei Christian Leu gefunden habe.