Abb. Anfang/wissensbezogen/WordPress/Inhalt Details

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

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

Vorbereitungsarbeiten und Umgebungseinstellungen

Bevor du mit dem Schreiben des Codes beginnst, brauchst du eine geeignete Entwicklungsumgebung. Dazu gehören eine lokale Serverumgebung (z. B. XAMPP, MAMP oder Local by Flywheel), ein Code-Editor (z. B. VS Code oder PhpStorm) sowie eine brandneue WordPress-Installation. Stelle sicher, dass deine WordPress-Version aktuell ist, damit du die neuesten Funktionen und APIs nutzen kannst.

Als Nächstes müssen Sie in WordPress…wp-content/themesErstellen Sie im Verzeichnis ein neues Verzeichnis, dessen Name der “Slug” Ihres Themas entspricht. Zum Beispiel:my-first-themeDiese Ordner wird der Ort sein, an dem all Ihre Themen-Dateien gespeichert werden. Die grundlegendsten Dateien eines WordPress-Themes bestehen aus nur zwei Dateien:index.phpundstyle.cssDarunter befinden sichstyle.cssEs handelt sich nicht nur um eine Stylesheet, sondern auch um eine “Header-Datei”, die Themenmetadaten enthält. Die Kommentarinformationen in dieser Datei sind für WordPress von entscheidender Bedeutung, um Ihr Thema zu erkennen.

Create a basic one.style.cssDie Datei sollte in ihrer Kopfzeile folgende Informationen enthalten:

Empfohlene Lektüre „Das perfekte WordPress-Theme erstellen: Eine umfassende Entwicklungsanleitung von Grund auf“。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Text DomainFür die Internationalisierung sollte dieser Name mit dem Namen Ihrer Themenordner übereinstimmen. Erstellen Sie außerdem die einfachste Version davon.index.phpDas Datei sollte nur einen einzigen Satz enthalten.<?php get_header(); ?>Und einer<h1>Hallo Welt!</h1>In diesem Moment solltest du in der WordPress-Backend-Verwaltung unter “Erscheinungsbild” -> “Themen” dein Thema sehen und es aktivieren können. Obwohl es im Moment noch nichts anzeigt (da wir es noch nicht erstellt haben),…header.phpDas markiert zwar erst den ersten Schritt, aber es zeigt, dass du bereits erfolgreich damit begonnen hast.

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

Verständnis der Kern-Template-Dateien und der Hierarchie der Templates

WordPress verwendet ein intelligentes System namens “Template Hierarchy”, um zu entscheiden, welches Template-File für eine bestimmte Seitenanfrage verwendet werden soll, um die Inhalte anzuzeigen. Das Verständnis dieser Hierarchie ist der Kern der Theme-Entwicklung. Das System beginnt mit der Suche nach dem spezifischsten Template-File; wenn dieses nicht vorhanden ist, greift es auf ein allgemeineres File zurück.

Die grundlegendsten Vorlagendateien umfassen:
* index.phpDas finale „Absicherungstemplate“ wird verwendet, wenn für alle Anfragen kein spezifischeres Template gefunden werden kann.
* header.phpEnthält die Dokumente.<head>Einige Teile sowie die Kopfzeilebereiche der Website. Durch…get_header()Funktionseinleitung.
* footer.phpEnthält den Fußbereich der Website. Durchget_footer()Funktionseinleitung.
* sidebar.phpEnthält einen Seitenleisten-Component. Durchget_sidebar()Funktionseinleitung.
* functions.phpDies ist keine Vorlage-Datei, sondern die “Funktionsbibliothek” Ihres Themes, die zum Hinzufügen von Funktionen, Registrierung von Menüs, Werkzeugen usw. verwendet wird.

Für verschiedene Arten von Seiten gibt es spezifischere Vorlagen:
* 单篇文章：查找顺序是single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* 静态页面：查找顺序是custom-template.php(Benutzerdefiniertes Template) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
* 文章列表（博客首页、分类页等）：查找顺序是home.php(Dieze Zeile wird auf der Listeseite von Blogartikeln verwendet.) front-page.php(Die Angabe wird verwendet, um eine statische Seite als Startseite einzustellen.) -> index.php。

Erstellen von Header- und Footer-Vorlagen

Zuerst wird etwas erstellt.header.phpEs muss mit… beginnen.<!DOCTYPE html>Beginnen Sie damit, die Schlüssel-WordPress-Funktionen aufzuführen, wie zum Beispiel…wp_head()。

Empfohlene Lektüre Maßgeschneiderte hochwertige WordPress-Themes: Der komplette Praxisleitfaden von Design und Entwicklung bis zur Optimierung。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/de/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
        <nav>
            'primary')); ?&gt;
        </nav>
    </header>

Ähnlich dazu, das Erstellen vonfooter.phpUnd stellen Sie sicher, dass die Aufrufe korrekt durchgeführt werden.wp_footer()Funktion.

    <footer>
        <p>©  . All rights reserved.</p>
    </footer>
    
</body>
</html>

Jetzt kannst du deine aktualisieren.index.phpVerwenden Sie diese Vorlageteile.

<main>
    <h1>„Hello World“ von Main!</h1>
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

Die Funktionalität des Themes wird durch functions.php erweitert.

functions.phpDie Dateien sind das “Gehirn” Ihres Themes. Hier fügen Sie Funktionen hinzu, registrieren Sie Kernkomponenten von WordPress wie Menüs und Widget-Bereiche sowie ordnen Sie sie in Stylesheets und Skriptdateien ein.

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

Hinzufügen von Themenunterstützung und einer Registrierungs-Navigationsleiste

Zuerst aktivieren wir einige grundlegende Themenfunktionen.add_theme_support()Eine Funktion, die die von einem Thema unterstützten Funktionen deklariert.

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');

Als Nächstes registrieren Sie eine Position für ein Navigationselement. Dadurch können Benutzer das Menü im Backend unter “Erscheinungsbild” -> “Menü” konfigurieren und es anschließend in den Templates verwenden.wp_nav_menu()Die Funktion ruft sie auf.

function my_first_theme_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-first-theme'),
        'footer'  => __('Footer Menu', 'my-first-theme'),
    ));
}
add_action('init', 'my_first_theme_menus');

Einbetten in die Stylesheet- und Skriptdateien

Die korrekte Methode zum Laden von Styles und Scripts besteht darin, sie…wp_enqueue_style()undwp_enqueue_script()Funktionen, die sie anhängenwp_enqueue_scriptsAuf dem Haken.

Empfohlene Lektüre Eine umfassende Analyse der WordPress-Themenentwicklung: Ein praktischer Leitfaden von den Grundlagen bis zur Expertenebene.。

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入自定义JavaScript文件
    wp_enqueue_script('my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Erstellen von Schleifen und Inhaltstemplaten

“循环”是WordPress中用于从数据库中检索并显示文章的PHP代码结构。它是几乎所有模板文件的心脏。

Verstehen der Struktur der Hauptschleife

Oben genannt…index.phpIm Beispiel haben wir bereits eine einfache Schleife gesehen. Lassen Sie uns sie analysieren:

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 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/de/</?php the_permalink(); ?>"></a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                
            </div>
        </article>
    <?php endwhile; ?>
    <!-- 分页链接 -->
    
    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>

Erstellung eines Templates für eine einzelne Artikelvorlage

Jetzt erstellen wir ein Template, das speziell zum Anzeigen eines einzelnen Artikels verwendet wird.single.php。它比列表页的循环更详细。

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1></h1>
                <div class="entry-meta">
                    <?php
                    printf(
                        __('Posted on %s by %s', 'my-first-theme'),
                        get_the_date(),
                        get_the_author_posts_link()
                    );
                    ?>
                </div>
                <?php the_post_thumbnail('large'); ?>
            </header>
            <div class="entry-content">
                &lt;?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  =&gt; '</div>',
                ));
                ?&gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        
</main>

Zusammenfassungen

Mit dieser Anleitung haben Sie den Kernprozess abgeschlossen, einen grundlegenden WordPress-Theme von Grund auf zu erstellen. Wir haben mit der Einrichtung der Entwicklungsumgebung und der Erstellung der grundlegenden Dateien begonnen und sind schrittweise zum Verständnis des Template-Systems von WordPress vorgedrungen – dieses ist die Grundlage für die Erstellung flexibler Themes. Sie haben gelernt, wie man wiederverwendbare Komponenten erstellt…header.phpundfooter.phpTemplate-Bauteile – und mithilfe einer leistungsstarken…functions.phpDie Dateien fügen Ihrer Website wichtige Funktionen hinzu, wie beispielsweise ein Navigationsmenü und die Ladung von Styles. Abschließend haben wir das “Looping”-Mechanismus von WordPress untersucht und Templates erstellt, die zur Anzeige von Artikellisten sowie einzelnen Artikeln verwendet werden.

Das ist nur ein Ausgangspunkt. Danach kannst du weitere spezifische Vorlagen erstellen.page.php, archive.phpIm Bereich der Registrierung von Hilfsfunktionen („Widgets“) sollten benutzerdefinierte Artikeltypen und Kategorien hinzugefügt werden, sowie ein fortgeschritteneres responsives Design und JavaScript-Interaktionen implementiert werden. Denken Sie daran: Die Referenzierung an die offiziellen Entwicklerdokumente sowie kontinuierliches Üben sind der beste Weg, Ihre Fähigkeiten zu verbessern.

FAQ Häufig gestellte Fragen

Was soll ich tun, wenn die Website nach der Aktivierung meines Themes nur einen leeren Bildschirm anzeigt?

Das wird in der Regel durch eine fatale PHP-Fehlermeldung verursacht. Bitte überprüfen Sie zunächst Ihre Code-Quellen, um die Ursache des Problems zu finden.functions.phpGibt es in der Datei Grammatikfehler – zum Beispiel fehlende Semikolone oder Klammern? Öffnen Sie WordPress…WP_DEBUGDas Modell kann Ihnen dabei helfen, detaillierte Fehlermeldungen zu sehen.wp-config.phpIn der Datei wird Folgendes festgelegt:define('WP_DEBUG', false);umwandeln indefine('WP_DEBUG', true);。

Wie füge ich meiner Website eine Funktion hinzu, um ein benutzerdefiniertes Logo für mein Thema hinzuzufügen?

In deinemfunctions.phpDie Datei deradd_theme_supportEinige Teile werden durch eine zusätzliche Zeile erweitert.add_theme_support('custom-logo');Sie können auch ein Array-Parameter übergeben, um die Größe des Logos sowie die Möglichkeit einer variablen Höhe zu definieren. Danach kann der Benutzer das Logo unter “Erscheinungsbild” -> “Anpassen” -> “Website-Identität” hochladen und es in den Templates verwenden.the_custom_logo();Die Funktion ruft sie auf.

Warum wird das von mir registrierte Navigationsmenü im Backend nicht angezeigt?

Bitte überprüfen Sie die folgenden Punkte: Erstens stellen Sie sicher, dass Ihr Registrierungscode gültig ist.functions.phpUnd es wurde bereits korrekt gemountet.initHook oderafter_setup_themeAm Haken. Zweitens: Stellen Sie sicher, dass Sie das korrekt definiert haben.theme_location(z.B..'primary'Beim Aufruf…wp_nav_menu()Die Zeit muss vollständig übereinstimmen. Drittens: Nach der Erstellung des Menüs muss dieses im Hintergrund unter den Optionen “Erscheinungsbild” -> “Menü” -> “Verwalten von Positionen” der entsprechenden Position zugeteilt werden, die Sie registriert haben.

Wie erstellt man eine kleine Werkzeugleiste (Sidebar)?

Zunächst einmal…functions.phpVerwenden Sie es in Chinaregister_sidebar()Die Funktion registriert eine kleine Hilfeselement-Region. Sie benötigen ein Array-Parameter, um die ID, den Namen, die Beschreibung usw. dieses Elements zu definieren. Anschließend können Sie dies in der Template-Datei verwenden, in der Sie die Seitenleiste anzeigen möchten.sidebar.phpIn…) wird verwendet.dynamic_sidebar()Führen Sie die Funktion aus und übergeben Sie die ID des Widgets, um es aufzurufen. Schließlich…index.phpodersingle.phpIn Vorlagen wie<?php get_sidebar(); ?>Ein Seitenausdruck-Template wird eingeführt.

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.