Schreiben von JavaScript und CSS in WordPress mit dem @wordpress/scripts-Paket

Wenn Sie sich lange mit der Webentwicklung beschäftigen, haben Sie wahrscheinlich den Aufstieg von JavaScript mit großer Erstaunen erlebt. Bei Media Pons suchen wir stets nach effizienten Möglichkeiten, JavaScript in unsere Projekte zu integrieren. Viele Jahre lang haben WordPress-Entwickler herkömmliche Methoden verwendet, um JavaScript in ihre Themes oder Plugins einzufügen. Dann erfolgte die JavaScript-Revolution, und Build-Tools wie Gulp wurden zur Antwort für WordPress-Entwickler. Schließlich kündigte WordPress vor einigen Jahren ihr eigenes maßgeschneidertes Build-Tool namens @wordpress/scripts an.

In diesem Blogbeitrag werden wir von Grund auf beginnen und ein kleines Bündelungssystem erstellen, das Ihnen als Theme- oder Plugin-Entwickler eine Möglichkeit bietet, JavaScript und CSS leicht in Ihr Theme oder Plugin zu integrieren. Wir werden unser Bündelungssystem in einer Theme-Entwicklungsumgebung integrieren.

Wichtiger Hinweis: Da es sich um ein fortgeschrittenes Tutorial handelt, gehe ich davon aus, dass Ihr Computer bereits Node.js installiert hat und Ihre Node- und npm-Installationen ordnungsgemäß funktionieren.

Installation und Einrichtung

Nach der Installation führen Sie in Ihrem Theme-Verzeichnis, wie bei jedem anderen Node-Projekt, den folgenden npm-Befehl aus.

npm init -y

Wie Sie vielleicht wissen, erstellt dieser Code eine Datei namens package.json, die wie ein Rezept für die in Ihrem Projekt installierten Module ist. Schauen wir uns an, was unsere package.json-Datei enthält. Mit der Option "-y" ist es möglich, auf alle Fragen "Ja" zu antworten, die nach Ausführung des npm-Befehls gestellt werden.

Das einzige Modul, das wir installieren sollten, ist das offizielle WordPress-JavaScript-Bündelungswerkzeug. Wir werden nichts anderes benötigen als das. Beachten Sie jedoch, dass die Node.js-Version 14 oder neuer sein sollte und die npm-Version 6.14.4 oder neuer sein sollte.

In Ihrem Theme-Verzeichnis führen Sie den folgenden Befehl aus.

npm install @wordpress/scripts --save-dev

Unsere package.json Datei sollte nach Ausführung des obigen Skripts wie folgt aussehen.

{
    "name": "mediapons",
    "version": "1.0.0",
    "description": "Media Pons Theme",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "Media Pons",
    "license": "ISC",
    "devDependencies": {
        "@wordpress/scripts": "^26.9.0"
    }
}

Wie Sie sehen, habe ich mir die Freiheit genommen, einige Details der package.json-Datei mit unseren Unternehmensinformationen auszufüllen. Sie können diese Felder leer lassen, nachdem Sie den npm init Befehl ausgeführt haben. Sie sollten jedoch wichtige Ergänzungen zum "scripts" Schlüssel vornehmen. Sie können die neue package.json Datei nach den neuesten Ergänzungen überprüfen. Ich habe sie fett markiert.

{
    "name": "mediapons",
    "version": "1.0.0",
    "description": "Media Pons Theme",
    "main": "index.js",
    "scripts": {
        "build": "wp-scripts build",
        "start": "wp-scripts start",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "Media Pons",
    "license": "ISC",
    "devDependencies": {
        "@wordpress/scripts": "^26.9.0"
    }
}

Sie können diese Skripte und andere in der offiziellen Dokumentation finden. Für Anfänger-Entwickler, die nicht wissen, wie diese Skripte in Projekte passen, empfehle ich, einige Node.js-Tutorials für Anfänger zu überprüfen. Sie finden viele davon im Internet. Kurz gesagt, können Sie diese Skripte wie folgt von der Befehlszeile in Ihrem Theme-Verzeichnis ausführen.

npm run build
npm run start

build

Nach Abschluss der vollständigen Entwicklung Ihres Projekts sollten Sie das Build-Script ausführen, da es für die Produktion bereit ist und für die beste Leistung optimiert ist. Beachten Sie, dass dieses Skript nach der Erstellung eines einzigen Builds stoppt.

start

Dieses Script wird während der Entwicklung Ihres Projekts verwendet. Noch wichtiger ist, dass dieses Script automatisch neu erstellt wird, wenn Sie während der Entwicklung Änderungen am Code vornehmen.

Die Konfiguration des Theme-Verzeichnisses

Es ist wichtig zu verstehen, dass Sie beim Entwickeln mit dem Paket @wordpress/scripts einige bestimmte Dateien und Verzeichnisse in Ihrem Theme-Verzeichnis haben müssen. Befolgen Sie die Schritte, damit Ihr Theme ohne Fehler mit dem Paket @wordpress/scripts funktioniert.

• Erstellen Sie ein Verzeichnis namens src in Ihrem Theme-Verzeichnis (obligatorisch).
• Erstellen Sie eine index.js Datei als Einstiegspunkt, wie in der package.json Datei angegeben. Sie werden dann Ihren JavaScript-Code mithilfe dieser Datei organisieren (obligatorisch).
• Erstellen Sie ein Verzeichnis namens css für alle Stylesheets (optional - Stylesheet-Dateien können überall im Theme-Verzeichnis sein).
• Erstellen Sie eine index.scss Datei im css Verzeichnis, wenn Sie mit Sass arbeiten möchten. Beachten Sie, dass der Dateiname nicht style.scss sein sollte, da er eng mit dem Dateinamen des Einstiegspunkts, nämlich index.js, zusammenhängt.
• Erstellen Sie eine style.css Datei im css Verzeichnis für Ihre zusätzlichen Styles, die nicht in den Sass Dateien enthalten sind.

Nachdem Sie die oben aufgeführten Dateien und Verzeichnisse erstellt haben, sollte die Struktur Ihres Theme-Verzeichnisses folgendermaßen aussehen:

src
  index.js
css
  index.scss
  style.css
node_modules

Ich habe keine weiteren Dateien und Verzeichnisse hinzugefügt, die sich im Theme-Verzeichnis befinden können, da es sich nicht um ein Tutorial zur Entwicklung von Themes handelt. Lassen Sie uns nun über den Inhalt der oben aufgeführten Dateien einzeln sprechen.

Beispiel index.scss

// sass variablen
$body-text-color: #101010;
$body-bg-color: #EEE;

body {
    background-color: $body-bg-color;
    color: $body-text-color;
}

Beispiel style.css

/* Die Styles in dieser Datei können benutzerdefinierte Block-Editor-Styles enthalten, die nicht mit den allgemeinen Theme-Styles in Verbindung stehen. */
pre.wp-block-code {
    padding: .5rem;
}

Beispiel index.js

// Das ist die Projekt-Einstiegsdatei!
// CSS-Projekteinstiegsdatei, benannt nach index.js. Wenn sie style.scss benannt ist, können einige Fehler auftreten.
import '../css/index.scss'
// Zusätzliche CSS-Stile
import '../css/style.css'

// Nachfolgend werden benutzerdefinierte Scripts sein.
console.log('index.js file loaded')

Nachdem Sie diese Dateien wie oben beschrieben vorbereitet haben, führen Sie die Befehle npm run build oder npm run start aus. Sie erhalten die folgende Projektstruktur:

build
  index.asset.php
  index.css
  index.js
  style-index.css
src
  index.js
css
  index.scss
  style.css
node_modules

Wenn wir das Build-Verzeichnis überprüfen, können wir die entsprechenden Dateien sehen, die aus den Verzeichnissen src und css erstellt wurden.

• Die index.js Datei im build Verzeichnis wurde aus der Projekt-Einstiegsdatei index.js im Verzeichnis src erstellt.
• Die index.css Datei im build Verzeichnis wurde aus der index.scss Datei im Verzeichnis src erstellt.
• Die Datei style-index.css im build Verzeichnis wurde aus der Datei style.css im Verzeichnis src erstellt.

Wir haben nun unsere @wordpress/scripts Einrichtung abgeschlossen und sind bereit, die neu erstellten JavaScript- und CSS-Dateien in unser Theme einzufügen. Wenn Sie diesen Beitrag in unserem Blog zuvor überprüft haben, wissen Sie möglicherweise bereits, wie Sie JavaScript- und CSS-Dateien zu Ihrem Theme hinzufügen. Falls Sie es nicht wissen, hier ist der Code, der in der functions.php-Datei stehen sollte.

functions.php

<?php
// Die Stylesheet- und Scriptdateien in die Warteschlange stellen (enqueue)
add_action('wp_enqueue_scripts', 'mediapons_load_assets');
function mediapons_load_assets() {
    // Stylesheet-Dateien laden
    wp_enqueue_style('mp-main-style', get_theme_file_uri('/build/index.css'), [], '1.0', 'all');
    wp_enqueue_style('mp-extra-style', get_theme_file_uri('/build/style-index.css'), [], '1.0', 'all');
    // Scriptdateien laden
    wp_enqueue_script('mp-main-script', get_theme_file_uri('/build/index.js'), ['jquery'], '1.0', true);
}

Ich möchte den oben stehenden Code nicht Zeile für Zeile erklären, da dieser Beitrag nicht zur Entwicklung von WordPress-Themes gedacht ist.

Zusammenfassend ist das Wissen darüber, wie man mit dem @wordpress/scripts-Paket arbeitet, nicht nur für die Entwicklung von Themes, sondern auch für die Entwicklung von Plugins (insbesondere blockbasierte Plugin-Entwicklung) relevant. Deshalb ermutige ich Sie, sich eingehender damit zu beschäftigen und mindestens ein individuelles Theme von Grund auf mit diesem Paket zu erstellen.

Selbst wenn Sie kein WordPress-Entwickler oder Programmierer sind und ein Projekt in den Händen halten, das mit dem @wordpress/scripts Paket erstellt wurde und Probleme aufweist, die Sie bisher nicht lösen konnten, stehen wir von Media Pons Ihnen jederzeit gerne zur Verfügung. Zögern Sie nicht, unser Kontaktformular zu nutzen, um ein Angebot anzufordern.