Hallo Welt!
Als Webentwickler teilen wir nicht nur gerne unsere Erfahrung und unser Wissen mit dir, sondern wir können es kaum erwarten, dir all unsere nerdigen Tricks zu zeigen!
Du hast Tipps und Kommentare? Perfekt! Wir nehmen gerne alles an, was uns dabei hilft, noch bessere Webseiten zu entwickeln. Wir lieben es, uns gegenseitig zu inspirieren – also zögere nicht, uns zu kontaktieren!
-
Google Workspace / Gmail als Mailserver für die Webseite verwenden
Schon mal mit Google Workspace oder mit Gmail betreffend Mailserver rumgeärgert? Falls nicht, hilft dir dieser Beitrag um ein paar graue Haare weniger zu bekommen. Im ersten Teil wird ausgeführt welche DNS-Einträge bei einem externen DNS-Host notwendig sind. Im zweiten wie man WP Mail konfiguriert, dass Mails auch über Google Mail problemlos versenden werden können.
-
Chat-GPT Tipps & CIDI
Nicht immer liefert Chat-GPT zufriedenstellende Antworten. Wir zeigen dir, womit du den Bot füttern musst, damit du bessere Ergebnisse erhälst.
-
Mini-Cart-Template als Block
Damit die Filter und Hooks im Mini-Cart-Block von WooCommerce weiterhin ihre magische Wirkung entfalten können, nehmen wir das Mini-Cart-Template und geben ihm ein neues Zuhause unter /dein-theme/woocommerce/cart/. Dort wird es dann nach unseren Vorstellungen angepasst. Diese kleine Veränderung eröffnet uns eine Welt voller Möglichkeiten, denn wir können nun die advanced custom fields nutzen und sie…
-
Elementen even/odd als Klasse hinzufügen (nth-of-class)
Hast du dich auch schon gewundert, wieso es zwar einen :nth-child() und einen :nth-of-type(), aber keinen :nth-of-class() Selektor in CSS gibt? In diesem Beitrag zeigen wir dir, wie du dies mithilfe einer einfachen JS-Funktion umsetzen kannst.
-
MP4-Datei in animierte WEBP-Datei konvertieren
Möchtest du eine MP4-Datei in ein animiertes WEBP-Format umwandeln? In diesem Beitrag zeigen wir dir, wie du dies mit ffmpeg problemlos bewältigen kannst, egal, ob du ein Mac- oder Windows-Benutzer bist. Los geht’s!
-
Woocommerce Versandarten anpassen
Wenn du jemals den Warenkorb in Woocommerce benutzt hast, dann weisst du, dass dieser manchmal wie ein wild gewordener Taschenrechner sein kann, der dir keine Versandoptionen anzeigt oder dir zu viel berechnet. Aber mach dir keine Sorgen, wir haben das im Griff! Mit unserem superduper Code-Ausschnitt können wir sicherstellen, dass die richtigen Versandoptionen angezeigt werden…
-
Woocommerce-Styles loswerden
Wenn du WooCommerce verwendest, bist du wahrscheinlich auch mit seinen vordefinierten Styles vertraut. Aber was, wenn du deinem Shop ein individuelles Aussehen verpassen möchtest? Dann musst du möglicherweise einige dieser Styles entfernen. Aber keine Sorge, das ist keine Operation am offenen Herzen. In unserem Blog-Beitrag zeigen wir dir, wie du die Styles auf die freundliche…
-
ACF-Block: Verwendung mit «lock» einschränken
Hast du auch manchmal das Gefühl, dass deine WordPress-Seite ein Eigenleben führt und du keine Kontrolle mehr über die Inhalte hast? Besonders ärgerlich ist es, wenn deine Mitarbeiter oder Kunden versehentlich wichtige Elemente löschen oder verändern. Aber keine Sorge, wir haben die Lösung für dich: Mit unserer brandneuen Lock-Block-Anleitung kannst du nun endlich die Blockverwendung…
-
Animierter Warenkorb-Button selber erstellen
Hast du jemals darüber nachgedacht, deinen «In den Warenkorb»-Button zum Leben zu erwecken? Mit einer schicken Animation kannst du deine Kunden zum Staunen bringen und ihre Kauflust steigern. Diese kleine Animation kann den Unterschied zwischen einem Warenkorb voller Produkte und einem verlassenen Warenkorb ausmachen. Lass uns diesen Button rocken!
-
Mehrseitiges Formular per Ajax entwickeln
Ein grossartiges Benutzererlebnis ist wie ein massgeschneiderter Anzug – nahtlos und perfekt angepasst. Und was könnte nahtloser sein als ein Formular, das mithilfe von AJAX verarbeitet wird? Kein störendes Neuladen der Seite, kein Verlassen des aktuellen Inhalts – stattdessen fliessendes Surfen wie auf einer Wasserrutsche! In diesem Artikel zeigen wir dir, wie du ein mehrseitiges…
-
Mit WordPress Block-Patterns arbeiten
Genervt von langwierigen Bastelarbeiten an komplizierten Blockstrukturen ohne das gewünschte Ergebnis? Wir haben die Lösung: Block-Patterns! Mit diesen praktischen Vorlagen sparst du Zeit und Mühe. Sie bieten vorgefertigte Inhalte, die du ganz einfach anpassen kannst. Kreiere im Handumdrehen komplexe Blockstrukturen, wie zum Beispiel eine elegante Card mit Bild, Titel und Text. Erfahre hier, wie du…
-
WordPress Block-Variations erstellen
Mit Block-Variationen kannst du deine Blocks zu echten Elton Johns machen. Deine Blocks können wie der legendäre Sänger in verschiedenen Outfits auftreten und das Publikum mit ihren vielfältigen Farben und Styles begeistern. In diesem Beitrag zeigen wir dir, wie du deine Blocks zu wahren Superstars machst und deine Kunden in Begeisterung versetzt.
-
Block-Styles in WordPress erstellen
Mit Block-Styles kannst du deinen Blöcken jetzt das gewisse Extra verleihen und sie zum absoluten Hingucker machen! Ob es um eine verrückte Farbgebung, eine ausgefallene Schriftart oder einfach nur um ein paar kreative Abstände geht – deiner Kreativität sind keine Grenzen gesetzt. In diesem Blog-Beitrag zeigen wir dir, wie du Block-Styles in der Praxis umsetzt…
-
Thumbnails für SERP generieren
Hast du genug von langweiligen Suchergebnissen? Dann haben wir genau das Richtige für dich parat: Eine Anleitung, wie du Thumbnails zu deinen Suchergebnissen zauberst! Mit diesen kleinen Helfern wird nicht nur deine Sichtbarkeit verbessert, sondern deine Einträge bekommen auch einen schicken neuen Look, der alle Blicke auf sich zieht. Lass uns zusammen loslegen und die…
-
Block-CSS oder -JS nachladen
Wenn Du Deinen CSS- oder JS-Block manuell nachladen möchtest, solltest Du sicherstellen, dass die Datei auch wirklich existiert. Sonst wird es schwierig. Du willst doch nicht versuchen, einen Block ohne CSS auszuführen? (Klingt wie eine Horrorvorstellung für Webdesigner!) Mit der PHP-Funktion file_exists() kannst Du ganz einfach überprüfen, ob die Datei existiert. Der Pfad zur Datei…
-
ACF-Formular individualisieren mit dynamischen Inhalten
Na, bist du bereit, mit Advanced Custom Fields und einem Block-Theme deine eigenen Formulare zu erstellen und die E-Mail-Eingänge von besorgten Besuchern zu bearbeiten? Dann schnall dich an und wir werden dir zeigen, wie du deine Website von der flachen Oberfläche zu einer interaktiven Wunderwelt machst! In diesem Blog-Beitrag wirst du lernen, wie man ein…
-
Mühelos zur Optionen-Seite dank Jeremy Hixon!
Kennst du schon die vielfältigen Code-Generatoren von Estreme Ventures für WordPress? Die sind schon ziemlich beeindruckend! Aber als ich nach einer einfachen Optionen-Seite gesucht habe, bin ich auf den Option Page Generator von Jeremy Hixon gestossen. Und was mir dabei am Besten gefällt: er ist super simpel – ohne überflüssigen Schnickschnack. Mit diesem coolen Generator…
-
Safety first: AJAX-Anfragen mit Nonce absichern!
WordPress erklärt Nonce so: Nonce ist wie ein magischer Geheimschlüssel, der URLs und Formulare vor böswilligem Missbrauch schützt. Er ist ein schlauer Hash, der aus Zahlen und Buchstaben besteht. Aber hier kommt der Clou: Nonce ist ein echter Einmalheld! Er wird nur einmal verwendet und hat ein begrenztes Verfallsdatum. Nun zeige ich dir zwei supercoole…
-
Dynamische Datenübertragung: Javascript-Objekte via AJAX übergeben
Ahoy! Du stehst vor einem epischen Projekt, bei dem du mit einem ACF-Formular mehr als nur ein paar Dutzend Eingabefelder per AJAX jonglieren musst. Aber keine Panik, ich bin hier, um dir den Weg zu erleichtern! In diesem sagenhaften Guide zeige ich dir, wie du die Daten eines repeater-fields geschickt als cooles js-Objekt übergibst und…
-
Bestehende WordPress-Instanz unter Docker laufen lassen
Willst Du Deine WordPress-Seite aufpeppen und sie noch cooler gestalten? Dann bist Du hier richtig! Mit Docker kannst Du Deine Seite lokal bearbeiten und sie in neuem Glanz erstrahlen lassen. Bevor es losgeht, solltest Du sicherstellen, dass Du Docker installiert hast – falls nicht, keine Panik, hier zeigen wir Dir, wie Du das schnell und…
-
Kommentar-Formular mit Javascript validieren
Weisst Du was mega uncool ist? Wenn man ein Kommentar auf einer WordPress Seite abgeben möchte und dann auf einer hässlichen, leeren Seite landet, nur weil man ein paar Felder im Kommentarformular vergessen hat auszufüllen. Zum Glück gibt es eine bessere Lösung! Wir zeigen Dir, wie Du mit einer Formular-Validierung direkt im Kommentarformular die Nutzererfahrung…
-
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…
-
WordPress Core-Blocks erweitern
Hey, hey! Du möchtest also einem Core-Block eine zusätzliche Option verpassen? Kein Problem! Mit einem selbstgeschriebenen Plugin ist das kinderleicht. Wenn du Docker bereits auf deinem System installiert hast, geht das auch noch super schnell! Falls du Docker noch nicht installiert hast, dann mach dir keine Sorgen. Hier findest du eine einfache Anleitung, wie das…
-
Helferlein, um Google-Fonts effizient selber zu hosten
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…
-
Strukturiere Deine Inhalte mit Nested-Blocks
Okay, hör zu, du willst also ein Block-Template mit einem Nested Block. Klingt fancy, aber eigentlich ist das total easy. Und weißt du was? Mit einem ACF-Block ohne Field wird das Ganze noch interessanter. Du kannst Core-Blocks oder ACF-Blocks einfügen und die Ausgabe erfolgt über InnerBlocks. Das klingt nach Zaubererei, aber ich zeige dir, wie…
-
ACF-Blocks ohne Field nutzen
Hast du schon mal von ACF-Blocks ohne ACF-Field gehört? Das ist so ziemlich wie ein Kuchen ohne Mehl oder ein Haus ohne Dach, aber es funktioniert trotzdem. Und wir haben das Geheimnis enthüllt, schau es dir an!
-
Eigene Blocks für Gutenberg-Editor entwickeln
Wenn du schon immer mal davon geträumt hast, deinen eigenen WordPress-Block zu entwickeln, dann bist du hier genau richtig. Denn in diesem Beitrag zeigen wir dir, wie du mit dem offiziellen WordPress-Tool namens Create Block deinen eigenen Block als Plugin entwickeln kannst – ohne dabei in die Tasten zu beissen oder dir die Haare auszuraufen.…
-
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.…
-
Erwecke deine Website mit GreenSock zum Leben
Mit Javascript und ein bisschen Magie kannst du deinen Webseiten Leben einhauchen und sie zum Tanzen bringen! Aber keine Sorge, du musst nicht allein zaubern. Die Bibliothek Greensock ist dein treuer Begleiter auf deiner Reise durch die wundersame Welt der Animationen. Mit ihren Superkräften kannst du spielend einfach komplexe Bewegungen und Übergänge zaubern und deine…
-
Isotope-Filter mit Toggle-Funktion erweitern
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ü
Na, bist du hungrig nach einer schnellen Lösung für ein Hamburger-Menü auf deiner Website? Dann haben wir hier etwas Leckeres für dich: Die Version von Jonathan Suh! Es mag zwar kein Gourmet-Menü sein, aber manchmal ist weniger eben mehr – und diese Lösung ist schön und schlank. Schau doch mal rein und lass es dir…
-
Schlanke Animationen mit animate.css
Mit der Bibliothek animate.css kannst du kinderleicht coole Animationen auf deiner Seite einbinden – und das ganz ohne JavaScript! Egal ob du einen Text hervorheben oder ein Bild bewegen möchtest, animate.css hat die passende Animation parat. Probier’s doch einfach mal aus und lass deine Seite lebendiger wirken!
-
Erfasse die Helligkeit eines Bildes mit PHP
Wer kennt das nicht: Die Schriftfarbe passt einfach nicht zum Hintergrundbild und man muss sich stundenlang mit Farbpaletten und Photoshop-Filtern herumschlagen. Aber hey, es gibt auch einen einfacheren Weg! Mit ImageMagick kann man die Schriftfarbe dynamisch an die Helligkeit des Hintergrundbildes anpassen. Einziger Haken: Die Extension muss auf dem Webserver installiert und aktiviert sein. Aber…