Einen WordPress Artikel via API und jQuery (…oder PHP) in HTML ausgeben


API´s und „Headless“ CMS sind in aller Munde. Auch WordPress stellt schon seit längerem Inhalte per REST API im JSON Format zur Verfügung. Die Einsatzszenarios sind für eine solche Verwendung vielfältig: Der Inhalt einer statischen Landingpage kann vom Redaktionsteam in der gewohnten WordPress Umgebung bearbeitet werden. Kein Entwickler muss mehr beauftragt werden. Oder es können Blog Beiträge in einem anderen PHP System (z.B. einer anderen WordPress Instanz, gerne aber auch Joomla oder Drupal) ausgegeben werden. React, Angular oder Vue.js Anwendungen können mit Inhalten bestückt werden usw. usw. Kurz gesagt: Das erfassen von Inhalten und deren Ausgabe kann komplett getrennt werden. Das Frontend kann auf einem beliebigen Technologie-Stack basieren und in einer beliebiegen Umgebung laufen. Zeit also für ein kleines Experiment: […]

Weiterlesen…

WordPress: Übergeordnete Templates im Child Theme überschreiben


Es gibt zwei Dinge die einem das Arbeiten als WordPress Theme Entwickler wirklich einfach und schmackhaft machen: Child Themes und die WordPress Template Hierarchie. Beides spart einem jede Menge Zeit und Nerven. Meistens jedenfalls. Leider gibt es genau einen Punkt an dem beides zusammen zu einem Problem wird: Wenn ein Parent Theme eine Template Datei enthält, die man im Child Theme überhaupt nicht nutzen will. Um das Problem (und seine Lösung) genauer zu verstehen muss ich ein wenig ausholen: Die WordPress Theme Hierarchie Um ein WordPress Theme entwickeln zu können braucht man nur genau zwei Dateien: Einmal die style.css (Theme Informationen und Styling) und eine index.php (Markup und Funktionalität). Zwar sollte man die Funktionalität weitestmöglich in die functions.php auslagern, diese […]

Weiterlesen…

.DS_Store Dateien und __MACOSX Ordner aus einer ZIP Datei entfernen.


Jeder der mit einem Mac arbeitet und schon einmal versucht hat ein WordPress Theme auf wordpress.org zu veröffentlichen wird mit allergrößter Wahrscheinlichkeit darauf hingewiesen, dass sich bestimmte Dateien in dem Verzeichnis befinden, die dort nicht hingehören. Dies ist im Normalfall eine Datei mit dem Namen .DS_Store sein. Diese Dateien sind für gewöhnlich unsichtbar. MacOSX speichert hier die Datei- und Ordnerstruktur, sowie Informationen zu Datei-Icons etc. ab. Diese Datei wird automatisch angelegt. Selbst wenn man die .DS_store Datei löscht, wird sie kurze Zeit später automatisch wieder angelegt. Gerade bei dem Einreichen eines WordPress Themes in das offizielle wordpress.org Verzeichnis ist dies besonders ärgerlich. Hier werden die .zip Ordner automatisch überprüft und gar nicht erst zu dem Review Prozess zugelassen, sollte sich […]

Weiterlesen…

WordPress Optimierung: Emoji´s los werden.


Seit WordPress 4.2 gibt es ein „ganz tolles“ neues Feature: Man kann Emoji ´s mit einbinden. Genau, diese kleinen zwinkernen Smilies, Bierkrüge die gegeneinander gestoßen werden usw. Das Problem: Es wird seit dieser Version auf jeder Seite das entsprechende Skript geladen. Egal ob man die Emoji´s benutzt oder nicht. Das Skript wird dazu auch noch im Head Bereich geladen, also dort wo man es aus Gründen der Ladezeitenoptimierung schon mal gar nicht haben will. Es scheint so als hätten die WordPress Core Entwickler beim Anblick der niedlichen kleinen Bildchen alle Regeln der Kunst vergessen. Es gibt nämlich auch keine Möglichkeit das Laden des Skripts im WP Backend zu unterbinden. Es gibt zwar unter Einstellungen -> Schreiben die Möglichkeit „Wandle Emoticons […]

Weiterlesen…

Mit verschiedenen Maßeinheiten in CSS rechnen: Die calc() Funktion


Will man in seinem Stylesheet Berechnungen anstellen denkt man heutzutage sofort an SASS oder „zumindest“ LESS. Schließlich kann man hier komplexe Formeln hinterlegen und mit Variablen arbeiten und so ein komplettes Layout mit wenigen Anpassungen neu „ausrechnen“. Aber SASS und LESS sind eben Präprozessoren. Sie stellen die Berechnung an lange bevor das Stylesheet im Browser des Users geladen wird. Was 100% Breite in Pixeln bedeutet, oder 100px in Prozent weiß zu diesem Zeitpunkt niemand. Schließlich hängt das ja von dem individuellen Endgerät ab. Relative und absolute Werte können so also nicht zusammen berechnet werden. So etwas wie: .a{ height: (100% + 100px); } kann z.B. in SASS nicht funktionieren. Schließlich sind 100% + 100px auf einem Smartphone etwas komplett anderes […]

Weiterlesen…

Web Design Inspiration #6: Kleine Agenturen


Lang ist es her das ich den letze Teil meiner Serie „Web Design Inspiration“ veröffentlicht habe. So in etwa 8 Monate. Wird also mal wieder Zeit für was „auf die Augen“. Dieses Mal habe ich mir fünf sechs klein(ere) Digital Agenturen aus der ganzen Welt ausgesucht. Deren Internetauftritt ist mir in den letzten Monaten wegen kleinerer und größerer Details besonders positiv in Erinnerung geblieben. Legen wir mal los: #1 heliom.ca (CAN) #2 blackpixel.com (USA) #3 weareadaptable.com (UK) #4 thisalso.com (USA) #5 rightcolours.com (GER) #6 vvsgroup.ch (CH) […]

Weiterlesen…

Der Slider ist tot, lang lebe der Slider!


Großformatige Slider auf Startseiten begleiten uns schon seit langem. Damals war es DAS neue Element um mehr Inhalte „above the fold“, also im zuerst sichtbaren Bereich einer Internetseite, unterzubringen. Juhu! Die JavaScript Leute haben sich gefreut, einfach weil sie es konnten. Die Marketing Leute haben sich gefreut weil sie mehr Marketing BlaBla unterbringen konnten. Die Designer haben sich gefreut weil sie sich nicht mehr für DAS EINE Bild entscheiden mussten. Und alle so „Jey, wir lieben Slider!“ Alle zufrieden, alles gut? „Und alle so „Jey, wir lieben Slider!“ Alle zufrieden, alles gut?“ Nur hat sich niemand zu der Zeit gefragt ob es für den User überhaupt Sinn macht. „User centered design“ war zwar schon ein Schlagwort, es fehlten aber noch […]

Weiterlesen…

WordPress benötigt Zugriff per FTP auf deinen Webserver – Fehlermeldung


Nach einer frischen WordPress Installation will man ja meist gleich loslegen. Zum Beispiel indem man benötigte Plugins oder Themes installiert. Das funktioniert bei WordPress normalerweise schnell und elegant per „on-click“ Installation im WordPress Backend. Hierbei kann es jedoch vorkommen das man auf diese Fehlermeldung stößt: Um diese Aktion durchführen zu können, benötigt WordPress Zugriff auf deinen Webserver. Bitte gib die FTP-Serverdaten ein, um fortzufahren. Falls du deine Zugangsdaten vergessen hast, so solltest du bei deinem Webhoster nachfragen. Das dürfte dann in etwa so aussehen: Stößt man auf diese Fehlermeldung liegt dies eigentlich immer an einem „Problem“ mit den Rechten des Datei-Besitzers. Läd man beispielsweise alle WordPress Dateien vor der Installation mit seinem eigenen FTP Account hoch, „gehören“ auch alle Dateien […]

Weiterlesen…

A/B Split Tests – Wieso, weshalb, warum?


Egal ob man nun einer bestimmten Entwicklungs- Philosophie folgt oder einfach nur dem gesunden Menschenverstand: Klar ist, dass bei der modernen (Web-) Entwicklung nur derjenige die Nase vorn hat, der sein Produkt ständig verbessert. Egal ob Shop, Blog, App, Newsletter oder Desktop – Anwendung. Klassische Situation in einem Team Meeting: Alle diskutieren ein neues Feature das heiß gewünscht ist. Da gibts dann die „Das wird NIEMALS klappen“ Fraktion und die „das wird bestimmt Super“ Abteilung. Am Ende sind sich aber alle, zumindest wenn sie ehrlich sind, einig, dass niemand wirklich weiß ob das Produkt durch das neue Feature verbessert wird. Also gar nicht erst bauen, oder bauen und hoffen das es schon besser wird? Beides blöd. Die spannende Frage ist […]

Weiterlesen…

SASS für Einsteiger – Teil1: Hintergründe & Installation


Jeder der gerne und viel mit CSS arbeitet kommt früher oder später an gewisse Grenzen. Insbesondere wenn man mit mehreren Personen zusammen an größeren Projekten arbeitet. Aber auch bei kleinen Projekten gibt es immer wieder diese Momente in denen man denkt: „Das könnte auch einfacher und logischer sein“. Und: „Warum muss ich dass alles immer wieder und wieder eingeben?“ Hier kommt SASS ins Spiel. SASS steht für „Syntactically Awesome StyleSheets“ und ist ein sogenannter CSS Präprozessor. Präprozessor weil aus einer SASS Datei eine CSS Datei erzeugt wird, BEVOR diese auf dem eigentlichen Server zum Einsatz kommt. Es geht also nicht darum irgendetwas auf Server- oder Clientseite zu verbessern oder zu optimieren. Es geht darum schneller, einfacher, effektiver und besser CSS […]

Weiterlesen…