Abb. Anfang/wissensbezogen/WordPress/Inhalt Details

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

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

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

Was ist ein WordPress-Theme und welche ist seine Kernstruktur?

Ein WordPress-Theme ist nicht nur das Erscheinungsbild einer Website, sondern eine Sammlung von Dateien, die zusammenarbeiten, um dem Inhalt Ihrer Website eine visuelle Darstellung sowie interaktive Funktionen zu verleihen. Ein Theme definiert das Gesamtbild der Website – einschließlich der Anordnung der Elemente, der verwendeten Farben, Schriftarten und Styles – und steuert außerdem die Anzeige verschiedener Inhaltsarten mithilfe von Vorlagen. Das Verständnis der Struktur eines Themes ist der erste Schritt beim Entwickeln einer Website.

Ein standardmäßiges WordPress-Theme enthält mindestens zwei Kerndateien:style.cssundindex.php。style.cssDie Datei enthält nicht nur die Stylesheets für das Thema, sondern vor allem den Kommentarblock an der Oberseite – dieser ist entscheidend dafür, dass WordPress ein Thema erkennen kann. Der Kommentarblock muss Metadaten wie den Namen des Themas, den Autor, eine Beschreibung sowie die Version enthalten.index.phpDies ist die Standardvorlagendatei für das Thema. Wenn keine anderen, spezifischeren Vorlagen gefunden werden, verwendet WordPress diese, um die Seite darzustellen.

Empfohlene Lektüre Vom Nullpunkt an: Erwerben Sie das grundlegende Wissen über die Kernprozesse und besten Praktiken der Entwicklung moderner WordPress-Themen。

Neben diesen beiden erforderlichen Dateien enthält ein voll funktionsfähiges Theme in der Regel auch weitere Template-Dateien, beispielsweise solche, die zur Anzeige von einzelnen Artikeln verwendet werden.single.phpDient zur Anzeige einer Liste von Artikeln.archive.phpsowie für die Anzeige der Seite verwendete Elementepage.phpDas Thema kann auch einen weiteren Bestandteil enthalten.functions.phpDateien werden verwendet, um themenspezifische Funktionen hinzuzufügen, Menüs zu registrieren, Seitenelemente zu erstellen usw.header.phpundfooter.phpSie dienen dazu, den Code für die Kopf- und Fußzeile einer Website zu modularisieren, um eine einfachere Wartung und Wiederverwendung zu ermöglichen.

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

Erstellen Sie Ihr erstes grundlegendes Thema.

Erstellen Sie einen Themenverzeichnis und die zentralen Dateien.

Zunächst einmal befindet sich der Installationsordner von WordPress im…wp-content/themes/Erstellen Sie unter dem angegebenen Pfad eine neue Ordner als Verzeichnis für Ihr Thema. Der Name des Ordners sollte aus kleinen Buchstaben, Zahlen und Bindestrichen bestehen und darf keine Leerzeichen enthalten. Zum Beispiel könnten Sie einen Ordner mit dem Namen „my_project_directory“ erstellen.my-first-themeDer Ordner „…“

Als Nächstes erstellen Sie in diesem Ordner eine neue Datei oder Verzeichnis.style.cssDateien sollten mit den notwendigen Themeninformationen und Kommentaren am Anfang versehen werden. Dies stellt sozusagen die “Identifikationskarte” des Themas dar.

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习的简单WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Erstellen Sie eine grundlegende Vorlagendatei.

Unmittelbar darauf wird die Erstellung durchgeführt.index.phpDatei: Das ist das grundlegendste Template. Wir beginnen mit der einfachsten HTML-Struktur und fügen wichtige WordPress-Funktionen hinzu, um Inhalte dynamisch zu laden. Ein sehr minimalistisches Design.index.phpEs kann wie folgt dargestellt werden:

<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1008>
    
    <header>
        <h1><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
        <p></p>
    </header>

    <main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无内容。</p>';
        endif;
        ?&gt;
    </main>

    <footer>
        <p>©</p>
    </footer>
    
</body>
</html>

Dieses Datei verwendet mehrere zentrale WordPress-Funktionen:wp_head()undwp_footer()Dient dazu, dass das WordPress-Core, Plugins usw. Code (z. B. Styles, Scripts) in die Kopf- und Fußzeile einer Seite einfügen können.the_post()undthe_content()Dient zum Ausgeben von Artikeldaten in einer Schleife. Jetzt laden Sie diese Theme-Dateien auf den Server hoch, und Sie können sie in der WordPress-Backend-Verwaltung unter “Erscheinungsbild” -> “Themes” sehen und aktivieren.

Empfohlene Lektüre Leitfaden für den gesamten Prozess der Website-Erstellung: Eine detaillierte Anleitung zum Aufbau einer professionellen Website von Grund auf.。

Verwendung von Template-Ebenen und Template-Tags

Das Verständnis des Template-Hierarchiesystems

WordPress verwendet ein ausgeklügeltes System zur Verwaltung der Template-Hierarchie, um zu entscheiden, welches Template-File für die Darstellung einer bestimmten Seite verwendet werden soll. Dieses System basiert auf dem Prinzip der Abstufung von spezifischen zu allgemeinen Templates. Wenn beispielsweise auf einen Artikel mit der ID 123 zugegriffen wird, sucht WordPress in der folgenden Reihenfolge nach dem passenden Template:single-post-123.php -> single-post.php -> single.php -> singular.php -> index.phpEntwickler können diese Funktion nutzen, um durch das Erstellen spezifischerer Vorlagen genau zu steuern, wie verschiedene Inhalte angezeigt werden.

Beherrschen Sie die gängigen Template-Tags.

Template Tags sind eingebaute PHP-Funktionen in WordPress, die verwendet werden, um verschiedene Daten dynamisch in den Thema-Templaten auszugeben. Sie sind ein zentrales Werkzeug für die Entwicklung von Themes. Neben den in dem obigen Beispiel verwendeten…the_title()undthe_content()Es gibt noch eine große Anzahl weiterer Tags.

Zum Beispiel.the_permalink()Dient zum Ausgeben eines festen Links zum aktuellen Artikel;the_post_thumbnail()Bildern, die zur Darstellung von Merkmalen eines Artikels verwendet werden;the_category()Dient zur Ausgabe der Kategorienliste, zu der der Artikel gehört. Auch die Bedingungsprüfetags sind von entscheidender Bedeutung, zum Beispiel…is_home()、is_single()、is_page()、is_category()Sie ermöglichen es Ihnen, je nach Typ der aktuellen Seite unterschiedliche Code-Logiken auszuführen.

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 
<?php if ( is_single() ) : ?>
    <div class="post-meta">
        发布于： | 分类：
    </div>

Dieser Code zeigt nur auf der Seite eines einzelnen Artikels das Veröffentlichungsdatum sowie die Kategorieninformationen des Artikels an.

Verbessern der Themenfunktionen sowie der Möglichkeit zur Personalisierung

Hinzufügen der Datei für die Funktion zur Themenverwaltung

functions.phpDie Datei ist sozusagen das “Werkzeugset” zu Ihrem Thema. Der darin hinzugefügte Code wird aktiv, sobald das Thema aktiviert wird. Eine häufige Verwendung dieses Codes besteht darin, Funktionen zu registrieren, die das Thema unterstützt – beispielsweise die Möglichkeit, Artikel mit besonderen Bildern zu versehen, die Anordnung von Menüs anzupassen oder die Hintergrundfarbe zu definieren.

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );

    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

    // 支持HTML5的标记格式
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

    // 为文章摘要添加更多标签支持
    add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

function my_first_theme_excerpt_more( $more ) {
    return '...';
}
?>

Einführung von Stylesheets und Scripts

Um den Code sauber zu halten und den besten Praktiken zu folgen, sollten die Stylesheets (CSS) sowie die JavaScript-Dateien getrennt voneinander abgelegt werden.functions.phpDie Dateien werden in einer Warteschlange geladen, anstatt direkt in den Template-Dateien verwendet oder durch entsprechende Tags eingefügt zu werden. Dadurch werden Abhängigkeiten korrekt berücksichtigt und eine doppelte Ladung der Dateien verhindert.

Empfohlene Lektüre Kompletter Leitfaden für die Entwicklung von WordPress-Themen: Praktischer Tutorial zur Erstellung benutzerdefinierter Themes von Grund auf。

ausnutzenwp_enqueue_style()Eine Funktion wird verwendet, um Ihre Hauptstylesheet zu laden. Normalerweise führen wir dies durch…style.cssAls Abhängigkeit. Für Skripte wird dies verwendet.wp_enqueue_script()Funktion.

function my_first_theme_scripts() {
    // 加载主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );

    // 加载一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Zusammenfassungen

Die Entwicklung von WordPress-Themen ist ein Prozess, bei dem Kreativität, Design und Technik miteinander verbunden werden. Durch das Verständnis der grundlegenden Dateistruktur eines Themes – insbesondere…style.cssundindex.phpDu hast bereits den ersten, soliden Schritt gemacht. Das Beherrschen des Template-Hierarchiesystems ermöglicht es dir, für verschiedene Teile der Website eine präzise Anzeigelogik zu erstellen, während die flexible Nutzung von Template-Tags es ermöglicht, alle Inhalte dynamisch auszugeben.functions.phpMit Dateien kannst du sicherlich verschiedene Funktionen und Unterstützungen zu einem Thema hinzufügen sowie Ressourcen auf standardisierte Weise verwalten. Von dieser einfachen Grundlage aus kannst du schrittweise zu fortgeschritteneren Themen übergehen – beispielsweise das Erstellen von Untertemaschen, die Anpassung von Navigationsmenüs mit der Walker-Klasse, die Integration der Customizer-API für Echtzeit-Vorschau-Einstellungen oder sogar die Entwicklung von „Full Site Editing“-Themen mithilfe des Blockeditors (Gutenberg). Regelmäßiges Üben sowie das Referenzieren der offiziellen Dokumentation und des Codes ausgezeichneter Themen sind der beste Weg, um deine Entwicklungsfähigkeiten zu verbessern.

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

FAQ Häufig gestellte Fragen

Welche technischen Grundlagen sind erforderlich, um ein WordPress-Theme zu entwickeln?

Um ein WordPress-Theme zu entwickeln, sind Grundkenntnisse in HTML, CSS und PHP erforderlich. HTML dient dazu, die Struktur der Seiten zu erstellen, CSS steuert das Erscheinungsbild und die Anordnung der Elemente, und PHP ist die Kernprogrammiersprache von WordPress, die zur Verarbeitung von Daten, zum Aufrufen von Informationen sowie zur Erstellung dynamischer Inhalte verwendet wird. Ein grundlegendes Verständnis von JavaScript kann ebenfalls hilfreich sein, um interaktive Funktionen hinzuzufügen.

Wie kann ich die Themenentwicklung auf meinem lokalen Computer testen?

Es wird dringend empfohlen, die Themenentwicklung zunächst in einer lokalen Umgebung durchzuführen. Sie können lokale Server-Softwarepakete wie XAMPP, MAMP, Local by Flywheel oder Laragon verwenden. Diese Tools ermöglichen es Ihnen, auf Ihrem Computer schnell eine WordPress-Verarbeitungsumgebung mit Apache, MySQL und PHP aufzubauen, sodass Sie ohne Auswirkungen auf die Online-Website entwickeln und debuggen können.

Was ist der Unterschied zwischen der functions.php-Datei eines Themes und einem Plugin?

functions.phpDie Funktionen in der Datei sind nur unter dem aktuell aktivierten Thema verfügbar. Wenn Sie das Thema wechseln, werden diese Funktionen nicht mehr funktionieren. Die von Plugins bereitgestellten Funktionen hingegen sind unabhängig vom Thema – sie bleiben aktiv, solange das Plugin eingeschaltet ist, unabhängig davon, welches Thema Sie verwenden. Funktionen, die eng mit der visuellen Darstellung und dem Layout der Website verbunden sind, werden in der Regel in den Themen-Dateien definiert.functions.phpDer Code, der unabhängige, allgemein nutzbare Funktionen wie Kontaktformulare, SEO-Optimierung und Caching bereitstellt, eignet sich besser dafür, als Plugin zu implementiert zu werden.

Was ist ein Subthema und warum sollte man es verwenden?

Ein Untertema (Subtheme) ist ein Thema, das von einem anderen Thema abhängig ist – diesem sogenannten Überthema (Parent Theme). Es ermöglicht es Ihnen, die Funktionen und das Erscheinungsbild (die „Style“) des Überthemas zu ändern oder zu erweitern, ohne die Dateien des Überthemas direkt bearbeiten zu müssen. Der größte Vorteil dabei ist, dass Ihre eigenen Anpassungen (die sich im Untertema befinden) nicht verloren gehen, wenn das Überthema aktualisiert wird. Um ein Untertema zu erstellen, genügt es, einfach…style.cssIn der Datei wird die Anweisung “Template:” verwendet, um den Namen des Verzeichnisses des übergeordneten Themas anzugeben. Danach können Sie nur die Template-Dateien erstellen, die überarbeitet werden sollen, oder neue Funktionen 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.