Verständnis der grundlegenden Struktur und der Kerndateien eines WordPress-Themes
Ein benutzerdefiniertes WordPress-Theme ist im Grunde genommen ein Ordner, der bestimmte Dateien enthält, und dieser Ordner befindet sich in einer bestimmten Verzeichnisstruktur innerhalb des WordPress-Installationspfades./wp-content/themes/Diese Dateien befinden sich im Verzeichnis. Sie folgen dem Template-Hierarchiesystem von WordPress und gemeinsam bestimmen sie, wie die Website den Inhalt aus der Datenbank (z. B. Artikel, Seiten) den Besuchern anzeigt. Das Verständnis der Rolle dieser Dateien sowie der Art und Weise ihrer Zusammenarbeit ist der erste Schritt beim Entwickeln.
Erforderliche Dateien für das Thema sowie die Verzeichnisstruktur
Jedes WordPress-Theme muss zwei Kerndateien enthalten:style.css und index.phpDarunter befinden sichstyle.css Die Rolle dieser Datei ist besonders entscheidend: Sie ist nicht nur die CSS-Datei, die das Erscheinungsbild des Themes definiert, sondern auch der Kommentarblock am Anfang der Datei stellt die “Identifikationskarte” des Themes für WordPress dar. Dieser Kommentarblock muss einem bestimmten Format streng folgen.
/*
Theme Name: 我的自定义主题
Author: 开发者名称
Description: 这是一个用于演示如何从零开发的自定义WordPress主题。
Version: 1.0.0
Text Domain: my-custom-theme
*/index.php Dies ist die Hauptvorlagendatei des Themas und gleichzeitig die letzte Abwehrlinie in der Hierarchie der Vorlagen. Wenn WordPress für eine aktuelle Anfrage keine spezifischeren Vorlagendateien finden kann (z. B.single.phpoderpage.phpWenn dies der Fall ist, wird wieder auf die vorherige Version zurückgegriffen.index.phpDaher muss ein solides Theme diese Datei enthalten.
Empfohlene Lektüre Erstellen Sie eine professionelle Website: Ein vollständiger Leitfaden zum Erstellen eines benutzerdefinierten WordPress-Themes von Grund auf。
Die Hierarchie der Templates sowie die Funktionen der Template-Dateien
Die Template-Hierarchie von WordPress basiert auf einem intelligenten System zur Auswahl von Templates. Es wählt automatisch das passendste Template-File aus, abhängig von der Art der von dem Benutzer besuchten Seite (z. B. Startseite, Artikelseite, Kategorienseite). Wenn beispielsweise ein einzelner Artikel angezeigt wird, sucht WordPress in der folgenden Reihenfolge nach dem passenden Template:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> Und schließlich kommt das Letzte. index.php。
Neben den beiden oben genannten erforderlichen Dateien enthält ein voll funktionsfähiges Theme in der Regel auch:
* header.phpDefinieren Sie den Dokumentenkopf, der folgende Inhalte enthält:<head>Regionen, Website-Logo und Hauptnavigation.
* footer.phpDefinieren Sie einen Fußbereich für das Dokument, der Informationen zum Urheberrecht, Hilfslinks usw. enthält.
* functions.phpDies ist das “Gehirn” des Themes und dient dazu, Skripte und Styles zu laden, Menüs sowie Widgets zu registrieren sowie Funktionen zur Unterstützung des Themes zu definieren.
* single.phpDient zur Anzeige eines einzelnen Artikels.
* page.phpDient zur Anzeige einer einzelnen Seite.
Die Kernfunktionen und Vorlagen zur Erstellung von Themen
Nachdem die grundlegende Dateistruktur erstellt wurde, ist der nächste Schritt darin, die Inhalte dieser Vorlagendateien zu füllen und mithilfe der Kernfunktionen von WordPress sowie des “Hauptzyklus” („Main Loop“) Daten dynamisch auszugeben.
In functions.php initialisieren Sie die Funktionen des Themes.
functions.php Dateien sind das Herzstück der Erweiterungsfunktionen eines Themes. Hier können Sie verschiedene Funktionen hinzufügen, ohne die WordPress-Kerndateien ändern zu müssen. Ein standardisiertes Initialisierungsverfahren umfasst die Einrichtung der Theme-Unterstützung, das Registrieren von Navigationsmenüs und Widget-Bereichen sowie das sichere Laden von Skripten und Stylesheets.
<?php
// 主题初始化设置
function mytheme_setup() {
// 让WordPress管理<title>标签
add_theme_support( 'title-tag' );
// 启用文章特色图像（缩略图）支持
add_theme_support( 'post-thumbnails' );
// 添加对HTML5标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 注册一个主菜单位置
register_nav_menus( array(
'menu-1' => esc_html__( '主菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );
// 注册小工具侧边栏
function mytheme_widgets_init() {
register_sidebar( array(
'name' => esc_html__( '侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( '在此添加小工具。', 'my-custom-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', 'mytheme_widgets_init' );
// 加载主题的样式表和脚本
function mytheme_scripts() {
// 加载主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
// 加载导航脚本（如果有的话）
wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
?>Inhalt mit der Hauptschleife (The Loop) ausgeben.
“Der ”Hauptzyklus“ („Main Loop“) ist das zentrale Konzept in WordPress-Templates. Es handelt sich um einen Abschnitt PHP-Code, der dazu dient, die Artikel (oder Seiteninhalte), die auf der aktuellen Seite angezeigt werden sollen, zu überprüfen und durchzugehen. Nahezu alle Templates zur Anzeige von Inhalten setzen auf diesen Hauptzyklus. Hier ist ein Beispiel dafür…index.phpEinfaches Beispiel für die Verwendung einer Hauptschleife:
Empfohlene Lektüre Einführung in die Entwicklung von WordPress-Themen: Von Null bis Eins – Erstellen Sie Ihr eigenes benutzerdefiniertes Thema。
<?php if ( have_posts() ) : ?>
<div class="posts-container">
<?php while ( have_posts() ) : the_post(); ?>
<article no numeric noise key 1009>
<h2 class="entry-title">
<a href="/de/</?php the_permalink(); ?>"></a>
</h2>
<div class="entry-meta">
发布于：
</div>
<div class="entry-summary">
</div>
</article>
<?php endwhile; ?>
</div>
<p><?php esc_html_e( '很抱歉，没有找到符合条件的内容。', 'my-custom-theme' ); ?></p>In diesem Code-Teil…have_posts()undthe_post()Funktionen steuern Schleifen.the_title()、the_permalink()、the_excerpt()Die Template-Tags dienen dazu, konkrete Inhalte auszugeben.
Implementierung von responsivem Design sowie fortgeschrittenen Themeneigenschaften
Ein modernes Thema erfordert nicht nur vollständige Funktionalität, sondern auch ein hervorragendes Benutzererlebnis. Dazu gehört, dass sich die Darstellung auf verschiedenen Geräten gut anpasst und dass individuelle Anforderungen auf flexible Weise erfüllt werden können.
Integration einer responsiven Layout-Struktur sowie von Optimierungen für mobile Endgeräte
Stellen Sie sicher, dass Ihr Thema responsiv ist – dies erfordert Anpassungen sowohl in der HTML- als auch in der CSS-Struktur. Beginnen Sie dazu zunächst mit…header.phpDie Datei der<head>Innerhalb der Region muss sichergestellt werden, dass die viewport-Meta-Tags enthalten sind:
<meta name="viewport" content="width=device-width, initial-scale=1">Zweitens, in Ihrem…style.cssIn diesem Beispiel werden Media Queries verwendet, um die Layout- und Stilanpassungen je nach Bildschirmbreite vorzunehmen. Zum Beispiel wird die Seitenspalte für mobile Geräte ausgeblendet:
@media screen and (max-width: 768px) {
#secondary-sidebar {
display: none;
}
.site-main {
width: 100%;
}
}Erstellen Sie benutzerdefinierte Seitenvorlagen und Untertemate.
Um den besonderen Layout-Anforderungen einer einzelnen Seite gerecht zu werden, ermöglicht WordPress es Ihnen, benutzerdefinierte Seitenvorlagen zu erstellen. Zum Beispiel können Sie eine Vollbreitseitenvorlage ohne Seitenleiste erstellen und diese mit dem Namen „Full-Width Page Template Without Sidebar“ benennen.template-fullwidth.phpFügen Sie am Anfang des Files die folgende Anmerkung hinzu:
<?php
/**
* Template Name: 全宽页面模板
* Description: 一个没有侧边栏的页面模板。
*/Danach kann man dieses “Vollbreitens-Template” in den “Seiten-Einstellungen” während der Bearbeitung der Seite im WordPress-Backend auswählen.
Empfohlene Lektüre Komplettanleitung zur Entwicklung von WordPress-Themen: Von Null bis Eins – Erstellen Sie eigene Websites。
Um zu verhindern, dass Ihre eigenen Anpassungen bei einem Update des übergeordneten Themes überschrieben werden, wird dringend der Einsatz von Untertemasen empfohlen. Ein Untertema sollte lediglich einen…style.cssUnd ein optionaler…functions.phpDie Unterthemen vonstyle.cssDer Kopf muss das übergeordnete Thema angeben:
/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/Internationalisierung, Optimierung und Vorbereitung auf die Veröffentlichung von Themen
Wenn die Entwicklung kurz vor dem Abschluss steht, müssen Sie sicherstellen, dass das Produkt von Nutzern auf der ganzen Welt leicht verwendet werden kann und eine gute Leistung bietet. Abschließend sollten Sie sich darauf vorbereiten, das Produkt zu veröffentlichen.
Die Internationalisierung des Themas (i18n) umsetzen.
Internationalisierung ist der Prozess, bei dem Ihre Themes in andere Sprachen übersetzt werden können. In WordPress wird dies hauptsächlich durch zwei Funktionen umgesetzt:__()Dient dazu, die übersetzte Zeichenkette zurückzugeben._e()Für die direkte Ausgabe des übersetzten Textes. Sie müssen diese Übersetzungen an allen Stellen verwenden, an denen der Text übersetzt werden soll, und angeben, wo dies geschehen soll.style.cssDer in der Kopfzeile definierte Textbereich (Text Domain).
<h2><?php esc_html_e( '最新文章', 'my-custom-theme' ); ?></h2>
<p><?php echo esc_html__( '这是一段示例文本。', 'my-custom-theme' ); ?></p>Danach kann man Tools wie Poedit verwenden, um die Erstellung vorzunehmen..potÜbersetzen Sie die Template-Dateien sowie die entsprechenden Sprachpakete (z. B. …).zh_CN.pound.mo(Dokumentation).
Leistungsverbesserungen durchführen und Code-Reviews durchführen
Vor der Veröffentlichung sollte das Thema hinsichtlich der Leistung optimiert werden. Dazu gehören: Die Komprimierung von CSS- und JavaScript-Dateien, die Überprüfung, dass die Bildgrößen angemessen sind und optimiert wurden, die Reduzierung der Anzahl von Datenbankabfragen sowie die korrekte Nutzung des Script-/Stil-Queuing-Systems von WordPress – um die direkte Einbindung von Ressourcen in die Templates zu vermeiden. Zudem sollte eine umfassende Codeüberprüfung durchgeführt werden, um sicherzustellen, dass die WordPress-Codestandards eingehalten werden, dass kein Debugging-Code vorhanden ist und dass alle Funktionen wie erwartet funktionieren.
Zusammenfassungen
Die Entwicklung eines eigenen WordPress-Themes von Grund auf ist ein systematischer Lernprozess, der alles umfasst – von der Erkenntnis der Struktur der Kerndateien über die Anwendung von Template-Ebenen und dem Hauptzyklus bis hin zur Implementierung weiterer Funktionen.functions.phpCIMC hat die Funktionen erfolgreich implementiert und ein responsives Design entwickelt, bevor es schließlich zur Internationalisierung und Optimierung kam. Dem Prinzip “Von Einfachem ausgehen und schrittweise iterieren” folgend, wurde zunächst ein minimales, nutzbares Theme erstellt, dem später weitere Template-Dateien und Funktionen hinzugefügt wurden. Nachdem Sie diese Fähigkeiten beherrschen, werden Sie in der Lage sein, Webseiten zu erstellen, die voll und ganz Ihren eigenen oder den Anforderungen Ihrer Kunden entsprechen – ohne sich mehr an bestehende Themes zu binden. Denken Sie daran: Die offiziellen Dokumentationen und die Entwicklergemeinschaft sind Ihre besten Begleiter auf Ihrem Lernweg.
FAQ Häufig gestellte Fragen
Erfordert die Entwicklung eines WordPress-Themes tiefe PHP-Kenntnisse?
Es ist erforderlich, eine solide Grundlage in PHP zu haben – allerdings nicht auf Expertenniveau. Sie sollten die PHP-Syntax, Variablen, Arrays, Funktionen sowie Schleifenstrukturen verstehen, da WordPress-Templates hauptsächlich aus PHP-Code bestehen. Am wichtigsten ist es, die zahlreichen eingebauten Funktionen (Template-Tags) sowie Hooks (Aktionen und Filter), die von WordPress bereitgestellt werden, zu beherrschen. Diese Funktionen dienen als Verbindung zwischen Ihrem eigenen Theme und den Kernfunktionen von WordPress.
Warum wird mein benutzerdefiniertes Thema nicht im Hintergrund angezeigt?
Der häufigste Grund ist…style.cssDie Kommentarformate im Dateiheader sind nicht korrekt oder es fehlen einige Informationen. Bitte überprüfen Sie sorgfältig, ob Felder wie „Theme Name“ und „Author“ ausgefüllt sind und ob die Formatierung vollständig korrekt ist. Ein weiterer Grund könnte sein, dass die Theme-Datei in der falschen Verzeichnisstruktur abgelegt wurde; sie muss sich in der richtigen Ordnung befinden.wp-content/themes/Unterhalb davon.
Wie kann ich sicherstellen, dass meine Theme die Gutenberg-Editoren-Software unterstützt?
Um dein Thema besser an den Gutenberg-Editor anzupassen, musst du…functions.phpFügen Sie die entsprechenden Erklärungen zur Themenunterstützung hinzu. Dazu gehört die Unterstützung für Breitausrichtung sowie die Stylesheets des Editors. Zum Beispiel:
add_theme_support( 'align-wide' ); // 支持宽和全宽对齐
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' ); // 加载一个用于编辑器的专属样式表Darüber hinaus sollten für einige Kernbereiche des Webseitenlayouts – wie Absätze, Überschriften und Buttons – Frontend-Styles erstellt werden, um sicherzustellen, dass sie sowohl auf der Benutzeroberfläche des Webseites als auch im Editor einheitlich dargestellt werden.
Wie sollte ich mein Thema testen?
Die Tests sollten aus verschiedenen Perspektiven durchgeführt werden. Zunächst sollten das Erscheinungsbild und die Funktionalität in verschiedenen Browsern (wie Chrome, Firefox, Safari, Edge) sowie auf Geräten unterschiedlicher Größe (Handys, Tablets, Desktop-Computern) überprüft werden. Anschließend sollte die Kompatibilität mit gängigen Plugins getestet werden. Danach sollten mit den von WordPress bereitgestellten “Theme Unit Tests”-Daten (XML-Dateien) verschiedene Arten von Inhalten importiert werden, um das Verhalten des Themes unter extremen Bedingungen zu überprüfen. Abschließend sollte…WP_DEBUGPrüfen Sie das Muster, um zu sehen, ob es irgendwelche PHP-Warnungen oder Fehler gibt.
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