Grundlegende Konzepte der WordPress-Theme-Entwicklung
Bevor Sie mit dem Schreiben des Codes beginnen, ist es von entscheidender Bedeutung, die grundlegende Struktur eines WordPress-Themes zu verstehen. Ein WordPress-Theme ist im Grunde genommen ein Ordner, der sich im Verzeichnis `wp-content/themes/` befindet und aus einer Reihe von speziell benannten Dateien besteht. Diese Dateien zusammen bestimmen das Erscheinungsbild und die Funktionalitäten einer Website. Das Kernsystem von WordPress liest diese Dateien und kombiniert deren Inhalte (z. B. Artikel, Seiten) mit den Styles und der Struktur des Themes, um die Webseiten zu erstellen, die die Benutzer sehen.
Ein grundlegendes Theme benötigt mindestens zwei Dateien: `index.php` und `style.css`. `index.php` ist die Hauptvorlagendatei des Themes, während `style.css` nicht nur die CSS-Styles enthält, sondern auch Metadaten des Themes in Kommentaren am Anfang der Datei – wie den Namen des Themes, den Autor, eine Beschreibung usw. Dies ist die einzige Möglichkeit für WordPress, ein Theme zu erkennen.
Neben den grundlegenden Dateien beinhaltet die Themenentwicklung auch eine Reihe von Vorlagendateien, die einem sogenannten “Vorlagenhierarchiesystem” folgen. Das bedeutet, dass WordPress je nach dem aktuellen Seitentyp (z. B. Startseite, einzelner Artikel, Archivseite) automatisch die passendste Vorlagendatei auswählt, um die Seite anzuzeigen. Wenn beispielsweise auf einen einzelnen Artikel zugegriffen wird, sucht WordPress in der Reihenfolge nach `single-post-{slug}.php`, `single-post-{id}.php` und `single-post.php` – erst danach werden die allgemeinen Vorlagen `singular.php` oder `index.php` verwendet. Das Verständnis und die gezielte Nutzung dieses Mechanismus ist der Schlüssel dazu, flexible und leistungsstarke Themes zu erstellen.
Erstellen Sie Ihre erste Themastruktur.
Lassen Sie uns mit der Erstellung eines einfachsten Themes beginnen, um uns mit den Kerndateien und der Verzeichnisstruktur vertraut zu machen.
Zuerst erstellen Sie in dem Verzeichnis `wp-content/themes/` Ihrer lokalen WordPress-Installation einen neuen Ordner mit dem Namen `my-first-theme`. Anschließend erstellen Sie innerhalb dieses Ordners eine Datei mit der Endung `style.css` und fügen am Anfang der Datei die folgenden notwendigen Kommentare hinzu:
```css
/*
Theme-Name: Mein erstes Theme
Theme-URI: https://example.com/my-first-theme
Autor: dein Name
Autor-URI: https://example.com
Beschreibung: Dies ist ein einfaches Thema, das zum Lernen der Entwicklung von WordPress-Themen dient.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/
```
Als Nächstes erstellen Sie die Datei `index.php`. Dies ist das Standard-Abfallverarbeitungsmuster („Fallback Template“) für alle Seiten. Wir können dort zunächst eine sehr grundlegende HTML-Struktur einfügen:
Empfohlene Lektüre Einführung in die WordPress-Theme-Entwicklung: Erstelle dein erstes eigenes benutzerdefiniertes Theme von Grund auf。
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();`;
?>
<h2></h2>
<div></div>
<?php
`endwhile;`;
else :
\necho '<p>Es gibt derzeit keinen Inhalt.</p>';
Wenn ja;
?>
<?php wp_footer(); ?>
</body>
</html>
```
Nachdem Sie diese beiden Dateien fertiggestellt haben, gehen Sie in das WordPress-Backend und navigieren Sie zur Seite “Erscheinungsbild” -> “Themes”. Dort sollten Sie “Mein erstes Thema” sehen. Aktivieren Sie dieses Thema, und Ihre Website wird nun mit dem von Ihnen selbst erstellten Thema laufen.
Verstehen der Kern-Template-Tags
Im obigen `index.php`-Code verwenden wir einige “Template-Tags” aus dem Kern von WordPress. Dabei handelt es sich um PHP-Funktionen, die dazu dienen, dynamische Inhalte auszugeben.
`bloginfo( 'name' )`: Gibt den Website-Titel aus, der in “Einstellungen” -> “Allgemein” festgelegt ist.
`the_title()`: Gibt den Titel des aktuellen Artikels oder der aktuellen Seite innerhalb der Schleife aus.
`the_content()`: Gibt den vollständigen Inhalt des aktuellen Artikels oder der aktuellen Seite innerhalb einer Schleife aus.
`have_posts()` / `the_post()`: Wird verwendet, um den Hauptzyklus zu steuern, die aktuellen Artikeldaten durchzugehen und einzustellen.
`wp_head()` und `wp_footer()`: Dies sind äußerst wichtige Hooks, die es dem WordPress-Kern, Plugins und anderen Skripten ermöglichen, Code in den ``-Bereich und den Fußbereich einer Seite einzufügen.
Erweiterung der Themenfunktionen und der Templates
Grundlegende Themen können nur auf allen Seiten mit derselben Layout-Anordnung angezeigt werden. Um eine professionellere Website zu erstellen, müssen wir die Struktur der Templates nutzen, um Templates für spezifische Seiten zu erstellen, und die gemeinsamen Bestandteile in modulare Dateien aufteilen.
Erstellen von Header- und Footer-Komponenten
Es ist eine gängige Praxis, die `header`- und `footer`-Teile in separate Dateien zu trennen, da dies die Wartbarkeit des Codes verbessert. Erstellen Sie die Dateien `header.php` und `footer.php`.
Führen Sie die folgenden Schritte in der Datei `index.php` aus:<body>Alle Codezeilen, die sich vor den Tags befinden, sollen in die Datei `header.php` verschoben werden.</body>und</html>Der gesamte Code, der sich vor dem Tag befindet (in der Regel ab…)<footer>(Gehen Sie zu `footer.php`.)`
Empfohlene Lektüre Komplettes Handbuch für die Entwicklung von WordPress-Themen: Von der Grundlagenkenntnis bis zur Meisterschaft。
Anschließend modifizieren Sie die Datei `index.php` und verwenden Sie die Funktionen `get_header()` und `get_footer()`, um die benötigten Inhalte einzubinden:
PHP
<?php get_header(); ?>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
`the_post();`;
?>
<h2></h2>
<div></div>
<?php
`endwhile;`;
else :
\necho '<p>Es gibt derzeit keinen Inhalt.</p>';
Wenn ja;
?>
<?php get_footer(); ?>
```
Erstellen Sie weitere Seitenvorlagen.
Jetzt können Sie für verschiedene Seitenarten Vorlagen erstellen. Zum Beispiel können Sie eine Vorlage namens `single.php` erstellen, um einzelne Artikel anzuzeigen. Diese Vorlage kann von `index.php` abgeleitet werden, aber sie kann auch detaillierter gestaltet werden – beispielsweise durch die Hinzufügung von Kategorien, Tags, Autoreninformationen und Kommentarformularen.
Empfohlene Lektüre Leitfaden für die Entwicklung von WordPress-Themen: Erstellen Sie von Grund auf ein benutzerdefiniertes Thema。
Erstellen Sie eine weitere Datei namens `page.php`, um statische Seiten anzuzeigen. Ein häufiges Anliegen besteht darin, eine benutzerdefinierte Startseite zu erstellen. Sie können eine Datei mit dem Namen `front-page.php` erstellen – WordPress wird diese dann bevorzugt als Startseite des Websites verwenden, anstatt `home.php` oder `index.php`.
Einführung von Styles und Scripts
正确的样式和脚本引入方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数。这确保了依赖关系管理，并避免了重复加载。
Erstellen Sie eine Datei mit dem Namen `functions.php` im Wurzelverzeichnis des Themes und fügen Sie den folgenden Code hinzu, um das Haupt Stylesheet einzubinden:
PHP
<?php
function my_first_theme_scripts() {
Haupt-Stylesheet des Themes einbinden
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// Es ist möglich, Google Fonts einzuführen.
wp_enqueue_style( 'my-first-theme-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap', array(), null );
// Importieren einer benutzerdefinierten JavaScript-Datei
wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
```
Gleichzeitig können Sie in dieser Datei auch Funktionen zur Unterstützung von Themen hinzufügen, zum Beispiel:
PHP
// Unterstützung für spezielle Bilder zu Artikeln
`add_theme_support('post-thumbnails');`;
// Unterstützung für das Anpassen des Logos
`add_theme_support('custom-logo');`;
// Unterstützung für HTML5-Tags
`add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));`;
```
Anpassung und Optimierung von Themen
Ein ausgezeichnetes Thema sollte nicht nur vollständig funktional sein, sondern auch einfach für die Anpassung durch die Benutzer geeignet sein und zudem eine gute Leistung aufweisen.
Integration eines WordPress-Customizers
Der WordPress-Customizer ermöglicht es den Nutzern, das Erscheinungsbild eines Themes in Echtzeit vorzubereiten und zu ändern. Mithilfe von `functions.php` können Sie ganz einfach weitere Einstellmöglichkeiten hinzufügen. Zum Beispiel können Sie eine Option zum Eintrag von Fußnoten-Copyright-Texten erstellen:
PHP
function my_first_theme_customize_register( $wp_customize ) {
// Hinzufügen eines Abschnitts für “Fußzeile-Einstellungen”
$wp_customize->add_section( 'my_footer_section', array(
'title' => __( '页脚设置', 'my-first-theme' ),
'priority' => 160,
) );
// Fügen Sie eine Einstellungszeile innerhalb des Bereichs hinzu.
$wp_customize->add_setting( 'footer_copyright_text', array(
'default' => '© 2026 我的网站。保留所有权利。',
'sanitize_callback' => 'sanitize_text_field',
'transport' => 'postMessage', // 支持实时预览
) );
// Hinzufügen eines Kontrollelements (Eingabefeld) für die Einstellung
$wp_customize->add_control( 'footer_copyright_text', array(
'label' => __( '页脚版权文本', 'my-first-theme' ),
'section' => 'my_footer_section',
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_first_theme_customize_register' );
```
Danach wird in der Datei `footer.php` die Funktion `get_theme_mod()` verwendet, um diesen Wert auszugeben:
PHP
```
Stellen Sie sicher, dass die Website responsiv und leistungsstark ist.
Moderne Webseiten müssen responsiv gestaltet sein – das wird hauptsächlich mithilfe von CSS-Media Queries erreicht. Stellen Sie sicher, dass die Layout-Elemente in Ihrer `style.css`-Datei auf verschiedene Bildschirmgrößen reagieren, von Handys über Tablets bis hin zu Desktop-Computern.
Bei der Leistungsoptimierung sollte man neben dem Komprimieren von CSS/JS-Dateien und Bildern auch bei der Entwicklung von Themes folgende Aspekte berücksichtigen:
1. Selektives Laden von Scripts: Nur die benötigten JS-Dateien werden auf den jeweiligen Seiten geladen (z. B. `comment-reply.js` auf der Kommentarseite).
2. Bildoptimierung: Wenn Sie `the_post_thumbnail()` und damit verbundene Funktionen verwenden, stellen Sie sicher, dass die generierten Bildgrößen angemessen sind.
3. Reduzierung von Datenbankabfragen: Nutzen Sie die Transients-API sinnvoll, um aufwendige Abfragen zu verarbeiten und zu cachen, und vermeiden Sie unnötige Aufrufe von `WP_Query` in den Templates.
Zusammenfassungen
Du hast den gesamten Prozess der Erstellung eines benutzerdefinierten WordPress-Themes durchlaufen – angefangen bei der Erstellung einer Grundordnerstruktur, die die Dateien `style.css` und `index.php` enthält, über das Verständnis der Struktur der Templates, die Aufteilung der einzelnen Komponenten dieser Templates, die Hinzufügung von Funktionen und Styles mithilfe von `functions.php`, bis hin zur Bereitstellung von Benutzereinstellungen mithilfe von Customizern. Der Kern der Theme-Entwicklung besteht darin, zu verstehen, wie WordPress Daten mit Templates verbindet und wie man seine umfangreiche Funktionsbibliothek sowie das Hook-System nutzt, um flexible und effiziente Websites zu erstellen. Sobald du diese Grundlagen beherrschst, kannst du dich weiteren fortgeschrittenen Aspekten der Theme-Entwicklung widmen – beispielsweise der Erstellung benutzerdefinierter Artikeltypen, der Entwicklung von Widget-Bereichen oder der Entwicklung von Themes, die den Gutenberg-Block-Editor unterstützen. Praxis ist der beste Weg zum Lernen: Durch kontinuierliches Ausprobieren und Anpassen wirst du in der Lage sein, ein einzigartiges WordPress-Theme zu kreieren.
FAQ Häufig gestellte Fragen
Welche Vorkenntnisse sind erforderlich, um ein WordPress-Theme zu entwickeln?
Sie sollten über Grundkenntnisse in HTML und CSS verfügen, da diese die Basis für die Strukturierung und Gestaltung von Webseiten bilden. Außerdem ist es wichtig, die Grundlagen der PHP-Sprache zu beherrschen, da WordPress-Themen hauptsächlich aus PHP-Code bestehen und dazu dienen, Daten dynamisch abzurufen und anzuzeigen. Ein grundlegendes Verständnis von JavaScript kann bei der Hinzufügung interaktiver Funktionen hilfreich sein, ist jedoch nicht für den Einstieg erforderlich.
Kann ich Themes lokal entwickeln? Welche Umgebung ist dafür erforderlich?
Es wird dringend empfohlen, das Themaentwicklung lokal durchzuführen. Dafür müssen Sie eine lokale Serverumgebung einrichten. Die einfachste Methode besteht darin, integrierte Softwarepakete wie XAMPP, MAMP (für Mac) oder Local by Flywheel zu verwenden. Diese Pakete installieren gleichzeitig die Apache/Nginx-Server, PHP sowie die MySQL-Datenbank. Danach müssen Sie nur noch WordPress installieren, um mit der lokalen Entwicklung zu beginnen – ohne dass eine Internetverbindung erforderlich ist. Dies ist sowohl schneller als auch sicherer.
Was ist der Unterschied zwischen dem `functions.php`-File eines Themes und einem Plugin?
Die Datei `functions.php` wird in der Regel verwendet, um Funktionen hinzuzufügen oder zu ändern, die eng mit dem Erscheinungsbild und den Funktionen des aktuellen Themes verbunden sind. Wenn man das Theme wechselt, werden diese Funktionen in der Regel deaktiviert. Plugins hingegen dienen dazu, allgemeine Funktionen bereitzustellen, die unabhängig vom Theme funktionieren (z. B. Kontaktformulare, SEO-Optimierungen). Wenn eine Funktion auch nach einem Themewechsel weiterhin benötigt wird, sollte sie als Plugin entwickelt werden. In der Praxis kann die Datei `functions.php` in großen Themes sehr umfangreich sein.
Wie kann ich meine Website so gestalten, dass sie mehrere Sprachen unterstützt (internationalisiert wird)?
你需要使用WordPress的国际化（i18n）功能。在代码中，所有需要翻译的文本字符串都应使用特定的函数进行包装，例如`__('文本', 'my-text-domain')`或`_e('文本', 'my-text-domain')`。然后在`functions.php`中使用`load_theme_textdomain()`函数来设置翻译文件的加载路径。最后，使用如Poedit这样的工具创建`.pot`模板文件，并让翻译人员生成不同语言的`.po`和`.mo`文件。
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