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!
-
TemplateParts in der theme.json-Datei
Template Parts in der theme.json ermöglichen es, wiederverwendbare Layout-Bausteine wie Header, Footer, Sidebars oder beliebige andere Bereiche zu definieren. Diese modularen Elemente können im gesamten Theme eingesetzt und im Site Editor einfach angepasst werden, um die Flexibilität und Konsistenz des Layouts zu erhöhen.
-
customTemplates in der theme.json-Datei
Im Bereich customTemplates werden benutzerdefinierte Vorlagen definiert, die in den entsprechenden Post-Typen wie Page oder Post verwendet werden können.
-
Styles in der theme.json-Datei
Der Bereich styles in der theme.json-Datei definiert das das tatsächliche Aussehen der Webseite. In diesem Beitrag werfen wir einen detaillierten Blick auf den Bereich styles und wie dieser genutzt wird, um globale und Block-abhängige Designs zu steuern.
-
Settings in der theme.json-Datei
In diesem Beitrag werfen wir einen Blick auf den Bereich settings der theme.json-Datei. Wir zeigen dir, wie er verwendet wird, um Farben, Schriften, Layouts und mehr zu definieren.
-
Datenschutz – aber richtig
Seit dem Inkrafttreten des neuen Datenschutzgesetzes (DSG) am 1. September 2023 gibt es einige Missverständnisse, die zu unnötigem Aufwand und Verwirrung führen. Hier findest die fünf häufigsten Irrtümer.
-
Die Font-Weight Skala: Eine Übersicht
Die Font-Weight Skala definiert die visuelle Stärke von Schriften. Im CSS reicht sie von 100 (sehr dünn) bis 900 (sehr fett). Jeder Wert steht für eine spezifische Schriftgewichtung. Hier eine Übersicht der gebräuchlichsten Werte.
-
Zentriertes und responsives Masonry-Layout mit isotope.js
Mit Isotope.js wird dein Masonry-Layout nicht nur flexibel, sondern bleibt auch immer schön zentriert. Egal, ob auf einem kleinen Smartphone oder einem riesigen Monitor – der Code sorgt dafür, dass das Layout dynamisch angepasst wird und dabei stets in der Mitte bleibt. Erfahre, wie du Spaltenbreite und Abstände direkt aus dem CSS übernimmst und dein…
-
Lokale WordPress-Umgebung mit wp-env
Diese kurze Anleitung wird dir dabei helfen, die optimale Entwicklungsumgebung einzurichten, um Blöcke und andere Plugins für WordPress zu erstellen, die den Block-Editor erweitern und anpassen.
-
FSE-Templates in der Admin-Tabelle anzeigen
Kennst du das Problem, wenn du mit WordPress arbeitest und mehrere Templates für deine Beiträge verwendest? Die Übersicht kann leicht verloren gehen, besonders wenn du immer wieder nachsehen musst, welches Template für jeden Beitrag verwendet wird. Wie wäre es, wenn du direkt in der Admin-Tabelle sehen könntest, welches Template für jeden Beitrag verwendet wird, ohne…
-
Block aus Vorlage automatisch im Editor einem neuen Post hinzufügen
Hast du dich auch schon gefragt, wie man automatisch einen Block einer Vorlage einem neuen Beitrag im Editor von WordPress hinzufügt? Wir machen uns dabei zunutze, dass Blockvorlagen in der WordPress-Datenbank unter dem post_type ‹wp_block› und dem vergebenen ‹post_name› (in diesem Beispiel ‹auftritt-vorlage›) gespeichert werden.
-
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…