Seite nicht gefunden

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 -y

Der 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/scripts

Nach 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-dev

Dieser 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 init

Dieser 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-dev

Nachdem 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 build

Nach 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.js

Abschluss

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.

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.

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.

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.

Möglicherweise eine der wichtigsten Dateien eines WordPress-Themes ist die functions.php Datei. Tatsächlich kann sie als ein verborgenes Juwel in der Entwicklung von WordPress-Themes betrachtet werden. Ein Theme-Entwickler kann das volle Potenzial des Themes leicht ausschöpfen, wenn er oder sie weiß, wie man functions.php gut nutzt. Man kann sie als die Funktionsbibliothek des Themes betrachten, die es Ihnen ermöglicht, die Kernfunktionen von WordPress zu erweitern und zu verbessern.

Verständnis der functions.php Datei

Die functions.php-Datei befindet sich im Theme-Ordner. Wie wir zuvor in diesem Beitrag gelernt haben, sollte ein Theme-Entwickler ein Verzeichnis im wp-content-Verzeichnis einer WordPress-Installation erstellen und es in Bezug zum beschreibenden Namen des individuellen Themes benennen. Zum Beispiel, wenn Ihr Theme-Name Mediapons Official ist, können Sie das Verzeichnis als mediapons oder mediapons-official benennen. Der Inhalt der functions.php-Datei kann Aktionen, Filter und benutzerdefinierte Funktionen sein, um das Verhalten des Themes zu gestalten. Machen Sie sich keine Sorgen, wenn Sie nicht wissen, was eine Aktion oder ein Filter ist. Sie können sie in der offiziellen WordPress-Dokumentation nachschlagen oder wir können versuchen, sie Ihnen mit verschiedenen Beispielen zu erklären.

Hinzufügen einer benutzerdefinierten CSS-Datei zu Ihrem Theme mithilfe der functions.php Datei

Wenn Sie zuvor Websites entwickelt haben, sollte das Hinzufügen von benutzerdefinierten CSS-Dateien für Sie Routine sein. CSS-Dateien können im Kopfbereich einer Website mit dem link Tag hinzugefügt werden. In WordPress ist es etwas programmatischer, CSS-Dateien im Kopfbereich hinzuzufügen, und der Theme-Entwickler muss sehr vorsichtig sein, da die wp_head Funktion im header.php-Template sein muss, um CSS-Dateien programmgesteuert zu laden.

Überprüfen Sie den unten stehenden Beispielcode, der zur functions.php Datei hinzugefügt werden sollte, um eine benutzerdefinierte CSS-Datei hinzuzufügen.

<?php
// Die Aktion wp_enqueue_scripts ist dafür verantwortlich, Skripte und Styles zu einer WordPress-Website hinzuzufügen.
add_action('wp_enqueue_scripts', 'mediapons_load_assets');
function mediapons_load_assets() {
    // Lade die Stylesheet-Datei
    wp_enqueue_style('mp-main-style', get_theme_file_uri('/build/index.css'), [], '1.0', 'all');
}

Wie Sie sehen, gibt es zwei Punkte, auf die wir genauer achten sollten:

Das bedeutet, wenn Sie die Datei index.css, die sich im Build-Verzeichnis im Theme-Dateiverzeichnis befindet, hinzufügen möchten, müssen Sie die Funktion wp_enqueue_style am Haken wp_enqueue_scripts aufrufen.

Nach dem Hinzufügen des benutzerdefinierten Stylesheets fragen Sie sich vielleicht, wie Sie benutzerdefinierte Skriptdateien hinzufügen können. Beim Hinzufügen von benutzerdefinierten Skriptdateien gibt es wiederum eine Sache, auf die der Theme-Entwickler achten muss. Das ist die wp_footer Funktion. Ohne diese Funktion kann kein Skript im Fußbereich unserer Website hinzugefügt werden.

Überprüfen Sie den unten stehenden Beispielcode, der bearbeitet wurde, um zu zeigen, wie Sie benutzerdefinierte Skriptdateien hinzufügen können.

// Die Aktion wp_enqueue_scripts ist dafür verantwortlich, Skripte und Styles zu einer WordPress-Website hinzuzufügen.
add_action('wp_enqueue_scripts', 'mediapons_load_assets');
function mediapons_load_assets() {
    // Lade die Stylesheet-Datei
    wp_enqueue_style('mp-main-style', get_theme_file_uri('/build/index.css'), [], '1.0', 'all');
    // Lade die Script-Datei
    wp_enqueue_script('mp-main-script', get_theme_file_uri('/build/index.js'), ['jquery'], '1.0', true);
}

Wie Sie sehen, wurde die einzige Änderung die Hinzufügung der Funktion wp_enqueue_script zur Hinzufügung eines benutzerdefinierten Skripts vorgenommen. Bei genauerem Hinsehen gibt es einige Unterschiede zwischen den Funktionen wp_enqueue_style und wp_enqueue_script.

Wenn Sie es bis hierhin geschafft haben, haben Sie eine grundlegende functions.php Datei erstellt, die für kleine Websites ausreicht, die nicht so viele Anpassungen benötigen. Weitere Informationen zur functions.php Datei finden Sie in der WordPress-Dokumentation.

Zusätzlich zur WordPress-Dokumentation können Sie von Zeit zu Zeit unsere Blog-Seite besuchen, um Informationen zu verschiedenen Bereichen der WordPress-Entwicklung zu erhalten. Wenn Sie kein WordPress-Entwickler sind, können Sie sich gerne über unsere Kontaktseite mit uns in Verbindung setzen und über Ihr nächstes Projekt sprechen.

Bei Media Pons entwickeln wir gerne unsere eigenen WordPress-Themes, wenn unsere Kunden mit einem benutzerdefinierten, vorab erstellten HTML-Design kommen. Dann beginnen wir unseren Theme-Entwicklungsprozess, indem wir Code in die functions.php Datei unseres Themes schreiben. In diesem Beitrag gehen wir nicht ins Detail darüber, was eine functions.php Datei ist, da Sie viele Informationen dazu im Internet finden können.

Zunächst einmal sollte ich sagen, dass die Funktion add_theme_support in der functions.php Datei aufgerufen werden sollte. Schließlich sollte, wie jede andere WordPress-Funktion, add_theme_support zum richtigen Zeitpunkt aufgerufen werden.

Sie können unten ein Beispielcode sehen, der verschiedene Theme-Funktionen zeigt, die mithilfe der add_theme_support Funktion zu Ihrem Theme hinzugefügt werden können.

functions.php

<?php
// Verschiedene Funktionen zum Theme hinzufügen
add_action('after_setup_theme', 'mediapons_add_support');
function mediapons_add_support()
{
    // Titelunterstützung für Seiten hinzufügen
    add_theme_support('title-tag');
    // Unterstützung für Beitrags- und Seitenvorschaubilder zu Beiträgen und Seiten (Standard-Beitragstypen) hinzufügen
    add_theme_support('post-thumbnails');
    // Unterstützung für individuelles Logo hinzufügen (Logo über den WordPress-Customizer hinzufügen)
    add_theme_support('custom-logo');
}

Wie Sie sehen, ist der richtige Actions Hook, um die add_theme_support Funktion aufzurufen, after_setup_theme. Diese Aktion wird nach dem Laden des Themes ausgelöst.

Wenn wir den Code überprüfen, können wir sehen, dass unser Code unser Theme unterstützt, um die folgenden Funktionen zu aktivieren:

Wir denken, dass diese 3 Funktionen als Ausgangspunkt ausreichen, während Sie ein individuelles Theme entwickeln. Wenn Sie neugierig auf weitere Funktionen sind, die die add_theme_support Funktion Ihrem Theme hinzufügen kann, können Sie die offizielle WordPress-Dokumentation überprüfen.

Wenn Sie uns bezüglich Ihres nächsten Projekts kontaktieren möchten, zögern Sie nicht, uns eine Nachricht über unser Kontaktformular zu senden oder rufen Sie uns unter +49 69 9769 80 36 an.

In einem unserer Beiträge hatten wir darüber gesprochen, wie man damit beginnt, ein einfaches WordPress-Theme von Grund auf zu erstellen und welche Dateien für ein WordPress-Theme erforderlich sind. Index.php und style.css sind die beiden erforderlichen Dateien, um mit der Erstellung eines Themes zu beginnen. Obwohl dies die erforderlichen Dateien sind, kann ein WordPress-Theme viele Vorlagendateien haben. Die beiden wichtigen Dateien sind header.php und footer.php.

Header.php steuert den gemeinsamen Header, footer.php steuert den gemeinsamen Footer einer Website. Header und Footer sind in der Regel auf allen Seiten einer Website gleich, daher hat WordPress spezielle Vorlagen für diese gemeinsamen Bereiche. Lassen Sie uns sehr einfache Beispielcodes für jede Vorlage anzeigen.

Beispiel-Vorlagendateien

header.php

<?php
// Gemeinsame Header-Vorlage
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="<?php bloginfo('charset') ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
</head>
<body>

Wie Sie sehen, enthält die Datei header.php HTML, das größtenteils den Kopfbereich einer Website darstellt. Es kann auch CSS- und JavaScript-Code enthalten, oder zumindest Link- und Script-Elemente, die externe Stylesheet- oder JavaScript-Dateien aufrufen. Noch wichtiger ist, dass die header.php Datei das Logo der Website und das Navigationsmenü enthalten kann, aber in diesem Beitrag sind wir nicht so ins Detail gegangen und haben einfachere Beispieldateien verwendet.

footer.php

<?php
// Gemeinsame Footer-Vorlage
?>
</body>
</html>

Auf der anderen Seite ist die Datei footer.php in unserem Beispiel ziemlich einfach. Normalerweise enthält sie mehr HTML- und JavaScript-Code im Vergleich zu unserer Beispiel-Footer-Vorlage. Darüber hinaus können in anderen Themes auch Urheberrechtsinformationen und Links zu sozialen Medien zu sehen sein.

Wichtiger Hinweis: Wie wir zuvor gesagt haben, sind diese Beispiele sehr grundlegend und dienen nur zu Lehrzwecken. In der Regel können beide dieser Vorlagendateien in professionellen Unternehmenswebsites sehr umfangreich werden.

Wie header.php und footer.php in die Hauptvorlagendateien passen

Zunächst einmal sind diese Vorlagendateien für sich allein genommen nicht nützlich. Sie sind Teilvorlagen, was bedeutet, dass sie mit anderen Vorlagendateien wie index.php, archive.php oder search.php verwendet werden sollten. Nun wollen wir eine vollständige index.php Datei mit den Header- und Footer-Vorlagen erstellen.

index.php

<?php
get_header();
?>
    <div id="primary">
        <h1><?php bloginfo('name') ?></h1>
        <h2><?php bloginfo('description') ?></h2>
        <p>Diese Datei ist die Hauptvorlage für eine WordPress-Website. Wenn im Theme-Verzeichnis keine andere Vorlage vorhanden ist, wird diese Datei gerendert.</p>
    </div>
<?php get_footer();

Wenn Sie sich das obige Beispiel von index.php ansehen, werden Sie feststellen, dass zwei neue WordPress-Funktionen, get_header und get_footer, verwendet wurden. Diese Funktionen sind so wichtig, dass sie in allen Vorlagendateien im Theme-Verzeichnis verwendet werden.

get_header

Normalerweise ist es sehr einfach, diese Funktion zu verwenden, aber wenn Sie mehr Anpassung benötigen, können Sie einen benannten Header als Parameter für diese Funktion verwenden. Es hilft dabei, einen alternativen Header in einer Vorlagendatei zu laden, in der diese Funktion verwendet wird. Sie können auch die offizielle Dokumentation überprüfen, aber hier ist ein kurzes Beispiel für die Verwendung eines alternativen Headers.

<?php get_header('special'); ?>

Der obige Code lädt die Datei header-special.php in einer Vorlagendatei. Wenn sie nicht gefunden wird, lädt WordPress die Standard-header.php.

get_footer

Diese Funktion kann auch alternative Footer-Dateien laden. Die Funktionalität ist fast dieselbe wie bei der get_header Funktion. Auch hier ist es immer besser, die offizielle Dokumentation zu überprüfen, aber hier sehen Sie den Beispielcode unten.

<?php get_footer('special'); ?>

Der obige Code lädt die Datei footer-special.php in einer Vorlagendatei, in der er verwendet wird. Wenn sie nicht gefunden wird, lädt WordPress die Standard-footer.php.

Bei Media Pons erstellen wir immer Websites gemäß den geschäftlichen Anforderungen unserer Kunden. Fühlen Sie sich frei, uns über unser Kontaktformular eine Nachricht zu Ihrem nächsten Projekt zu senden.

Vor einigen Jahren führte WordPress den Gutenberg-Editor und die Entwicklung von Block-basierten Themes ein, was einen revolutionären Ansatz für den Aufbau von WordPress-Websites einführte. Im Gegensatz zur traditionellen klassischen Theme-Entwicklung nutzen Block-basierte Themes die Leistungsfähigkeit des Gutenberg-Editors, der eine intuitive und flexible Methode bietet, Inhaltslayouts mithilfe individueller Blöcke zu gestalten. Mit der Freiheit, verschiedene Blöcke zu kombinieren, können selbst WordPress-Neulinge mühelos individuelle Designs für jede Seite erstellen. Wir glauben, dass dies die Zukunft der WordPress-Entwicklung ist, und bei Media Pons sind wir uns bewusst, dass wir trotz der intensiven Verfolgung der Block-basierten Theme-Entwicklung auch wissen, dass klassische WordPress-Themes noch eine Weile bleiben werden.

In diesem Beitrag werden wir uns die Grundlagen der klassischen WordPress-Theme-Entwicklung ansehen. Erfahrene Theme-Entwickler wissen, dass ein WordPress-Theme von Grund auf zu erstellen viel Arbeit bedeutet, aber es ist auch erfreulich zu sehen, wie ein Produkt in den eigenen Händen wächst.

Lassen Sie uns jetzt an die Arbeit gehen und einige der wichtigsten Dateien auflisten, die beim Entwickeln eines WordPress-Themas von Grund auf wichtig sind. Zunächst erstellen Sie im wp-content Verzeichnis Ihrer WordPress-Installation ein neues Verzeichnis und benennen es nach Belieben. Wir nennen es mediapons. Dann beginnen Sie damit, die unten aufgeführten Dateien in diesem Verzeichnis zu erstellen. Es ist wichtig zu verstehen, welche Dateien für die Struktur und Funktionalität des Themes am wichtigsten sind.

Wie bereits erwähnt, streben wir danach, grundlegende Informationen zur individuellen Theme-Entwicklung zu bieten und Ihnen dabei zu helfen, Ihr WordPress-Theme von Grund auf zu erstellen. Lassen Sie uns Beispiele für jede zuvor erwähnte Datei geben.

style.css

/* 
    Theme Name: Media Pons Beispieltheme
    Theme URI: https://mediapons.de
    Author: Media Pons
    Author URI: https://mediapons.de
    Description: Beispieltheme zur Vermittlung grundlegender WordPress-Theme-Entwicklung
    Version: 1.0
    Requires at least: 5.8
    Tested up to: 6.2
    Requires PHP: 7.4
    Text domain: mediapons
    Domain Path: /languages
*/

Sie sehen eine Beispiel style.css Datei oben. Wie wir zuvor gesagt haben, ist diese Datei dafür verantwortlich, Informationen für die WordPress-Plattform bereitzustellen, damit das Theme erkannt wird, und diese Informationen werden als CSS-Kommentare bereitgestellt. Abgesehen von Text Domain und Domain Path ist es leicht verständlich, welche Informationen die oben genannte Stylesheet bereitstellt. Text Domain und Domain Path sind nützlich, wenn Sie das Theme gemäß den Anforderungen von WordPress übersetzbar machen möchten.

Lassen Sie uns den Fokus ändern und sich ein Beispiel für eine index.php Vorlagendatei ansehen.

index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="<?php bloginfo('charset') ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
</head>
<body>
    <div id="primary">
        <h1><?php bloginfo('name') ?></h1>
        <h2><?php bloginfo('description') ?></h2>
        <p>Diese Datei ist die Hauptvorlage für diese Website. Wenn es keine andere Vorlage gibt, wird diese Datei gerendert.</p>
    </div>
</body>
</html>

Für diejenigen von Ihnen, die erfahren in der Theme-Entwicklung sind, ist dieser index.php Datei wahrscheinlich nicht vollständig genug. Dieser Beitrag soll ein Ausgangspunkt für die Theme-Entwicklung sein, daher wollte ich Sie vorerst nicht mit mehr Code belasten. Wie Sie sehen, habe ich nur die bloginfo WordPress Funktion hier und da verwendet, um einige Informationen über die Website auszugeben. Wenn Sie nicht erraten können, welche Informationen die bloginfo Funktion ausgibt, können Sie die WordPress-Seite dieser Funktion für weitere Details überprüfen. Wenn Sie ein guter Theme-Entwickler sein möchten, sollten Sie sich daran gewöhnen, Informationen in der WordPress-Dokumentation zu finden.

Abschließend können Sie neben der WordPress-Dokumentation auch unsere Blog-Seite von Zeit zu Zeit besuchen, um Informationen zu verschiedenen Bereichen von WordPress und Webentwicklung zu erhalten. Wenn Sie kein Webentwickler sind, können Sie uns gerne über unsere Kontaktseite kontaktieren und über Ihr nächstes Projekt sprechen.