{"id":72028,"date":"2024-12-02T10:16:59","date_gmt":"2024-12-02T09:16:59","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=72028&#038;preview=true&#038;preview_id=72028"},"modified":"2024-12-10T15:28:52","modified_gmt":"2024-12-10T14:28:52","slug":"wp-scripts-entwicklung","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/","title":{"rendered":"Fortgeschrittene WordPress-Entwicklung: Wie du dein n\u00e4chstes Projekt mit wp-Skripten erstellen kannst"},"content":{"rendered":"<p>WordPress-Entwicklungsarbeit f\u00fcr Agenturen ist in den besten Zeiten hart umk\u00e4mpft. Sie erfordert h\u00f6chste Effizienz und Konsistenz \u00fcber mehrere Kundenprojekte hinweg.<\/p>\n<p>Unabh\u00e4ngig davon, wie erfahren du als Entwickler bist, erfordert die Verwaltung eines ganzen Portfolios von benutzerdefinierten Themes und Plugins immer wieder neue Anstrengungen, wenn es darum geht, den Workflow zu optimieren. Hier kommt <code>wp-scripts<\/code> ins Spiel: eine leistungsstarke Suite von Dienstprogrammen, die die Art und Weise, wie deine Agentur die WordPress-Entwicklung angeht, revolutionieren kann.<\/p>\n<p>In diesem umfassenden Leitfaden werden die M\u00f6glichkeiten von <code>wp-scripts<\/code> vorgestellt und Techniken f\u00fcr deine Build-Prozesse erkundet. Dabei geht es um optimierte Kompilierung und B\u00fcndelung, automatisiertes Linting, Unit-Tests und vieles mehr &#8211; all das wird dich ansprechen, wenn du mit mehreren wichtigen WordPress-Projekten jonglierst.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Das Konzept des Build-Prozesses<\/h2>\n<p>Bevor wir uns die Besonderheiten von <code>wp-scripts<\/code> ansehen, sollten wir das allgemeine Konzept des Build-Prozesses in der Webentwicklung verstehen. Dieser besteht aus einer Reihe von automatisierten Aufgaben, die dir helfen, deinen Quellcode in eine produktionsreife Anwendung oder Website zu verwandeln.<\/p>\n<p>Es gibt zum Beispiel viele Aufgaben, die auf diese Weise automatisiert werden k\u00f6nnen:<\/p>\n<ul>\n<li>Das Kompilieren von modernem JavaScript in browserf\u00e4higen Code.<\/li>\n<li>Die Umwandlung von CSS-Pr\u00e4prozessorsprachen (z. B. <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass<\/a>) in Standard-CSS.<\/li>\n<li>Mining und Optimieren von Assets wie <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>, CSS und Medien.<\/li>\n<li>Ausf\u00fchren von Linters, um potenzielle Fehler zu finden und Codierungsstandards durchzusetzen.<\/li>\n<li>Ausf\u00fchren von <a href=\"https:\/\/kinsta.com\/de\/blog\/laravel-unit-testing\/\">Unit-Tests<\/a>, um eine bessere Funktionalit\u00e4t des Codes sicherzustellen.<\/li>\n<\/ul>\n<p>Dies sind gute Aspekte, die in jedem <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-workflow\/\">Entwicklungsworkflow<\/a> automatisiert werden sollten, aber f\u00fcr Agenturen ist der Prozess genauso wichtig. Zun\u00e4chst einmal kannst du die Konsistenz \u00fcber mehrere Projekte (und dein Team) hinweg sicherstellen.<\/p>\n<p>Du kannst auch schneller entwickeln und bereitstellen durch k\u00fcrzere Zyklen und alle deine Projekte verwalten, indem du diese Konsistenz nutzt \u2013 selbst die komplexesten. F\u00fcr den Endnutzer wirkt sich die optimierte Leistung, die du erzielst, auf sein Gesamterlebnis aus.<\/p>\n<p>Normalerweise &#8222;schustert&#8220; deine Agentur individuelle Build-Prozesse mit Tools wie <a href=\"https:\/\/community.kinsta.com\/t\/install-node-and-gulp\/2804\" target=\"_blank\" rel=\"noopener noreferrer\">Gulp<\/a>, <a href=\"https:\/\/gruntjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Grunt<\/a> oder sogar manuellen Prozessen zusammen. Diese Methoden f\u00fchren jedoch oft zu Inkonsistenzen zwischen den Projekten und verursachen einen erheblichen Wartungsaufwand.<\/p>\n<h2>wp-scripts: ein Workflow-\u00c4nderer f\u00fcr die WordPress-Entwicklung in einer Agentur<\/h2>\n<p>Im Zusammenhang mit WordPress kann ein Build-Prozess auch die Entwicklung von Themes und Plugins erheblich vereinfachen. So kannst du moderne Tools und Praktiken nutzen und gleichzeitig die Plattformkompatibilit\u00e4t sicherstellen.<\/p>\n<p>Das Paket <code>@wordpress\/scripts<\/code> &#8211; <code>wp-scripts<\/code> in diesem Beitrag &#8211; ist eine Sammlung von Konfigurationsdateien und Skripten, die dir helfen, den Build-Prozess f\u00fcr WordPress-Projekte zu vereinfachen.<\/p>\n<figure id=\"attachment_186951\" aria-describedby=\"caption-attachment-186951\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-186951 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/wp-scripts.png\" alt=\"Ein Code-Ausschnitt, der den Skriptabschnitt einer package.json-Datei f\u00fcr ein WordPress-Projekt anzeigt. Er listet verschiedene npm-Skripte f\u00fcr Aufgaben wie das Erstellen, das \u00dcberpr\u00fcfen von Engines und Lizenzen, das Formatieren, das Linting (f\u00fcr CSS-, JavaScript-, Markdown-Dokumente und package.json), das Aktualisieren von Paketen, das Erstellen von Plugin-Zip-Dateien, das Starten des Projekts und das Ausf\u00fchren von Tests (sowohl End-to-End- als auch Unit-Tests) auf. Alle Skripte verwenden wp-scripts als Basisbefehl.\" width=\"1200\" height=\"842\"><figcaption id=\"caption-attachment-186951\" class=\"wp-caption-text\">Teil einer wp-scripts Referenz f\u00fcr die verschiedenen Skripte, die ein Projekt verwenden wird<\/figcaption><\/figure>\n<p>Das Make WordPress Core Team entwickelt und pflegt das Paket, das in den Block- und Site-Editor integriert ist. Das Beste ist, dass du es auch f\u00fcr die Entwicklung eigener Themes und Plugins nutzen kannst.<\/p>\n<p>Wenn du die WordPress-Entwicklung in einer Agentur in gro\u00dfem Ma\u00dfstab angehen willst, ist <code>wp-scripts<\/code> ein zentraler Bestandteil des Workflows. Es ist mehr als ein einfaches Build-Tool; es ist eine umfassende L\u00f6sung f\u00fcr moderne WordPress-Projekte, die den Anforderungen an einen ausgefeilten Entwicklungs-Workflow gerecht wird.<\/p>\n<h3>Die wichtigsten Funktionen von wp-scripts<\/h3>\n<p>Da immer mehr moderne JavaScript-Praktiken in das WordPress-\u00d6kosystem einflie\u00dfen, brauchen wir mehr standardisierte Build-Tools, um sie zu ber\u00fccksichtigen. Ein einheitliches Build-Toolset in Form von <code>wp-scripts<\/code> kommt dem gesamten WordPress-Entwicklungssystem zugute.<\/p>\n<p>Als solches bietet <code>wp-scripts<\/code> eine Reihe von Funktionen, die die WordPress-Entwicklung effizienter machen:<\/p>\n<ul>\n<li><strong>Null-Konfigurations-Setup.<\/strong> Du kannst beginnen, ohne komplexe <a href=\"https:\/\/kinsta.com\/de\/blog\/vite-vs-webpack\/\">Webpack-Konfigurationen<\/a> vornehmen zu m\u00fcssen.<\/li>\n<li><strong>Moderne JavaScript-Unterst\u00fctzung.<\/strong> Dein ES6-Code wird f\u00fcr die Browserkompatibilit\u00e4t transpiliert und gibt dir mehr Vertrauen in seine Genauigkeit.<\/li>\n<li><strong>Integrierte CSS-Verarbeitung.<\/strong> Wenn du CSS-Pr\u00e4prozessoren wie Sass verwendest, erh\u00e4ltst du Out-of-the-Box-Unterst\u00fctzung.<\/li>\n<li><strong>Werkzeuge zur Codequalit\u00e4t.<\/strong> Das Paket integriert sowohl <a href=\"https:\/\/kinsta.com\/de\/blog\/vscode-erweiterungen\/#1-prettier\">ESLint als auch Prettier<\/a> f\u00fcr konsistenten Code-Stil und Qualit\u00e4t.<\/li>\n<li><strong>Testhilfsmittel.<\/strong> F\u00fcr Unit-Tests und eine einfache Ausf\u00fchrung steht dir <a href=\"https:\/\/kinsta.com\/de\/blog\/jest\/\">Jest<\/a> im Paket zur Verf\u00fcgung.<\/li>\n<li><strong>Hot Reloading.<\/strong> Wenn du die M\u00f6glichkeit hast, deine \u00c4nderungen live nachzuladen, kann das deine Entwicklungszeit beschleunigen.<\/li>\n<\/ul>\n<p>Zusammengenommen bietet <code>wp-scripts<\/code> viele wichtige Vorteile f\u00fcr Agenturen, die mehrere WordPress-Projekte verwalten. So kannst du zum Beispiel deine Entwicklungsumgebung f\u00fcr alle Projekte standardisieren und den Build-Prozess auch f\u00fcr neue Projekte wiederholen. Mit dem Paket kannst du deine Build-Tool-Abh\u00e4ngigkeiten zentralisieren, was die Verwaltung von Updates und Sicherheitspatches vereinfacht.<\/p>\n<p>Insgesamt kannst du dir weniger Sorgen \u00fcber Kompatibilit\u00e4tsprobleme machen, deine Einrichtungszeit verk\u00fcrzen und viele der typischen Fehler ausmerzen, die dir in einem weniger schlanken Build-Prozess unterlaufen.<\/p>\n<h3>Vergleich von wp-scripts mit einem typischen WordPress-Entwicklungsprozess<\/h3>\n<p>Bei der typischen WordPress-Entwicklung <a href=\"https:\/\/kinsta.com\/de\/blog\/wp-enqueue-scripts\/\">werden Skripte und Styles oft manuell in die Warteschlange gestellt<\/a>. Au\u00dferdem schreibst du wahrscheinlich <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\">Vanilla JavaScript<\/a> oder <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/\">jQuery<\/a> und verl\u00e4sst dich auf Build-Tools von Drittanbietern &#8211; oder auf gar keinen Build-Prozess.<\/p>\n<p>Im Gegensatz dazu bietet wp-scripts einen modernen, integrierten Ansatz in fast allen Bereichen:<\/p>\n<table>\n<tbody>\n<tr>\n<td>Element<\/td>\n<td>Typische Entwicklung<\/td>\n<td>wp-scripts<\/td>\n<\/tr>\n<tr>\n<td>JavaScript<\/td>\n<td>Oft Vanilla JavaScript oder jQuery<\/td>\n<td>ES6 und React Unterst\u00fctzung<\/td>\n<\/tr>\n<tr>\n<td>CSS<\/td>\n<td>Direktes CSS oder einfache Pr\u00e4prozessoren<\/td>\n<td>Unterst\u00fctzung f\u00fcr Sass und PostCSS-Verarbeitung<\/td>\n<\/tr>\n<tr>\n<td>Build-Prozess<\/td>\n<td>Ein manuelles oder benutzerdefiniertes Setup mit Gulp oder Grunt<\/td>\n<td>Null-Konfigurations-Setup mit Webpack, das in das Paket integriert ist.<\/td>\n<\/tr>\n<tr>\n<td>Code-Qualit\u00e4t<\/td>\n<td>Manuelles Linting oder separate Tools, die in deinen Code-Editor integriert sind<\/td>\n<td>ESLint und Prettier sind in die wp-Skripte integriert<\/td>\n<\/tr>\n<tr>\n<td>Unit-Tests<\/td>\n<td>Wenn es sich nicht um einen \u00fcbersehenen Schritt handelt, gibt es normalerweise eine separate Einrichtung<\/td>\n<td>Das Paket integriert Jest-Tests<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Im Gro\u00dfen und Ganzen bietet <code>wp-scripts<\/code> dank seiner Integration mit Tools, die du vielleicht noch nicht benutzt, mehr Flexibilit\u00e4t. Die Einrichtung von <a href=\"https:\/\/postcss.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">PostCSS<\/a>, <a href=\"https:\/\/webpack.js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">webpack<\/a> oder <a href=\"https:\/\/jestjs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jest<\/a> kannst du dir zum Beispiel aus Zeitgr\u00fcnden sparen.<\/p>\n<h2>Wie du deine Entwicklungsumgebung f\u00fcr die Integration von wp-Skripten einrichtest<\/h2>\n<p>Die Verwendung von <code>wp-scripts<\/code> hat ihre eigenen Anforderungen, aber wahrscheinlich verwendest du diese Tools bereits. Falls n\u00f6tig, installiere <a href=\"https:\/\/kinsta.com\/de\/blog\/so-installierst-du-node-js\/\">Node.js und npm<\/a> zusammen mit einer lokalen WordPress-Entwicklungsumgebung. <a href=\"https:\/\/kinsta.com\/de\/devkinsta\/\">DevKinsta<\/a> ist eine gute L\u00f6sung, denn es l\u00e4uft auf <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-docker\/\">Docker<\/a> und unterst\u00fctzt die Staging-Umgebungen von Kinsta.<\/p>\n<figure id=\"attachment_186952\" aria-describedby=\"caption-attachment-186952\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-186952 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/devkinsta-interface.png\" alt=\"Die DevKinsta-Oberfl\u00e4che zeigt Website-Informationen f\u00fcr eine WordPress-Website an. Sie enth\u00e4lt den Website-Typ, den Datenbanktyp, den Webserver und die PHP-Version. Oben auf der Oberfl\u00e4che befinden sich Schaltfl\u00e4chen f\u00fcr \u201eWebsite \u00f6ffnen\u201c, \u201eSynchronisieren\u201c, \u201eDatenbankmanager\u201c und \u201eWP Admin\u201c. Auf der linken Seite wird eine kleine Vorschau der Website angezeigt. Unten auf der Oberfl\u00e4che befindet sich ein Abschnitt \u201eSite-Status\u201c mit einer Schaltfl\u00e4che \u201eSite anhalten\u201c.\" width=\"1200\" height=\"689\"><figcaption id=\"caption-attachment-186952\" class=\"wp-caption-text\">Die Hauptschnittstelle von DevKinsta<\/figcaption><\/figure>\n<p>Wenn du bereits das Paket <code>create-block<\/code> verwendest, um <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/\">WordPress Block Plugins zu entwickeln<\/a>, wird <code>wp-scripts<\/code> zusammen mit den anderen Assets installiert. Von hier aus kannst du beginnen, ein Paketentwicklungsprojekt einzurichten.<\/p>\n<h3>Einrichten eines neuen WordPress-Projekts mit wp-scripts<\/h3>\n<p>Die Arbeit, die du verrichtest, findet im Verzeichnis <strong>wp-content<\/strong> deiner WordPress-Installation statt. Das jeweilige Unterverzeichnis h\u00e4ngt von der Art des Projekts ab, das du erstellst: <strong>wp-content\/themes<\/strong> f\u00fcr Themes und <strong>wp-content\/plugins<\/strong> f\u00fcr Plugins!<\/p>\n<p>In jedem Fall sollte dein Projektordner eine Reihe von Dateien und Verzeichnissen enthalten:<\/p>\n<ul>\n<li>Eine <code>package.json<\/code> Datei.<\/li>\n<li>Ein <strong>Build-Verzeichnis<\/strong>.<\/li>\n<li>Ein <strong>src-Verzeichnis<\/strong>, das auch eine <code>index.js<\/code> Datei enth\u00e4lt.<\/li>\n<\/ul>\n<p>Um eine <code>package.json<\/code> Datei zu erstellen, navigiere mit deinem Terminal oder einer Kommandozeilenanwendung zu deinem Projektverzeichnis. Wenn du den Befehl <code>npm init<\/code> aufrufst, wirst du durch einen interaktiven Einrichtungsprozess gef\u00fchrt, und dein &#8222;Einstiegspunkt&#8220; sollte <code>build\/index.js<\/code> sein:<\/p>\n<figure id=\"attachment_186953\" aria-describedby=\"caption-attachment-186953\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-186953 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/npm-init.png\" alt=\"Ein Terminalfenster mit dunklem Hintergrund, das die Ausgabe eines npm-init-Befehls f\u00fcr ein WordPress-Theme-Projekt anzeigt. Der Text erkl\u00e4rt, dass dieses Dienstprogramm den Benutzer durch die Erstellung einer package.json-Datei f\u00fchrt, g\u00e4ngige Elemente abdeckt und sinnvolle Standardwerte vorschl\u00e4gt. Es enth\u00e4lt Anweisungen zur Installation von Paketen und zum Speichern als Abh\u00e4ngigkeiten. Das Terminal zeigt die Details der Ersteinrichtung an, einschlie\u00dflich Paketname, Version, Beschreibung und Einstiegspunkt.\" width=\"1200\" height=\"420\"><figcaption id=\"caption-attachment-186953\" class=\"wp-caption-text\">Ein Teil des npm-Init-Prozesses, der die Eingabeaufforderung f\u00fcr den Einstiegspunkt anzeigt<\/figcaption><\/figure>\n<p>Als n\u00e4chstes installierst du <code>wp-scripts<\/code> als Entwicklungsabh\u00e4ngigkeit:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts --save-dev\n<\/code><\/pre>\n<p>Du solltest ein paar automatisch generierte Verzeichnisse und Dateien sehen: <strong>node_modules<\/strong> und <code>package-lock.json<\/code>. Unabh\u00e4ngig davon musst du jetzt die vordefinierten Skripte in der Datei <code>package.json<\/code> referenzieren:<\/p>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"build\": \"wp-scripts build\",\n  \"start\": \"wp-scripts start\",\n}\n<\/code><\/pre>\n<p>Du wirst wahrscheinlich oft zu dieser Datei zur\u00fcckkehren, um bei Bedarf weitere Skripte hinzuzuf\u00fcgen. Zum Beispiel:<\/p>\n<pre><code class=\"language-json\">\u2026\n\n\"lint:js\": \"wp-scripts lint-js\",\n\"lint:css\": \"wp-scripts lint-style\",\n\"lint:pkg-json\": \"wp-scripts lint-pkg-json\",\n\"test\": \"wp-scripts test-unit-js\"\n\u2026\n<\/code><\/pre>\n<p>M\u00f6glicherweise musst du hier auch <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/enqueueing-assets-in-the-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">die Assets deines Themes oder Plugins in die Warteschlange stellen<\/a> und dann deine \u00c4nderungen speichern.<\/p>\n<h3>Webpack mit wp-scripts verstehen und nutzen<\/h3>\n<p>Um Assets unter der Haube zu b\u00fcndeln, verwendet <code>wp-scripts<\/code> webpack. Du brauchst es nicht zu konfigurieren, aber wenn du seine Rolle verstehst, kannst du <code>wp-scripts<\/code> effektiver nutzen. Webpack \u00fcbernimmt eine Menge Aufgaben bez\u00fcglich deinem Setup:<\/p>\n<ul>\n<li>Es hilft dabei, die Abh\u00e4ngigkeiten zwischen deinen JavaScript-Modulen aufzul\u00f6sen.<\/li>\n<li>Du kannst modernes JavaScript in browserkompatiblen Code transpilieren.<\/li>\n<li>Es hilft bei der Verarbeitung und Optimierung deiner Styles.<\/li>\n<li>Du bist in der Lage, Source Maps zu erstellen, um leichter debuggen zu k\u00f6nnen.<\/li>\n<li>Es kann dir helfen, produktionsreife, minifizierte Bundles zu erstellen.<\/li>\n<\/ul>\n<p>Du hast bereits eine Standard-Webpack-Konfiguration in <code>wp-scripts<\/code>. Das funktioniert f\u00fcr die meisten WordPress-Projekte gut. In manchen F\u00e4llen musst du jedoch eigene Konfigurationen erstellen.<\/p>\n<h3>Erweiterte webpack-Konfiguration f\u00fcr Agenturen<\/h3>\n<p>W\u00e4hrend die Standard-Webpack-Konfiguration f\u00fcr die meisten Entwicklungsprojekte ideal ist, gibt es F\u00e4lle, in denen du eine Konfiguration f\u00fcr deine speziellen Bed\u00fcrfnisse erstellen musst. Zum Beispiel, wenn du mit komplexen Theme-Strukturen oder einzigartigen Plugin-Architekturen zu tun hast. In diesem Fall ist eine <code>webpack.config.js<\/code> Datei im Stammverzeichnis deines Projekts sehr n\u00fctzlich:<\/p>\n<pre><code class=\"language-js\">const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\n\nconst path = require('path');\n\n\nmodule.exports = {\n  ...defaultConfig,\n  entry: {\n    main: path.resolve(__dirname, 'src\/js\/main.js'),\n    admin: path.resolve(__dirname, 'src\/js\/admin.js'),\n    \/\/ Add more entry points as needed\n  },\n  output: {\n    filename: '[name].js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  \/\/ Add custom loaders or plugins here\n};\n<\/code><\/pre>\n<p>Diese Konfiguration erm\u00f6glicht mehrere Einstiegspunkte, was besonders n\u00fctzlich f\u00fcr Themes oder Plugins ist, die separate Skripte f\u00fcr verschiedene Teile des WordPress-Admin- oder Frontends ben\u00f6tigen. Auf diese Weise kannst du deine Standardkonfiguration erweitern und die Vorteile von <code>wp-scripts<\/code> nutzen.<\/p>\n<h2>Die Grundlagen der Verwendung von wp-scripts<\/h2>\n<p>Mit einer geeigneten Entwicklungsumgebung und der richtigen Datei- und Ordnerstruktur kannst du beginnen, <code>wp-scripts<\/code> zu nutzen. Es gibt ein paar grundlegende und zentrale Befehle, die den gr\u00f6\u00dften Teil deiner Zeit in Anspruch nehmen werden.<\/p>\n<p>Der Befehl <code>start<\/code> \u00fcberwacht deine Dateien auf \u00c4nderungen, kompiliert die Assets w\u00e4hrend des Betriebs neu und erm\u00f6glicht ein schnelles Nachladen f\u00fcr eine reibungslose Entwicklung:<\/p>\n<pre><code class=\"language-bash\">npm run start\n<\/code><\/pre>\n<p>Du verwendest ihn zu Beginn eines Projekts, um einen Entwicklungsserver zu starten, obwohl er den kompilierten Code in deiner <strong>build\/index.js-Datei<\/strong> nicht optimiert.<\/p>\n<p>Wenn du dein Projekt bereitstellen musst, kompiliert der Befehl <code>build<\/code> deine Assets f\u00fcr die Produktion:<\/p>\n<pre><code class=\"language-bash\">npm run build\n<\/code><\/pre>\n<p>Sobald du ihn ausf\u00fchrst, f\u00fchrt er einige Aufgaben aus. Zum Beispiel transpiliert er dein JavaScript, kompiliert dein Sass und SCSS zu CSS, minimiert alle deine Assets und erstellt <a href=\"https:\/\/web.dev\/articles\/source-maps\" target=\"_blank\" rel=\"noopener noreferrer\">Source Maps<\/a>. Am Ende gibt er alles in der Datei <code>build\/index.js<\/code> aus. Der Build-Prozess erstellt auch eine <code>build\/index.asset.php<\/code> Datei f\u00fcr das Cache-Busting.<\/p>\n<p>Das Paket <code>wp-scripts<\/code> bietet au\u00dferdem mehrere Linting-Befehle, die dir helfen, eine hohe Codequalit\u00e4t zu erhalten:<\/p>\n<ul>\n<li><code>npm run lint:js<\/code>. Mit diesem Befehl kannst du deine JavaScript-Dateien linsen.<\/li>\n<li><code>npm run lint:css<\/code>. Damit lintest du deine CSS- oder Sass-Dateien.<\/li>\n<li><code>npm run lint:pkg-json<\/code>. Damit validierst du deine <code>package.json<\/code> Datei.<\/li>\n<\/ul>\n<p>F\u00fcr Unit-Tests rufst du einfach <code>npm run test<\/code> auf, das Jest verwendet, um deine Testsuite auszuf\u00fchren.<\/p>\n<h2>Erkundung der Kerndienstprogramme in wp-scripts<\/h2>\n<p>Grundlegende Build-Aufgaben k\u00f6nnen sehr viel Zeit in Anspruch nehmen, und die typischen Befehle erfordern eine Menge Automatisierung. <code>wp-scripts<\/code> bietet jedoch eine Reihe von ausgefeilten Dienstprogrammen, die den komplexen Anforderungen deiner WordPress-Entwicklung gerecht werden:<\/p>\n<ul>\n<li><strong>Erweiterte Kompilierung.<\/strong> Mit optimierten Konfigurationen kannst du modernes JavaScript &#8211; einschlie\u00dflich ECMAScript Modules (ESM) und Javascript XML (JSX) &#8211; transpilieren und Sass kompilieren.<\/li>\n<li><strong>Intelligente B\u00fcndelung.<\/strong> Du kannst das Code-Splitting und das <a href=\"https:\/\/webpack.js.org\/guides\/tree-shaking\/\" target=\"_blank\" rel=\"noopener noreferrer\">&#8222;Tree-Shaking&#8220;<\/a> von Webpack nutzen, um die Auslieferung deiner Assets zu optimieren.<\/li>\n<li><strong>Umfassendes Linting.<\/strong> Du kannst Codierungsstandards f\u00fcr JavaScript-, CSS- und <code>package.json<\/code> -Dateien durchsetzen.<\/li>\n<li><strong>Integrierte Tests.<\/strong> Mit Jest kannst du Unit-Tests und Abdeckungsberichte ausf\u00fchren.<\/li>\n<li><strong>Entwicklungsserver.<\/strong> Du kannst Hot-Reloading f\u00fcr eine schnelle Entwicklung \u00fcber mehrere Projekte hinweg nutzen.<\/li>\n<\/ul>\n<p>Du kannst die Standardfunktionalit\u00e4t jedes Servers erweitern, um einen individuelleren WordPress-Entwicklungsprozess zu nutzen, unabh\u00e4ngig davon, ob du an Themes oder Plugins arbeitest.<\/p>\n<h3>Umgang mit JSX und modernem JavaScript<\/h3>\n<p>Viele WordPress-Projekte arbeiten mit <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/\">modernen JavaScript-Elementen<\/a> wie <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-react-tutorials\/\">React-Komponenten<\/a>, Pfeilfunktionen, Destrukturierung, <code>async<\/code>\/<code>await<\/code> und mehr. Sogar Aspekte der Kern-Codebasis, wie der Block-Editor, verwenden modernes JavaScript, um ihre Funktionalit\u00e4t aufzubauen.<\/p>\n<p>Allerdings verstehen die Browser diese fortschrittlichen Syntaxen nicht von Haus aus, so dass mehr Arbeit n\u00f6tig ist, um sie zu \u00fcbersetzen und zu kompilieren.<\/p>\n<p>Mit <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/\">JSX<\/a> kannst du HTML-\u00e4hnlichen Code in deinem JavaScript schreiben, was es einfacher macht, zu beschreiben, wie deine Schnittstellen und andere Elemente aussehen sollen. Das verbessert zum Beispiel die Lesbarkeit und Wartbarkeit. Au\u00dferdem kannst du auf leistungsstarke React-Komponenten zugreifen, um dynamische Benutzeroberfl\u00e4chen (UIs) zu erstellen.<\/p>\n<p><code>wp-scripts<\/code> nutzt den <a href=\"https:\/\/babeljs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Babel JavaScript Compiler<\/a>, um dein modernes JavaScript und JSX in Code zu \u00fcbersetzen, den die Browser verstehen k\u00f6nnen. Er k\u00fcmmert sich um alle komplexen und notwendigen Konfigurationen, so dass du dich auf das Schreiben von Code konzentrieren kannst.<\/p>\n<p>Du nutzt diese Funktion \u00fcber deine <code>src\/index.js<\/code> Datei. Schau dir in diesem kleinen Beispiel an wie du JSX und modernes JavaScript mit <code>wp-scripts<\/code> implementieren kannst:<\/p>\n<pre><code class=\"language-js\">import { render } from '@wordpress\/element';\n\n\/\/ Modern JavaScript feature: Arrow function\nconst HelloWorld = () =&gt; {\n    \/\/ Modern JavaScript feature: Template literal\n    const greeting = `Hello, ${wp.data.select('core\/editor').getCurrentPost().title}!`;    \n\n    \/\/ JSX\n    return (\n        &lt;div className=\"hello-world\"&gt;\n            &lt;h1&gt;{greeting}&lt;\/h1&gt;\n            &lt;p&gt;This is a React component in WordPress!&lt;\/p&gt;\n        &lt;\/div&gt;\n    );\n};\n\n\/\/ Modern JavaScript feature: Optional chaining\nconst rootElement = document.getElementById('hello-world-root');\nif (rootElement?.innerHTML) {\n    render(&lt;HelloWorld \/&gt;, rootElement);\n}\n<\/code><\/pre>\n<p>Du musst das Skript auch in der Datei <strong>functions.php<\/strong> deines Themes oder in der Hauptdatei deines Plugins einbinden:<\/p>\n<pre><code class=\"language-js\">function enqueue_hello_world_script() {\n    wp_enqueue_script(\n        'hello-world-script',\n        get_template_directory_uri() . '\/build\/index.js',\n        ['wp-element'],\n        filemtime(get_template_directory() . '\/build\/index.js'),\n        true\n    );\n}\n\nadd_action('wp_enqueue_scripts', 'enqueue_hello_world_script');<\/code><\/pre>\n<p>Sobald du den Befehl <code>npx wp-scripts build<\/code> ausf\u00fchrst, transpiliert <code>wp-scripts<\/code> dein modernes JavaScript und JSX, um eine browserkompatible Datei <code>build\/index.js<\/code> zu erstellen.<\/p>\n<h3>Code-Qualit\u00e4tspr\u00fcfungen und ausgefeiltes Linting<\/h3>\n<p>Das Paket <code>wp-scripts<\/code> enth\u00e4lt mehrere Werkzeuge, die dir helfen, die Qualit\u00e4t deines Codes zu erhalten und einen einheitlichen Stil in deinen Projekten durchzusetzen: Neben ESLint und Prettier kannst du auch auf <strong>stylelint<\/strong> f\u00fcr CSS und SCSS Linting zugreifen.<\/p>\n<p>Der erste Schritt besteht darin, die Linting-Skripte zu deiner <code>package.json<\/code> Datei hinzuzuf\u00fcgen:<\/p>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"lint:js\": \"wp-scripts lint-js\",\n  \"lint:css\": \"wp-scripts lint-style\",\n  \"lint\": \"npm run lint:js && npm run lint:css\"\n}\n<\/code><\/pre>\n<p>Als N\u00e4chstes erstellst du benutzerdefinierte Konfigurationsdateien in deinem Projektstammverzeichnis. F\u00fcr ESLint musst du zum Beispiel in der Datei <code>.eslintrc.js<\/code> arbeiten. Dieses Beispiel erzwingt (teilweise) die Verwendung von Template-Literalen f\u00fcr Strings in deinem JavaScript-Code:<\/p>\n<pre><code class=\"language-js\">\u2026\nmodule.exports = {\n  extends: [\n    'plugin:@wordpress\/eslint-plugin\/recommended',\n  ],\n  rules: {\n    \/\/ Custom rules here\n    'no-console': 'error',\n    'react-hooks\/exhaustive-deps': 'warn',\n    'prefer-template': 'error',\n  },\n};\n\u2026\n<\/code><\/pre>\n<p>F\u00fcr stylelint bearbeitest du die Datei <code>.stylelintrc.js<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\nmodule.exports = {\n  extends: [\n    '@wordpress\/stylelint-config\/scss',\n  ],\n  rules: {\n    \/\/ Custom rules here\n    'selector-class-pattern': '^[a-z]+(-[a-z]+)*$',\n    'max-nesting-depth': 3,\n  },\n};\n\u2026\n<\/code><\/pre>\n<p>Wenn du eine gro\u00dfe Codebasis \u00fcber mehrere Projekte hinweg pflegst, ist ein einheitlicher Codestil wichtig. Auf diese Weise kannst du die Standardkonfigurationen von ESLint und stylelint erweitern, um die Codierungsstandards deiner Agentur durchzusetzen.<\/p>\n<p>Von hier aus kannst du <code>npm run lint<\/code> ausf\u00fchren, um diesen Prozess in Gang zu setzen, erweitert um den jeweiligen Linter-Typ. Wenn du zum Beispiel einen Code hast, der eine typische Verkettung beschreibt, &#8230;<\/p>\n<pre><code class=\"language-js\">const name = \"World\";\nconsole.log(\"Hello \" + name + \"!\");\n<\/code><\/pre>\n<p>&#8230;wird <code>npm run lint:js<\/code> einen Fehler melden und vorschlagen, dass du stattdessen ein Vorlagenliteral verwendest:<\/p>\n<pre><code class=\"language-js\">const name = \"World\";\nconsole.log(`Hello ${name}!`);\n<\/code><\/pre>\n<p>Dies ist eine unsch\u00e4tzbare M\u00f6glichkeit, den Code deines WordPress-Themes oder -Plugins zu linsen, und gibt dir die M\u00f6glichkeit, die Regels\u00e4tze an deine spezifischen Bed\u00fcrfnisse und Standards anzupassen.<\/p>\n<h3>Unit-Tests<\/h3>\n<p>Unit-Tests sind wichtig, um die Zuverl\u00e4ssigkeit und Wartbarkeit deiner Codebasis zu gew\u00e4hrleisten. Das Tool, das <code>wp-scripts<\/code> als Test-Framework verwendet, ist Jest.<\/p>\n<p>Wenn du den Befehl <code>test<\/code> ausf\u00fchrst, sucht Jest nach Dateien mit den Erweiterungen <code>.test.js<\/code> oder <code>.spec.js<\/code> oder nach Dateien in einem <strong>__tests__<\/strong> Verzeichnis. Es f\u00fchrt dann die in diesen Dateien definierten Tests aus und meldet die Ergebnisse.<\/p>\n<p>Zuerst musst du das Testskript in deiner <code>package.json<\/code> Datei referenzieren:<\/p>\n<pre><code class=\"language-js\">\u2026\n\"scripts\": {\n  \"test\": \"wp-scripts test-unit-js\"\n}\n\u2026\n<\/code><\/pre>\n<p>Erstelle bei Bedarf eine Datei wie <code>src\/utils.js<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\nexport function capitalizeString(str) {\n  return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\nexport function sum(a, b) {\n  return a + b;\n}\n\u2026\n<\/code><\/pre>\n<p>Erstelle von hier aus eine Testdatei, z. B. <code>src\/__tests__\/utils.test.js<\/code>:<\/p>\n<pre><code class=\"language-js\">import { capitalizeString, sum } from '..\/utils';\n\ndescribe('capitalizeString', () =&gt; {\n  it('capitalizes the first letter of a string', () =&gt; {\n    expect(capitalizeString('hello')).toBe('Hello');\n  });\n  it('returns an empty string if given an empty string', () =&gt; {\n    expect(capitalizeString('')).toBe('');\n  });\n});\n\ndescribe('sum', () =&gt; {\n  it('adds two numbers correctly', () =&gt; {\n    expect(sum(2, 3)).toBe(5);\n  });\n  it('handles negative numbers', () =&gt; {\n    expect(sum(-1, 1)).toBe(0);\n  });\n});\n<\/code><\/pre>\n<p>Sobald du den Befehl <code>npm run test<\/code> ausf\u00fchrst, findet <code>wp-scripts<\/code> automatisch alle Dateien mit der Endung <strong>.test.js<\/strong> und f\u00fchrt sie aus. Du kannst die Standardkonfiguration von Jest auch erweitern, um erweiterte Testanforderungen zu erf\u00fcllen, z. B. die Testabdeckung:<\/p>\n<pre><code class=\"language-js\">\/\/ jest.config.js\nconst defaultConfig = require('@wordpress\/scripts\/config\/jest-unit.config');\nmodule.exports = {\n  ...defaultConfig,\n  setupFilesAfterEnv: ['&lt;rootDir&gt;\/tests\/setupTests.js'],\n  collectCoverageFrom: [\n    'src\/**\/*.js',\n    '!src\/tests\/**\/*.js',\n    '!src\/vendor\/**\/*.js',\n  ],\n  coverageThreshold: {\n    global: {\n      branches: 80,\n      functions: 80,\n      lines: 80,\n      statements: 80,\n    },\n  },\n};\n<\/code><\/pre>\n<p>Diese Konfiguration f\u00fcgt eine benutzerdefinierte Setup-Datei hinzu, legt Dateien fest, die in die Abdeckungsberichte aufgenommen werden sollen, und legt Abdeckungsschwellenwerte fest, um eine umfassende Testabdeckung f\u00fcr deine Projekte zu gew\u00e4hrleisten. Wenn du diese Tests ausf\u00fchrst, gibt Jest eine Ausgabe aus, die alle bestandenen und fehlgeschlagenen Tests anzeigt.<\/p>\n<p>Wenn du die M\u00f6glichkeiten deiner Unit-Tests auf diese Weise erweiterst, kannst du die Qualit\u00e4t und Zuverl\u00e4ssigkeit deiner WordPress-Themes und -Plugins erheblich verbessern und deinen gesamten Entwicklungsprozess rationalisieren.<\/p>\n<h2>Wie du wp-scripts in deine Arbeitsabl\u00e4ufe integrierst<\/h2>\n<p>Die Einsatzm\u00f6glichkeiten von wp-Skripten sind so vielf\u00e4ltig, wie du sie ben\u00f6tigst. Um das zu verdeutlichen, wollen wir uns ein paar schnelle Ans\u00e4tze ansehen, wie du <code>wp-scripts<\/code> nutzen kannst, um typische Aufgaben zu automatisieren.<\/p>\n<h3>Wiederverwendbare Projektvorlagen erstellen<\/h3>\n<p>Du wirst wahrscheinlich h\u00e4ufig neue Projekte starten m\u00fcssen &#8211; vielleicht sogar jeden Tag. Die Erstellung einer benutzerdefinierten Projektvorlage durch die Vorkonfiguration von <code>wp-scripts<\/code> kann dir viel Zeit bei der Einrichtung sparen.<\/p>\n<p>Du kannst mit einem Basisprojekt beginnen: ein neues WordPress-Theme oder Plugin, das dein <code>wp-scripts<\/code> Setup enth\u00e4lt:<\/p>\n<pre><code class=\"language-bash\">mkdir my-agency-base-theme\ncd my-agency-base-theme\nnpm init -y\nnpm install --save-dev @wordpress\/scripts\n<\/code><\/pre>\n<p>Als N\u00e4chstes richtest du die Projektstruktur ein und erstellst die notwendigen Verzeichnisse und Dateien:<\/p>\n<pre><code class=\"language-bash\">mkdir src build\ntouch src\/index.js src\/style.scss\ntouch functions.php style.css\n<\/code><\/pre>\n<p>An diesem Punkt konfigurierst du <code>wp-scripts<\/code> und aktualisierst die Datei <code>package.json<\/code> mit den entsprechenden Befehlen:<\/p>\n<pre><code class=\"language-js\">{\n  \"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\",\n    \"lint:js\": \"wp-scripts lint-js\",\n    \"lint:css\": \"wp-scripts lint-style\",\n    \"test\": \"wp-scripts test-unit-js\"\n  }\n}\n<\/code><\/pre>\n<p>Du kannst dies erweitern, um Konfigurationen f\u00fcr webpack, ESLint und stylelint zu erstellen.<\/p>\n<p>Damit diese Vorlage wiederverwendet werden kann und einfach zug\u00e4nglich ist, ist ein <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-github\/\">GitHub-Repository<\/a> ideal. Betrachte zum Beispiel einen Remote-Ursprung von <code>https:\/\/github.com\/your-agency\/theme-template.git<\/code>.<\/p>\n<p>Wenn du ein neues Projekt beginnst, kannst du einen einfachen Befehl ausf\u00fchren:<\/p>\n<pre><code class=\"language-bash\">npx create-wordpress-theme@latest my-new-theme --template your-agency\/theme-template\n<\/code><\/pre>\n<p>Damit klonst du dein Template-Repository und richtest ein neues Theme mit deiner vordefinierten <code>wp-scripts<\/code> Konfiguration ein.<\/p>\n<p>Du kannst die Vorlage weiter anpassen, indem du agentur-spezifischen Boilerplate-Code hinzuf\u00fcgst, z. B. h\u00e4ufig verwendete Funktionen oder Komponenten. Es ist wichtig, dass du dieses Vorlagen-Repository auf dem neuesten Stand h\u00e4ltst, indem du die neueste Version von <code>wp-scripts<\/code> verwendest und alle Workflow-Verbesserungen implementierst, die du beschlossen hast.<\/p>\n<h3>Versionskontrolle und Zusammenarbeit<\/h3>\n<p>Du kannst mehr tun, wenn es um <code>wp-scripts<\/code> und die Arbeit mit Versionskontrolle geht. H\u00e4ufig solltest du jedoch einige typische Praktiken anwenden, um die Qualit\u00e4t deines Codes zu gew\u00e4hrleisten:<\/p>\n<ul>\n<li>Nimm <code>package.json<\/code> und <code>package-lock.json<\/code> in die Versionskontrolle auf. Dadurch wird sichergestellt, dass alle Teammitglieder die gleichen Abh\u00e4ngigkeiten verwenden.<\/li>\n<li>Stelle sicher, dass du Build-Artefakte wie <strong>\/build<\/strong> und <strong>\/node_modules<\/strong> in deine <code>.gitignore<\/code> Datei aufnimmst.<\/li>\n<li>Stelle sicher, dass du alle ben\u00f6tigten Skripte in deiner <code>package.json<\/code> Datei referenzierst, bevor du sie festlegst.<\/li>\n<li>Erw\u00e4ge, eine <code>.nvmrc<\/code> Datei zu verwenden, um die richtige Node.js-Version f\u00fcr dein Projekt anzugeben.<\/li>\n<\/ul>\n<p>Du kannst auch <a href=\"https:\/\/kinsta.com\/de\/blog\/git-hooks\/\">Pre-Commit-Hooks<\/a> mit Tools wie <a href=\"https:\/\/typicode.github.io\/husky\/\">Husky<\/a> implementieren. Damit kannst du zum Beispiel vor jeder \u00dcbergabe einen Linter ausf\u00fchren:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"husky\": {\n    \"hooks\": {\n        \"pre-commit\": \"npm run lint:js && npm run lint:css\"\n    }\n}\n\u2026\n<\/code><\/pre>\n<p>Auf diese Weise kannst du sicherstellen, dass du vor Commits und Pushs automatisch lintest und Tests ausf\u00fchrst. Das ist eine weitere M\u00f6glichkeit, die Codequalit\u00e4t in deinem Team zu sichern.<\/p>\n<h3>Kontinuierliche Integration und kontinuierliche Bereitstellung (CI\/CD)<\/h3>\n<p>Wenn du <code>wp-scripts<\/code> in deine CI\/CD-Pipeline integrierst, kannst du den Bereitstellungsprozess sowohl f\u00fcr Themes als auch f\u00fcr Plugins optimieren. <a href=\"https:\/\/kinsta.com\/de\/blog\/ci-cd-pipeline-github-aktionen-erstellen\/\">GitHub Actions<\/a> ist nur eine M\u00f6glichkeit, dies in deine <code>wp-scripts<\/code> Konfiguration zu integrieren.<\/p>\n<p>Der erste Schritt besteht darin, eine eigene Workflow-Datei in einem <strong>Workflows-Verzeichnis<\/strong> deines Repo zu erstellen:<\/p>\n<pre><code class=\"language-json\">name: CI\/CD\n\non:\n  push:\n    branches: [ main ]\n  pull_request:\n    branches: [ main ]\njobs:\n  build-and-test:\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions\/checkout@v2\n    - name: Use Node.js\n      uses: actions\/setup-node@v2\n      with:\n        node-version: '14'\n    - name: Cache dependencies\n      uses: actions\/cache@v2\n      with:\n        path: ~\/.npm\n        key: ${{ runner.OS }}-node-${{ hashFiles('**\/package-lock.json') }}\n    - name: Install dependencies\n      run: npm ci\n    - name: Run linters\n      run: |\n        npm run lint:js\n        npm run lint:css\n    - name: Run tests\n      run: npm run test\n    - name: Build\n      run: npm run build\n    - name: Deploy\n      if: github.ref == 'refs\/heads\/main'\n      run: |\n        # Add your deployment script here\n        # For example, using rsync to a remote server:\n        # rsync -avzc --delete .\/build\/ user@example.com:\/path\/to\/wp-content\/themes\/your-theme\/\n<\/code><\/pre>\n<p>Der Schritt der Bereitstellung h\u00e4ngt von deinem Host ab. Du kannst rsync verwenden, Dienste wie <a href=\"https:\/\/www.deployhq.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">DeployHQ<\/a> oder <a href=\"https:\/\/kinsta.com\/partners\/buddy\/\">Buddy<\/a> einbinden oder dich f\u00fcr eine <a href=\"https:\/\/kinsta.com\/de\/blog\/ci-cd-pipeline-github-aktionen-erstellen\/#trigger-deployment-with-curl-in-cicd-pipeline\">einfache cURL-Integration<\/a> entscheiden. Wenn f\u00fcr die Bereitstellung Passw\u00f6rter oder Schl\u00fcssel erforderlich sind, solltest du sie als Geheimnisse zu den Einstellungen deines GitHub-Repositorys hinzuf\u00fcgen.<\/p>\n<p>Dieser Workflow f\u00fchrt bei jedem Push- und Pull-Request Linters, Tests und Builds deines Projekts durch. Das Beste daran ist, dass die Bereitstellung nur stattfindet, wenn du \u00c4nderungen in den Hauptzweig eintr\u00e4gst.<\/p>\n<h3>Erstellen eines benutzerdefinierten Befehlszeilen-Tools (CLI)<\/h3>\n<p>Wenn du benutzerdefinierte Tools brauchst, kann dir <code>wp-scripts<\/code> helfen. Du k\u00f6nntest zum Beispiel ein CLI-Tool erstellen, das den Bed\u00fcrfnissen deiner Agentur entspricht.<\/p>\n<p>In manchen F\u00e4llen ben\u00f6tigt dein Tool einige Abh\u00e4ngigkeiten:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts commander chalk\n<\/code><\/pre>\n<p>Hier parst <a href=\"https:\/\/www.npmjs.com\/package\/commander\" target=\"_blank\" rel=\"noopener noreferrer\">Commander<\/a> die Kommandozeilenargumente und <a href=\"https:\/\/www.npmjs.com\/package\/chalk\" target=\"_blank\" rel=\"noopener noreferrer\">chalk<\/a>\u00a0verbessert die visuelle Darstellung des Ausgabetextes.<\/p>\n<p>Von hier aus kannst du beginnen, das Werkzeug mit Hilfe von <code>wp-scripts<\/code> zu programmieren. Hier ist ein Beispiel daf\u00fcr, wie die Datei aussehen w\u00fcrde:<\/p>\n<pre><code class=\"language-js\">#!\/usr\/bin\/env node\nconst { program } = require('commander');\nconst { spawn } = require('child_process');\nconst path = require('path');\nconst chalk = require('chalk');\n\nconst wpScripts = path.resolve(__dirname, '.\/node_modules\/.bin\/wp-scripts');\n\nconst runWpScripts = (script, args) =&gt; {\n  console.log(chalk.blue(`Running wp-scripts ${script}...`));\n  const result = spawn(wpScripts, [script, ...args], { stdio: 'inherit' });\n  result.on('exit', (code) =&gt; {\n    if (code !== 0) {\n      console.log(chalk.red(`wp-scripts ${script} failed with code ${code}`));\n    }\n  });\n};\n\nprogram\n  .version('1.0.0')\n  .description('Custom WordPress development CLI for Agency XYZ');\n\nprogram\n  .command('build')\n  .description('Build the project')\n  .action(() =&gt; runWpScripts('build'));\n\nprogram\n  .command('start')\n  .description('Start the development server')\n  .action(() =&gt; runWpScripts('start'));\n\nprogram\n  .command('lint')\n  .description('Lint JavaScript and CSS files')\n  .action(() =&gt; {\n    runWpScripts('lint-js');\n    runWpScripts('lint-style');\n  });\n\nprogram\n  .command('test')\n  .description('Run unit tests')\n  .action(() =&gt; runWpScripts('test-unit-js'));\n\nprogram\n  .command('deploy')\n  .description('Deploy the project')\n  .action(() =&gt; {\n    console.log(chalk.green('Deploying project...'));\n    \/\/ Add your deployment logic here\n    \/\/ For example:\n    \/\/ spawn('rsync', ['-avz', 'build\/', 'user@server:\/path\/to\/wordpress\/wp-content\/themes\/your-theme\/']);\n  });\n\nprogram.parse(process.argv);\n<\/code><\/pre>\n<p>Wenn du das Feld bin zu deiner package.json-Datei hinzuf\u00fcgst, kannst du das CLI-Tool zu einer ausf\u00fchrbaren Datei machen:<\/p>\n<pre><code class=\"language-js\">\u2026\n{\n  \"name\": \"agency-wp-cli\",\n  \"version\": \"1.0.0\",\n  \"bin\": {\n    \"agency-wp\": \".\/cli.js\"\n  },\n  \/\/ ... other fields\n}\n\u2026\n<\/code><\/pre>\n<p>Um das CLI f\u00fcr eine lokale Installation zu verlinken, kannst du einfach <code>npm link<\/code> ausf\u00fchren. Jetzt kannst du das CLI in deiner Terminal-Anwendung ausprobieren:<\/p>\n<pre><code class=\"language-bash\">agency-wp build\nagency-wp lint\nagency-wp deploy\n<\/code><\/pre>\n<p>Du solltest das Tool in einer privaten npm-Registry ver\u00f6ffentlichen, damit andere Teammitglieder es in aller Ruhe installieren k\u00f6nnen:<\/p>\n<pre><code class=\"language-bash\">npm publish --registry=<a href=\"https:\/\/your-private-registry.com\">https:\/\/your-private-registry.com<\/a>\n<\/code><\/pre>\n<p>Wenn du es brauchst, brauchst du nur <code>npm install --save-dev agency-wp-cli<\/code> auszuf\u00fchren, um dein Tool zu installieren. Von hier aus kannst du das CLI in <code>package.json<\/code> referenzieren:<\/p>\n<pre><code class=\"language-js\">{\n  \"scripts\": {\n    \"build\": \"agency-wp build\",\n    \"start\": \"agency-wp start\",\n    \"lint\": \"agency-wp lint\",\n    \"test\": \"agency-wp test\",\n    \"deploy\": \"agency-wp deploy\"\n  }\n}\n<\/code><\/pre>\n<p>Die Erstellung und Verwendung eines solchen Tools stellt sicher, dass jeder in deiner Agentur dieselben Befehle und Prozesse verwendet. So kannst du Unstimmigkeiten vermeiden und deinen WordPress-Entwicklungsworkflow noch weiter optimieren.<\/p>\n<h3>Leistungsoptimierung<\/h3>\n<p>Wenn du mehrere WordPress-Websites mit hohem Besucheraufkommen verwaltest, ist die Leistungsoptimierung entscheidend f\u00fcr deine Arbeit. Es gibt mehrere fortschrittliche Techniken, die du mit <code>wp-scripts<\/code> umsetzen kannst.<\/p>\n<h4>Erweitertes Code-Splitting<\/h4>\n<p>Mit dem Code-Splitting kannst du zum Beispiel dein JavaScript-Paket in kleinere Teile aufteilen, die du bei Bedarf laden kannst. Das kann die anf\u00e4nglichen Ladezeiten verbessern, besonders bei gro\u00dfen Anwendungen.<\/p>\n<p>\u00c4ndere als Erstes deine <code>webpack.config.js<\/code> Datei, um das Code-Splitting zu aktivieren:<\/p>\n<pre><code class=\"language-js\">const defaultConfig = require('@wordpress\/scripts\/config\/webpack.config');\n\nmodule.exports = {\n  ...defaultConfig,\n  entry: {\n    main: '.\/src\/index.js',\n    admin: '.\/src\/admin.js',\n  },\n  output: {\n    filename: '[name].js',\n    chunkFilename: '[name].[contenthash].js',\n  },\n  optimization: {\n    ...defaultConfig.optimization,\n    splitChunks: {\n      chunks: 'all',\n      minSize: 0,\n      cacheGroups: {\n        vendor: {\n          test: \/[\\\/]node_modules[\\\/]\/,\n          name(module) {\n            const packageName = module.context.match(\/[\\\/]node_modules[\\\/](.*?)([\\\/]|$)\/)[1];\n            return `vendor.${packageName.replace('@', '')}`;\n          },\n        },\n      },\n    },\n  },\n};\n<\/code><\/pre>\n<p>In deinem gesamten JavaScript-Code verwendest du dynamische Importe, um ihn in kleinere Teile aufzuteilen:<\/p>\n<pre><code class=\"language-js\">\/\/ Instead of: import { heavyFunction } from '.\/heavyModule';\n\nbutton.addEventListener('click', () =&gt; {\n  import('.\/heavyModule').then(module =&gt; {\n    module.heavyFunction();\n  });\n});\n<\/code><\/pre>\n<p>Au\u00dferdem musst du jede Aufteilung in deinen WordPress-Dateien in die Warteschlange stellen:<\/p>\n<pre><code class=\"language-php\">function enqueue_split_scripts() {\n  $asset_file = include(get_template_directory() . '\/build\/index.asset.php');  \n\n  wp_enqueue_script('main', get_template_directory_uri() . '\/build\/main.js', $asset_file['dependencies'], $asset_file['version'], true);\n  wp_enqueue_script('admin', get_template_directory_uri() . '\/build\/admin.js', $asset_file['dependencies'], $asset_file['version'], true);\n}\nadd_action('wp_enqueue_scripts', 'enqueue_split_scripts');\n<\/code><\/pre>\n<p>Das sollte die Ladezeiten verk\u00fcrzen und ist auch nicht allzu schwer zu implementieren.<\/p>\n<h4>Baumsch\u00fctteln<\/h4>\n<p>Im Zusammenhang mit JavaScript bedeutet &#8222;Tree Shaking&#8220;, wie du ungenutzten Code loswirst. Sowohl <code>wp-scripts<\/code> als auch <code>webpack<\/code> f\u00fchren Tree Shaking f\u00fcr Produktions-Builds durch, aber du kannst es noch weiter optimieren. Die Anwendung ist komplexer, als wir hier darstellen, aber du solltest auf jeden Fall sicherstellen, dass du die ES6-Import- und Export-Syntax verwendest:<\/p>\n<pre><code class=\"language-php\">\/\/ Good for tree shaking\nexport function usedFunction() { \/* ... *\/ }\n\n\/\/ Bad for tree shaking\nmodule.exports = {\n  usedFunction: function() { \/* ... *\/ },\n};\n<\/code><\/pre>\n<p>Als N\u00e4chstes gibst du die Dateien mit <a href=\"https:\/\/travislramos.com\/blog\/understanding-tree-shaking-in-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">&#8222;Seiteneffekten&#8220;<\/a> an&#8230;<\/p>\n<pre><code class=\"language-js\">{\n  \"name\": \"your-package\",\n  \"sideEffects\": [\"*.css\", \"*.scss\"]\n}\n<\/code><\/pre>\n<p>&#8230;oder markiere sie als frei von Nebenwirkungen:<\/p>\n<pre><code class=\"language-json\">{\n  \"name\": \"your-package\",\n  \"sideEffects\": false\n}\n<\/code><\/pre>\n<p>Einige gr\u00f6\u00dfere Bibliotheken unterst\u00fctzen das Sch\u00fctteln von B\u00e4umen nicht so gut wie andere. In diesen F\u00e4llen solltest du ein spezielles Plugin f\u00fcr diese Aufgabe verwenden:<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev babel-plugin-transform-imports\n<\/code><\/pre>\n<p>Das bedeutet auch, dass du deine babel-Konfigurationsdateien aktualisieren solltest, um eine m\u00f6glichst optimale und fehlerfreie Installation zu gew\u00e4hrleisten.<\/p>\n<h4>Asset-Optimierung<\/h4>\n<p>Der <code>wp-scripts<\/code> Build-Prozess minimiert CSS- und JavaScript-Dateien f\u00fcr dich. Zum Beispiel kannst du ein spezielles Plugin zur Bildoptimierung installieren:<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev imagemin-webpack-plugin\n<\/code><\/pre>\n<p>Sobald du dieses zu deiner Webpack-Konfigurationsdatei hinzuf\u00fcgst, kannst du Ressourcenhinweise nutzen, indem du den richtigen Code in deine <code>functions.php<\/code> Datei oder die Hauptplugin-Datei einf\u00fcgst:<\/p>\n<pre><code class=\"language-php\">function add_resource_hints( $urls, $relation_type ) {\n  if ( 'preconnect' === $relation_type ) {\n    $urls[] = 'https:\/\/fonts.googleapis.com';\n    $urls[] = 'https:\/\/fonts.gstatic.com';\n  }\n  return $urls;\n}\n\nadd_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );\n<\/code><\/pre>\n<p>Eine Aufgabe wie diese zeigt die Flexibilit\u00e4t, die du mit <code>wp-scripts<\/code> hast, da du sie an die Bed\u00fcrfnisse deiner Agentur oder deines Projekts anpassen kannst.<\/p>\n<h4>Analysiere die Bundle-Gr\u00f6\u00dfe<\/h4>\n<p>Die Zusammensetzung deines Pakets zu verstehen, ist entscheidend f\u00fcr die Optimierung. Mit <code>wp-scripts<\/code> kannst du es dir mit dem <code>--analyze<\/code> Flag leicht machen.<\/p>\n<pre><code class=\"language-bash\">npm run build -- --analyze\n<\/code><\/pre>\n<p>Der erste Schritt besteht darin, das entsprechende Skript zu deiner <code>package.json<\/code> Datei hinzuzuf\u00fcgen:<\/p>\n<pre><code class=\"language-json\">{\n  \"scripts\": {\n    \"analyze\": \"wp-scripts build --analyze\"\n  }\n}\n<\/code><\/pre>\n<p>Sobald du den Befehl <code>analyze<\/code> ausf\u00fchrst, erstellt er einen Bericht, der die Gr\u00f6\u00dfe jedes Moduls in deinem Bundle anzeigt. Diese einfache Implementierung hilft dir, Bereiche mit Optimierungsbedarf zu identifizieren.<\/p>\n<h4>Kritisches CSS implementieren<\/h4>\n<p>Das kritische CSS deiner Website ist das Minimum, das deine Seite ben\u00f6tigt, um den Inhalt zu laden, der \u00fcber der Einblendung liegt. Wenn du dieses CSS inline einbaust, kannst du die wahrgenommene Ladezeit verbessern.<\/p>\n<p>Um dies zu erreichen, brauchst du das <a href=\"https:\/\/www.npmjs.com\/package\/critical-css-webpack-plugin\" target=\"_blank\" rel=\"noopener noreferrer\">Critical CSS Webpack<\/a> Plugin:<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev critical-css-webpack-plugin\n<\/code><\/pre>\n<p>Als N\u00e4chstes musst du deine Webpack-Konfigurationsdatei aktualisieren, um das Plugin zu referenzieren:<\/p>\n<pre><code class=\"language-js\">const CriticalCssPlugin = require('critical-css-webpack-plugin');\nconst defaultConfig = require('@wordpress\/scripts\/config\/webpack.config');\n\nmodule.exports = {\n  ...defaultConfig,\n  plugins: [\n    ...defaultConfig.plugins,\n    new CriticalCssPlugin({\n      base: 'dist\/',\n      src: 'index.html',\n      target: 'styles\/critical.css',\n      extract: true,\n      inline: true,\n      minify: true,\n      dimensions: [\n        {\n          height: 500,\n          width: 300,\n        },\n        {\n          height: 900,\n          width: 1300,\n        },\n      ],\n    }),\n  ],\n};\n<\/code><\/pre>\n<p>Um es zu verwenden, musst du ein Snippet zu deiner <code>header.php<\/code> Datei hinzuf\u00fcgen:<\/p>\n<pre><code class=\"language-php\">&lt;style&gt;\n  &lt;?php echo file_get_contents(get_template_directory() . '\/build\/styles\/critical.css'); ?&gt;\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>Es extrahiert und untergliedert kritisches CSS f\u00fcr eine schnellere erste Darstellung. Es generiert kritisches CSS f\u00fcr bestimmte Viewport-Gr\u00f6\u00dfen, was die Ladezeit deines Themes verbessern kann.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>F\u00fcr die Entwicklung in einer Agentur ist <code>wp-scripts<\/code> ein leistungsstarkes Werkzeug, das deinen Arbeitsablauf bei Theme- und Plugin-Projekten erheblich verbessern kann. Mit einem standardisierten Build-Prozess, moderner JavaScript-Unterst\u00fctzung und integrierten Test- und Linting-Tools k\u00f6nnen Sie sich mit <code>wp-scripts<\/code> auf die Erstellung hochwertiger WordPress-Projekte konzentrieren und gleichzeitig einige der wichtigsten Aufgaben automatisieren.<\/p>\n<p>Die Nutzung von <code>wp-scripts<\/code> hilft dir nicht nur, mit modernen Entwicklungspraktiken Schritt zu halten. Du positionierst dich damit an der Spitze der WordPress-Entwicklung und bist bereit f\u00fcr die Herausforderungen und Chancen, denen sich deine Agentur stellen muss.<\/p>\n<p>Bietet wp-scripts die Funktionalit\u00e4t und den Umfang, den du f\u00fcr deine Entwicklungsprojekte in der Agentur brauchst? Teile uns deine Meinung in den Kommentaren unten mit!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress-Entwicklungsarbeit f\u00fcr Agenturen ist in den besten Zeiten hart umk\u00e4mpft. Sie erfordert h\u00f6chste Effizienz und Konsistenz \u00fcber mehrere Kundenprojekte hinweg. Unabh\u00e4ngig davon, wie erfahren du als &#8230;<\/p>\n","protected":false},"author":259,"featured_media":72029,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1053,999,1005,1012],"class_list":["post-72028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-agentur","topic-wordpress-entwicklung","topic-wordpress-leistung","topic-wordpress-website-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Fortgeschrittene WordPress-Entwicklung mit wp-scripts<\/title>\n<meta name=\"description\" content=\"Eine reibungslose WordPress-Entwicklung erfordert erstklassige Tools. In diesem Beitrag geht es um die Verwendung von wp-scripts sowie um Techniken f\u00fcr die Kompilierung, das Linting, das Testen und vieles mehr!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fortgeschrittene WordPress-Entwicklung: Wie du dein n\u00e4chstes Projekt mit wp-Skripten erstellen kannst\" \/>\n<meta property=\"og:description\" content=\"Eine reibungslose WordPress-Entwicklung erfordert erstklassige Tools. In diesem Beitrag geht es um die Verwendung von wp-scripts sowie um Techniken f\u00fcr die Kompilierung, das Linting, das Testen und vieles mehr!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-02T09:16:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-10T14:28:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Steve Bonisteel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Eine reibungslose WordPress-Entwicklung erfordert erstklassige Tools. In diesem Beitrag geht es um die Verwendung von wp-scripts sowie um Techniken f\u00fcr die Kompilierung, das Linting, das Testen und vieles mehr!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"25\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"Fortgeschrittene WordPress-Entwicklung: Wie du dein n\u00e4chstes Projekt mit wp-Skripten erstellen kannst\",\"datePublished\":\"2024-12-02T09:16:59+00:00\",\"dateModified\":\"2024-12-10T14:28:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/\"},\"wordCount\":3717,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/\",\"name\":\"Fortgeschrittene WordPress-Entwicklung mit wp-scripts\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"datePublished\":\"2024-12-02T09:16:59+00:00\",\"dateModified\":\"2024-12-10T14:28:52+00:00\",\"description\":\"Eine reibungslose WordPress-Entwicklung erfordert erstklassige Tools. In diesem Beitrag geht es um die Verwendung von wp-scripts sowie um Techniken f\u00fcr die Kompilierung, das Linting, das Testen und vieles mehr!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Entwicklung\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Fortgeschrittene WordPress-Entwicklung: Wie du dein n\u00e4chstes Projekt mit wp-Skripten erstellen kannst\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"caption\":\"Steve Bonisteel\"},\"description\":\"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fortgeschrittene WordPress-Entwicklung mit wp-scripts","description":"Eine reibungslose WordPress-Entwicklung erfordert erstklassige Tools. In diesem Beitrag geht es um die Verwendung von wp-scripts sowie um Techniken f\u00fcr die Kompilierung, das Linting, das Testen und vieles mehr!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/","og_locale":"de_DE","og_type":"article","og_title":"Fortgeschrittene WordPress-Entwicklung: Wie du dein n\u00e4chstes Projekt mit wp-Skripten erstellen kannst","og_description":"Eine reibungslose WordPress-Entwicklung erfordert erstklassige Tools. In diesem Beitrag geht es um die Verwendung von wp-scripts sowie um Techniken f\u00fcr die Kompilierung, das Linting, das Testen und vieles mehr!","og_url":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-12-02T09:16:59+00:00","article_modified_time":"2024-12-10T14:28:52+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"Eine reibungslose WordPress-Entwicklung erfordert erstklassige Tools. In diesem Beitrag geht es um die Verwendung von wp-scripts sowie um Techniken f\u00fcr die Kompilierung, das Linting, das Testen und vieles mehr!","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1024x512.png","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Steve Bonisteel","Gesch\u00e4tzte Lesezeit":"25\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"Fortgeschrittene WordPress-Entwicklung: Wie du dein n\u00e4chstes Projekt mit wp-Skripten erstellen kannst","datePublished":"2024-12-02T09:16:59+00:00","dateModified":"2024-12-10T14:28:52+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/"},"wordCount":3717,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/","url":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/","name":"Fortgeschrittene WordPress-Entwicklung mit wp-scripts","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","datePublished":"2024-12-02T09:16:59+00:00","dateModified":"2024-12-10T14:28:52+00:00","description":"Eine reibungslose WordPress-Entwicklung erfordert erstklassige Tools. In diesem Beitrag geht es um die Verwendung von wp-scripts sowie um Techniken f\u00fcr die Kompilierung, das Linting, das Testen und vieles mehr!","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/wp-scripts-entwicklung\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Entwicklung","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/"},{"@type":"ListItem","position":3,"name":"Fortgeschrittene WordPress-Entwicklung: Wie du dein n\u00e4chstes Projekt mit wp-Skripten erstellen kannst"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","caption":"Steve Bonisteel"},"description":"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.","url":"https:\/\/kinsta.com\/de\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/72028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=72028"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/72028\/revisions"}],"predecessor-version":[{"id":72058,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/72028\/revisions\/72058"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/72028\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/72029"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=72028"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=72028"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=72028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}