Johannes Kinast
Startseite

Ist Tailwind CSS eine gute Idee für WordPress Themes & Plugins?

Johannes

Tailwind CSS hat sich in den letzten Jahren von einem belächelten CSS-Framework zu einem echten Schwergewicht entwickelt. Der Grund dafür ist einfach: Es nimmt euch komplett die Frage ab, wie ihr eure CSS-Klassen benennt: gar nicht!

Statt euch für jedes Element eures Designs eine oder mehrere Klassennamen auszudenken und die Klasse dann in eurem Stylesheet zu definieren, definiert ihr bei Tailwind den Style direkt über einfach zu merkende CSS-Klassen im HTML-Markup, z.B. block p-2 mx-3 mt-3 bg-gray-900 hover:bg-gray-700 text-white cursor-pointer. Aufgelöst sieht der genutzte Teil des Stylesheets wie folgt aus:

Weiterlesen „Ist Tailwind CSS eine gute Idee für WordPress Themes & Plugins?“

Laravel Tools für WordPress: Lokale Entwicklungsumgebung mit Valet

Johannes

Laravel ist ein PHP-Framework um komplexe Anwendungen zu erstellen und WordPress ein Content Management System um Inhalte zu verwalten und anzuzeigen. Zwar kann man in Laravel auch einen Blog wie bei WordPress umsetzen aber i.d.R. nutzt man Laravel eher für komplexere Anwendungen.

Um Laravel ist aber ein ganzes Ökosystem an nützlichen Tool entstanden, die man auch mit WordPress sehr gut nutzen kann. Meistens handelt es sich dabei um Tools für die Entwicklung z.B. von Plugin & Themes aber auch in anderen Bereichen lassen sie sich nutzen.

In dieser Serie möchte ich euch einige der Tools vorstellen. Den Anfang macht Laravel Valet:

Weiterlesen „Laravel Tools für WordPress: Lokale Entwicklungsumgebung mit Valet“

WordPress Snippet: Revisionen für Wiederverwendbare Blöcke aktivieren

Johannes

In meinen Augen sind die wiederverwendbaren Blöcke im WordPress Block Editor a.k.a. Gutenberg Gold wert. Ich nutze sie täglich. Allerdings wurde mit WordPress 5.7 die UI im Editor grundlegend geändert und sie integrieren sich fast nahtlos in den restlichen Content. Das für aber leider regelmäßig dazu, dass ein wiederverwendbarer Block von einem Autor unwissentlich bearbeitet wird. Eigentlich sollte das dank der Revisionen in WordPress kein Problem sein, leider sind sie aber für den wp_block Post Type, der für die wiederverwendbaren Blöcke verwendet wird, nicht aktiviert.

Weiterlesen „WordPress Snippet: Revisionen für Wiederverwendbare Blöcke aktivieren“

Laravel Tools für WordPress: Debuggen mit `dd` & `dump` statt `print_r`

Johannes

Das Diagnostizieren von Fehler beim Programmieren von WordPress Plugins & Themes in PHP sieht bei mir meistens wie folgt aus:

// ...
echo '<code>';
print_r($meine_variable_in_der_ich_einen_fehler_vermute);
echo '</code>';
exit;
// oder
echo '<pre>';
var_dump($meine_variable_in_der_ich_einen_fehler_vermute);
echo '</pre>';
die;
Code-Sprache: PHP (php)

Nicht besonders elegant, aber so sieht meistens die Praxis in PHP aus. Selbst in der offiziellen PHP Dokumentation gibt es keine sinnvollen Vorschläge, wie man in PHP sauber Fehler diagnostizieren kann.

Weiterlesen „Laravel Tools für WordPress: Debuggen mit `dd` & `dump` statt `print_r`“

Laravel Tools für WordPress: Webpack in elegant mit Laravel Mix 6

Johannes

In der kleinen Serie zu Laravel Tools für WordPress, habe ich euch bereits Laravel Valet für die lokale Entwicklungsumgebung vorgestellt. Heute geht es wieder um ein Tool, was euch bei der Entwicklung von Themes & Plugins helfen kann. Besonders, wenn ihr an Block Editor (Gutenberg) Blöcken schraubt.

Laravel Mix vereinfacht euch die Arbeit mit Webpack enorm und spätestens, wenn ihr euren ersten Block in JavaScript programmiert, kommt ihr nicht mehr an Webpack (oder einem anderen JavaScript-Modul-Packer) vorbei. Die Konfiguration von Webpack empfinde ich aber als sehr kompliziert. Vor allem, wenn man noch nie mit React gearbeitet hat. Laravel Mix nimmt euch die Konfiguration in 80% der Fälle ab und reduziert den Konfigurationsaufwand extrem.

Weiterlesen „Laravel Tools für WordPress: Webpack in elegant mit Laravel Mix 6“

Vue.js Components im WordPress Block Editor / Gutenberg anzeigen

Johannes

Gutenberg basiert ja (leider) auf React. Ich programmiere aber schon seit Jahren viel lieber mit Vue.js 2. Zwar habe ich mich damit abgefunden Blöcke für den Block Editor aka Gutenberg in React zu schreiben (wobei man nur sehr begrenzt eigentlich React verwendet, eher noch JSX), aber trotzdem verwende ich für einige Blöcke Vue.js. Im Fronend kein Problem, aber eine Vorschau im Block Editor angezeigt zu bekommen, inkl. Änderungen an den Attributen, war eine echte Herausforderung.

Weiterlesen „Vue.js Components im WordPress Block Editor / Gutenberg anzeigen“

WordPress 5.6: Standard für die Verlinkung von Bildern setzen

Johannes

Mit WordPress 5.6 wird endlich wieder die Option image_default_link_type im Block Editor/Gutenberg berücksichtigt. Für ihr oder ein anderer Nutzer eurer Website einen neuen Bild- oder Gallerie Block ein, werden die Bilder dann standardmäßig auf die Mediendatei, Anhangsseite oder (bisher der Standard) gar nicht verlinkt.

Weiterlesen „WordPress 5.6: Standard für die Verlinkung von Bildern setzen“

WordPress: Remote HTTP Request vor Timeouts absichern

Johannes

Zusätzliche Daten & Informationen über einen HTTP Requests in einem WordPress Plugin oder Themen zu laden ist eine sehr schöne Möglichkeit den eigenen Content mit zusätzlichen Informationen anzureichern. Ich nutzte für Travel-Dealz.de mehrere APIs z.B. um Klimadiagramme für Reiseziele bereitzustellen oder Status- und Vielfliegermeilen für einen Flug zu berechnen.

Allerdings werden die Abfragen i.d.R. beim Seitenaufruf durchgeführt und das kann den Seitenaufruf für den Besucher der Seite stark verzögern oder im schlimmsten Fall zu einem Timeout führen = der Besucher erhält nur eine Fehlermeldung und verlässt die Seite wieder.

Weiterlesen „WordPress: Remote HTTP Request vor Timeouts absichern“