Das Erstellen eines eigenen WordPress-Themes bedeutet, dass Sie die Aussehen, Funktionen und Leistung Ihrer Website vollständig kontrollieren können. Im Gegensatz zu vorgefertigten Themes ermöglicht die individuelle Entwicklung die Entwicklung einer einzigartigen, effizienten Website, die perfekt zu Ihrer Marke passt. Diese Anleitung führt Sie von der Einrichtung der Grundlagen bis zur Veröffentlichung eines voll funktionsfähigen Themes.
Entwicklungsumgebung und Grundlegende Dateistruktur
Bevor Sie mit dem Schreiben von Code beginnen, ist es von entscheidender Bedeutung, eine geeignete lokale Entwicklungsumgebung einzurichten. Sie können dazu XAMPP, MAMP oder die professionelleren Tools Valet und Local by Flywheel verwenden. Stellen Sie sicher, dass Ihre Umgebung PHP 7.4 oder eine höhere Version sowie eine MySQL- oder MariaDB-Datenbank unterstützt.
Ein WordPress-Theme ist im Wesentlichen ein wp-content/themes/ Die Ordnern im Verzeichnis müssen mindestens zwei Schlüsseldateien enthalten: eine Stylesheet und ein Index-Template.
Empfohlene Lektüre Einführung in die WordPress-Theme-Entwicklung: Erstellen Sie das Erscheinungsbild Ihrer Website von Grund auf.。
Zunächst einmal… wp-content/themes/ Erstellen Sie nun einen neuen Ordner, zum Beispiel… my-custom-themeDann erstellen Sie die erste erforderliche Datei:style.cssDieses Datei definiert nicht nur die Styles der jeweiligen Themes, sondern enthält auch in den Kommentaren am Anfang der Datei Metadaten zu diesen Themes.
/*
Theme Name: My Custom Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个从头开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/Als Nächstes erstellen Sie die zweite erforderliche Datei:index.phpDies ist die Standardvorlagendatei für das Thema. Wenn WordPress keine spezifischeren Vorlagen finden kann, wird diese verwendet. Die einfachste Variante davon… index.php Es kann nur eine einzige Schleife enthalten, die zur Anzeige der Artikelliste verwendet wird.
<main>
<?php if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<article>
<h2></h2>
<div></div>
</article>
<?php endwhile;
endif; ?>
</main>Verstehen der Template-Hierarchie
WordPress nutzt eine Hierarchie von Templates, um zu entscheiden, welches Template-File für eine bestimmte Seite verwendet werden soll. Wenn beispielsweise auf einen einzelnen Artikel zugegriffen wird, sucht WordPress zunächst nach dem passenden Template für diesen Artikel. single.phpWenn dies nicht der Fall ist, fällt man zurück auf singular.phpUnd schließlich kommt noch… index.phpDas Verständnis dieser Hierarchiebeziehungen ist der Schlüssel für eine effiziente Entwicklung von Themes. Sie sollten entsprechende Vorlagendateien erstellen, je nach den Anforderungen. page.php(Seite)archive.php(Archivseite) und single.php(Ein einzelner Artikel.)
Core template files and theme functionality
Außer index.php und style.cssEin voll funktionsfähiges Theme benötigt außerdem noch einige weitere Kern-Templatdateien, um die Seitenstruktur zu unterteilen und die Wiederverwendung von Code zu ermöglichen.
Erstellen header.php Eine Datei enthält in der Regel eine Angabe zum Dokumenttyp.<head> Regionen sowie die Top-Navigation und das Logo der Website. Verwenden Sie diese Elemente entsprechend der Designanforderungen. wp_head() Funktionen sind von entscheidender Bedeutung, da sie es dem WordPress-Kern, den Plugins sowie Ihrem Thema ermöglichen, den notwendigen Code hier einzufügen – beispielsweise Verweise auf Stylesheets oder Meta-Tags.
Empfohlene Lektüre Vom Nullpunkt zur Meisterschaft im Themaentwicklung für WordPress: Ein praktischer Leitfaden für die Erstellung moderner Webseiten。
<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1002>
<header>
<h1><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>Erstellen footer.php Die Datei enthält Fußzeileninhalte sowie geschlossene HTML-Tags. Ebenso muss eine entsprechende Aktion durchgeführt werden. wp_footer() Diese Funktion dient zum Laden des Codes, der für die Ausführung von Skripten und Plugins erforderlich ist.
functions.php Die Datei ist das “Zentrum der Steuerung” für Ihr Thema. Es handelt sich nicht um eine Vorlagendatei, sondern um eine PHP-Datei, die bei der Initialisierung des Themas automatisch geladen wird. Hier können Sie Menüs und Seitenspalten registrieren, Funktionen zur Unterstützung Ihres Themas hinzufügen sowie Stylesheets und Skripte einbinden.
<?php
// 添加主题支持
function my_theme_setup() {
add_theme_support( 'title-tag' ); // 让 WordPress 管理标题标签
add_theme_support( 'post-thumbnails' ); // 启用文章缩略图功能
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
// 注册导航菜单
function my_theme_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
) );
}
add_action( 'init', 'my_theme_menus' );Dynamisch generiertes Menü
„In“ header.php In diesem Kontext können Sie folgendes verwenden: wp_nav_menu() Eine Funktion, die das von Ihnen registrierte Menü anzeigt. Diese Funktion gibt eine unsortierte Liste aus, die mit den richtigen CSS-Klassen und der richtigen Struktur ausgestattet ist und im WordPress-Backend unter “Erscheinungsbild > Menü” konfiguriert wurde.
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'container' => false,
) );
?>
</nav>Styles, Scripts und responsives Design
Moderne WordPress-Themen müssen den besten Praktiken folgen, um CSS- und JavaScript-Dateien zu laden, und sicherstellen, dass die Website auf allen Geräten gut angezeigt wird.
„In“ functions.php In China wird es verwendet. wp_enqueue_style() und wp_enqueue_script() Eine Funktion wird verwendet, um Ressourcen einzurichten. Dadurch wird eine korrekte Verwaltung der Abhängigkeiten sowie die richtige Lade-Reihenfolge gewährleistet und es wird ermöglicht, Plugins sowie Untertitel zu überschreiben (d.h., ihre Funktionen zu ändern oder zu erweitern).
function my_theme_scripts() {
// 排入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0.0' );
// 排入自定义 JavaScript 文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.0', true );
// 为脚本本地化数据（可选）
wp_localize_script( 'my-theme-script', 'myThemeData', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );Reaktives Design sollte der Standard sein. In Ihrem… style.css In diesem Kontext werden Media Queries verwendet, um die Layoutanpassungen für verschiedene Bildschirmgrößen zu steuern. Ein gängiges Vorgehensmuster ist das “Mobile-First”-Prinzip: Zuerst werden die Grundstile für mobile Geräte erstellt, und anschließend werden diese Styles für größere Bildschirme angepasst. min-width Die Medienabfrage fügt für größere Bildschirme erweiterte Styles hinzu.
Empfohlene Lektüre Ich zeige Ihnen Schritt für Schritt, wie Sie ein leistungsstarkes, benutzerdefiniertes WordPress-Theme erstellen können.。
/* 基础移动样式 */
.container { width: 100%; padding: 0 15px; }
.menu { display: block; }
/* 平板电脑及以上 */
@media (min-width: 768px) {
.container { width: 750px; margin: 0 auto; }
.menu { display: flex; }
}
/* 桌面电脑 */
@media (min-width: 992px) {
.container { width: 970px; }
}Verwenden Sie die eingebauten Klassen und Funktionen von WordPress.
WordPress bietet viele nützliche CSS-Klassen und PHP-Funktionen zur Unterstützung der Gestaltung von Webseiten.body_class() Die Funktion gibt eine Reihe von CSS-Klassen aus, die auf dem aktuellen Seitentyp basieren (z. B.) home, single-post, page-id-2Sie können diese Klassen in CSS verwenden, um gezielte Styles zu definieren.post_class() Die Funktion generiert für das Container-Element jedes Artikels eine ähnliche Klasse.
Integration von fortgeschrittenen Funktionen mit Widgets
Um Ihr Thema professioneller und benutzerfreundlicher zu gestalten, können Sie einige fortgeschrittene Funktionen integrieren, wie z. B. benutzerdefinierte Artikeltypen, Widget-Bereiche (Seitenleisten) sowie Einstellungen für die Anpassung der Benutzeroberfläche.
Der Widget-Bereich ermöglicht es den Nutzern, den Inhalt mithilfe der Funktion “Erscheinungsbild > Widgets” im WordPress-Backend zu personalisieren, indem sie dort Module verschieben. functions.php Ein Bereich für Seitenleisten-Widgets wird in „China“ registriert.
function my_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );Nach der Registrierung können Sie die Vorlagendateien verwenden (z. B. sidebar.phpVerwenden dynamic_sidebar() Eine Funktion wird verwendet, um diese Region aufzurufen.
Der WordPress Customizer ermöglicht es den Nutzern, Änderungen an ihrem Theme in Echtzeit vorzubestellen. Sie können beispielsweise einfache Einstellungen zu Ihrem Theme hinzufügen, wie das Website-Logo oder den Copyright-Text am Fuß der Seite. Dafür wird der Customizer verwendet. WP_Customize_Manager Klassen, in… functions.php Fügen Sie den entsprechenden Code hinzu.
function my_theme_customize_register( $wp_customize ) {
// 添加一个“版权信息”设置
$wp_customize->add_setting( 'footer_copyright', array(
'default' => '© 2026 Your Site Name',
'sanitize_callback' => 'sanitize_text_field',
) );
$wp_customize->add_control( 'footer_copyright', array(
'label' => __( '页脚版权文本', 'my-custom-theme' ),
'section' => 'title_tagline', // 放在“站点身份”区域
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_theme_customize_register' );Und dann, in Ihrem… footer.php In diesem Kontext können Sie folgendes verwenden: get_theme_mod() Eine Funktion, die den Wert dieser Einstellung ausgibt:<?php echo esc_html( get_theme_mod( 'footer_copyright' ) ); ?>。
Zusammenfassungen
Die Entwicklung von WordPress-Themen beinhaltet die Kombination von Kenntnissen in PHP, HTML, CSS und JavaScript mit der Kernarchitektur von WordPress. Der Prozess beginnt mit der Erstellung einer korrekten Dateistruktur und umfasst schrittweise die Implementierung von Template-Ebenen, Kernfunktionsdateien, Ressourcenverwaltung sowie responsivem Design. Durch die Integration von Erweiterungen wie Widgets und Customizers können Sie professionelle Themes erstellen, die sowohl leistungsfähig als auch benutzerfreundlich sind. Der Schlüssel liegt darin, das Funkionieren von WordPress zu verstehen und dessen Kodierstandards sowie bewährte Praktiken zu befolgen – dies sorgt dafür, dass Ihre Themes sicher, effizient und einfach zu warten sind.
FAQ Häufig gestellte Fragen
Welche Vorkenntnisse sind für die Entwicklung von WordPress-Themes erforderlich?
Sie benötigen eine solide Grundlage in HTML und CSS – diese bilden die Grundpfeiler für das Gestalten der Erscheinung von Webseiten. Außerdem müssen Sie die grundlegende Syntax von PHP beherrschen, da sowohl der Kern von WordPress als auch die Themes mit PHP programmiert sind. Ein Verständnis von JavaScript (insbesondere jQuery) ist sehr hilfreich, um interaktive Funktionen hinzuzufügen. Schließlich ist es entscheidend, die grundlegenden Konzepte von WordPress zu kennen, wie z. B. Schleifen, Hooks und die Hierarchie der Templates, um erfolgreiche Themes zu entwickeln.
Wie lang kann die functions.php-Datei eines Themes sein? Wird dies die Leistung beeinflussen?
functions.php Theoretisch können Dateien sehr lang sein, aber aus Gründen der Wartbarkeit wird dringend empfohlen, sie modular aufzuteilen. Sie können verschiedene Funktionen – wie benutzerdefinierte Artikeltypen, Shortcodes oder kleine Hilfsprogramme – in separate Dateien aufteilen und diese anschließend… functions.php Verwenden Sie es in China require_once oder include Um den Code einzuführen: Solange die Programmierung effizient ist und es keine redundanten Abfragen gibt, hat die Länge des Codes nur einen sehr geringen Einfluss auf die Leistung. Bei großen Projekten ist es üblich, die Dateien in kleinere Teile aufzuteilen.
Wie kann ich mein Thema für mehrsprachige Übersetzungen optimieren?
Es ist ein wichtiger Schritt, um Themen auf Internationalisierung (i18n) vorzubereiten, wenn man weltweite Nutzer anspricht. In Ihrem PHP-Code sollten alle für die Benutzer bestimmten Textzeichenketten mit den Übersetzungsfunktionen von WordPress umschlossen werden. __()(Dieze Zeichen werden verwendet, um Text wiederzugeben) oder _e()(Die Anweisung „(used for direct text output)“ wird in der Übersetzung beibehalten, da sie eine spezifische Formatierung angibt.) Sie benötigen… style.css Der Kopfteil und… load_theme_textdomain() Die Funktion wird korrekt aufgerufen. Text DomainDanach können Entwickler Tools wie Poedit verwenden, um die entsprechenden Inhalte zu generieren. .pot Template-Dateien und erstellen die entsprechenden… .po und .mo Translate the file.
Wie kann ich das von mir entwickelte Theme in das offizielle WordPress-Theme-Verzeichnis einreichen?
Um in das offizielle WordPress-Verzeichnis aufgenommen zu werden, müssen strenge Anforderungen erfüllt werden: – Ihr Code muss den WordPress-Programmierstandards entsprechen; es darf keine Kurzzeichen oder Widgets verwendet werden, um Inhalte zu hardcoden. – Alle Funktionen müssen sicher sein und der GPL-Lizenz entsprechen. – Das Theme muss die Tests des Plugins „Theme Check“ bestehen und über ein gutes responsives Design, gute Barrierefreiheit sowie umfassende Dokumentation verfügen. Der Einreichungsprozess erfolgt über die entsprechende Einreichungsseite auf der WordPress-Website. Anschließend wird das Theme von einem Review-Team überprüft.
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 den Aufbau moderner Webseiten: Der vollständige Prozess von der Grundlagenplanung bis zur Live-Veröffentlichung sowie die Auswahl des technischen Stack
- Analyse des Kernprozesses und der Schlüsseltechnologien bei der Websiteentwicklung
- 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
- Ein Muss für Anfänger im Webdesign: Eine umfassende Anleitung, wie man von Grund auf eine hochleistungsfähige Website erstellt.
- WordPress-Themenentwicklung von der Grundlage bis zur Meisterschaft: Ein umfassender Leitfaden für das Erstellen personalisierter Webseiten
Deutsch