Um ein voll funktionsfähiges WordPress-Theme zu erstellen, müssen Sie eine Reihe von Kerndateien vorbereiten. Diese Dateien bilden den Rahmen des Themes, und jede Datei hat eine bestimmte Funktion.
Die grundlegendsten Dateien umfassen:
* `style.css`：主题的样式表，同时也是主题的“身份证”，包含主题名称、作者、描述等元信息。
* `index.php`：主题的主模板文件，是默认的首页和文章列表页模板。
* `header.php`：网站的头部模板，通常包含`<head>`部分和网站顶部的导航区域。
* `footer.php`：网站的底部模板，通常包含版权信息、脚本等。
* `functions.php`：主题的功能文件，用于添加自定义功能、注册菜单、侧边栏等。
Fangen wir damit an, die Datei `style.css` zu erstellen. Am Anfang der Datei müssen Sie einen Kommentar hinzufügen, der Informationen zum Thema der Datei enthält.
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习WordPress主题开发而创建的简单自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/Als Nächstes erstellen Sie die Datei `index.php`. In ihrer grundlegendsten Version muss diese die Kopf- und Fußzeile einbinden sowie die Artikel in einer Schleife ausgeben.
<main id="main-content">
<article id="post-<?php the_ID(); ?>">
<h2><a href="/de/</?php the_permalink(); ?>"></a></h2>
<div class="entry-content">
</div>
</article>
endwhile; ?
<p>Es gibt derzeit keine Artikel.</p>
</main>
<?php get_footer(); ?>Die Dateien `header.php` und `footer.php` enthalten jeweils die allgemeinen HTML-Strukturen für den Kopf- bzw. Fußbereich der Website. Die Datei `functions.php` dient dazu, die Funktionen des Themes zu erweitern bzw. zu verbessern.
Vorlagenhierarchie und Schleifen verstehen
WordPress verwendet ein intelligentes System von Template-Ebenen, um zu entscheiden, wie verschiedene Seiteninhalte angezeigt werden sollen. Wenn beispielsweise eine einzelne Artikelseite aufgerufen wird, sucht WordPress zuerst nach der Datei `single.php`. Bei der Aufrufung einer Kategorienseite wird nach `category.php` gesucht. Falls diese Dateien nicht vorhanden sind, wird auf `archive.php` zurückgegriffen – und schließlich, wenn auch diese Datei nicht existiert, auf `index.php`.
Was ist eine Hauptschleife?
`the loop`是WordPress主题开发的核心概念。它是一段PHP代码，用于从数据库中获取文章内容并将其显示在网页上。你在`index.php`中看到的`while ( have_posts() ) : the_post();`就是循环的开始。在循环内部，你可以使用一系列模板标签来输出文章信息，如`the_title()`, `the_content()`, `the_permalink()`等。
Empfohlene Lektüre Komplettes Handbuch für die Entwicklung von WordPress-Themen: Von der Grundlagenkenntnis bis zur Meisterschaft。
Erstellen Sie weitere Vorlagen-Dateien.
Um das Thema professioneller zu gestalten, solltest du einige häufig verwendete Vorlagen erstellen. Zum Beispiel könntest du die Datei `single.php` erstellen, um Artikel einzeln anzuzeigen:
<main>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1></h1>
<div class="post-meta">
发布于： | 作者：
</div>
<div class="post-content">
</div>
</article>
</main>
<?php get_footer(); ?>Ebenso kannst du `page.php` erstellen, um das Layout einer Standardseite zu definieren, sowie `archive.php`, um das Layout von Archivseiten für Kategorien, Tags usw. zu definieren.
Integrierte Menüs und Seitenleisten
Ein modernes Theme enthält in der Regel ein benutzerdefinierbares Navigationsmenü sowie eine Bereich für Seitenleiste-Widgets. Diese Funktionen müssen über die Datei `functions.php` registriert und aktiviert werden.
Registrieren Sie sich für das Navigationsmenü.
Fügen Sie den folgenden Code in die Datei `functions.php` hinzu, um einen Menüeintrag für ein Thema zu registrieren – zum Beispiel “Hauptmenü”.
function my_first_theme_setup() {
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );Nach der Registrierung können Benutzer das Menü im WordPress-Backend unter “Erscheinungsbild” -> “Menü” an die gewünschte Stelle zuweisen. Anschließend müssen Sie im `header.php`-File, an der Stelle, an der das Menü angezeigt werden soll, den folgenden Code hinzufügen, um das Menü einzubinden:
<nav id="site-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>Hinzufügen einer Seitenleiste mit Widgets
Widgets sind eine sehr flexible Funktion von WordPress. Um eine Seitenleiste hinzuzufügen, muss ebenfalls ein “Widget-Bereich” in `functions.php` registriert werden.
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在这里添加小工具。', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );Danach verwenden Sie in der Template-Datei, in der Sie die Seitenleiste anzeigen möchten (z. B. `sidebar.php`), die Funktion `dynamic_sidebar()` zur Ausgabe der Seitenleiste.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Zum Schluss: Vergessen Sie nicht, die Seitennachrichten-Datei in `index.php` oder `single.php` mit `get_sidebar();` einzubinden.
Empfohlene Lektüre Leitfaden für die Entwicklung von WordPress-Themen: Erstellen Sie von Grund auf ein benutzerdefiniertes Thema。
Hinzufügen von Stilen und Skripten
为了保持代码的整洁和可维护性，不应该直接在HTML中硬编码样式和脚本链接。正确的方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数将它们加入队列。
Einführen einer Stylesheet
Obwohl `style.css` erforderlich ist, lädt WordPress es nicht automatisch. Du musst es explizit in die Ausführungsabfolge („Queue“) aufnehmen. Üblicherweise trennen wir auch die Hauptstylesheet von der „Reset-Stylesheet“ (der Stylesheet, die die Standardeinstellungen wiederherstellt).
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 引入一个自定义样式表 (假设位于 /assets/css/main.css)
wp_enqueue_style( 'my-first-theme-main', get_template_directory_uri() . '/assets/css/main.css' );
// 引入一个自定义JavaScript文件 (假设位于 /assets/js/navigation.js)
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Die Nutzung moderner CSS-Entwicklungspraktiken
In der Frontend-Entwicklung im Jahr 2026 ist es von großer Bedeutung, auf responsives Design und Barrierefreiheit zu achten. In Ihrer `style.css`-Datei oder in einer separaten `main.css`-Datei sollten Sie Media Queries verwenden, um sicherzustellen, dass die Website auf verschiedenen Geräten gut angezeigt wird.
/* 基础样式 */
body {
font-family: sans-serif;
line-height: 1.6;
}
/* 响应式导航菜单 */
@media screen and (max-width: 768px) {
#primary-menu {
display: none;
}
/* 移动端菜单样式 */
}Testen und Debuggen
Nach Abschluss der Themenentwicklung ist die Testung ein unverzichtbarer Schritt. Sie müssen die Funktionen des Systems in verschiedenen Umgebungen, mit verschiedenen Browsern und auf verschiedenen Geräten umfassend überprüfen.
Aktivieren Sie den Debugging-Modus.
Während des Entwicklungsprozesses sollten Sie unbedingt den Debugging-Modus von WordPress aktivieren. Dies hilft Ihnen, PHP-Fehler, Warnungen und Benachrichtigungen schnell zu erkennen. Öffnen Sie die Datei `wp-config.php` und suchen Sie nach dem folgenden Code – fügen Sie ihn gegebenenfalls hinzu:
Empfohlene Lektüre Ein Fortgeschrittenen-Leitfaden zur WordPress-Themenentwicklung im Jahr 2026: Aufbau einer responsiven Unternehmenswebsite von Grund auf。
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误，更安全Thematic Unit Tests
Es wird empfohlen, die offiziellen WordPress-Themen-Unit-Testdaten zu verwenden, um Ihr Thema umfassend zu testen. Diese Daten enthalten verschiedene Arten von Artikeln, Seiten, Medien, Kommentaren usw., und stellen sicher, dass Ihr Thema bei der Anzeige verschiedener Inhalte korrekt funktioniert – ohne fehlende Styles oder Layoutprobleme.
Zusammenfassungen
Von der Erstellung der grundlegenden Dateien `style.css` und `index.php` über das Verständnis der Template-Struktur und von Schleifen bis hin zur Registrierung von Menüs und Seitenausschnitten sowie dem sicheren Hinzufügen von Stylescripten – du hast den gesamten Prozess der Erstellung eines grundlegenden, aber vollständigen, benutzerdefinierten WordPress-Themes durchlaufen. Denke daran: Die Entwicklung von Themes ist ein iterativer Prozess. Es ist die beste Praxis, mit der einfachsten Version zu beginnen und nach und nach Funktionen hinzuzufügen sowie Details zu verbessern. Durch das kontinuierliche Lernen von Template-Tags, Action-Hooks und Filtern wirst du in der Lage sein, noch leistungsfähigere und flexiblere Themes zu erstellen.
FAQ Häufig gestellte Fragen
Welche Grundkenntnisse sind erforderlich, um ein WordPress-Theme zu entwickeln?
Sie müssen die Grundlagen von HTML, CSS und PHP beherrschen. Ein gewisses Verständnis von JavaScript ist ebenfalls hilfreich, da es zur Erstellung interaktiver Funktionen verwendet wird. Darüber hinaus ist es unerlässlich, sich mit den grundlegenden Konzepten von WordPress vertraut zu machen – insbesondere mit Artikeln, Seiten, Kategorien, Tags, Widgets und Menüs.
Warum wirken meine Änderungen am Thema nicht im Hintergrund?
Das ist in der Regel aufgrund des Browser-Caches oder des WordPress-Caches aufgetreten. Versuchen Sie zunächst, den Browser manuell zu aktualisieren (Ctrl + F5 oder Cmd + Shift + R). Wenn das Problem weiterhin besteht, überprüfen Sie, ob Sie die Styles und Scripts korrekt in die Warteschlange für die Ausführung aufgenommen haben, und stellen Sie sicher, dass es keine Syntaxfehler im `functions.php`-File gibt. In sehr seltenen Fällen könnte es notwendig sein, den Cache des Servers oder der Plugins zu löschen.
Wie kann ich mein Thema mehrsprachig machen?
你需要做好主题的“国际化”准备。这意味着在代码中所有需要翻译的文本，都应使用翻译函数（如`__()`， `_e()`）进行包装，并为`text-domain`设置一个唯一标识（在`style.css`的头部已定义）。然后，你可以使用如Poedit这样的工具创建`.po`和`.mo`翻译文件，使你的主题能够被轻松翻译成其他语言。
Was ist der Unterschied zwischen benutzerdefinierten Themen (Custom Themes) und Untertempen (Sub-Themes)?
Ein benutzerdefiniertes Thema ist ein völlig neues Thema, das von Grund auf unabhängig entwickelt wird. Ein Untertema hingegen basiert auf einem vorhandenen “Overlord-Thema” und erbt alle Funktionen, Styles sowie Template-Dateien dieses Overlord-Themas. Mit einem Untertema können Sie nur die benötigten Teile (in der Regel Styles und einige Template-Dateien) ändern oder hinzufügen, ohne das Overlord-Thema selbst zu verändern. Dies ist eine sicherere und effizientere Methode, wenn Sie ein beliebtes Thema anpassen oder upgraden möchten – so werden Ihre Änderungen nicht überschrieben.
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.
- Der ultimative Leitfaden zur Auswahl des perfekten WordPress-Themes: Eine umfassende Analyse – von den Grundlagen über die Auswahl des Frameworks bis hin zur individuellen Anpassung
- WordPress-Themenentwicklung von der Grundlage bis zur Meisterschaft: Ein umfassender Leitfaden für das Erstellen personalisierter Webseiten
- WordPress-Themenentwicklung von Grund auf – Erstellen Sie eine einzigartige Website-Oberfläche
- 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
Deutsch