Was HTMX ist<\/h2>\n![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/htmx-logo.png\")
Das HTMX-Logo<\/figcaption><\/figure>\nKurz gesagt ist HTMX<\/a> eine JavaScript-Bibliothek, die die Standard HyperText Markup Language (HTML)<\/a> erweitert, ohne dass du Vanilla- oder Framework-JavaScript<\/a> schreiben musst. Mit diesen Erweiterungen kannst du auch auf andere Technologien zugreifen:<\/p>\n\n- Asynchrones JavaScript und XML (AJAX).<\/strong> HTMX nutzt AJAX, um „asynchrone“ Anfragen an den Server auszuf\u00fchren. So kannst du die Seite teilweise aktualisieren, ohne sie komplett neu laden zu m\u00fcssen.<\/li>\n
- WebSockets.<\/strong> Du kannst WebSocket-Verbindungen aufbauen und eine bidirektionale Echtzeit-Kommunikation zwischen dem Browser und dem Server erm\u00f6glichen.<\/li>\n
- Server-Sent Events (SSE).<\/strong> Mit dieser Technologie kann der Server Daten an den Browser senden. Von dort aus kannst du HTMX verwenden, um Seiten in Echtzeit zu aktualisieren.<\/li>\n
- CSS-\u00dcberg\u00e4nge.<\/strong> Du kannst CSS-\u00dcberg\u00e4nge<\/a> integrieren, mit denen du flie\u00dfende und animierte Aktualisierungen auf deiner Seite vornehmen kannst.<\/li>\n<\/ul>\n
Im Kern zielt HTMX darauf ab, die Erstellung dynamischer, interaktiver Webanwendungen zu vereinfachen. Die wichtigste Funktion ist die Erstellung von GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code> und DELETE<\/code> HTTP-Anfragen<\/a> von HTML-Elementen. Das bedeutet, dass du glatte und reibungslose partielle Seitenaktualisierungen wie bei einer mobilen Anwendung verarbeiten kannst. Alles in allem ist HTMX ein leistungsstarkes Toolkit, mit dem du ein dynamisches Web-Erlebnis schaffen kannst, ohne dass du Unmengen von JavaScript-Code schreiben musst.<\/p>\nWarum alle \u00fcber HTMX reden<\/h2>\n
HTMX ist in letzter Zeit in aller Munde, denn die Suchanfragen nach der Bibliothek sind in den letzten f\u00fcnf Jahren<\/a> explodiert.<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/htmx-trends.png\")
Die Google Trends Grafik zeigt den Anstieg der Suchanfragen nach HTMX \u00fcber einen Zeitraum von f\u00fcnf Jahren<\/figcaption><\/figure>\nDieser Popularit\u00e4tsschub ist zum Teil auf die sozialen Medien und die Sichtbarkeit in Entwicklerforen zur\u00fcckzuf\u00fchren. HTMX hat jedoch mehrere Faktoren, die es zu einer attraktiven Entwicklungsoption machen.<\/p>\n
\n- Einfachheit.<\/strong> Da HTMX die vertraute HTML-Syntax verwendet, um dynamische, interaktive Webanwendungen zu erstellen, ist es super einfach zu implementieren und weist fast keine der Komplexit\u00e4t typischer JavaScript-Frameworks<\/a> auf.<\/li>\n
- Leistung.<\/strong> Durch die Minimierung der ben\u00f6tigten JavaScript-Menge kann HTMX schnellere Ladezeiten<\/a> und eine bessere Leistung als andere Frameworks bieten, insbesondere f\u00fcr mobile Ger\u00e4te.<\/li>\n
- Server-seitiges Rendering.<\/strong> Serverseitiges Rendering ist ideal, wenn du die Ladezeiten der Seite und die Suchmaschinenoptimierung (SEO)<\/a> verbessern willst. HTMX hat diese Funktion in sein Feature-Set integriert.<\/li>\n
- Progressive Verbesserung.<\/strong> Das bedeutet, dass Webseiten interaktiv gestaltet werden, ohne dass die Funktionalit\u00e4t f\u00fcr diejenigen, die JavaScript deaktivieren, beeintr\u00e4chtigt wird. HTMX arbeitet nach diesen Grunds\u00e4tzen, so dass auch die Barrierefreiheit gew\u00e4hrleistet ist.<\/li>\n<\/ul>\n
Au\u00dferdem erfordert HTMX im Gegensatz zu einigen gr\u00f6\u00dferen Frameworks keinen komplexen Build-Prozess oder eine Toolchain. In Kombination mit einem viel geringeren Lernaufwand ist es einfacher, die Bibliothek in deine Projekte zu integrieren.<\/p>\n
Diese Vorteile f\u00fchren dazu, dass HTMX hei\u00df diskutiert und immer mehr integriert wird. Wenn du auf der Suche nach einer unkomplizierten L\u00f6sung f\u00fcr die Erstellung interaktiver Webangebote bist, k\u00f6nnte diese Bibliothek deine Wahl sein.<\/p>\n
Die Architektur von WordPress im Verh\u00e4ltnis zu JavaScript<\/h2>\n
Die Geschichte von WordPress mit JavaScript wurde auf der State of the Word 2015<\/a> deutlich, als Matt Mullenweg mit dem Satz schloss: „Learn JavaScript deeply.“<\/p>\nDer typische Weg f\u00fcr WordPress-Entwickler\/innen war, den Bedarf an interaktiven und dynamischen Komponenten auf einer Website zu erforschen. In den meisten F\u00e4llen war jQuery<\/a> das bevorzugte JavaScript-Framework f\u00fcr WordPress. Sogar die beliebte Website der Harvard Gazette<\/a> baut auf jQuery auf:<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/harvard-gazette.png\")
Die Website der Harvard Gazette, die mit WordPress und jQuery betrieben wird<\/figcaption><\/figure>\nDaher setzt WordPress jQuery standardm\u00e4\u00dfig ein<\/a>. Dar\u00fcber hinaus wird jQuery von vielen Kernfunktionen, Plugins und Themes ausgiebig genutzt. Dieser Ansatz ist konsistent und hat eine breite Unterst\u00fctzung.<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/block-editor.png\")
Anzeige der Blocks-Seitenleiste im WordPress-Block-Editor<\/figcaption><\/figure>\nSo wie sich die Webentwicklung weiterentwickelt, so ver\u00e4ndert sich auch der Ansatz von WordPress in Bezug auf JavaScript. Die Einf\u00fchrung des Block-Editors<\/a> ging einher mit der Verwendung des React-Frameworks<\/a> f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen, insbesondere im WordPress-Dashboard.<\/p>\nDie Vor- und Nachteile der aktuellen JavaScript-Implementierung von WordPress<\/h3>\n
Das bedeutet, dass es eine Mischung aus Frameworks gibt, die im Kerncode von WordPress unterst\u00fctzt werden. Das hat einige Vor- und Nachteile. Zun\u00e4chst die positiven Aspekte:<\/p>\n
\n- Es gibt eine weitreichende Kompatibilit\u00e4t f\u00fcr React und jQuery. React ist ein leistungsstarkes und beliebtes Framework. jQuery ist seit langem mit WordPress verbunden.<\/li>\n
- Viele Entwickler\/innen sind mit den Frameworks vertraut, weil React und jQuery sehr beliebt sind. Au\u00dferdem findest du mehr Ressourcen, um beide zu erlernen und Fehler zu beheben.<\/li>\n
- WordPress bietet integrierte Unterst\u00fctzung f\u00fcr AJAX durch
wp_ajax<\/code>.<\/li>\n<\/ul>\nDiese Vorteile werden jedoch durch eine Reihe von Nachteilen aufgewogen:<\/p>\n
\n- Wenn du dich auf jQuery verl\u00e4sst<\/a>, leidet die Leistung deiner Website, und f\u00fcr manche Anwendungen brauchst du das Framework vielleicht gar nicht.<\/li>\n
- Aus Kompatibilit\u00e4ts- und Sicherheitsgr\u00fcnden sind nicht alle „modernen“ Features und Funktionen von JavaScript in WordPress implementiert. Das kann zu einem Problem werden, wenn du etwas Bestimmtes bauen m\u00f6chtest.<\/li>\n
- Mit der Hinzuf\u00fcgung von React zu einigen Bereichen von WordPress (z. B. den Block- und Site-Editoren) ist die Lernkurve noch h\u00f6her als je zuvor.<\/li>\n<\/ul>\n
Die aktuelle JavaScript-Architektur von WordPress ist geeignet, wenn du die empfohlenen Frameworks kennst oder die Zeit hast, sie zu lernen. Wenn nicht, wirst du wahrscheinlich eine L\u00f6sung suchen, die nicht die Komplexit\u00e4t der typischen Frameworks mit sich bringt und trotzdem ein modernes interaktives Erlebnis im Frontend bietet. Das ist der Punkt, an dem du HTMX in Betracht ziehen solltest.<\/p>\n
Warum HTMX f\u00fcr einige WordPress-Entwicklungsaufgaben besser geeignet sein k\u00f6nnte<\/h2>\n
HTMX bietet einige \u00fcberzeugende Vorteile, wenn es um die Entwicklung von WordPress geht. Es k\u00f6nnte einen Mittelweg zwischen der Einfachheit von jQuery und dem modernen, leistungsf\u00e4higen React darstellen.<\/p>\n
Wir haben bereits \u00fcber einige dieser Aspekte gesprochen, aber fassen wir sie noch einmal kurz zusammen:<\/p>\n
\n- Das „Gewicht“ von HTMX kann im Vergleich zu jQuery und React einen gro\u00dfen Einfluss auf die Leistung haben.<\/li>\n
- Die meisten WordPress-Entwicklerinnen und -Entwickler halten sich eher f\u00fcr Experten in HTML und PHP als in JavaScript. HTMX bietet eine leichtere Einstiegsh\u00fcrde, wenn du damit arbeitest, \u00e4hnlich wie mit einer Auszeichnungssprache.<\/li>\n
- Dank des serverseitigen Renderings arbeiten PHP und HTMX auch gut zusammen, was sich wiederum positiv auf die Leistung auswirken kann.<\/li>\n
- Obwohl HTMX eine „neuere“ Bibliothek ist, kannst du sie leichter integrieren und dich mit ihrer Funktionsweise vertraut machen. Das wird sich positiv auf deinen Arbeitsablauf auswirken.<\/li>\n<\/ul>\n
Bei der WordPress-Entwicklung gef\u00e4llt uns auch die Leichtigkeit, mit der du neue Funktionen f\u00fcr eine Website als Prototyp erstellen kannst. Du kannst schnell komplexe neue Funktionen entwickeln, indem du innerhalb des bestehenden HTML-Codes programmierst. Von dort aus hast du die Flexibilit\u00e4t, bei Bedarf React-Komponenten oder ein wenig jQuery einzubauen.<\/p>\n
Auch die progressiven Verbesserungsprinzipien von HTMX sind interessant. Zug\u00e4nglichkeit sollte ein zentraler Bestandteil deiner Designstrategie sein, und mit HTMX kannst du Interaktivit\u00e4t aufbauen, ohne sie f\u00fcr diejenigen zu unterbrechen, die JavaScript im Browser deaktivieren wollen.<\/p>\n
Ein gro\u00dfer Vorteil von HTMX ist, dass es keine speziellen serverseitigen Einstellungen erfordert. Du kannst dein HTMX-Markup mit jedem Host verwenden – auch mit Kinsta<\/a>.<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/kinsta-website.png\")
Die Kinsta-Startseite zeigt das MyKinsta-Dashboard<\/figcaption><\/figure>\nAngesichts der hochwertigen Leistung unserer Hosting-Angebote sollte eine Website, die HTMX nutzt, rasend schnell laufen. Das wirkt sich auf deine SEO-Kennzahlen, die Besucherzahlen, die Entwicklungsdauer, den Arbeitsablauf bei der Fehlersuche und die gesamte Entwicklungskette aus.<\/p>\n
Typische Anwendungsf\u00e4lle f\u00fcr HTMX<\/h2>\n
Wir haben es im letzten Abschnitt schon angedeutet, aber HTMX wird keine Bibliothek sein, die du als direkten Ersatz f\u00fcr eines der bekannteren JavaScript-Frameworks verwendest. Stattdessen wird sie am besten mit den bereits vorhandenen Frameworks zusammenarbeiten, um die Last dort zu schultern, wo es n\u00f6tig ist.<\/p>\n
Das bedeutet, dass du HTMX f\u00fcr bestimmte Aufgaben einsetzen wirst, f\u00fcr die jQuery und React vielleicht nicht optimal sind. Bevor wir uns mit der Implementierung von HTMX in WordPress besch\u00e4ftigen, stellen wir dir drei g\u00e4ngige Szenarien vor, in denen die Bibliothek WordPress verbessern kann.<\/p>\n
<\/div><\/kinsta-auto-toc>\nPartielles Neuladen von Seiten<\/h3>\n
Der wichtigste Anwendungsfall f\u00fcr HTMX ist die M\u00f6glichkeit, partielle Seitenaktualisierungen mit minimalem Aufwand durchzuf\u00fchren. Das k\u00f6nnte f\u00fcr viele Entwickler eine gro\u00dfe Sache sein, besonders f\u00fcr schnelle Mockups und Prototypen. HTMX k\u00f6nnte Ergebnisse in Produktionsqualit\u00e4t liefern.<\/p>\n
Es k\u00f6nnte dir zum Beispiel helfen, eine Live-Suchfunktion auf deiner Website zu implementieren:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/live-search.gif\")
Eine dynamische Live-Suchoberfl\u00e4che mit HTMX<\/figcaption><\/figure>\nDie HTMX-Beispielbibliothek<\/a> geht auch auf die Methodik f\u00fcr die Durchf\u00fchrung von Echtzeitaktualisierungen in anderen Inhaltsbereichen der Seite ein. In dem Beispiel<\/a> wird ein Kontaktformular mit einer Tabelle der verf\u00fcgbaren Kontakte verwendet, die aktualisiert wird, sobald ein Benutzer einen neuen Eintrag vornimmt. HTMX bietet eine Reihe von eleganten M\u00f6glichkeiten, dies zu erreichen:<\/p>\n<div id=\"table-and-form\">\n <h2>Contacts<\/h2>\n <table class=\"table\">\n <thead>\n <tr>\n <th>Name<\/th>\n <th>Email<\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"contacts-table\">\n\n ...\n\n <\/tbody>\n <\/table>\n\n <h2>Add A Contact<\/h2>\n\n <form hx-post=\"\/contacts\" hx-target=\"#table-and-form\">\n <label>\n Name\n <input name=\"name\" type=\"text\"> \n <\/label>\n\n <label>\n Email\n <input name=\"email\" type=\"email\"> \n <\/label>\n <\/form>\n<\/div>\n<\/code><\/pre>\nDas Formular verwendet die Attribute hx-post<\/code> und hx-target<\/code>, um sein Ziel zu erweitern. Du k\u00f6nntest auch HTMX-Attribute verwenden, um Formulareingaben<\/a> nach einem Fehler oder einem anderen Validierungsversuch, der Aktualisierungen verwendet, zu erhalten:<\/p>\n<input form=\"binaryForm\" type=\"file\" name=\"binaryFile\">\n\n<form method=\"POST\" id=\"binaryForm\" enctype=\"multipart\/form-data\" hx-swap=\"outerHTML\" hx-target=\"#binaryForm\">\n <button type=\"submit\">Submit<\/button>\n<\/form>\n<\/code><\/pre>\nHier platzierst du die Eingabe f\u00fcr die Bin\u00e4rdatei au\u00dferhalb des prim\u00e4ren Formularelements und verwendest die Attribute hx-swap<\/code> und hx-target<\/code>.<\/p>\nDynamisches Laden<\/h3>\n
Dieser Ansatz zum dynamischen Aktualisieren und Laden kann auch f\u00fcr h\u00e4ufigere Aufgaben geeignet sein. Nimm zum Beispiel das unendliche Scrollen<\/a>:<\/p>\n<tr hx-get=\"\/contacts\/?page=2\"\n hx-trigger=\"revealed\"\n hx-swap=\"afterend\">\n <td>Agent Smith<\/td>\n <td>void29@null.org<\/td>\n <td>55F49448C0<\/td>\n<\/tr>\n<\/code><\/pre>\nDas Attribut hx-swap<\/code> fungiert als „Listener“ f\u00fcr das Attribut hx-trigger<\/code>. Sobald ein Nutzer das Ende der Liste erreicht hat, l\u00e4dt HTMX die zweite Seite mit den Kontakten auf einer unendlichen Basis.<\/p>\nDie gleiche Methode kannst du auch f\u00fcr die Funktion „Lazy Loading“<\/a> anwenden:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/lazy-loading-gif.gif\")
Lazy Loading mit HTMX umsetzen<\/figcaption><\/figure>\nAuch hier werden die Attribute hx-get<\/code> und hx-trigger<\/code> verwendet, um einen HTMX-\u00dcbergang zu starten, der das Diagramm mit einer langsamen Einblendung l\u00e4dt.<\/p>\nDatenpr\u00e4sentation<\/h3>\n
Es d\u00fcrfte keine \u00dcberraschung sein, dass sich HTMX hervorragend f\u00fcr die Pr\u00e4sentation von Informationen auf dem Bildschirm mit interaktiven oder anderweitig dynamischen Elementen eignet.<\/p>\n
Du kannst zum Beispiel alle Arten der Inhaltsfilterung implementieren, wie z. B. die Auswahl von Werten<\/a>. Dabei werden die Optionen in einer Liste auf der Grundlage der Optionen in einer anderen Liste aufgef\u00fcllt:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/value-select-gif.gif\")
Verwendung von HTMX, um Site-Elementen Wertauswahlen zuzuweisen<\/figcaption><\/figure>\nGenauso einfach kannst du auch modale Dialoge<\/a> oder Registerkarten f\u00fcr die Benutzeroberfl\u00e4che einrichten. Hier siehst du auch, wie HTMX mit anderen Bibliotheken und Frameworks wie Bootstrap zusammenarbeitet:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/modal-box-gif.gif\")
\u00d6ffnen eines modalen Dialogfelds mit HTMX<\/figcaption><\/figure>\nDiese Flexibilit\u00e4t erstreckt sich auch auf die Implementierung von Registerkarten. Es gibt zwei M\u00f6glichkeiten, dies zu tun: entweder durch die Kombination von Vanilla JavaScript<\/a> und HTMX oder durch die Verwendung der HATEOAS-Prinzipien (Hypertext As The Engine Of Application State)<\/a>:<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/content-tabs.gif\")
Ein GIF einer Oberfl\u00e4che mit Registerkarten, die HTMX verwendet<\/figcaption><\/figure>\nEs gibt noch viele weitere M\u00f6glichkeiten, HTMX f\u00fcr Frontend-Seitenelemente zu nutzen, wobei der Kern auf der Serverseite liegt. Im n\u00e4chsten Abschnitt geben wir dir die Werkzeuge an die Hand, mit denen du deine eigene Vision in WordPress umsetzen kannst.<\/p>\n
Wie du HTMX in WordPress integrierst<\/h2>\n
Wenn du HTMX in deine WordPress-Website einbinden m\u00f6chtest, ist das eine gute Nachricht: Es geht schnell und problemlos. Im Folgenden stellen wir dir eine Vorgehensweise in drei Schritten vor. Wir werden nicht den gesamten Prozess und den Code zur Entwicklung von Funktionen f\u00fcr WordPress behandeln, aber wir werden alle wichtigen Punkte ansprechen, die du beachten musst.<\/p>\n
Au\u00dferdem sollte ein Gro\u00dfteil des Prozesses, insbesondere der erste Schritt, bekannt sein, wenn du bereits f\u00fcr WordPress entwickelt hast.<\/p>\n
<\/div><\/kinsta-auto-toc>\n1. Enqueue HTMX in deinem PHP-Code<\/h3>\n
Wie bei jedem zus\u00e4tzlichen Skript f\u00fcr WordPress musst du die HTMX-Bibliothek in den Code deines Themes oder Plugins einbinden.<\/p>\n
wp_enqueue_script('htmx-script', 'https:\/\/unpkg.com\/htmx.org@2.0.0\/dist\/htmx.min.js', array(), '2.0.0', true);\n<\/code><\/pre>\n
Kurz gesagt ist HTMX<\/a> eine JavaScript-Bibliothek, die die Standard HyperText Markup Language (HTML)<\/a> erweitert, ohne dass du Vanilla- oder Framework-JavaScript<\/a> schreiben musst. Mit diesen Erweiterungen kannst du auch auf andere Technologien zugreifen:<\/p>\n Im Kern zielt HTMX darauf ab, die Erstellung dynamischer, interaktiver Webanwendungen zu vereinfachen. Die wichtigste Funktion ist die Erstellung von HTMX ist in letzter Zeit in aller Munde, denn die Suchanfragen nach der Bibliothek sind in den letzten f\u00fcnf Jahren<\/a> explodiert.<\/p>\n Dieser Popularit\u00e4tsschub ist zum Teil auf die sozialen Medien und die Sichtbarkeit in Entwicklerforen zur\u00fcckzuf\u00fchren. HTMX hat jedoch mehrere Faktoren, die es zu einer attraktiven Entwicklungsoption machen.<\/p>\n Au\u00dferdem erfordert HTMX im Gegensatz zu einigen gr\u00f6\u00dferen Frameworks keinen komplexen Build-Prozess oder eine Toolchain. In Kombination mit einem viel geringeren Lernaufwand ist es einfacher, die Bibliothek in deine Projekte zu integrieren.<\/p>\n Diese Vorteile f\u00fchren dazu, dass HTMX hei\u00df diskutiert und immer mehr integriert wird. Wenn du auf der Suche nach einer unkomplizierten L\u00f6sung f\u00fcr die Erstellung interaktiver Webangebote bist, k\u00f6nnte diese Bibliothek deine Wahl sein.<\/p>\n Die Geschichte von WordPress mit JavaScript wurde auf der State of the Word 2015<\/a> deutlich, als Matt Mullenweg mit dem Satz schloss: „Learn JavaScript deeply.“<\/p>\n Der typische Weg f\u00fcr WordPress-Entwickler\/innen war, den Bedarf an interaktiven und dynamischen Komponenten auf einer Website zu erforschen. In den meisten F\u00e4llen war jQuery<\/a> das bevorzugte JavaScript-Framework f\u00fcr WordPress. Sogar die beliebte Website der Harvard Gazette<\/a> baut auf jQuery auf:<\/p>\n Daher setzt WordPress jQuery standardm\u00e4\u00dfig ein<\/a>. Dar\u00fcber hinaus wird jQuery von vielen Kernfunktionen, Plugins und Themes ausgiebig genutzt. Dieser Ansatz ist konsistent und hat eine breite Unterst\u00fctzung.<\/p>\n So wie sich die Webentwicklung weiterentwickelt, so ver\u00e4ndert sich auch der Ansatz von WordPress in Bezug auf JavaScript. Die Einf\u00fchrung des Block-Editors<\/a> ging einher mit der Verwendung des React-Frameworks<\/a> f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen, insbesondere im WordPress-Dashboard.<\/p>\n Das bedeutet, dass es eine Mischung aus Frameworks gibt, die im Kerncode von WordPress unterst\u00fctzt werden. Das hat einige Vor- und Nachteile. Zun\u00e4chst die positiven Aspekte:<\/p>\n Diese Vorteile werden jedoch durch eine Reihe von Nachteilen aufgewogen:<\/p>\n Die aktuelle JavaScript-Architektur von WordPress ist geeignet, wenn du die empfohlenen Frameworks kennst oder die Zeit hast, sie zu lernen. Wenn nicht, wirst du wahrscheinlich eine L\u00f6sung suchen, die nicht die Komplexit\u00e4t der typischen Frameworks mit sich bringt und trotzdem ein modernes interaktives Erlebnis im Frontend bietet. Das ist der Punkt, an dem du HTMX in Betracht ziehen solltest.<\/p>\n HTMX bietet einige \u00fcberzeugende Vorteile, wenn es um die Entwicklung von WordPress geht. Es k\u00f6nnte einen Mittelweg zwischen der Einfachheit von jQuery und dem modernen, leistungsf\u00e4higen React darstellen.<\/p>\n Wir haben bereits \u00fcber einige dieser Aspekte gesprochen, aber fassen wir sie noch einmal kurz zusammen:<\/p>\n Bei der WordPress-Entwicklung gef\u00e4llt uns auch die Leichtigkeit, mit der du neue Funktionen f\u00fcr eine Website als Prototyp erstellen kannst. Du kannst schnell komplexe neue Funktionen entwickeln, indem du innerhalb des bestehenden HTML-Codes programmierst. Von dort aus hast du die Flexibilit\u00e4t, bei Bedarf React-Komponenten oder ein wenig jQuery einzubauen.<\/p>\n Auch die progressiven Verbesserungsprinzipien von HTMX sind interessant. Zug\u00e4nglichkeit sollte ein zentraler Bestandteil deiner Designstrategie sein, und mit HTMX kannst du Interaktivit\u00e4t aufbauen, ohne sie f\u00fcr diejenigen zu unterbrechen, die JavaScript im Browser deaktivieren wollen.<\/p>\n Ein gro\u00dfer Vorteil von HTMX ist, dass es keine speziellen serverseitigen Einstellungen erfordert. Du kannst dein HTMX-Markup mit jedem Host verwenden – auch mit Kinsta<\/a>.<\/p>\n Angesichts der hochwertigen Leistung unserer Hosting-Angebote sollte eine Website, die HTMX nutzt, rasend schnell laufen. Das wirkt sich auf deine SEO-Kennzahlen, die Besucherzahlen, die Entwicklungsdauer, den Arbeitsablauf bei der Fehlersuche und die gesamte Entwicklungskette aus.<\/p>\n Wir haben es im letzten Abschnitt schon angedeutet, aber HTMX wird keine Bibliothek sein, die du als direkten Ersatz f\u00fcr eines der bekannteren JavaScript-Frameworks verwendest. Stattdessen wird sie am besten mit den bereits vorhandenen Frameworks zusammenarbeiten, um die Last dort zu schultern, wo es n\u00f6tig ist.<\/p>\n Das bedeutet, dass du HTMX f\u00fcr bestimmte Aufgaben einsetzen wirst, f\u00fcr die jQuery und React vielleicht nicht optimal sind. Bevor wir uns mit der Implementierung von HTMX in WordPress besch\u00e4ftigen, stellen wir dir drei g\u00e4ngige Szenarien vor, in denen die Bibliothek WordPress verbessern kann.<\/p>\n Der wichtigste Anwendungsfall f\u00fcr HTMX ist die M\u00f6glichkeit, partielle Seitenaktualisierungen mit minimalem Aufwand durchzuf\u00fchren. Das k\u00f6nnte f\u00fcr viele Entwickler eine gro\u00dfe Sache sein, besonders f\u00fcr schnelle Mockups und Prototypen. HTMX k\u00f6nnte Ergebnisse in Produktionsqualit\u00e4t liefern.<\/p>\n Es k\u00f6nnte dir zum Beispiel helfen, eine Live-Suchfunktion auf deiner Website zu implementieren:<\/p>\n Die HTMX-Beispielbibliothek<\/a> geht auch auf die Methodik f\u00fcr die Durchf\u00fchrung von Echtzeitaktualisierungen in anderen Inhaltsbereichen der Seite ein. In dem Beispiel<\/a> wird ein Kontaktformular mit einer Tabelle der verf\u00fcgbaren Kontakte verwendet, die aktualisiert wird, sobald ein Benutzer einen neuen Eintrag vornimmt. HTMX bietet eine Reihe von eleganten M\u00f6glichkeiten, dies zu erreichen:<\/p>\n Das Formular verwendet die Attribute Hier platzierst du die Eingabe f\u00fcr die Bin\u00e4rdatei au\u00dferhalb des prim\u00e4ren Formularelements und verwendest die Attribute Dieser Ansatz zum dynamischen Aktualisieren und Laden kann auch f\u00fcr h\u00e4ufigere Aufgaben geeignet sein. Nimm zum Beispiel das unendliche Scrollen<\/a>:<\/p>\n Das Attribut Die gleiche Methode kannst du auch f\u00fcr die Funktion „Lazy Loading“<\/a> anwenden:<\/p>\n Auch hier werden die Attribute Es d\u00fcrfte keine \u00dcberraschung sein, dass sich HTMX hervorragend f\u00fcr die Pr\u00e4sentation von Informationen auf dem Bildschirm mit interaktiven oder anderweitig dynamischen Elementen eignet.<\/p>\n Du kannst zum Beispiel alle Arten der Inhaltsfilterung implementieren, wie z. B. die Auswahl von Werten<\/a>. Dabei werden die Optionen in einer Liste auf der Grundlage der Optionen in einer anderen Liste aufgef\u00fcllt:<\/p>\n Genauso einfach kannst du auch modale Dialoge<\/a> oder Registerkarten f\u00fcr die Benutzeroberfl\u00e4che einrichten. Hier siehst du auch, wie HTMX mit anderen Bibliotheken und Frameworks wie Bootstrap zusammenarbeitet:<\/p>\n Diese Flexibilit\u00e4t erstreckt sich auch auf die Implementierung von Registerkarten. Es gibt zwei M\u00f6glichkeiten, dies zu tun: entweder durch die Kombination von Vanilla JavaScript<\/a> und HTMX oder durch die Verwendung der HATEOAS-Prinzipien (Hypertext As The Engine Of Application State)<\/a>:<\/p>\n Es gibt noch viele weitere M\u00f6glichkeiten, HTMX f\u00fcr Frontend-Seitenelemente zu nutzen, wobei der Kern auf der Serverseite liegt. Im n\u00e4chsten Abschnitt geben wir dir die Werkzeuge an die Hand, mit denen du deine eigene Vision in WordPress umsetzen kannst.<\/p>\n Wenn du HTMX in deine WordPress-Website einbinden m\u00f6chtest, ist das eine gute Nachricht: Es geht schnell und problemlos. Im Folgenden stellen wir dir eine Vorgehensweise in drei Schritten vor. Wir werden nicht den gesamten Prozess und den Code zur Entwicklung von Funktionen f\u00fcr WordPress behandeln, aber wir werden alle wichtigen Punkte ansprechen, die du beachten musst.<\/p>\n Au\u00dferdem sollte ein Gro\u00dfteil des Prozesses, insbesondere der erste Schritt, bekannt sein, wenn du bereits f\u00fcr WordPress entwickelt hast.<\/p>\n Wie bei jedem zus\u00e4tzlichen Skript f\u00fcr WordPress musst du die HTMX-Bibliothek in den Code deines Themes oder Plugins einbinden.<\/p>\n\n
GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code> und DELETE<\/code> HTTP-Anfragen<\/a> von HTML-Elementen. Das bedeutet, dass du glatte und reibungslose partielle Seitenaktualisierungen wie bei einer mobilen Anwendung verarbeiten kannst. Alles in allem ist HTMX ein leistungsstarkes Toolkit, mit dem du ein dynamisches Web-Erlebnis schaffen kannst, ohne dass du Unmengen von JavaScript-Code schreiben musst.<\/p>\nWarum alle \u00fcber HTMX reden<\/h2>\n
\n
Die Architektur von WordPress im Verh\u00e4ltnis zu JavaScript<\/h2>\n
Die Vor- und Nachteile der aktuellen JavaScript-Implementierung von WordPress<\/h3>\n
\n
wp_ajax<\/code>.<\/li>\n<\/ul>\n\n
Warum HTMX f\u00fcr einige WordPress-Entwicklungsaufgaben besser geeignet sein k\u00f6nnte<\/h2>\n
\n
Typische Anwendungsf\u00e4lle f\u00fcr HTMX<\/h2>\n
Partielles Neuladen von Seiten<\/h3>\n
<div id=\"table-and-form\">\n <h2>Contacts<\/h2>\n <table class=\"table\">\n <thead>\n <tr>\n <th>Name<\/th>\n <th>Email<\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"contacts-table\">\n\n ...\n\n <\/tbody>\n <\/table>\n\n <h2>Add A Contact<\/h2>\n\n <form hx-post=\"\/contacts\" hx-target=\"#table-and-form\">\n <label>\n Name\n <input name=\"name\" type=\"text\"> \n <\/label>\n\n <label>\n Email\n <input name=\"email\" type=\"email\"> \n <\/label>\n <\/form>\n<\/div>\n<\/code><\/pre>\nhx-post<\/code> und hx-target<\/code>, um sein Ziel zu erweitern. Du k\u00f6nntest auch HTMX-Attribute verwenden, um Formulareingaben<\/a> nach einem Fehler oder einem anderen Validierungsversuch, der Aktualisierungen verwendet, zu erhalten:<\/p>\n<input form=\"binaryForm\" type=\"file\" name=\"binaryFile\">\n\n<form method=\"POST\" id=\"binaryForm\" enctype=\"multipart\/form-data\" hx-swap=\"outerHTML\" hx-target=\"#binaryForm\">\n <button type=\"submit\">Submit<\/button>\n<\/form>\n<\/code><\/pre>\nhx-swap<\/code> und hx-target<\/code>.<\/p>\nDynamisches Laden<\/h3>\n
<tr hx-get=\"\/contacts\/?page=2\"\n hx-trigger=\"revealed\"\n hx-swap=\"afterend\">\n <td>Agent Smith<\/td>\n <td>void29@null.org<\/td>\n <td>55F49448C0<\/td>\n<\/tr>\n<\/code><\/pre>\nhx-swap<\/code> fungiert als „Listener“ f\u00fcr das Attribut hx-trigger<\/code>. Sobald ein Nutzer das Ende der Liste erreicht hat, l\u00e4dt HTMX die zweite Seite mit den Kontakten auf einer unendlichen Basis.<\/p>\nhx-get<\/code> und hx-trigger<\/code> verwendet, um einen HTMX-\u00dcbergang zu starten, der das Diagramm mit einer langsamen Einblendung l\u00e4dt.<\/p>\nDatenpr\u00e4sentation<\/h3>\n
Wie du HTMX in WordPress integrierst<\/h2>\n
1. Enqueue HTMX in deinem PHP-Code<\/h3>\n
wp_enqueue_script('htmx-script', 'https:\/\/unpkg.com\/htmx.org@2.0.0\/dist\/htmx.min.js', array(), '2.0.0', true);\n<\/code><\/pre>\n