Abb. Anfang/wissensbezogen/WordPress/Inhalt Details

Kompletter Leitfaden für die Entwicklung von WordPress-Themen: Von der Grundlage bis zum Bau eines benutzerdefinierten Themes

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

Vorbereitungsarbeiten und Umgebungseinstellungen

Bevor Sie mit dem Schreiben des Thema-Codes beginnen, ist eine stabile und effiziente lokale Entwicklungsumgebung unerlässlich. Sie ermöglicht es Ihnen nicht nur, die Änderungen schnell vorzubestellen, sondern verhindert auch direkte Auswirkungen auf die Online-Website. Es wird empfohlen, Tools wie Local by Flywheel, XAMPP oder MAMP zu verwenden, um mit nur einem Klick einen lokalen Server mit PHP und MySQL einzurichten.

Als Nächstes müssen Sie die Verzeichnisstruktur des Themes festlegen. Ein standardmäßiges WordPress-Theme enthält in der Regel die folgenden Kerndateien:style.css(Themen-Stylesheet und Informationen-Header)index.php(Hauptvorlagendatei)functions.php(Dokument zur Themafunktion) sowieheader.php、footer.php、sidebar.phpDie Dateien für die Vorlagen werden in der Installationsverzeichnis von WordPress abgelegt.wp-content/themes/Erstellen Sie zunächst einen neuen Ordner, zum Beispiel “my-custom-theme”, und beginnen Sie dann mit der Erstellung der erforderlichen Dateien in diesem Ordner.

Erstellen einer Header-Datei für Themeninformationen

Die “Identifikationskarte” eines Themas ist…style.cssDieses Datei definiert nicht nur die Styles der Seite, sondern auch der Kommentarblock an der Oberseite ist entscheidend dafür, dass WordPress das Thema korrekt erkennt. Der Informationsteil („Header“) muss sich strikt an das vorgeschriebene Format halten.

Empfohlene Lektüre Wie wählt und passt man ein WordPress-Theme für sich selbst aus?。

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始构建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Darunter befinden sichText DomainDieses File dient der Internationalisierung (i18n) und muss mit dem Namen des Themes-Ordners übereinstimmen – dies ist die entscheidende Kennzeichnung für das Laden der Übersetzungsdateien. Nach der Erstellung dieses Files kann Ihr Theme in der WordPress-Backend-Übersicht “Erscheinungsbild” -> “Themes” angezeigt werden, auch wenn es derzeit noch keine funktionellen Eigenschaften besitzt.

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 eine grundlegende Vorlagendatei.

WordPress verwendet ein Template-Hierarchiesystem, um zu entscheiden, welches Template-File für verschiedene Seitenanfragen verwendet werden soll. Die Erstellung von Grundlagen-Templates bildet die Basis für das Aufbauen eines Themes.

Zuerst ist…index.phpEs handelt sich um das endgültige Rücksetzungs-Template für alle Seiten – das einfachste Beispiel dafür.index.phpEs kann Aufrufe auf andere Teile der Vorlage enthalten.

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 包含文章内容模板
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>

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

Erstellen von Vorlagen für die Kopf- und Fußzeile einer Seite

header.php Dateien enthalten in der Regel eine Angabe zum Dokumenttyp.Die öffentlichen Bereiche der Regionen sowie der Website-Header. Bitte verwenden Sie unbedingt…wp_head()Diese Funktion ermöglicht es Plugins und Themes, hier den notwendigen Code einzufügen – beispielsweise Styles, Scripts oder Meta-Tags.

<!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>

<header id="masthead" class="site-header">
    <!-- 你的导航菜单、Logo等代码在这里 -->
</header>

Dementsprechend,footer.phpEs sollte geschlossen werden.header.phpDie in „China“ geöffneten Tags müssen unbedingt aufgerufen werden.wp_footer()„Haken“ (englisch: „hooks“) sind für viele Plugins (z. B. zur Analyse von Code) sowie für Kernfunktionen von WordPress unerlässlich.

Empfohlene Lektüre Leitfaden für die Entwicklung von Top-WWordPress-Themen: Von der Grundlage bis zur Meisterschaft in der Erstellung und Anpassung。

Verbessern der Themenfunktionen sowie der Möglichkeit zur Personalisierung

functions.phpDie Datei ist das “Zentrum der Steuerung” für Ihr Thema. Sie dient dazu, Funktionen zur Unterstützung des Themas hinzuzufügen, Menüs und Seitenelemente zu registrieren sowie Stylesheets und Skripte einzubinden.

Hinzufügen der grundlegenden Unterstützung für Themen

Durchadd_theme_support()Bei Funktionen können Sie für Ihr Thema die Unterstützung verschiedener WordPress-Funktionen deklarieren. Beispielsweise sind die Aktivierung von Artikelauszügen („Featured Images“) sowie die Anpassung des Logos Standardfunktionen moderner Themes.

function my_custom_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 启用自定义Logo功能
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 让WordPress生成和管理文档<title>标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Registrierungsmenü und Seitenleiste

Die Menüs in WordPress werden über…register_nav_menus()Funktionen registrieren: Sie können mehrere Menüpositionen definieren, beispielsweise “Hauptnavigation” und “Fußernavigation”.

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 
function my_custom_theme_menus() {
    register_nav_menus(
        array(
            'menu-1' => esc_html__( 'Primary Menu', 'my-custom-theme' ),
            'menu-2' => esc_html__( 'Footer Menu', 'my-custom-theme' ),
        )
    );
}
add_action( 'init', 'my_custom_theme_menus' );

Die Seitenleiste (auch als “Widget-Bereich” bezeichnet) wird durch …register_sidebar()Funktionen registrieren: Jeder Seitenbereich („Sidebar“) benötigt eine eindeutige ID sowie eine Beschreibung.

function my_custom_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          =&gt; esc_html__( 'Sidebar', 'my-custom-theme' ),
            'id'            =&gt; 'sidebar-1',
            'description'   =&gt; esc_html__( 'Add widgets here.', 'my-custom-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_custom_theme_widgets_init' );

Stil, Skripte und Template-Strukturen (Levels of Styles, Scripts, and Templates)

Um sicherzustellen, dass die Styles und Scripts des Themas korrekt geladen werden und keine Konflikte mit anderen Plugins auftreten, müssen die von WordPress bereitgestellten Funktionen zum Einreihen in die Warteschlange („Queue“) verwendet werden.

Die Styles und Scripts müssen korrekt eingefügt werden.

Verwenden Sie niemals direkt in Template-Dateien Ressourcen oder Tags, um diese einzubinden. Stattdessen sollten Sie andere Methoden nutzen.wp_enqueue_style()undwp_enqueue_script()Funktion.

Empfohlene Lektüre Eine vollständige Anleitung zur Entwicklung von WordPress-Themen: Ein praktischer Leitfaden von der ersten Idee bis zur Live-Veröffentlichung.。

function my_custom_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 排入自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 如果评论功能开启且是单篇文章/页面，排入评论回复脚本
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Verstehen und nutzen Sie die Hierarchie der Templates.

Die Template-Hierarchie von WordPress ist ein leistungsfähiges System. Wenn man beispielsweise auf einen Blogartikel zugreift, sucht WordPress nach den Templates in folgender Reihenfolge:single-post-{slug}.php -> single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.php。

Sie können spezielle Vorlagen erstellen, um die Standardanzeige zu überschreiben. Zum Beispiel können Sie eine Vorlage erstellen, die…page-about.phpDie Datei wird speziell zum Anzeigen der “Über”-Seite verwendet (vorausgesetzt, der Alias der Seite ist “about”). Ein weiteres leistungsstarkes Tool ist…front-page.phpEs wird verwendet, um die Frontend-Seiten einer Website zu definieren, und hat eine höhere Priorität als…home.php(Indexseite für Blogartikel)

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

Diese Anleitung führt systematisch durch die wesentlichen Schritte zur Erstellung eines eigenen WordPress-Themes von Grund auf. Beginnend mit der Einrichtung einer lokalen Umgebung über die Erstellung einer Datei, die die notwendigen Meta-Daten enthält…style.cssVon der Konzeption bis zur Umsetzungindex.php、header.php、footer.phpDurch die Verwendung solcher grundlegender Vorlagen wurden die Strukturen der jeweiligen Themen erstellt.functions.phpBei den Dateien haben wir die Funktionen der Themes verbessert – darunter die Unterstützung für das Hinzufügen von Themes, die Registrierung von Navigationsmenüs und Seitenschränken. Abschließend haben wir die Bedeutung hervorgehoben, Styles und Scripts mithilfe der standardmäßigen Methoden von WordPress einzubinden, und erklärt das leistungsstarke Template-System, das es Entwicklern ermöglicht, für verschiedene Inhaltstypen genau passende Anzeigemodelle zu erstellen. Die Einhaltung dieser Best Practices ermöglicht es nicht nur, Themes zu erstellen, die gut strukturiert und leicht zu warten sind, sondern auch, ihre Kompatibilität mit dem WordPress-Kern sowie den Plugins zu gewährleisten.

FAQ Häufig gestellte Fragen

Wie füge ich einem meiner Themes ein benutzerdefiniertes Seitenlayout hinzu?
Um eine benutzerdefinierte Seitenvorlage zu erstellen, musst du zunächst eine neue PHP-Datei in deinem Thema-Verzeichnis anlegen. Zum Beispiel…template-fullwidth.phpAm Anfang dieses Files müssen Sie eine Kommentarzeile mit dem Namen des spezifischen Templates hinzufügen.

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽页面模板。
 */

Danach können Sie in dieser Datei den Code für die Layout-Struktur Ihrer Vollbreitenseite schreiben – dieser Code wird in der Regel…get_header();Nachdem Sie die Datei gespeichert haben, können Sie beim Editieren oder Erstellen einer Seite im WordPress-Backend unter “Seite-Einstellungen” -> “Template” aus der Dropdown-Liste das “Vollbreitseite-Template” auswählen und verwenden.

Warum wird mein benutzerdefiniertes Menü nicht angezeigt?

Es gibt in der Regel mehrere Gründe, warum das Menü nicht angezeigt wird. Zuerst stellen Sie sicher, dass Sie das Menü bereits in Ihrem Thema aktiviert haben.functions.phpDurchregister_nav_menus()Die Funktion hat die Position des Gemüsebereichs registriert.

Zweitens müssen Sie zur Seite “Erscheinungsbild” -> “Menü” im WordPress-Backend gehen, um ein neues Menü zu erstellen. Fügen Sie dazu Menüeinträge hinzu (z. B. Seiten, Artikel, benannte Links) und weisen Sie dieses Menü im Bereich “Menüeinstellungen” der Position zu, die Sie in Ihrem Thema zugewiesen haben (z. B. “Hauptmenü”).

Zum Schluss müssen Sie die Datei mit dem Template (die in der Regel…)header.phpMenüaufrufe werden in diesem Kontext durch die Verwendung bestimmter Funktionen oder Befehle vorgenommen.wp_nav_menu()Rufen Sie die Funktion mit dem korrekten “theme_location”-Parameter auf, zum Beispiel:wp_nav_menu( array( ‘theme_location’ => ‘menu-1’ ) );Erst wenn diese drei Schritte abgeschlossen sind, wird das Menü korrekt angezeigt.

Wie kann ich sicherstellen, dass meine Website oder Anwendung mehrsprachig ist und die Inhalte der einzelnen Seiten übersetzt werden können?

Um Ihre Theme-Übersetzungen zu ermöglichen – auch als Internationalisierung (I18N) bezeichnet – sind insgesamt drei Schritte erforderlich. Der erste Schritt ist die “Vorbereitung”: Alle Texte in Ihrem Theme, die übersetzt werden sollen, müssen mit den von WordPress bereitgestellten Übersetzungsfunktionen markiert werden. Die am häufigsten verwendete Methode ist…esc_html__( ‘文本’, ‘my-custom-theme’ )(Die Ausgabe des entkodierten HTML) und_e( ‘文本’, ‘my-custom-theme’ )(Geben Sie den Inhalt aus und kodieren Sie ihn entsprechend. Stellen Sie sicher, dass der zweite Parameter – das Textfeld – mit dem Inhalt übereinstimmt, den Sie haben.)style.cssDefiniert in ChinaText DomainVollkommen identisch.

Der zweite Schritt ist die “Erstellung”: Mithilfe von Tools wie Poedit werden Ihre PHP-Dateien der Theme-Struktur durchsucht, um eine entsprechende Ausgabe zu erzeugen..pot(Portable Object Template) Ein Vorlagenfile, auf dem der Übersetzer basierend die entsprechenden Sprachversionen erstellen kann..poUnd das kompilierte….moDokumente.

Der dritte Schritt ist das “Laden”: In Ihrem…functions.phpDie Datei enthältafter_setup_themeIn der Hook-Funktion wird dies verwendet.load_theme_textdomain( ‘my-custom-theme’, get_template_directory() . ‘/languages’ )Die Übersetzungsdateien werden geladen. Dadurch wechselt auch der Text deines Themes automatisch, wenn der Benutzer die Sprache der Website ändert.

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

functions.phpSyntaxfehler oder fatalen Fehler in einer Datei können dazu führen, dass Ihre gesamte Website eine “leere Seite” anzeigt (also eine weiße Seite ohne Inhalt) und möglicherweise auch eine Fehlermeldung auf der Serverseite angezeigt wird. Dies liegt daran, dass diese Datei in einer frühen Phase der WordPress-Initialisierung geladen wird – Fehler in dieser Datei können den gesamten Ladevorgang von WordPress unterbrechen.

Wenn Sie auf eine solche Situation stoßen, haben Sie mehrere Möglichkeiten, um die Situation zu bereinigen. Die direkteste Methode besteht darin, die fehlerhaften Dateien über FTP oder den von dem Server bereitgestellten Dateimanager zu löschen bzw. zu ersetzen.functions.phpDie Umbenennung von Dateien (z. B. in )functions.php.bakSie können entweder die Datei löschen oder ihren Inhalt leeren. Dadurch wird WordPress die Datei als leere Datei betrachten, und die Website wird wieder zugänglich sein. Allerdings werden die benutzerdefinierten Funktionen Ihres Themes vorübergehend deaktiviert sein. Anschließend können Sie die Codefehler beheben und die Datei wieder herstellen.functions.phpEs ist eine sehr gute Gewohnheit, vor dem Einsatz eine Sicherung zu erstellen und die Funktionen in der lokalen Entwicklungsumgebung gründlich zu testen.

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.