Hallo Welt!
Als Webentwickler aus Leidenschaft
teilen wir hier gerne unsere Erfahrung und unser Wissen.
Wir freuen uns immer über Tipps und Kommentare.
-
Mehrseitiges Formular per Ajax
Aus UX-Gründen ist es sinnvoll, die Formular-Verarbeitung per AJAX umzusetzen. So bleibt der User nach dem Absenden des Formulars nicht nur auf der entsprechenden Seite, auch der unschöne Page-Reload entfällt.
-
Block-Patterns
Block-Patterns sind Vorlagen, die bereits mit einem Inhalt versehen sind. Der Inhalt kann dabei editiert werden. Block-Patterns eignen sich vor allem, um verschachtelte Blöcke anzubieten, wie zum Beispiel eine Card mit Bild, Titel, Text usw. In diesem Beitrag erklären wir, wie man Block-Patterns im eignen Theme oder als Plugin zur Verfügung stellt.
-
Block-Variations
Block-Variations eignen sich, um eine Variante eines Blocks zur Verfügung zu stellen, welche sich durch das Design vom originalen Block unterscheidet, und man kann die Werte der Block-Attribute setzen. Wie man dies im eignen Theme oder als Plugin umsetzt, erklären wir hier in diesem Beitrag.
-
Block-Styles
Block-Styles eignen sich, um eine Variante eines Blocks zur Verfügung zu stellen, welche sich lediglich durch das Design unterscheidet. Wie man dies im eignen Theme oder als Plugin umsetzt, erklären wir hier in diesem Beitrag.
-
Thumbnails für SERP generieren
Thumbnails auf Suchmaschinen-Ergebnisseiten erhöhen die Sichtbarkeit des Eintrages und somit dessen Klick-Rate. Hier beschreiben wir, wie man diese händisch hinzufügen kann.
-
Block-CSS oder -JS nachladen
Soll eine CSS- oder JS-Datei eines Blocks händisch nachgeladen werden, sollte zuerst geprüft werden, ob denn diese Datei überhaupt vorhanden ist. Mit der PHP-Funktion file_exists() kann dies abgefragt werden. Der Pfad zur Datei wird nicht mit der Funktion get_stylesheet_directory_uri() ausgegeben, sondern mit get_theme_file_path().
-
ACF-Formular in Block-Theme mit dynamischen Inhalten
In diesem Beitrag habe ich festgehalten, wie man in einem Block-Theme ein Formular mit dem beliebten Plugin Advanced Custom Fields als Block einbindet und die Formular-Felder dynamisch anpassen kann. Das Formular erzeugt eine Email an den Webseitenbetreiber.
-
WordPress Option Page Generator
Die diversen Generatoren von Extreme Ventures zum Erzeugen von WP-Code dürfte wohl den meisten WP-Benutzern bekannt sein. Auf der Suche eine einfache Optionsseite ohne grossen Aufwand zu erzeugen, bin ich auf den Option Page Generator von Jeremy Hixon gestossen. Für eine einfache Optionsseite genau das richtige, denn der Generator ist einfach gehalten – d.h. nicht mit Optionen überladen. Der Code ist im Handumdrehen generiert und erspart einem die Zeit für sonstiges Kopieren und Anpassen von Code.
-
WordPress AJAX mit Nonce sichern
WP beschreibt Nonce wie folgt: Nonce ist eine «einmalig verwendete Zeichenkette», die dazu dient, URLs und Formulare vor Missbrauch zu schützen. WordPress-Nonce ist ein Hash, der sich aus Zahlen und Buchstaben zusammensetzt. Nonce wird einmal verwendet und hat eine begrenzte «Lebensdauer». Im folgenden beschreibe ich zwei verschiedene Methoden, wie man eine AJAX-Anfrage mit Nonce absichert.
-
js-Objekte via AJAX übergeben
Für ein Projekt sollten per ACF-Formular mehr als ein paar Dutzend Eingabefelder per AJAX verarbeitet werden. Anhand dieses Beispiels zeige ich, wie man die Daten eines repeater-fields per js-Objekt übergibt und verarbeitet.
-
Bestehende WordPress-Instanz unter Docker laufen lassen
Mit dieser Anleitung kannst Du eine bereits bestehende WordPress-Seite mit Docker lokal bearbeiten. Voraussetzung dafür ist, dass Docker installiert ist, wenn dies nicht der Fall ist, kannst Du hier nachlesen, wie das geht.
-
Kommentar-Formular mit Javascript validieren
Das Kommentar-Formular wird bei WordPress statisch validiert. Wenn nicht alle Felder ausgefüllt worden sind, bedeutet dies einen Aufruf auf eine wenig ansprechende Seite. Etwas benutzerfreundlicher ist eine Validierung gleich auf dem Formular.
-
Woocommerce Mini Cart: Gutschein via AJAX hinzufügen
In einem Shop-Projekt haben wir aus UX-Design-Gründen die beiden Seiten Warenkorb und Kasse auf einer zusammengefasst, so dass der Zahlungsprozess möglichst kurz gehalten werden kann. Auf der neuen Check-Out-Page kommt als Warenkorb die Woocommerce Mini-Cart zum Einsatz, da diese sowieso schon eingebaut war. Da diese Mini-Cart ihren Inhalt per AJAX empfängt, haben wir nun auch die Gutschein-Funktionalität per AJAX der Mini-Cart hinzugefügt.
-
Core-Blocks erweitern
Einem Core-Block eine zusätzliche Option mitzugeben kann manchmal ganz praktisch sein. Mit einem selbstgeschriebenen Plugin ist dies gar nicht so eine Sache. Voraussetzung dafür ist, das Docker installiert ist, wie wir das beispielsweise hier beschrieben haben.
-
Embed Google Fonts
Google Fonts sind über die Google API komfortabel in eine Webseite einzubinden. Um die Schriften selber zu hosten (Ladezeit) – gibt es hier den coolen Helper von Mario Ranfti, welcher ein Font-Face-Snippet generiert und den entsprechenden Google Font direkt zum Download zur Verfügung stellt.
-
Basteln mit RaspberryPi und Stokys
Wann und woher wir auf die Idee kamen, wissen wir gar nicht mehr so genau, auf jeden Fall wollten wir irgendwann mal ein Schaufenster realisieren, welches über eine Interaktion ein sinnliches Erlebnis erzeugt. Wir haben den Sprung in die vielen Unbekannten, welche ein solches Projekt meistens nach sich zieht, gewagt, und nun nach unzähligen Stunden Recherche, Entwicklungs- und Bastelarbeiten sitzen die beiden Schwyzer Fasnachts-Figuren «Blätz» und «Domino» in unserm Schaufenster. Sie warten darauf, bis jemand ans Fenster klopft und beginnen sich dann zu bewegen.
-
Nested Blocks
Ein Block-Template mit einem Nested Block kann eine interessante Lösung sein, vorallem mit einem ACF-Block ohne Field. Es können ACF- wie auch Core-Blocks verwendet werden, die Ausgabe erfolgt über InnerBlocks.
-
ACF-Blocks ohne Field
ACF-Blocks können auch ohne ACF-Field erstellt werden. Zusammen mit einem Block-Template kann dies eine interessante Lösung sein, wie wir hier beschrieben haben.
-
Eigene Blocks für Gutenberg-Editor entwickeln
Um einen eigenen WordPress-Block zu entwickeln, gibt es verschiedene Tools. Offiziell von WordPress gibt es zum Beispiel das Tool Create Block. Wie man damit einen eigenen Block als Plugin entwickeln kann, stellen wir hier vor.
-
Entwickeln mit Docker
Die Entwicklung für den Gutenberg-Editor unterscheidet sich grundsätzlich von der herkömmlichen Entwicklung für WordPress, denn dieser setzt auf moderne Technologien wie JavaScript, Node.js, React und REST API. Also braucht es eine Entwicklungs-Umgebung, welche mit all diesen Javascript-Erweiterungen umgehen kann, und diese gegebenenfalls in die Sprachversion ES5 transformieren kann, denn die meisten Browser verstehen nur diese. Mit Docker kann man dies tun, hier beschreibe ich mein Setting.
-
Animationen mit Javscript
Mit Javascript können aufwändige Animationen umgesetzt werden, und es gibt zahlreiche Bibliotheken, die einem bei der Umsetzung unterstützen. Greensock ist eine solche Bibliothek – und sie ist fantastisch! ?
-
Isotope-Filter mit Toggle
Mit der beliebten Javascript-Bibliothek Isotope können HTML-Elemente gefiltert und sortiert werden. Für ein Projekt brauchte ich allerdings bei den Buttons eine Toggle-Funktion, welche die Bibliothek von sich aus nicht unterstützt. Im folgenden Beispiel habe ich diese Funktion hinzugefügt.
-
Oldie but goldie – Das Hamburger-Menü
Das Hamburger-Menü hat sich schon seit langem etabliert. Es ist zwar kein Hingucker mehr, aber manchmal reicht es auch, etwas einfachere Kost serviert zu bekommen. Eine schöne und schlanke Version von Jonathan Suh gibt es beispielsweise hier.
-
CSS-Animationen
Einfachere Animationen können nur mit CSS gemacht werden. Die coole Bibliothek animate.css ist schlank aufgebaut und funktioniert auf allen gängigen Browsern.
-
Helligkeit eines Bildes erkennen
Will man die Schriftfarbe an der Helligkeit eines Bildes anpassen, kann man dies auch dynamisch tun. Dazu muss allerdings auf dem Webserver die ImageMagick Extension installiert und aktiviert sein.