Tailwindcss hat sich so weit entwickelt, dass jeder Webentwickler gespannt ist, es anzusehen und zu überprüfen, ob sie es in ihren persönlichen oder beruflichen Projekten verwenden können. Bei Media Pons probieren wir gerne neue Trends aus und integrieren sie, wenn sie in unsere Projekte passen.
In diesem Beitrag werden wir untersuchen, wie wir Tailwindcss, ein Framework für die Erstellung von Utility-First CSS, in die Entwicklung eines WordPress-Themes integrieren können.
Wichtiger Hinweis: Ich gehe davon aus, dass Node.js bereits auf Ihrem Computer mit npm installiert ist, daher werde ich nicht im Detail auf deren Installation eingehen.
Ein weiterer wichtiger Hinweis: Ich werde auch das offizielle @wordpress/scripts Paket installieren und in unsere Einrichtung integrieren, da es benötigt wird, um JavaScript-Dateien zu bündeln. Außerdem können Sie in Ihrem Theme Sass oder SCSS verwenden, was mit Tailwind CSS nicht möglich ist. Am Ende können Sie sowohl Tailwind CSS als auch Sass/SCSS/CSS verwenden, wenn Sie die Methode in diesem Blog-Beitrag befolgen.
Einstellung
Erstellen Sie eine grundlegende style.css-Datei in Ihrem Theme-Ordner. Dieser Schritt hat nichts mit Tailwind CSS zu tun. Ganz einfach! Wenn Sie mit der style.css-Datei Ihres Themes nicht vertraut sind, empfehle ich Ihnen, diesen Beitrag auf unserem Blog zu überprüfen.
style.css
/*
Theme Name: Media Pons
Author: Media Pons
Author URI: https://mediapons.de
Text Domain: mediapons
Domain Path: /languages
*/Wichtiger Hinweis: Alle untenstehenden Befehle sollten im Theme-Verzeichnis ausgeführt werden.
Initialize the npm project
npm init -yDer obige Code erstellt eine package.json Datei mit Standardwerten. Ich habe mir die Freiheit genommen, einige benutzerdefinierte Inhalte hinzuzufügen, die mit unserer Firma zusammenhängen.
package.json
{
"name": "mediapons",
"version": "1.0.0",
"description": "Dies ist ein individuelles WordPress-Themaprojekt von Media Pons.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Media Pons",
"license": "ISC"
}Installiere das offizielle WordPress-Scripts-Paket
npm install @wordpress/scriptsNach Ausführung des obenstehenden Befehls sollte die package.json Datei wie folgt aussehen.
package.json
{
"name": "mediapons",
"version": "1.0.0",
"description": "Dies ist ein individuelles WordPress-Themaprojekt von Media Pons.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Media Pons",
"license": "ISC",
"devDependencies": {
"@wordpress/scripts": "^26.9.0"
}
}Wenn Sie diesen Beitrag auf unserem Blog gelesen haben, sollten Sie wissen, dass wir Node.js-Befehle und Skripte benötigen, um unsere CSS- und JavaScript-Dateien zu bündeln. Glücklicherweise wurden diese Skripte bereits im @wordpress/scripts-Paket erstellt. Wir müssen sie nur hinzufügen. Überprüfen Sie die package.json-Datei unten nach dem Hinzufügen dieser Scripts.
package.json
{
"name": "mediapons",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"wpbuild": "wp-scripts build",
"wpstart": "wp-scripts start",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Media Pons",
"license": "ISC",
"devDependencies": {
"@wordpress/scripts": "^26.9.0"
}
}Ich habe den Code hervorgehoben, der zur package.json Datei hinzugefügt wurde. Jetzt, da das offizielle WordPress Paket für das Bündeln von JavaScript und CSS zu Ihrem Theme hinzugefügt wurde, ist es an der Zeit, Tailwind CSS hinzuzufügen.
Die Installation des Tailwindcss-Pakets
npm install tailwindcss --save-devDieser Befehl oben installiert das Tailwind Paket, und nach Ausführung dieses Befehls sollte die neue package.json Datei wie folgt aussehen.
package.json
"description": "",
"main": "index.js",
"scripts": {
"wpbuild": "wp-scripts build",
"wpstart": "wp-scripts start",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Media Pons",
"license": "ISC",
"devDependencies": {
"@wordpress/scripts": "^26.9.0",
"tailwindcss": "^3.3.3"
}
}Nach der Installation von Tailwind sollte eine Tailwind Konfigurationsdatei erstellt werden, die die Einstellungen für Tailwindcss enthält. Sie können den folgenden Befehl verwenden, um diese Datei zu erstellen.
npx tailwindcss initDieser Befehl erstellt eine Datei namens tailwind.config.js, und der Inhalt der Standarddatei sieht wie folgt aus:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}Laut dieser Datei muss es ein src Verzeichnis geben, damit tailwindcss überprüfen kann, welche tailwindcss Klassen in allen html- und js-Dateien im src Verzeichnis und seinen Unterordnern verwendet wurden. Wir haben Glück, dass das @wordpress/scripts Paket ebenfalls auf das src Verzeichnis angewiesen ist, sodass wir den Namen des Quellverzeichnisses nicht ändern müssen, was wichtig ist. Wir werden auch an php-Dateien in Wordpress arbeiten, daher würde eine kleine Änderung in dieser Konfigurationsdatei uns sehr helfen, damit tailwindcss die Klassen in den php-Dateien überprüfen kann. Sehen Sie sich die aktualisierte tailwind.config.js Datei unten an. Aktualisierungen in der Datei sind hervorgehoben.
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./**/*.php", "./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}Jetzt ist es an der Zeit, Node.js Scripts für tailwindcss hinzuzufügen, um die tailwind-Klassen zu bündeln, die in den Dateien verwendet wurden, die wir in der tailwind.config.js Datei deklariert haben. Unten finden Sie die aktualisierte Version von package.json.
package.json
{
"name": "mediapons",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"wpbuild": "wp-scripts build",
"wpstart": "wp-scripts start",
"tailwindbuild": "tailwindcss -i ./src/index.css -o ./build/index.css --minify",
"tailwindwatch": "tailwindcss -i ./src/index.css -o ./build/index.css --watch --minify",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Media Pons",
"license": "ISC",
"devDependencies": {
"@wordpress/scripts": "^26.9.0",
"tailwindcss": "^3.3.3"
}
}Achten Sie auf die Ergänzungen in unserer package.js Datei. Beachten Sie, wie tailwindcss die index.css im src Verzeichnis als Eingabe nimmt und eine index.css Datei als Ausgabe erstellt.
Jetzt haben wir die Skripte sowohl für @wordpress/scripts als auch für tailwindcss erstellt. Wenn wir sie jedoch gleichzeitig mit einem Script bündeln möchten, müssen wir ein weiteres sehr nützliches Paket namens npm-run-all installieren. Mit diesem Paket können Sie mehrere npm-Skripte gleichzeitig ausführen. Lassen Sie uns es installieren und die notwendigen Skripte hinzufügen, um die zuvor von uns geschriebenen Skripte gleichzeitig auszuführen.
npm install npm-run-all --save-devNachdem Sie den oben genannten Befehl ausgeführt und die Haupt-Bündelung Scripts hinzugefügt haben, sollte Ihre package.json Datei am Ende so aussehen. Ich habe die letzten Ergänzungen erneut hervorgehoben.
package.json
{
"name": "mediapons",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"wpbuild": "wp-scripts build",
"wpstart": "wp-scripts start",
"tailwindbuild": "tailwindcss -i ./src/index.css -o ./build/index.css --minify",
"tailwindwatch": "tailwindcss -i ./src/index.css -o ./build/index.css --watch --minify",
"build": "npm-run-all --sequential wpbuild tailwindbuild",
"start": "npm-run-all --parallel wpstart tailwindwatch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Media Pons",
"license": "ISC",
"devDependencies": {
"@wordpress/scripts": "^26.9.0",
"npm-run-all": "^4.1.5",
"tailwindcss": "^3.3.3"
}
}Die oben genannte package.json Datei ist die endgültige Version. Wir müssen daran keine Änderungen mehr vornehmen.
Erstellen der notwendigen Theme-Verzeichnisse und -Dateien
Dies ist das letzte Stadium in unserem Integrationsbeispiel. Es beinhaltet die allgemeinen Schritte bei der Erstellung eines benutzerdefinierten Wordpress-Themes. Da wir die grundlegenden Schritte zur Wordpress-Theme-Entwicklung bereits in einem anderen Beitrag auf unserem Blog erwähnt haben, kann ein erfahrener Wordpress-Theme-Entwickler die untenstehenden Dateien problemlos mit dem korrekten Inhalt erstellen.
src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background-color: aquamarine;
}Dies ist die Haupt-Tailwindcss-Stylesheet-Datei, die im src Verzeichnis erstellt werden sollte. Achten Sie auf die Haupt-@tailwind-Direktiven. Diese sind zwingend erforderlich, damit tailwindcss die gebündelte Tailwind-CSS-Datei im Build Verzeichnis erstellen kann. Zuletzt haben wir eine normale CSS-Regel hinzugefügt, um Ihnen zu zeigen, dass Sie normales CSS zusammen mit Tailwindcss verwenden können.
src/index.js
console.log('Index.js Datei geladen')Diese Datei ist einfach, dient aber nur Demonstrationszwecken, um zu zeigen, dass das Bündeln wirklich funktioniert hat. Sie können mehr JavaScript-Code hinzufügen, aber das liegt außerhalb des Rahmens dieses Tutorials.
functions.php
<?php
add_action('wp_enqueue_scripts', 'load_rbr_assets');
function load_mp_assets() {
// Fügen Sie die Stylesheet-Datei hinzu
wp_enqueue_style('mp-main-style', get_theme_file_uri('/build/index.css'), [], '1.0', 'all');
// Fügen Sie die Script datei hinzu
wp_enqueue_script('mp-main-script', get_theme_file_uri('/build/index.js'), ['jquery'], '1.0', true);
}Der obige Code ist einer der entscheidenden Schritte, um das Laden von benutzerdefinierten JavaScript- und CSS-Ressourcen abzuschließen. Grundsätzlich lädt dieser Code die gebündelten CSS- und JS-Dateien in unsere Theme-Vorlagen. Dies wird verständlicher, wenn Sie die unten stehenden Beispielvorlagendateien überprüfen.
header.php
<!DOCTYPE html>
<html <?php language_attributes() ?>>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head() ?>
</head>
<body>Das oben gezeigte ist lediglich die Hauptkopf-Vorlage, die von WordPress-Theme-Entwicklern gut bekannt ist. Vergessen Sie nicht, die wp_head Funktion hinzuzufügen, damit Ihre Stylesheets geladen werden können.
footer.php
<?php wp_footer() ?>
</body>
</html>Footer-Vorlagen sind in der Regel komplexer und enthalten eine Menge Code. Die einzige Sache, auf die Sie achten sollten, ist die Verwendung der wp_footer Funktion. Diese Funktion ist notwendig, damit Ihre Scripts im Footer geladen werden können.
index.php
<?php get_header() ?>
<h1 class="text-xl">Wordpress Theme with Tailwindcss has been loaded.</h1>
<?php get_footer() ?>Achten Sie auf eine der Kernklassen, die von Tailwind CSS enthalten sind: text-xl.
Wir sind noch nicht fertig, denn wir müssen die Bündelungsskripte ausführen, um die gebündelten CSS- und JS-Dateien zu erstellen, die wir mit der functions.php Datei hinzugefügt haben. Führen Sie den folgenden Befehl innerhalb des Theme-Verzeichnisses aus:
npm run buildNach Ausführung des oben genannten npm Befehls überprüfen Sie die Startseite Ihrer WordPress-Website, und Sie werden die Stile sehen, die Sie in der Datei src/index.css implementiert haben.
Bevor wir unseren Beitrag abschließen, hinterlasse ich Ihnen die Struktur des Theme-Verzeichnisses zur Referenz. Die Verzeichnisnamen werden fett dargestellt.
build
index.asset.php
index.css
index.js
node_modules
src
index.css
index.js
footer.php
functions.php
header.php
index.php
package-lock.json
package.json
style.css
tailwind.config.jsAbschluss
In diesem Beitrag haben wir erfolgreich Tailwindcss in ein individuelles WordPress-Theme integriert. Egal, ob Sie ein Anfänger oder ein fortgeschrittener Theme-Entwickler sind, wir hoffen, dass Ihnen dieser Beitrag nützlich sein wird.
Wenn Sie Projekte in Gedanken haben und eine seriöse Webentwicklungsfirma benötigen, um Ihnen dabei zu helfen, können Sie uns jederzeit über unser Kontaktformular auf unserer Kontaktseite erreichen.
