Abb. Anfang/wissensbezogen/WordPress/Inhalt Details

Klügere Tricks beherrschen: Erstellen Sie Ihr erstes WordPress-Theme von Grund auf

3-Minuten-Lesung
2026-03-19
2026-06-04
2,825
Ich bekomme eine Provision, wenn du über die untenstehenden Links einkaufst – ohne zusätzliche Kosten für dich.

Entwicklungsumgebung und Basisdateien vorbereiten

Bevor Sie mit dem Schreiben von Code beginnen, ist es von entscheidender Bedeutung, eine stabile lokale Entwicklungsumgebung einzurichten. So können Sie Tests durchführen, ohne die Live-Website zu beeinträchtigen. Es wird empfohlen, Tools wie Local by Flywheel, XAMPP oder MAMP zu verwenden, um schnell eine lokale Serverumgebung mit PHP und MySQL einzurichten.

Als Nächstes musst du im WordPress-Installationsverzeichnis wp-content/themes Erstelle im Ordner einen neuen Ordner für dein Theme, zum Beispiel mit dem Namen my-first-themeDies ist das Stammverzeichnis deines Themes. Dann musst du die zwei grundlegendsten und erforderlichen Dateien erstellen:style.css und index.php。

style.css Die Datei ist nicht nur dein Theme-Stylesheet, sondern vor allem enthält sie einen mit CSS-Kommentaren geschriebenen Theme-Informationskopf (Theme Header). Dieser Kopf ist der einzige Nachweis, an dem WordPress dein Theme erkennt.

Empfohlene Lektüre Vom Nullpunkt zum Erfolg: Ein umfassender Leitfaden und praktische Tipps für die Entwicklung von WordPress-Themen。

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个从零开始创建的 WordPress 主题示例。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

index.php Es ist die Hauptvorlagendatei deines Themes und zugleich die letzte Ausweichdatei, auf die WordPress bei der Suche nach einer Vorlage zurückgreift. Sie sollte mindestens die Aufrufe des WordPress-Kerns enthalten, um den Seitenkopf, die Inhaltsschleife und die Fußzeile auszugeben.

UltaHost – WordPress-Hosting-Anbieter
30-tägige Geld-zurück-Garantie, unbegrenztes Bandbreiten- und Datenbankvolumen, kostenlose DDoS-Schutzmaßnahmen sowie ein Rabatt von 501 auf 4 Terabyte bei einer Kaufdauer von 3 Jahren.
Das LOGO von UltaHost Zugangsseite 
<!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>
    
</body>
</html>

Template-Hierarchie des Themes verstehen

Bevor Sie andere Template-Dateien erstellen, ist das Verständnis der Template-Hierarchie von WordPress (Template Hierarchy) entscheidend. Sie bestimmt, welche Template-Datei WordPress für verschiedene Seitentypen (wie Startseite, Beitragsseite, Seiten und Kategorieseiten) zum Rendern auswählt. Wenn beispielsweise ein einzelner Beitrag aufgerufen wird, sucht WordPress der Reihe nach:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> index.phpWenn du diese Regel beherrschst, kannst du durch das Erstellen bestimmter Dateien (wie z. B. single.php oder page.php), um das Erscheinungsbild verschiedener Seiten präzise zu steuern.

Kernvorlage des Themes erstellen

Ein vollständiges Thema sollte nicht nur eines haben index.phpUm eine bessere Organisation und Wiederverwendbarkeit des Codes zu erreichen, müssen wir die Seite in mehrere Teile aufteilen und sie über Funktionen einbinden.

Kopf- und Fußzeile trennen

Erstellen header.php Dateien, die zur Speicherung des Kopfteils von HTML-Dokumenten verwendet werden (DOCTYPE, …), <head> Teil sowie den Anfang des Hauptbereichs der Seite, wie den Website-Titel und die Hauptnavigation). Entsprechend erstellen footer.php Datei, die zur Speicherung von Inhalten am Fuß der Seite (z. B. Urheberrechtsangaben) sowie Abschließungszeichen verwendet wird.

Anschließend, in index.php kannst du verwenden get_header() und get_footer() Funktionen zu verwenden, um sie einzuführen und die Struktur klarer zu machen.

Empfohlene Lektüre Komplettanleitung für Anfänger im Themaentwicklung mit WordPress: Erstellen Sie Ihr erstes Thema von Grund auf。

Erstellen Sie ein Template für eine Seitenleiste.

Wenn das Theme eine Seitenleiste benötigt, kann eine erstellt werden sidebar.php Datei – darin wird etwas verwendet. dynamic_sidebar() Eine Funktion wird verwendet, um die im Widget-Bereich registrierte Seitenspalte aufzurufen. In der Hauptvorlage wird diese Funktion genutzt. get_sidebar() Eine Funktion wird verwendet, um es einzuführen.

Implementierung einer Art „Zyklus“ für Artikel sowie eines Inhalts-Templates

Die Beitragsschleife ist das Herz eines WordPress-Themes; sie dient dazu, Beiträge aus der Datenbank abzurufen und anzuzeigen. index.php oder single.php In diesem Fall verwenden wir die Standard-Loop-Struktur. Um die Anzeige von Beiträgen in Listen (wie der Startseite, Archivseiten) und auf einzelnen Beitragsseiten modularer zu steuern, kann man erstellen content.php oder separat erstellen content-single.php und content-excerpt.php。

Innerhalb der Schleife verwenden get_template_part() Verwenden Sie eine Funktion, um diese Inhaltsvorlagendateien aufzurufen, zum Beispiel:get_template_part( 'content', get_post_format() );。

hosting.com Shared Hosting
Hohe Leistung mit AMD EPYC-CPUs, NVMe-SSD-Speicher und LiteSpeed, fachkundiger Inhouse-Support rund um die Uhr, erweiterte Sicherheitsmaßnahmen einschließlich SSL, Brute-Force-, Malware- und DDoS-Schutz, Einsparungen von bis zu 73%
Das LOGO von hosting.com Zugangsseite

Integration von Thema-Funktionen und -Designelementen

Ein ausgezeichnetes Theme sollte nicht nur gut aussehen, sondern auch seine Fähigkeiten durch Funktionsdateien erweitern.

Theme-Funktionsdatei einbinden

Erstellen functions.php Datei. Diese Datei ist keine Template-Datei, sondern das “Gehirn” des Themes. Sie dient dazu, Theme-Funktionen hinzuzufügen, Menüs und Seitenleisten zu registrieren sowie Skripte und Stylesheets einzubinden. Sie wird von WordPress beim Initialisieren des Themes automatisch geladen.

In dieser Datei können Sie add_theme_support() Funktionen zum Aktivieren von Theme-Funktionen wie Beitragsvorschaubildern (Featured Image), benutzerdefinierten Logos (Custom Logo) und Unterstützung für HTML5-Markup.

Empfohlene Lektüre WordPress-Themenentwicklung von der Grundlage bis zur Meisterschaft: Ein Leitfaden für das Erstellen personalisierter Webseiten。

function my_first_theme_setup() {
    // 添加文章和评论的 RSS feed 链接到 head
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Registrierungsbereich für kleine Hilfsprogramme

„In“ functions.php In China wird es verwendet. register_sidebar() Eine Funktion kann einen oder mehrere Widget-Bereiche definieren, sodass Benutzer im Backend auf der “Widgets”-Oberfläche Komponenten per Drag-and-drop verschieben können.

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在这里添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Stile und Skripte korrekt laden

Verwenden Sie niemals direkt in einer Template-Datei… <link> oder <script> Das Tag bindet CSS- und JavaScript-Dateien hartkodiert ein. Die richtige Methode ist die Verwendung von functions.php Verwenden Sie es in China wp_enqueue_style() und wp_enqueue_script() Funktion und anschließend mounten… wp_enqueue_scripts Auf dem Haken. Dies stellt sicher, dass die Abhängigkeiten korrekt sind, und verhindert, dass sie doppelt geladen werden.

InterServer Shared Hosting
Shared Hosting $2.50 USD pro Monat, erster Monat $0.1 USD Promo-Code tryinterserver, 461 Cloud-Apps Skripte, ein Klick installieren.
Das LOGO von InterServer Zugangsseite 
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载导航脚本，依赖 jQuery
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Internationalisierung und Veröffentlichungs­vorbereitung des Themes

Theme-Übersetzung aktivieren

Damit dein Theme von Nutzern auf der ganzen Welt verwendet werden kann, ist Internationalisierung (i18n) ein notwendiger Schritt. Das bedeutet, dass du alle nutzerseitigen Zeichenfolgen mit Übersetzungsfunktionen umschließen musst. Die am häufigsten verwendete Funktion ist __()(Die Zeile wird verwendet, um Übersetzungen in PHP anzuzeigen) Und _e()(zur Ausgabe der Übersetzung in PHP). Gleichzeitig, in style.css Der Kopfteil und… functions.php In der Ladefunktion muss der Textbereich (Text Domain) korrekt eingestellt werden, wie wir es zuvor bereits getan haben. my-first-theme。

Abschließende Tests und Komprimierung durchführen

Vor der Veröffentlichung müssen umfassende Tests in verschiedenen Umgebungen (unterschiedliche PHP-Versionen, unterschiedliche WordPress-Versionen) und auf verschiedenen Geräten (Desktop, Tablet, Smartphone) durchgeführt werden. Prüfen Sie, ob alle Vorlagendateien ordnungsgemäß funktionieren, ob die Funktionen wie erwartet umgesetzt sind und ob die offiziellen WordPress-Standards für die Themenprüfung eingehalten werden.

Schließlich sollten alle Debugging-Code-Elemente und Kommentare entfernt werden (es sei denn, sie sind für die Nutzer hilfreich), und die CSS- sowie JavaScript-Dateien mithilfe von Tools wie CodeKit oder Online-Komprimierern komprimiert werden, um ihre Größe zu verringern. Anschließend sollte die gesamte Theme-Verzeichnisstruktur in eine ZIP-Datei verpackt werden. Damit ist alles bereit, um sie im WordPress.org-Theme-Verzeichnis zu veröffentlichen oder an Nutzer zu verteilen.

Zusammenfassungen

Die Erstellung eines WordPress-Themes von Grund auf ist ein systematischer Lernprozess, der alles umfasst – von der Einrichtung der Umgebung, dem Verständnis der Template-Struktur, der Erstellung der Kern-Template-Dateien bis hin zur Weiterentwicklung des Themes. functions.php Der gesamte Prozess zur Integration erweiterter Funktionen. Entscheidend ist, die Coding-Standards und Best Practices von WordPress zu befolgen, beispielsweise integrierte Funktionen zu verwenden, Ressourcen korrekt einzubinden und Internationalisierung umzusetzen. Wenn du die in diesem Artikel beschriebenen Schritte praktisch umsetzt, erhältst du nicht nur ein funktionsfähiges Theme, sondern verstehst auch die Kernmechanismen der Funktionsweise von WordPress-Themes tiefgreifend und legst damit eine solide Grundlage für die Entwicklung komplexerer und professionellerer Themes.

FAQ Häufig gestellte Fragen

Muss man PHP beherrschen, um ein Theme zu erstellen?

Ja, ein tiefgehendes Verständnis von PHP ist eine unverzichtbare Voraussetzung für die Entwicklung individueller WordPress-Themes. Denn WordPress selbst ist in PHP geschrieben, und alle Template-Dateien (wie z. B. index.php, single.php) sowie Funktionsdateien (functions.php) verwenden alle direkt PHP-Code, um Inhalte dynamisch zu erzeugen, Datenbanken aufzurufen und Logik zu verarbeiten. Ohne PHP-Kenntnisse wirst du die Kernbestandteile des Themes nicht verstehen und bedienen können.

Muss man bei der Theme-Entwicklung den gesamten Code von Grund auf neu schreiben?

Nicht unbedingt. Für Anfänger ist es ein hervorragender Lernweg, bei null zu beginnen. In der praktischen Arbeit verwenden Entwickler jedoch häufig ein “Starter-Theme” oder ein “Parent-Theme” als Grundlage. Zum Beispiel ist das offizielle _Underscores (_s)-Theme ein extrem minimalistischer, hochwertiger Ausgangspunkt, der den Codierungsstandards entspricht. Es verfügt bereits über eine grundlegende Dateistruktur und gängige Funktionen, sodass du auf dieser Basis individuelle Entwicklungen vornehmen kannst. Das steigert die Effizienz erheblich und stellt die Codequalität sicher.

Was sind die möglichen Konsequenzen eines Fehlers in der Datei functions.php?

functions.php Syntaxfehler oder schwerwiegende Fehler in der Datei können dazu führen, dass auf der WordPress-Website der “White Screen of Death” erscheint, sodass sowohl das Frontend als auch die Backend-Verwaltungsoberfläche nicht mehr zugänglich sind. Das liegt daran, dass diese Datei bereits in einer frühen Phase des Theme-Ladevorgangs ausgeführt wird. In diesem Fall musst du über FTP oder den Dateimanager des Hostings den fehlerhaften Theme-Ordner umbenennen oder durch ein funktionsfähiges Theme ersetzen (z. B. Twenty Twenty-Six), um den Zugriff auf die Website wiederherzustellen und erst danach den fehlerhaften Code zu reparieren.

Wie kann ich sicherstellen, dass meine Website-Thematik mit dem Gutenberg-Editor kompatibel ist?

Um das Thema besser mit dem Gutenberg-Blockeditor zu unterstützen, sollte man zunächst… functions.php Verwenden Sie es in China add_theme_support( ‘editor-styles’ ) um die Unterstützung für Editor-Stile zu aktivieren. Verwenden Sie dann add_editor_style() Die Funktion bindet das Stylesheet deines Themes oder eine speziell für den Editor geschriebene CSS-Datei in den Backend-Editor ein, damit die Benutzer beim Bearbeiten möglichst dieselben Stile sehen wie im Frontend. Außerdem kannst du Unterstützung für Blockfunktionen wie breite Ausrichtung, Farbanpassung und mehr hinzufügen.

Was kommt als Nächstes, was kommt als Nächstes?

Wenn Sie eine WordPress-Website erstellen oder optimieren, sollten Sie als Nächstes über Leistungsoptimierung, Plugin-Konfiguration und Theme-Anpassung lesen.

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.

Tags.