Abb. Anfang/wissensbezogen/WordPress/Inhalt Details

Einführung in die Entwicklung von WordPress-Themen: Erstellen Sie Ihr erstes benutzerdefinierte Thema von Grund auf

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

Grundlegende Konzepte der WordPress-Theme-Entwicklung

Bevor Sie mit dem Schreiben des Codes beginnen, ist es von entscheidender Bedeutung, die grundlegende Struktur eines WordPress-Themes zu verstehen. Ein Theme ist im Grunde genommen ein Verzeichnis, das eine Reihe von Dateien enthält, die bestimmten Regeln folgen. Diese Dateien zusammen bestimmen das Erscheinungsbild und einige Funktionen der Website. Der Kerngedanke dabei ist die “Template-Hierarchie”: WordPress wählt automatisch die entsprechende Template-Datei aus und lädt sie ab, abhängig vom aktuellen Seitentyp (z. B. Startseite, Artikelseite, Einzelseite), der angefordert wird.

Jedes Thema muss zwei Kerndateien enthalten:style.css und index.php。style.css Nicht nur bietet das Theme entsprechende Styles, sondern auch die Kommentare am Anfang der Datei enthalten Metadaten zum Thema – wie den Namen des Themes, den Autor, eine Beschreibung usw. Dies ist die einzige Möglichkeit für WordPress, ein Theme zu erkennen.index.php Es handelt sich um die Standardvorlage-Datei. Wenn keine anderen, spezifischeren Vorlagen vorhanden sind, verwendet WordPress diese automatisch als Ersatz.

Die Themen interagieren mit dem Kern von WordPress mithilfe von Template Tags. Dabei handelt es sich um PHP-Funktionen, die dazu dienen, Inhalte dynamisch aus der Datenbank abzurufen und anzuzeigen. the_title() Artikeltitel:the_content() Das Verständnis und die korrekte Anwendung dieser Funktionen ist der Schlüssel zur Anzeige dynamischer Inhalte.

Empfohlene Lektüre Kompleter Leitfaden für die Entwicklung von WordPress-Themen: Von der Grundlagenkenntnis bis zur Meisterschaft。

Aufbau einer Entwicklungsumgebung und Erstellung der Struktur eines Themes

Eine effiziente und isolierte Entwicklungsumgebung ist der erste Schritt bei der Themenentwicklung. Es wird empfohlen, lokale Server-Software wie XAMPP, MAMP oder Laragon zu verwenden, da diese es ermöglichen, schnell eine PHP- und MySQL-Umgebung auf dem Computer einzurichten. Installieren Sie die WordPress-Kerndateien im Wurzelverzeichnis des lokalen Servers (z. B. htdocs oder www…) innerhalb.

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

Als Nächstes gehen Sie in den Installationsordner von WordPress. wp-content/themes/ Unter dem angegebenen Pfad erstellen Sie einen neuen Ordner für Ihr neues Thema – nennen Sie ihn beispielsweise „my_new_topic“. my-first-themeIn diesem Ordner erstellen Sie die erste erforderliche Datei:style.cssDie Kopf-Anmerkungen müssen streng nach dem folgenden Format verfasst werden:

/*
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
*/

Nachdem Sie die Datei gespeichert haben, gehen Sie zum WordPress-Backend und navigieren Sie zur Seite “Erscheinungsbild” -> “Themen”. Dort sollten Sie Ihr Thema sehen und es aktivieren können.

Jetzt erstellen Sie die zweite erforderliche Datei:index.phpDies ist die Hauptvorlagendatei für das Thema. Zu Beginn können Sie nur die grundlegende HTML5-Struktur sowie eine einfache Schleife hinzufügen, um das System zu testen.

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1005>
    <header>
        <h1>Mein benutzerdefiniertes Thema</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                ?>
                <article>
                    <h2></h2>
                    <div></div>
                </article>
                <?php
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>Informationen am Fuß der Website</p>
    </footer>
    
</body>
</html>

Detaillierte Erklärung zu den Kernvorlagen-Dateien und Funktionen

Mit zunehmender Komplexität der Themen ist es notwendig, den Code für verschiedene Funktionen in spezialisierte Template-Dateien aufzuteilen. Das Template-Hierarchiesystem von WordPress sucht automatisch nach dem Template, das am besten zu der aktuellen Seite passt, und lädt es dann herunter.

Empfohlene Lektüre Ich zeige Ihnen Schritt für Schritt, wie Sie ein leistungsstarkes, benutzerdefiniertes WordPress-Theme erstellen können.。

Erstellen header.php Datei, wird… index.php \nChinesisch <head> Teil und Ganzes <header> Ein Teil des Codes wurde eingefügt. Und dann… index.php Verwendung an der Oberseite get_header() Eine Funktion wird verwendet, um es einzuführen. Ebenso gilt dies für die Erstellung. footer.php Speichern Sie die Informationen an der Unterseite und verwenden Sie sie. get_footer() Einführen. Erstellen. sidebar.phpUnd verwenden Sie… get_sidebar() Die Einführung dieser Struktur ermöglicht die Modularisierung und Wiederverwendung des Codes.

Für verschiedene Arten von Seiten können spezifische Vorlagen erstellt werden:
* single.phpDient zur Anzeige eines einzelnen Artikels.
* page.phpDient zur Anzeige einer einzelnen Seite.
* front-page.phpFalls es existiert, wird es als statische Startseite verwendet.
* home.phpDient zur Anzeige des Indexes der Blogartikel (wenn die Startseite auf “Neueste Artikel” eingestellt ist).
* archive.phpDient zur Anzeige von Kategorien, Tags, Autoren und anderen Archivseiten.
* 404.phpDient zum Anzeigen der 404-Fehlerseite.

In der Template-Datei ist die “Schleife” (The Loop) die Kernstruktur. Es handelt sich um einen PHP-Codeblock, mit dem WordPress Artikel aus der Datenbank abruft und anzeigt. Die grundlegende Struktur sieht wie folgt aus:

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 
<!-- 在这里输出文章内容，使用 the_title(), the_content() 等函数 -->

    <p>Entschuldigung, es wurde kein Inhalt gefunden.</p>

Funktion bloginfo() oder get_bloginfo() Dient zum Abrufen grundlegender Informationen über eine Website, wie z. B. bloginfo( 'name' ) Titel der Website:bloginfo( 'stylesheet_url' ) Geben Sie die URL der Ausgabe-Themen-Stylesheet an.

Erweiterungen der Funktionen für Styles, Scripts und Themes

Um sicherzustellen, dass die Thema-Styles korrekt geladen werden und Konflikte vermieden werden, müssen die Stylesheets sowie die Script-Dateien mithilfe der von WordPress bereitgestellten Funktionen in die Warteschlange („Queue“) aufgenommen werden – anstatt sie direkt im HTML-Code zu verfassen. <link> oder <script> Tags. Dies wird über das Thema realisiert. functions.php Die Implementierung erfolgte in Form einer Datei.

Erstellen functions.php Die Datei dient dazu, zusätzliche Funktionen für das Thema hinzuzufügen, die Standardverhalten zu ändern oder Skriptstile zu registrieren. wp_enqueue_style() und wp_enqueue_script() Funktion:

Empfohlene Lektüre Eine vollständige Anleitung zur Entwicklung von WordPress-Themen: Erstellen Sie von Grund auf ein hoch performantes, benutzerdefiniertes Thema.。

<?php
function my_first_theme_scripts() {
    // 注册并排入主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 注册并排入一个自定义 CSS 文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );

// 注册并排入一个 JavaScript 文件，依赖于 jQuery
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

„In“ functions.php In diesem Zusammenhang kann auch folgendes verwendet werden: add_theme_support() Funktionen zur Deklaration der von einem Thema unterstützten Funktionen, wie beispielsweise Artikel-Bildergalerien, benutzerdefinierte Logos, Artikelformate usw.

// 支持文章特色图像
add_theme_support( 'post-thumbnails' );

// 支持自定义 Logo
add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
) );

// 在文章编辑器中添加编辑器样式
add_editor_style( 'editor-style.css' );

Die endgültige Formatierung des Themas wird normalerweise in geschrieben. style.css Oder in anderen CSS-Dateien, die über Funktionen geladen werden. WordPress fügt automatisch vielen nützlichen CSS-Klassen für den „body“-Element und die Artikel hinzu. home, single, page-id-{ID} Du kannst diese Klassennamen nutzen, um gezielte Styles zu erstellen.

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

Zusammenfassungen

Durch die Schritte in diesem Artikel haben Sie den Kernprozess verstanden, wie man von Grund auf ein einfaches WordPress-Custom-Theme erstellt. Von der Erklärung der grundlegenden Konzepte und der Struktur von Themes über die Einrichtung der Umgebung sowie die Erstellung der notwendigen Dateien, bis hin zur Analyse der Kerntemplates, dem Verständnis von Schleifen und Template-Tags – und schließlich lernen Sie, wie Sie Ihre eigenen Funktionen in das Theme integrieren können. functions.php Die richtige Anwendung von Styles, Scripts sowie Themenfunktionen ist zwar eine grundlegende Aufgabe, umfasst aber den Kern der Themenentwicklung. Danach kannst du dich weiter mit der Entwicklung von Untertempen, der Anpassung von Artikeltypen, fortgeschrittenen Themenoptionen sowie der Integration mit WooCommerce beschäftigen und so deine Fähigkeiten im Themenentwickeln kontinuierlich erweitern und verbessern.

FAQ Häufig gestellte Fragen

Muss man PHP verstehen, um Themen für die Entwicklung zu erstellen?

Ja, PHP ist die Kernprogrammiersprache von WordPress. Die Theme-Dateien sind im Grunde PHP-Dateien, die HTML sowie WordPress-eigene PHP-Funktionen (Template-Tags) enthalten, um Seiten dynamisch zu generieren. Selbst wenn man einen Page Builder verwendet, ist es unerlässlich, PHP zu verstehen, um fortgeschrittene Funktionen anzupassen und Probleme zu beheben.

Kann die style.css-Datei des Themas umbenannt werden?

Das geht nicht.style.css Dies ist eine Datei, die für die Erkennung eines Themes durch WordPress erforderlich ist; ihr Name ist festgelegt. Alle Metadaten des Themes (wie Name, Autor usw.) werden in den Kommentaren am Anfang dieser Datei definiert. Allerdings können Sie diese Metadaten auch selbst ändern oder anpassen. functions.php Die Funktion registriert und lädt CSS-Dateien mit anderen Namen, um die Styles zu ergänzen.

Wie kann man ein Thema so konfigurieren, dass es Chinesisch oder eine Übersetzung unterstützt?

Zunächst einmal… style.css in den Header-Kommentaren korrekt festlegen Text Domain(z.B.. my-first-theme) und verwenden Sie dies in allen zu übersetzenden Zeichenketten. __() oder _e() Die Funktion wird „verpackt“ (d.h. in eine geeignete Struktur gebracht), und anschließend wird mit Tools wie Poedit das Thema durchsucht, um die benötigten Inhalte zu generieren. .pot Template-Dateien und die entsprechenden Sprachversionen (z. B. Deutsch, Französisch usw.) erstellen… zh_CN.poDie Übersetzungsdatei für „)“ sollte schließlich kompiliert werden. .mo Die Datei befindet sich im Thema. languages Im Ordner.

Wie fügt man einer benutzerdefinierten Theme-Funktion eine Menüfunktion hinzu?

Zunächst einmal, im Zusammenhang mit dem Thema… functions.php Die Datei verwendet register_nav_menus() Der Ort der Registrierung der Funktion. Anschließend wird sie in der Vorlagendatei (z. B. ) registriert. header.phpFüllen Sie den Platzhalter (%s) mit dem Text ein, der an der gewünschten Stelle im Dokument angezeigt werden soll. wp_nav_menu() Die Funktion ruft die registrierten Menüs auf. Die Benutzer können nun die Inhalt der Menüs an diesen Positionen in der WordPress-Benutzeroberfläche unter “Erscheinungsbild” -> “Menü” konfigurieren.

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.