Abb. Anfang/wissensbezogen/WordPress/Inhalt Details

Einführung in die Entwicklung von WordPress-Themes: Erstellen Sie Ihr erstes Theme von Grund auf

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

Verständnis der grundlegenden Struktur von WordPress-Themen

Bevor Sie mit dem Schreiben des Codes beginnen, ist es von entscheidender Bedeutung, die Struktur eines WordPress-Themes zu verstehen. Ein grundlegendes Theme benötigt mindestens zwei Dateien: eine Stylesheet, die die Informationen des Themes definiert, und eine PHP-Template-Datei, die die Inhalte der Website anzeigt. Diese Dateien bilden zusammen den „Rahmen“ des Themes und folgen bestimmten Verzeichnisstrukturen sowie Namenskonventionen.

Die Kern-Dokumente sindstyle.cssDieser Dateiinhalt enthält nicht nur CSS-Styles, sondern auch ein Kommentarblock am Anfang der Datei, der sozusagen die “Identität” des Themes darstellt. Dieser Block teilt dem WordPress-System Metadaten wie den Namen des Themes, den Autor, eine Beschreibung sowie die Version mit. Ohne eine korrekt formatierte Struktur dieser Kommentarblöcke funktioniert das Theme nicht ordnungsgemäß in WordPress.style.cssWordPress wird dein Theme nicht erkennen und nicht aktivieren können.

Ein weiteres unverzichtbares Dokument ist…index.phpDies ist die Hauptvorlagendatei des Themas. Wenn WordPress keine spezifischeren Vorlagendateien finden kann (z. B.single.phpoderpage.phpWenn es aktiviert ist, wird es standardmäßig verwendet, um die Seite zu rendern. Es dient als alternative Option zu allen Template-Dateien.

Empfohlene Lektüre Die Geheimnisse der WordPress-Themenentwicklung: Schlüsseltechniken zum Erstellen maßgeschneiderter Websites von Grund auf。

\nDokument zur Erklärung der Themeninformationen

Themen-Stylesheetstyle.cssDer Kopf muss bestimmte Kommentare enthalten. Hier ist ein sehr einfaches Beispiel:

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 
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的简单WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Darunter befinden sichText DomainDient der Internationalisierung und enthält Identifikatoren, die bei der späteren Übersetzung verwendet werden. Dieses File enthält in der Regel auch all Ihren CSS-Style-Code.

Core template file

index.phpDie Datei ist der Einstiegspunkt zum Thema. Die einfachste Variante…index.phpEs ist möglich, nur grundlegende Schleifen zu verwenden, die auf die Kernfunktionen von WordPress zurückgreifen, um eine Liste von Artikeln abzurufen und anzuzeigen.

<!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>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    endif;
    ?&gt;
</body>
</html>

In diesem Code-Teil…wp_head()undwp_footer()Es handelt sich um zwei wichtige „Haken“ (englisch: hooks), die es dem WordPress-Kern, Plugins sowie anderen Skripten ermöglichen, notwendigen Code – wie Styles, Skripte und Meta-Tags – am Anfang und am Ende einer Seite einzufügen.

Aufbau einer lokalen Entwicklungsumgebung

Bevor Sie ein Thema auf einen Online-Server bereitstellen, ist es die effizienteste und sicherste Methode, eine lokale Entwicklungsumgebung einzurichten. Die lokale Umgebung ermöglicht es Ihnen, den Code frei zu testen und Fehler zu beheben, ohne dass dies die Online-Website beeinträchtigt.

Empfohlene Lektüre Erlernen Sie WordPress-Theme-Entwicklung von Grund auf: Ein vollständiger Leitfaden von Anfänger bis Fortgeschrittener.。

Wählen Sie das lokale Server-Softwarepaket aus.

Für Anfänger sind integrierte lokale Server-Softwarelösungen die beste Wahl. Sie bieten Apache/Nginx, PHP sowie eine MySQL-Datenbank in einem Paket und können mit nur einem Klick installiert und sofort verwendet werden. Beispiele dafür sind XAMPP, Local by Flywheel oder DevKinsta. Diese Tools simulieren eine echte Webserverumgebung, sodass Sie WordPress auf Ihrem eigenen Computer ausführen können.

WordPress installieren und ein Themes-Verzeichnis erstellen

Nach dem Ausführen auf dem lokalen Server müssen Sie eine neue Version von WordPress installieren. Laden Sie das neueste komprimierte WordPress-Paket herunter und entpacken Sie es im Wurzelverzeichnis Ihrer Website auf dem lokalen Server (z. B. im htdocs-Verzeichnis von XAMPP). Anschließend besuchen Sie die lokale Adresse (z. B. http://localhost) in einem Browser, um die bekannte “Fünf-Minuten-Installation” durchzuführen.

Nach der Installation gehen Sie zu WordPress.wp-content/themesVerzeichnis. Hier erstellst du einen neuen Ordner für das Thema, das du entwickeln wirst – zum Beispiel mit dem Namen “my-first-theme”. Die Ordner, die du zuvor erstellt hast, befinden sich ebenfalls in diesem Verzeichnis.style.cssundindex.phpDie Dateien sollten in diesem Ordner abgelegt werden. Jetzt loggen Sie sich in das WordPress-Backend ein und gehen Sie zu “Erscheinungsbild” -> “Themes”. Dort sollten Sie Ihr Thema sehen – auch wenn es derzeit noch sehr einfach funktioniert.

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

Aufbau eines Systems grundlegender Vorlagen-Dateien

Nurindex.phpDas Thema allein reicht bei weitem nicht aus. Ein voll funktionsfähiges Thema benötigt eine Sammlung von Template-Dateien, um verschiedene Anzeige-Szenarien zu unterstützen – beispielsweise einzelne Artikel, eigenständige Seiten oder Artikelarchive. Das Template-Hierarchiesystem von WordPress wählt automatisch die am besten passende Template-Datei aus, um die angeforderte Seite darzustellen.

Artikel und Seitenvorlagen

single.phpDas Template dient zur Anzeige eines einzelnen Blogartikels. Wenn ein Benutzer auf die Volltextansicht eines Artikels klickt, verwendet WordPress dieses Template. Es enthält in der Regel detailliertere Informationen zum Artikel, wie Kategorien, Tags, den Autor sowie einen Kommentarbereich.

page.phpDie Templates dienen dazu, unabhängige, statische Seiten anzuzeigen (z. B. die “Über uns”- oder “Kontakt”-Seite). Der Unterschied zu den Artikeltemplates besteht darin, dass sie in der Regel keine Elemente anzeigen, die zu Blogartikeln gehören – wie zum Beispiel das Veröffentlichungsdatum oder die Kategorie.

Empfohlene Lektüre Detailierte Erläuterung zur Entwicklung von WordPress-Themen: Ein vollständiger Leitfaden von der Einführung bis zur Expertenebene。

\n Vorlage für den oberen und unteren Teil

Um dem DRY-Prinzip („Don’t Repeat Yourself“) zu folgen, werden die Kopf- (Header) und Fußzeilen- (Footer-)Teile einer WordPress-Theme-Entwicklung in der Regel in separate Dateien aufgeteilt.

header.phpDie Datei enthält den gesamten Code vom Anfang bis zum Bereich mit dem Hauptinhalt der Seite – einschließlich der Bereiche, der Website-Identifikation, des Hauptmenüs usw.index.php、single.phpIn anderen Templates wird dies ebenfalls verwendet.get_header()Eine Funktion wird verwendet, um es einzuführen.

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

Ebenso gilt…footer.phpDie Datei enthält alle Inhalte des Fußes, wie Urheberrechtsinformationen, Hilfsnavigation usw., und wird über … (der genaue Weg oder Mechanismus wird hier nicht angegeben).get_footer()Funktionsimport. Darüber hinaus…sidebar.php(Die Seitenleiste) wird oft auch getrennt verwendet.get_sidebar()Aufruf.

Rekonstruiertesindex.phpEs wird sehr übersichtlich werden:

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Integration von Styles und Scripts

Moderne Webseiten benötigen, dass CSS-Dateien und JavaScript-Scripte korrekt und effizient geladen werden. WordPress stellt spezielle Funktionen bereit, um diese Ressourcen zu verwalten – sie sorgen dafür, dass sie in der richtigen Abhängigkeitsreihenfolge geladen werden und verhindern das mehrfache Einbinden oder das Auftreten von Konflikten.

Stile mithilfe einer Funktionskollektion hinzufügen

Die richtige Vorgehensweise besteht darin, …wp_enqueue_style()Die Funktion fügt die Stylesheets in die Warteschlange hinzu. Sie müssen in Ihrem Thema ein Element mit dem Namen „stylesheets“ erstellen.functions.phpDie Datei ist das Kernstück der Funktionen des Themas und dient dazu, verschiedene Eigenschaften, Funktionen hinzuzufügen sowie das Standardverhalten zu ändern.

„In“functions.phpIn diesem Kontext kannst du eine Funktion mounten (also verbinden oder einbinden).wp_enqueue_scriptsAuf diesem Aktionshaken:

function my_first_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入一个Google字体
    wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()Die Funktion erhält automatisch das Thema.style.cssDateipfad. Durch diese Art der Ladung kann WordPress die Ressourcen besser verwalten.

Mit einer Funktionen-Warteschlange Skripte hinzufügen

Auch beim Laden von JavaScript-Scripten wird eine Warteschlange (Queue) verwendet. Die entsprechende Funktion dafür ist…wp_enqueue_script()Sie können sie in derselben Funktion hinzufügen.

function my_first_theme_scripts() {
    // ... 加载样式的代码同上 ...

// 加载主题的主JavaScript文件，依赖于jQuery，并放在页脚
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Hier,array( 'jquery' )Es wird erklärt, dass diese Scripte von der Kern-JQuery-Bibliothek abhängig sind; WordPress stellt sicher, dass jQuery zuerst geladen wird. Der letzte Parameter…trueDas bedeutet, dass das Skript am unteren Rand der Seite platziert wird – was dazu beiträgt, die Ladezeit der Seite zu verbessern.

Zusammenfassungen

Die Entwicklung eines WordPress-Themes von Grund auf ist ein systematischer Lernprozess, der verschiedene Schlüsselschritte umfasst – von der Erkenntnis der grundlegenden Dateistruktur über die Einrichtung einer lokalen Entwicklungsumgebung, die Erstellung eines Templatesystems bis hin zur korrekten Integration von Ressourcen. Durch die eigene Handlung zu lernen, ist eine sehr wertvolle Erfahrung.style.css、index.php、header.php、footer.phpzufunctions.phpDurch die Erstellung dieser Kerndateien hast du nicht nur ein funktionsfähiges Theme erstellt, sondern auch ein tieferes Verständnis für die Struktur der WordPress-Vorlagen sowie für das Funkionieren des Hook-Systems gewonnen. Denke daran: Der Schlüssel zur erfolgreichen Theme-Entwicklung liegt darin, die geltenden Konventionen und Standards von WordPress einzuhalten. Dadurch wird sichergestellt, dass dein Theme kompatibel, effizient und einfach zu warten ist. Von diesem Ausgangspunkt aus kannst du weitere fortgeschrittene Funktionen erkunden – wie die Anpassung von Artikeltypen, die Nutzung des Theme Customizers oder die Gestaltung der Widget-Bereiche – und so schrittweise ein leistungsstarkes, personalisiertes Theme entwickeln.

FAQ Häufig gestellte Fragen

Muss man PHP beherrschen, um Entwicklungs-Themen zu bearbeiten?

Ja, das Beherrschen von PHP ist eine Voraussetzung für die Entwicklung von WordPress-Themen. Schließlich ist WordPress selbst in PHP programmiert, und alle Template-Dateien (wie…)index.php、single.phpAlle sind PHP-Dateien, die mithilfe von PHP-Code die Kernfunktionen von WordPress aufrufen, um die Inhalte der Seiten dynamisch zu generieren. Gleichzeitig werden sie auch verwendet, um zusätzliche Funktionen hinzuzufügen.functions.phpDie Datei besteht ausschließlich aus PHP-Code. HTML und CSS dienen dazu, die Struktur und das Erscheinungsbild zu definieren, während PHP die treibende Kraft hinter den dynamischen Funktionen sowie der Dateninteraktion ist.

Was ist die Funktion der functions.php-Datei des Themas?

functions.phpDie Datei ist das “Funktionszentrum” Ihres Themes. Es handelt sich nicht um eine Vorlagendatei, die direkt einen bestimmten Teil der Webseite erzeugt. Stattdessen dient sie dazu, den gesamten PHP-Code zu speichern, der zur Anpassung und Erweiterung der Funktionen des Themes verwendet wird. Häufige Anwendungsbeispiele sind: Die Registrierung von Positionen für die Navigationseinheiten, die Definition von Widget-Bereichen sowie weitere Funktionen, die das Thema erweitern.wp_enqueue_scriptsDieses Hook-File dient dazu, CSS- und JavaScript-Dateien hinzuzufügen, Funktionen für die Themenunterstützung zu implementieren (z. B. Artikel-Abbildungen, benutzerdefinierte Hintergründe) sowie verschiedene benutzerdefinierte Funktionen zu definieren. Es wird automatisch geladen, sobald das entsprechende Thema aktiviert wird.

Wie kann ich meine Website so einrichten, dass sie mehrere Sprachen unterstützt?

Die Unterstützung von Mehrsprachigkeit (Internationalisierung und Lokalisierung) für ein Theme umfasst hauptsächlich zwei Schritte. Der erste Schritt besteht darin, an allen Stellen im Theme, an denen Text übersetzt werden muss, die entsprechenden WordPress-Funktionen für die Übersetzung zu verwenden.__('文本', 'text-domain')oder_e('文本', 'text-domain')dietext-domainMuss mit… zusammenarbeiten bzw. in Verbindung gebracht werden.style.cssIn der Erklärung dargelegt…Text DomainEinheitlich. Der zweite Schritt besteht darin, Tools wie Poedit zu verwenden, um den Code der Themes zu scannen und die entsprechenden Daten zu generieren..potTemplate-Dateien – Der Übersetzer nutzt diese Dateien, um die entsprechenden Übersetzungen in die Zielsprache (z. B. Chinesisch) zu erstellen..poUnd das kompilierte….moDateien, und legen Sie sie zum Thema hin./languages/Im Verzeichnis befinden sich die entsprechenden Übersetzungen. WordPress lädt automatisch die passenden Übersetzungen nach den Spracheinstellungen der Website herunter.

Was ist der Unterschied zwischen Themen (Themes) und Plugins?

Themen und Plugins übernehmen in WordPress völlig unterschiedliche Aufgaben. Ein Thema (Theme) steuert hauptsächlich die visuelle Darstellung einer Website – also das Erscheinungsbild, die Layoutstruktur, die Styles sowie die Templates. Es bestimmt, “wie” die Website aussieht. Plugins hingegen dienen dazu, der Website spezifische Funktionen hinzuzufügen; diese Funktionen funktionieren unabhängig davon, welches Thema verwendet wird – beispielsweise die Erstellung von Kontaktformularen, die Optimierung von SEO-Einstellungen oder die Integration eines E-Commerce-Warenkorbs. Sie bestimmen, “was” die Website kann. Ein gutes Prinzip ist es, Code, der sich auf die visuelle Darstellung und das Layout bezieht, im Thema zu platzieren, während Code, der mit den Kernfunktionen der Website zusammenhängt, möglichst als Plugin implementiert wird. Dadurch wird sichergestellt, dass wichtige Funktionen der Website auch bei einem Wechsel des Themes erhalten bleiben.

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.