Für jeden Entwickler, der die Aussehen und Funktionen einer Website tiefgreifend anpassen möchte, ist das Erlernen der WordPress-Theme-Entwicklung eine äußerst wertvolle Fähigkeit. Im Gegensatz zum Einsatz von vorgefertigten Themes bedeutet die Erstellung eigener Themes, dass Sie die volle Kontrolle über die Website haben und so eine einzigartige, leistungsstarke Lösung schaffen können, die genau Ihren Anforderungen entspricht. Dieser Artikel führt Sie durch die wesentlichen Schritte der Erstellung Ihres ersten eigenen WordPress-Themes – von der Einrichtung der Umgebung bis zur Erstellung der grundlegenden Template-Dateien.
Vorbereitung der Entwicklungsumgebung und -werkzeuge
Bevor du mit dem Schreiben des Codes beginnst, brauchst du eine geeignete lokale Entwicklungsumgebung. Sie ermöglicht es dir, Tests durchzuführen und Fehler zu beheben, ohne die Online-Website zu beeinträchtigen.
Konfiguration der lokalen Serverumgebung
Es wird empfohlen, integrierte lokale Server-Softwarepakete zu verwenden, wie XAMPP, MAMP (für Mac) oder Local by Flywheel. Diese Tools installieren den Apache-Server, die MySQL-Datenbank und PHP mit nur einem Klick und ersparen so den aufwendigen Konfigurationsprozess. Nehmen wir XAMPP als Beispiel: Nach der Installation starten Sie die Apache- und MySQL-Dienste, und Sie verfügen über eine lokale Serverumgebung.
Code-Editor-Auswahl
Ein leistungsstarker Code-Editor ist ein unverzichtbares Werkzeug für effizientes Entwickeln. Visual Studio Code (VS Code) ist derzeit eine sehr beliebte Wahl: Er ist kostenlos, leicht zu bedienen und verfügt über eine umfangreiche Sammlung von Erweiterungen („Extensions“), wie z. B. PHP Intelephense (für intelligente Vorschläge bei PHP-Code), WordPress Snippet (Code-Vorlagen) und Live Server (Echtzeit-Preview-Funktionen). Diese Erweiterungen tragen erheblich zur Steigerung der Entwicklungseffizienz bei.
Installation der WordPress-Kerndateien
In Ihrem lokalen Server-Root-Verzeichnis (z. B. dem `htdocs`-Ordner von XAMPP) erstellen Sie ein neues Projekt-Verzeichnis, beispielsweise `my-first-theme`. Laden Sie anschließend die neueste WordPress-Comprimierungsdatei von der offiziellen WordPress-Website herunter, entpacken Sie sie und fügen Sie alle Dateien in das `my-first-theme`-Verzeichnis hinzu. Besuchen Sie dann über den Browser die Adresse `http://localhost/my-first-theme` und führen Sie die Installation von WordPress gemäß der bekannten “Fünf-Minuten-Anleitung” durch. Notieren Sie sich den von Ihnen gewählten Datennamen, Benutzernamen und Passwort – diese werden später bei der Verbindung zur Datenbank benötigt.
Die grundlegende Struktur und die Dateien für das Erstellen eines Themas
Ein WordPress-Theme ist im Grunde genommen ein Ordner, der sich im Verzeichnis `wp-content/themes/` befindet. Dieser Ordner enthält eine Reihe von PHP-Template-Dateien, Stylesheets sowie Script-Dateien, die jeweils spezifische Funktionen erfüllen.
Themenordner und Stylesheets
Zuerst gehen Sie in den Ordner `wp-content/themes/` Ihrer lokalen WordPress-Installation und erstellen Sie einen neuen Ordner mit dem Namen Ihrer gewünschten Theme-Datei – zum Beispiel `mycustomtheme`. In diesem Ordner müssen Sie als erstes und wichtigstes die Datei `style.css` anlegen. Die Kommentare am Anfang dieser Datei dienen nicht nur dazu, Informationen über das Theme anzugeben, sondern sind auch entscheidend dafür, dass WordPress das Theme erkennen kann.
Empfohlene Lektüre Ein Leitfaden für den Einstieg in die WordPress-Theme-Entwicklung: Baue dein eigenes benutzerdefiniertes Theme von Grund auf auf。
```css
/*
Themenname: Mein benutzerdefiniertes Thema
Theme-URI: https://example.com/mycustomtheme
Autor: Ihr Name
Autor-URI: https://example.com
Beschreibung: Dies ist mein erstes selbst erstelltes WordPress-Theme, das ich zum Lernen der Entwicklung verwendet habe.
Version: 1.0.0
License: GPL v2 or later
Textdomain: mycustomtheme
*/
```
Core Template Files: index.php und functions.php
Erstellen Sie die Datei `index.php`. Dies ist die Standard- und Reservetemplate-Datei des Themes. Wenn keine anderen, spezifischeren Template-Dateien vorhanden sind, verwendet WordPress diese zur Darstellung der Seiten. Anfangs kann sie sehr einfach strukturiert sein.
PHP
<!DOCTYPE html>
<html no numeric noise key 1000>
<head>
<meta charset="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1000>
<h1><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
`the_post();`;
// Vorläufig wird nur der Titel des Artikels einfach ausgegeben.
Der Titel (')'<h2>', '</h2>' );
Der Inhalt wird nicht angezeigt, da die Funktion the_content() nicht korrekt implementiert wurde.;
`endwhile;`;
else :
\necho '<p>Es gibt derzeit keine Artikel.</p>';
Wenn ja;
?>
<?php wp_footer(); ?>
</body>
</html>
```
Als Nächstes erstellen Sie die Datei `functions.php`. Dies ist der “Motor” Ihres Themes und dient dazu, Funktionen hinzuzufügen, Funktionen zu aktivieren (z. B. Artikel-Abbildern) sowie Styles und Skripte zu laden, die verzögert abgerufen werden sollen.
PHP
<?php
// Aktivierung der Funktion für spezielle Bilder zu Artikeln
`add_theme_support('post-thumbnails');`;
// Menüunterstützung hinzufügen
`add_theme_support('menus');`;
// Registrieren einer Position für ein Navigationselement
register_nav_menus( array(
'primary' => __( '主导航菜单', 'mycustomtheme' ),
) );
// Die Hauptstylesheet wurde korrekt eingefügt.
function mycustomtheme_enqueue_styles() {
wp_enqueue_style( 'mycustomtheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mycustomtheme_enqueue_styles' );
```
Empfohlene Lektüre Einführung in die WordPress-Theme-Entwicklung: Erstelle dein erstes eigenes benutzerdefiniertes Theme von Grund auf。
Nachdem Sie die oben genannten Schritte abgeschlossen haben, melden Sie sich in Ihrem WordPress-Backend an. Gehen Sie zu “Erscheinungsbild” -> “Themen” und dort sollte Ihr “My Custom Theme” angezeigt werden. Klicken Sie darauf, um es zu aktivieren.
Template-Hierarchie und häufig verwendete Template-Dateien
Das Verständnis der Template-Hierarchie in WordPress ist der Kern der Themenentwicklung. Es bestimmt, welches Template-File WordPress bei verschiedenen Arten von Seitenanfragen bevorzugt verwendet.
Konzept der Template-Hierarchie
WordPress sucht nach den Template-Dateien in einer bestimmten Prioritätsreihenfolge abhängig vom aktuellen angezeigten Seitentyp. Wenn beispielsweise eine einzelne Blogartikelseite aufgerufen wird, durchsucht WordPress nacheinander die Dateien `single-post.php`, `single.php`, `singular.php` und `index.php`. Sobald eine dieser Dateien gefunden wird, wird sie verwendet.
Erstellen Sie häufig verwendete Vorlagendateien.
Auf dieser Grundlage kannst du beginnen, spezifischere Vorlagendateien zu erstellen, um dein Thema weiter zu ergänzen und zu verfeinern.
- `header.php` und `footer.php`: Trennen Sie den Code für die Kopf- und Fußzeile aus `index.php` in diese beiden Dateien und importieren Sie ihn anschließend in `index.php` mithilfe der Funktionen `get_header()` und `get_footer()`. Dadurch wird der Code wiederverwendet.
- `page.php`: Dient zum Anzeigen statischer Seiten. Sie können zunächst den Inhalt von `index.php` kopieren, um eine neue Datei `page.php` zu erstellen, und diese anschließend nach Ihren Wünschen anpassen.
- `single.php`: Dieses File dient zur Anzeige eines einzelnen Artikels. In der Regel enthält es Informationen wie den Artikeltitel, den Inhalt, das Veröffentlichungsdatum, den Autor, die Kategorien sowie die Tags des Artikels.
- `archive.php`: Dient zur Anzeige einer Liste von Archivartikeln, beispielsweise nach Kategorie, Tag, Autor oder Datum sortiert.
- `front-page.php`: Falls diese Datei existiert, wird sie als Startseite der Website verwendet und hat eine höhere Priorität als `home.php` und `index.php`. Hier können Sie das Layout der Startseite individuell gestalten.
Nach der Erstellung dieser Dateien wird die Struktur deines Themes klarer und professioneller sein.
Empfohlene Lektüre Komplettes Handbuch für die Entwicklung von WordPress-Themen: Von der Grundlagenkenntnis bis zur Meisterschaft。
Hinzufügen von Styles und grundlegenden Funktionen
Ein Thema ohne jegliche Gestaltungselemente ist „roh“ – doch einige grundlegende Funktionen können die Nutzbarkeit sowie die Benutzererfahrung eines Themas erheblich verbessern.
Erstellen Sie grundlegende CSS-Styles.
Unter den Kommentaren am Anfang von `style.css` fangen Sie an, Ihre Stylesheets zu erstellen. Beginnen Sie damit, die Standardbrowser-Einstellungen zurückzusetzen sowie globale Schriftarten und Farben festzulegen. Anschließend gestalten Sie nacheinander die Styles für den Kopfbereich, die Navigation, den Hauptinhaltsbereich, die Seitenspalte (falls diese später hinzugefügt wird) und den Fußbereich. Verwenden Sie responsive Design-Mediaqueries, um sicherzustellen, dass die Website auf Mobiltelefonen, Tablets und Computern gut angezeigt wird.
```css
/* Grundlegende Zurücksetzungen und globale Styles */
* {
\nmargin: 0;
`padding: 0;`;
`box-sizing: border-box;`;
}
Körper {
`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;`;
`line-height: 1.6;`;
Farbe: #333;
`background-color: #f4f4f4;`;
}
.container {
Breite: 90%;
max-Breite: 1200px;
`margin: 0 auto;`;
`padding: 20px;`;
}
/* Kopfstyles */
Header {
Hintergrund: #333;
Farbe: #fff;
`padding: 1rem 0;`;
Textausrichtung: zentriert;
}
/* Navigation-Menü-Design */
.primary-menu {
/* Stil für dein Navigationsmenü */
}
```
Navigationsmenü und Seitenleiste implementieren
In der Datei `header.php` haben Sie den Platz für das Menü reserviert. Verwenden Sie die Funktion `wp_nav_menu()`, um das Menü aufzurufen, das in der Datei `functions.php` registriert wurde.
PHP
```
Um eine Seitenleiste hinzuzufügen, muss zunächst ein Bereich für die Seitenleisten-Widgets in `functions.php` registriert werden.
PHP
function mycustomtheme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'mycustomtheme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'mycustomtheme' ),
'before_widget' => '
Anschließend verwenden Sie die Funktion `dynamic_sidebar( 'sidebar-1' )` an der Stelle, an der Sie die Seitenleiste angezeigt haben möchten – beispielsweise neben dem Hauptinhaltsbereich von `index.php` oder `single.php`.
Zusammenfassungen
Durch die Schritte in diesem Artikel hast du den Prozess der Erstellung eines grundlegenden, selbstdefinierten WordPress-Themes von Grund auf abgeschlossen. Wir haben erklärt, wie man eine lokale Entwicklungsumgebung einrichtet, die Kerndateien des Themes erstellt (darunter `style.css`, `index.php` und `functions.php`), die Struktur der Templates verstanden und gängige Templates erweitert. Zudem haben wir dem Theme grundlegende Styles sowie Funktionen wie ein Navigationsmenü und eine Seitenspalte hinzugefügt. Dies ist jedoch nur der Anfang – du kannst weitere fortgeschrittene Templates (z. B. die Suchseite `search.php` oder die 404-Seite `404.php`) untersuchen, mehr über die Verwendung von WordPress’ „The Loop“-Mechanismus lernen, JavaScript-Frameworks integrieren oder dein Theme in den offiziellen WordPress-Theme-Verzeichnis einreichen. Regelmäßiges Üben sowie das Studium der offiziellen Entwicklungs-Dokumentation sind der beste Weg, um deine Fähigkeiten zu verbessern.
FAQ Häufig gestellte Fragen
Welche Vorkenntnisse sind erforderlich, um ein WordPress-Theme zu entwickeln?
Sie sollten über grundlegende Kenntnisse in HTML und CSS verfügen, um die Struktur und das Erscheinungsbild von Webseiten zu erstellen. Ein grundlegendes Verständnis von PHP ist ebenfalls wichtig, da WordPress-Themes hauptsächlich aus PHP-Template-Dateien bestehen. Ein wenig JavaScript kann hilfreich sein, um interaktive Funktionen hinzuzufügen – ist jedoch nicht für die Einführungsphase erforderlich.
Warum wird mein neues Thema nicht in der Themensliste im WordPress-Backend angezeigt?
Bitte überprüfen Sie zunächst, ob Ihre Theme-Dateien ordnungsgemäß im Verzeichnis `wp-content/themes/` abgelegt sind. Stellen Sie außerdem sicher, dass die Datei `style.css` im Wurzelverzeichnis dieses Themes vorhanden ist und dass die Kopfzeileninformationen (z. B. „Theme Name“) in der richtigen Formatierung aufgeführt sind. Jeder Fehler kann dazu führen, dass WordPress Ihr Theme nicht erkennen kann.
Was ist die Funktion der Datei functions.php?
Die Datei `functions.php` ist das zentrale Element für die Funktionen deines Themes. Sie dient dazu, Kernfunktionen von WordPress zu aktivieren oder zu modifizieren (z. B. die Hinzufügung von Theme-Unterstützungsoptionen), Navigationsmenüs und Seitenleisten-Widgets zu registrieren, CSS-Dateien sowie JavaScript-Skripte sicher zu laden, sowie benutzerdefinierte Funktionen und Filter zu definieren. Sie ist somit ein entscheidendes Dokument für die Erweiterbarkeit deines Themes.
Wie kann ich mein Thema mehrsprachig machen?
让主题支持多语言（国际化与本地化）是一项重要实践。你需要在`style.css`的头部和`functions.php`中设置正确的`Text Domain`（文本域），然后在代码中所有需要翻译的字符串处使用`__()`或`_e()`等翻译函数进行包裹。之后，可以使用像Poedit这样的工具生成`.po`和`.mo`语言文件，供翻译者使用。
Nach Abschluss der Entwicklung: Wie wird das Thema auf einer Online-Website bereitgestellt (deployed)?
Es gibt hauptsächlich zwei Möglichkeiten, Themes zu deployen. Die erste besteht darin, das lokale Theme-Verzeichnis mithilfe eines FTP/SFTP-Clients (z. B. FileZilla) direkt in das Verzeichnis `wp-content/themes/` der Online-Website zu übertragen. Die zweite, professionellere Methode besteht darin, das Theme in eine ZIP-Datei zu verpacken und anschließend über die Funktion “Erscheinungsbild” -> “Themes” -> “Neues Theme hinzufügen” -> “Theme hochladen” im WordPress-Backend zu installieren. Unabhängig von der gewählten Methode wird vor der Deployment dringend empfohlen, das Theme in der Testumgebung der Online-Website ausführlich zu testen.
Was kommt als Nächstes, was kommt als Nächstes?
Erweiterte Lektüre und praktische Kenntnisse
Die folgenden Artikel stehen im Zusammenhang mit dem Thema dieses Artikels und eignen sich für eine vertiefte Lektüre. Oft ist es besser, mit dem Artikel zu beginnen, der Ihrem aktuellen Problem am nächsten kommt, und dann nach und nach die umliegenden Themen zu behandeln.
- Leitfaden für die Entwicklung von WordPress-Themen: Erstellen Sie von Grund auf eine benutzerdefinierte Website
- Kompletter Leitfaden für die Entwicklung von WordPress-Themen: Ein Praktikum, um von Grund auf Meister zu werden
- Kompletter Leitfaden für die Entwicklung von WordPress-Themen: Erstellen Sie von Grund auf professionelle Website-Vorlagen
- Praktische WordPress-Themenentwicklung: Von Null aus responsive, unternehmensgerechte Webseiten erstellen
- Kodlose Erstellung von WordPress-Themen: Ein umfassender Leitfaden von Grund auf
Deutsch