Beim Entwickeln einer Website kann es frustrierend sein, wenn sich das Mobile-Menü ständig schliesst, egal was man in der Konsole anklickt. Mit diesem JavaScript-Snippet bleibt das Menü immer geöffnet, damit du das Design und Verhalten deiner Navigation kontrollieren kannst!
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.
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 jeden Beitrag öffnen zu müssen?
In dieser kurzen Anleitung zeige ich dir, wie du genau das erreichen kannst.
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.
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 mit den bestehenden Hooks im Mini-Cart verbinden. Das ist sozusagen wie die Sahnehaube auf dem Eisbecher – unglaublich nützlich! Besonders dann, wenn wir Produkte haben, die ACF-Felder verwenden und wir diese kleinen Schönheiten gerne im Mini-Cart zeigen möchten.
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 und dass du nicht über den Tisch gezogen wirst, wenn bestimmte Produkte einzeln versandkostenfrei sind.
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 einschränken und somit verhindern, dass deine Inhalte wild durcheinander gewirbelt werden. Also, lass uns gemeinsam für Ordnung sorgen und deiner Website den Schutz geben, den sie verdient hat!
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 Formular per AJAX in deine Website integrieren kannst.
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 Block-Patterns nutzen kannst!
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.
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 und damit die Nutzererfahrung auf ein ganz neues Level bringst.
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 Suchergebnisse in eine fesselnde Show verwandeln!
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 wird übrigens nicht mit get_stylesheet_directory_uri() ausgegeben, sondern mit get_theme_file_path(). Klar, oder?
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 dynamisches Formular erstellt, das E-Mails verschickt und dich sogar von deinen Konkurrenten abhebt!
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 erstellst du deinen Code im Handumdrehen und sparst dir die Zeit, um Code zu kopieren und anzupassen. Einfach magisch!
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 Methoden, wie du eine AJAX-Anfrage mit Nonce schützen kannst.
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 verarbeitest.
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 einfach erledigst!
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 deutlich verbessern kannst.
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.
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 geht.
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 es geht. Los geht’s!
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!
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. Also schnapp dir eine Tasse Kaffee, lehn dich zurück und lass uns loslegen!
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.
Wie eine Entwicklungsumgebung für WordPress per wp-env unter Windows aufgesetzt werden kann, ist in unserem Blogbeitrag Lokale WordPress-Umgebung mit wp-env beschrieben.