Abb. Anfang/wissensbezogen/WordPress/Inhalt Details

WordPress-Themenentwicklung: Eine vollständige Anleitung zur Erstellung eines benutzerdefinierten Themas von Grund auf.

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

Die grundlegende Struktur eines WordPress-Themes

Ein WordPress-Theme ist im Wesentlichen ein Design für eine WordPress-Website.wp-content/themes/Die Ordnern im Verzeichnis enthalten eine Reihe von Dateien, die dazu dienen, das Erscheinungsbild und die Funktionen der Website zu steuern. Das Verständnis der Rolle dieser Schlüsseldateien ist die Grundlage für die Entwicklung.

主题必需的模板文件

Jedes Thema muss zwei der grundlegendsten Dateien enthalten:style.cssundindex.phpDarunter befinden sichstyle.cssNicht nur zur Speicherung von CSS-Styles wird dieser Datei verwendet; der Kommentarblock am Anfang der Datei enthält auch Metadaten zum Thema. WordPress nutzt diese Informationen, um das Thema zu erkennen.

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.phpEs handelt sich um die Standardvorlagendatei für das Thema. Wenn WordPress keine spezifischeren Vorlagen findet, verwendet es diese zur Darstellung der Seiten. Sie dient somit als “Sicherheitsnetz” für die Anzeige aller Seiten.

Empfohlene Lektüre Erstellen von hochwertigen Webseiten: Ein praktischer Leitfaden zur Anpassung und Optimierung von WordPress-Themen。

Weitere häufig verwendete Vorlagendateien

Um die Anzeige der verschiedenen Seiten genauer steuern zu können, musst du mehr Template-Dateien erstellen. Zum Beispiel…header.phpIn der Regel enthält es eine Dokumenttypdeklaration.<head>Die Kopfzeilebereiche von Regionen und Webseiten;footer.phpDann enthält es den Fußzeilen-Inhalt sowie die Schlussetiketten.sidebar.phpFür die Seitenleiste. Mithilfe von in WordPress integrierten Funktionen wie…get_header()、get_footer()undget_sidebar()Sie können diese Teile ganz einfach in anderen Templates einbinden.

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

Darüber hinaus können Sie auch folgendes erstellen:single.phpFür einzelne Artikel verwendet.page.phpFür separate Seiten verwendet.archive.phpZur Verwendung in Archivlisten sowiefunctions.phpDiese spezielle Datei ermöglicht es, Funktionen und Eigenschaften zu einem Thema hinzuzufügen.

Erstellen Sie ein Vorlagen-Template für die Startseite eines Themas.

Die Startseite ist das Aushängeschild eines Webseitenprojekts und benötigt in der Regel ein besonders einzigartiges Design. Wir beginnen mit der Erstellung der Startseite…index.phpBeginnen wir damit, zu besprechen, wie man Schleifen einsetzen kann, um Inhalte anzuzeigen.

Integration von Kopf- und Fußzeilen

Eine gute Praxis besteht darin, gemeinsame Komponenten zu modularisieren. Beginnen Sie damit, indem Sie in Ihrer Theme-Verzeichnisstruktur entsprechende Module erstellen.header.phpundfooter.php. Unterheader.phpIn diesem Text müssen Sie bestimmte Elemente oder Informationen enthalten. Bitte geben Sie an, welche Teile des Textes Sie in die deutsche Übersetzung aufnehmen möchten.<!DOCTYPE html>Erklärung,<html>Der Beginn einer Etikette…<head>Region (Verwendung)wp_head()Die „Hooks“ ermöglichen es, Code in Plugins und Themes einzufügen, sowie auch in die Anfangsinhalte des Webseites – wie das Logo und die Hauptnavigation.

Und dann,index.phpAm Anfang von… wird verwendet…<?php get_header(); ?>Um diesen Header einzufügen, gehen Sie wie folgt vor:index.phpAm Ende wird verwendet…<?php get_footer(); ?>Um einzuführen…footer.phpDarin sollten folgende Elemente enthalten sein:wp_footer()Hook-based calls and closures</body></html>Tags.

Empfohlene Lektüre Kompletter Leitfaden für die Entwicklung von WordPress-Themen: Von Null bis Eins – die Erstellung hochleistungsfähiger, benutzerdefinierter Themes。

Mit einer Schleife werden die Artikel ausgegeben.

Der Kern von WordPress ist die sogenannte “The Loop” – ein Abschnitt PHP-Code, der überprüft, ob Artikel vorhanden sind, und diese anschließend nacheinander anzeigt, sofern sie vorhanden sind.index.phpDas ist eine gute Frage.get_header()Anschließend können Sie den folgenden grundlegenden Schleifencode einfügen:

<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/de/</?php the_permalink(); ?>"></a></h2>
            <div class="entry-content">
                
            </div>
        </article>
    

    <p>Entschuldigung, es wurden keine Artikel gefunden.</p>

In diesem Code-Teil…have_posts()undthe_post()Funktionsgetriebene Schleifen.the_title()、the_permalink()undthe_excerpt()Die Template-Tags dienen dazu, den konkreten Inhalt der Artikel auszugeben. Damit ist eine grundlegende Artikelliste-Seite fertiggestellt.

Stil und Skripte für das Thema hinzufügen

Ein Thema ohne Styles ist wenig attraktiv. Sie müssen die CSS- und JavaScript-Dateien korrekt in die entsprechenden Queues einfügen – dies ist die von WordPress empfohlene Vorgehensweise. Dadurch werden die Abhängigkeiten richtig gesteuert und Konflikte vermieden.

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

Die Stylesheet muss korrekt eingefügt werden.

auch wennstyle.cssEs ist erforderlich, aber Sie sollten es nicht direkt in HTML verlinken. Die richtige Vorgehensweise besteht darin, …functions.phpDie Datei verwendetwp_enqueue_style()Funktionen: Zuerst erstellen Sie sie im Hauptverzeichnis des Themas.functions.phpFühren Sie die Datei aus und fügen Sie anschließend den folgenden Code hinzu:

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Dieser Code definiert eine Funktion, die WordPress anweist, die Hauptstylesheet der Theme-Datei zu verwenden.get_stylesheet_uri()Der erhaltene Pfad wird mit “my-theme-style” als Schlüssel in die Warteschlange (Queue) aufgenommen.add_action()Der Hook montiert diese Funktion.wp_enqueue_scriptsStellen Sie sicher, dass diese Aktion beim Laden der Seite ausgeführt wird.

Einführung einer benutzerdefinierten JavaScript-Datei

Die Methode zur Einbindung von JavaScript-Dateien ist ähnlich, jedoch wird dabei…wp_enqueue_script()Funktion. Angenommen, Sie haben eine Funktion, die sich in einer bestimmten Position befindet…js/script.jsFür die Datei kannst du Folgendes tun:

Empfohlene Lektüre Vom Einstieg zum Meistern: Ein umfassender Leitfaden und Praxis-Tutorial für die Entwicklung von WordPress-Themen。

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

Die Parameter hier stehen für: Script-Handle, Script-URL, Abhängigkeitsarray (z. B.)array('jquery')Versionnummer sowie die Angabe, ob die Inhalte am Fuß der Seite geladen werden sollen.truebedeutet „zu zeigen“ oder „anzugeben“.</body>(Vorladen).

Erweiterung der Themenfunktionen

functions.phpEs handelt sich um das “Toolset” des Themes – hier können Sie verschiedene Funktionen hinzufügen, um das Theme zu verbessern, ohne die Kern-Templatdateien ändern zu müssen.

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

Fügen Sie die Funktion zur Unterstützung von Themen hinzu.

WordPress bietet viele integrierte Funktionen, die jedoch nur dann aktiviert werden können, wenn das verwendete Theme ausdrücklich ihre Unterstützung für diese Funktionen angibt. Dies wird durch…add_theme_support()Funktionsimplementierung. Zum Beispiel kann man Artikel-Abbildungen („Featured Images“), benutzerdefinierte Logos sowie HTML5-Markup unterstützen, indem man…functions.phpFügen Sie hinzu:

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_action( 'after_setup_theme', 'my_theme_setup' )Stellen Sie sicher, dass diese Einstellungen so früh wie möglich bei der Initialisierung des Themes ausgeführt werden.

Registrieren Sie sich für das Navigationsmenü.

Damit Benutzer im Backend unter “Erscheinungsbild – Menü” die Navigation einstellen können, müssen Sie die Positionen der Menüpunkte im Voraus registrieren.register_nav_menus()Funktion:

function my_theme_register_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'init', 'my_theme_register_menus' );

Nach der Registrierung können Sie Vorlagendateien (z. B. ) verwenden.header.php), die in derwp_nav_menu( array( 'theme_location' => 'primary' ) )Jetzt wird dieses Menü angezeigt.

Zusammenfassungen

Von der Erstellung eines Inhalts, der…style.cssundindex.phpDu hast mit dem Grundordner des Themes begonnen und schrittweise ein vollständiges WordPress-Theme entwickelt. Durch das Verständnis der Template-Hierarchie hast du gelernt, spezielle Template-Dateien zu erstellen, um verschiedene Arten von Seiten präzise zu steuern.wp_enqueue_style()undwp_enqueue_script()Die Verwaltung von Ressourcen ist die beste Praxis, um die Kompatibilität und Leistung von Themen zu gewährleisten. Abschließend: Nutzen Sie diese Möglichkeiten.functions.phpDateien können Sie auf verschiedene Weise öffnen und bearbeiten.add_theme_support()undregister_nav_menus()Funktionen wie diese ermöglichen es, Themen sicher und effektiv mit leistungsstarken Funktionen zu ergänzen. Wenn du diese grundlegenden Schritte beherrschst, verfügst du über eine solide Basis, um eigenständig personalisierte WordPress-Themen zu entwickeln.

FAQ Häufig gestellte Fragen

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

Sie sollten über eine solide Grundlage in HTML und CSS verfügen, um die Struktur und das Erscheinungsbild von Webseiten zu erstellen. Zudem ist es wichtig, die Grundlagen der PHP-Sprache zu kennen, da WordPress-Themenvorlagen hauptsächlich in PHP programmiert sind. Ein grundlegendes Verständnis von JavaScript ist hilfreich, um interaktive Funktionen hinzuzufügen. Darüber hinaus wird es Ihnen beim Entwickeln helfen, wenn Sie sich mit den grundlegenden Konzepten von WordPress auskennen – wie Artikeln, Seiten, Kategorien und Tags.

Warum muss man zum Laden von Stylesheets wp_enqueue_style verwenden, anstatt einfach einen Link einzufügen?

Verwenden Sie es direkt.<link>Das Härtenkodieren des Pfads zur Stylesheet-Datei mit Tags führt zu mehreren Problemen. Erstens kann es nicht angemessen mit Abhängigkeiten umgehen – beispielsweise könnte Ihre Stylesheet von den Styles eines bestimmten Frameworks abhängig sein. Zweitens…wp_enqueue_styleEs ermöglicht Plugins oder anderen Themes, Ihre Stylesicherungen sicher zu überschreiben oder zu ändern. Am wichtigsten ist, dass diese Funktion eine bessere Zusammenarbeit mit Caching- und Leistungsverbesserungs-Plugins ermöglicht, um die Reihenfolge und Effizienz des Ressourcenladens zu gewährleisten – dies ist eine Standardpraxis in der WordPress-Community.

Was ist der Unterschied zwischen functions.php und Plugins?

functions.phpDer in der Dokumentation definierte Code ist eng mit Ihrem Thema verbunden – wenn der Benutzer das Thema wechselt, werden diese Funktionen nicht mehr verfügbar sein. Er eignet sich dazu, Funktionen zu speichern, die direkt mit der visuellen Darstellung und dem Layout des Themas zusammenhängen, wie zum Beispiel das Registrierungsmenü, die Unterstützung für spezielle Bilder oder die Definition von Seitenschränken. Die von Plugins bereitgestellten Funktionen hingegen sind in der Regel unabhängig vom Thema und dienen dazu, dem Website bestimmte allgemeine Funktionen hinzuzufügen (z. B. Kontaktformulare, SEO-Optimierungen). Selbst wenn der Benutzer das Thema ändert, bleiben diese Funktionen weiterhin vorhanden. Wenn eine Funktion nichts mit dem Erscheinungsbild des Themas zu tun hat, ist es in der Regel flexibler, sie als Plugin zu implementieren.

Wie kann ich mein Thema für mehrsprachige Übersetzungen optimieren?

Es ist entscheidend, dass die Themen internationalisiert werden, um auf den globalen Markt zu gehen. Zunächst sollten Sie an allen Stellen, an denen Texte der Themen ausgegeben werden, die Übersetzungsfunktionen von WordPress verwenden, beispielsweise…__('文本', 'my-custom-theme')oder_e('文本', 'my-custom-theme')diemy-custom-themeEs ist…style.cssDer in der Definition definierte Textbereich wird anschließend mit Tools wie Poedit durchsucht, um aus den Thema-Dateien die entsprechenden Inhalte zu generieren..potTemplate-Dateien – Übersetzer können darauf basierend Übersetzungen in verschiedenen Sprachen erstellen..pound.moDokumente. Zum Schluss, infunctions.phpDurchload_theme_textdomain()Die Funktion lädt die Übersetzungsdatei.

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.