Abb. Anfang/wissensbezogen/WordPress/Inhalt Details

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

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

Vorbereitende Arbeit: Verständnis der Themenstruktur und der grundlegenden Dateien

Bevor wir mit dem Schreiben des Codes beginnen, müssen wir die grundlegende Struktur eines standardmäßigen WordPress-Themes verstehen. Ein einfaches WordPress-Theme benötigt nur zwei Dateien:style.css und index.phpEine jedoch vollständig funktionsfähige und strukturiert angelegte Theme-Datei erfordert zusätzliche, spezifische Template-Dateien, um die verschiedenen Teile der Website zu definieren.

Die zentralen Vorlagendateien umfassen:
* index.phpDie Hauptvorlagendatei des Themas dient als Standard-Rücksetzvorlage für alle Seiten der Website.
* style.cssDie Hauptstylesheet eines Themes enthält nicht nur CSS-Regeln, sondern auch Kommentare im Anfang des Files, die Metadaten des Themes definieren – wie zum Beispiel den Namen des Themes, den Autor, die Beschreibung usw. Diese Metadaten sind entscheidend dafür, dass WordPress ein Theme erkennen kann.
* header.phpDie Header-Vorlage einer Website enthält in der Regel folgende Elemente:<head>Einige Teile, das Website-Logo sowie die Hauptnavigationsmenü.
* footer.phpDas Fußertemplate einer Website enthält in der Regel Informationen zur Urheberrechtsvergabe, eine Widget-Region sowie weitere Elemente.
* functions.phpDie Funktionssdatei des Themes dient dazu, Funktionen des Themes hinzuzufügen, Menüs zu registrieren, Widget-Bereiche zu erstellen sowie weitere PHP-Dateien zu enthalten.

Darüber hinaus gibt es auch Templates für spezifische Seiten, wie zum Beispiel… single.php(Ein einzelner Artikel)page.php(Unabhängige Seite)archive.php(Archivseite des Artikels) usw. Das Verständnis der Funktion dieser Dateien ist die Grundlage für den Aufbau eines Themas.

Empfohlene Lektüre Einführung in die Entwicklung von WordPress-Themen: Erstellen Sie Ihr erstes eigenes, angepasstes Thema von Grund auf。

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

Die Einrichtung einer Entwicklungsumgebung ist genauso wichtig. Sie benötigen eine lokale PHP-Entwicklungsumgebung (z. B. XAMPP, Local by Flywheel oder DevKinsta), einen Code-Editor (z. B. VS Code oder PhpStorm) und stellen sicher, dass die lokal installierte Version von WordPress auf dem neuesten Stand ist.

Erstellen Sie eine Thema-Datei sowie eine entsprechende Verzeichnisstruktur.

Zunächst einmal, im Verzeichnis Ihrer WordPress-Installation: wp-content/themes/ Im Ordner erstellen Sie einen neuen Ordner und benennen Sie ihn nach dem Namen Ihres Themas, zum Beispiel: my-first-themeAlle Themen-Dateien werden in diesem Ordner abgelegt.

Als Nächstes erstellen wir die erste und auch notwendige Datei:style.cssAm Anfang dieses Files musst du einen bestimmten Kommentar hinzufügen, um WordPress mitzuteilen, dass dies dein Thema ist.

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个用于学习WordPress主题开发的入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Jetzt erstellen Sie die zweite erforderliche Datei:index.phpIn der Anfangsphase können wir die Implementierung sehr einfach halten und lediglich eine grundlegende HTML-Struktur ausgeben.

<!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>
        <h1>Willkommen bei meinem ersten WordPress-Thema!</h1>
    </header>
    <main>
        
    </main>
    <footer>
        <p>© Alle Rechte vorbehalten</p>
    </footer>
    
</body>
</html>

In diesem Moment solltest du, wenn du im WordPress-Backend auf “Erscheinungsbild” -> “Themes” gehst, dein “Mein erstes Thema” sehen und es aktivieren können. Nach der Aktivierung, wenn du die Startseite der Website besuchst, wirst du feststellen, dass der Inhalt der Artikel in einer sehr einfachen HTML-Seite dargestellt wird.

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

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

Erstellung von Kernvorlagen und Funktionen

Um die Struktur des Themas klarer zu gestalten, müssen wir…index.phpTeilen Sie es in kleinere, wiederverwendbare Teile auf. Zuerst erstellen Sie… header.php Datei, wird…<head>Einige Teile sowie der Kopfinhalt wurden in die entsprechenden Bereiche verschoben.

<!DOCTYPE html>
<html no numeric noise key 1012>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    
</head>
<body no numeric noise key 1009>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( is_front_page() && is_home() ) :
            ?>
            <h1 class="site-title"><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a></h1>
            <?php
        else :
            ?>
            <p class="site-title"><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a></p>
            <?php
        endif;
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
                'menu_id'        =&gt; 'primary-menu',
            )
        );
        ?&gt;
    </nav>
</header>

Anschließend erstellen Sie footer.php Dokumente.

<footer id="colophon" class="site-footer">
    <div class="site-info">
        <p><?php echo esc_html__( '由WordPress驱动', 'my-first-theme' ); ?></p>
    </div>
</footer>

</body>
</html>

Jetzt müssen wir das “Gehirn” des Themas erstellen – functions.php Dateien. Hier werden wir die Funktionen zur Themenunterstützung einstellen, die Positionen für die Registrierung von Kochrezepten festlegen sowie Stylesheets und Skripte hinzufügen.

<?php
// 添加主题功能支持
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus(
        array(
            'menu-1' => esc_html__( '主导航', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册前端样式表
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' );

Zum Schluss: Rekonstruieren Sie Ihr… index.phpVerwenden Sie WordPress-Template-Tags, um den Header und den Footer einzufügen.

<?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(); ?>

Hinzufügen von Styles und Interaktionsfunktionen

Der Rahmen des aktuellen Themas ist jetzt fertiggestellt – es ist an der Zeit, ihm Stil und Interaktivität hinzuzufügen. Zuerst…style.cssNach den Kommentaren im Dateiheader füge einige grundlegende CSS-Regeln hinzu, um dein Thema zu verschönern.

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 
/* 基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}
.site-header {
    background: #fff;
    padding: 1rem 2rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-navigation ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.main-navigation li {
    margin-left: 1.5rem;
}
.site-main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.site-footer {
    text-align: center;
    padding: 2rem;
    color: #666;
    border-top: 1px solid #eee;
}

Um die Navigation auf mobilen Geräten zu handhaben, können wir eine einfache JavaScript-Datei erstellen. Erstellen Sie diese im Wurzelverzeichnis des Themes. /js/navigation.js。

Empfohlene Lektüre Kompletter Leitfaden für die Entwicklung von WordPress-Plugins: Ein praktischer Tutorial von Grundlagen bis zur Veröffentlichung im Live-Betrieb。

// 简单的移动端菜单切换示例
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.createElement('button');
    menuToggle.textContent = '菜单';
    menuToggle.classList.add('menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');
    if (primaryMenu) {
        primaryMenu.parentNode.insertBefore(menuToggle, primaryMenu);
        menuToggle.addEventListener('click', function() {
            primaryMenu.classList.toggle('show');
        });
    }
});

Fügen Sie außerdem die entsprechenden Styles in das CSS hinzu:

.menu-toggle {
    display: none;
    background: #007cba;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .main-navigation ul.show {
        display: flex;
    }
}

Zusammenfassungen

Durch die oben genannten Schritte haben wir ein grundlegendes, aber strukturell vollständiges WordPress-Theme erstellt. Wir haben mit dem Verständnis der Kerndateien des Themes begonnen und schrittweise weitere Komponenten hinzugefügt, um das Theme zu entwickeln.style.cssundindex.phpUnd dann, indem man es in Teile zerlegt…header.php、footer.phpund mächtigfunctions.phpDie Dateien sorgen dafür, dass die Struktur des Themas modular und wartbar ist. Schließlich haben wir grundlegende Styles sowie einfache JavaScript-Interaktionen hinzugefügt, um die Benutzererfahrung zu verbessern.

Dieses Thema verfügt über die grundlegenden Eigenschaften moderner WordPress-Themen: Es unterstützt Titeltagungen, Highlightbilder, Navigationsmenüe und weist bereits Anzeichen eines responsiven Designs auf. Von hier aus kannst du deine Arbeit weiterentwickeln und das Thema weiter anpassen bzw. erweitern.single.php、page.phpWeitere Vorlagen-Dateien können heruntergeladen werden, um komplexere CSS-Frameworks (wie Bootstrap) einzusetzen oder die REST-API von WordPress zu nutzen, um eine dynamischere Benutzeroberfläche zu erstellen. Die Welt der Theme-Entwicklung ist vielfältig und faszinierend – der Schlüssel liegt darin, aktiv mitzumachen und kontinuierlich zu iterieren.

FAQ Häufig gestellte Fragen

Warum wird mein Thema nicht in der Liste der “Themen” im Backend angezeigt?

Bitte überprüfen Sie zunächst, ob Ihre Thema-Ordner an der richtigen Stelle abgelegt sind.wp-content/themes/Zweitens: Stellen Sie sicher, dass…style.cssDie Formatierung des Kommentarblocks mit den Themeninformationen am Anfang der Datei ist vollständig korrekt – insbesondere die Zeile “Theme Name:” ist erforderlich. Jede Rechtschreibfehler oder Formatprobleme können dazu führen, dass WordPress das Thema nicht erkennen kann.

Wie füge ich eine Widget-Region zu meinem Thema hinzu?

Sie benötigen…functions.phpDie Datei verwendetregister_sidebar()Eine Funktion zum Registrieren von Widgets. Nach der Registrierung können Sie die Widgets in den entsprechenden Template-Dateien verwenden.sidebar.phpoderfooter.php), die in derdynamic_sidebar()Eine Funktion wird verwendet, um es aufzurufen. Dies ist die Standardmethode, um die Funktionen der Seitenleiste oder des Fußballs eines erweiterten Themas zu nutzen.

函数 get_template_part() 有什么用？

get_template_part()Es handelt sich um eine sehr mächtige Template-Tag, die verwendet wird, um wiederverwendbare Codeausschnitte in einem Thema zu laden. Zum Beispiel kann damit innerhalb einer Schleife auf solche Codeausschnitte zugegriffen werden.get_template_part( 'template-parts/content', get_post_type() );Es wird zunächst versucht, das Inhalt zu laden.template-parts/content-post.php(Vorausgesetzt, die Art des Artikels ist…)postFalls dies fehlschlägt, wird die Datei geladen.template-parts/content.phpDas verbessert die Modularität und Wartbarkeit des Codes erheblich.

Wie kann man sicherstellen, dass ein entwickeltes Thema den WordPress-Coding-Standards entspricht?

WordPress definiert detaillierte Kodierungsstandards für PHP, HTML, CSS und JavaScript. Es wird empfohlen, in Ihrem Code-Editor entsprechende Linting-Tools zu installieren – beispielsweise PHP_CodeSniffer in Kombination mit den WordPress-Kodierungsstandards oder ESLint. Außerdem sollten Sie regelmäßig auf die Dokumentation zu den Kodierungsstandards in der offiziellen WordPress-Dokumentation zurückgreifen und diese Standards in der Teamentwicklung strikt einhalten, um die Codequalität und -konsistenz zu gewährleisten.

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.