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

Vorbereitungsarbeiten und Umgebungskonfiguration

Bevor du mit dem Schreiben des Codes beginnst, brauchst du eine geeignete Entwicklungsumgebung. Eine lokale Entwicklungsumgebung ermöglicht es dir, Tests durchzuführen und Fehler zu beheben, ohne die Online-Website zu beeinträchtigen. Es wird empfohlen, integrierte Softwarepakete wie XAMPP, MAMP oder Local by Flywheel zu verwenden, die Apache, MySQL/MariaDB und PHP mit nur einem Klick installieren.

Stellen Sie sicher, dass Ihre PHP-Version 7.4 oder höher ist – dies ist die von WordPress offiziell empfohlene Mindestversion. Außerdem benötigen Sie einen Code-Editor wie Visual Studio Code, Sublime Text oder PHPStorm, die Funktionen wie Syntax-Hervorhebung und Code-Vorschläge bieten und die Entwicklungseffizienz erheblich verbessern.

Die Grundstruktur für das Erstellen eines WordPress-Themes

Ein WordPress-Theme ist im Wesentlichen ein wp-content/themes/ Die Ordnern im Verzeichnis dienen als Identifikatoren für deine Themen. Es wird empfohlen, Namen aus kleinen Buchstaben, Zahlen und Bindestrichen zu verwenden – Leerzeichen sind nicht zulässig. Zum Beispiel könntest du einen Ordner mit dem Namen „my-project-2023“ erstellen. my-first-theme Der Ordner „…“

In diesem Ordner müssen mindestens zwei Kerndateien vorhanden sein:style.css und index.php。style.css Es handelt sich nicht nur um Stylesheets – ihre wichtigste Funktion besteht darin, Metadaten zum Thema bereitzustellen. Diese Metadaten werden auf der WordPress-Backend-Seite “Erscheinungsbild” -> “Themen” angezeigt.

Erstellen Sie eine Kopfzeile für die Themeninformationen.

„In“ style.css Am Anfang des Files müssen Sie einen bestimmten Kommentarblock hinzufügen, um die Themeninformationen zu definieren. Hier ist ein Beispiel:

/*
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.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Darunter befinden sichText Domain Dieses Element dient der Internationalisierung (Unterstützung mehrerer Sprachen) und muss mit dem Namen Ihrer Theme-Ordner übereinstimmen.index.php Die Datei ist das Standardvorlagenfile für das Thema und dient als Ersatzvorlage für alle Seiten. Zuerst können Sie dort eine einfache HTML-Struktur einfügen, um sie zu testen.

Core template files and the template hierarchy structure

WordPress verwendet ein System namens “Template Hierarchy” (Vorlagenhierarchie), um zu entscheiden, welche Vorlagendatei für eine bestimmte Seitenanfrage verwendet werden soll. Das Verständnis dieser Struktur ist entscheidend für die Entwicklung von Themes. Die Grundidee ist folgende: WordPress beginnt mit der Suche in der spezifischsten Vorlagendatei. Wenn diese nicht gefunden wird, sucht es nach einer allgemeineren Vorlage – und schließlich, wenn auch diese nicht vorhanden ist, nach einer weiter allgemeineren Vorlage. index.php。

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

Häufig verwendete Vorlagendateien und ihre Verwendungszwecke

• header.phpDer Kopfbereich einer Website enthält in der Regel die Region, das Logo der Website sowie die Hauptnavigation.
• footer.phpDer Fußbereich einer Website enthält in der Regel Informationen zur Urheberrechtsverfolgung sowie zusätzliche Links.
• sidebar.phpBereich der Seitenleiste.
• index.phpDie Hauptvorlage dient als letzte Rückversicherung für alle Seiten.
• single.phpDient zur Anzeige eines einzelnen Blogartikels.
• page.phpDient zur Anzeige einer einzelnen Seite (z. B. “Über uns” oder “Kontakt”).
• archive.phpDient zur Anzeige einer Liste von Artikelarchiven (z. B. nach Kategorien, Tags, Autoren oder Datum).
• front-page.phpDient zur Definition der Startseite der Website (falls eine statische Seite als Startseite festgelegt wurde).
• home.phpDieses Template wird verwendet, um die Indexseite der Blogartikel anzuzeigen. Falls eine statische Startseite eingestellt ist, zeigt dieses Template die Liste der neuesten Artikel.
• 404.phpDient zur Anzeige der Fehlerseite “404 Nicht gefunden”.
• search.phpDient zur Anzeige der Suchergebnisse.
• functions.phpDies ist keine Vorlage-Datei, sondern eine Funktionen-Datei für ein Thema, die dazu dient, Funktionen hinzuzufügen, Menüs und Seitenleisten zu registrieren usw.

Template Tags und Schleifen

In den Template-Dateien werden häufig “Template-Tags” verwendet. Dabei handelt es sich um PHP-Funktionen, die von WordPress bereitgestellt werden und zur Ausgabe dynamischer Inhalte dienen. bloginfo('name') Titel der Website:the_title() „Wie man effektiv mit Zeitmanagement-Tools arbeitet“

Das zentrale Konzept ist die “WordPress-Schleife”. Es handelt sich um eine PHP-Codestruktur, die überprüft, ob auf der aktuellen Seite Artikel (oder eine Liste von Artikeln) vorhanden sind, die angezeigt werden müssen, und diese anschließend schrittweise ausgibt. Eine sehr einfache Schleife sieht wie folgt aus:

<h2></h2>
    <div class="entry-content">
        
    </div>

    <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>

这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。

Integration von Thema-Funktionen und -Designelementen

functions.php Es handelt sich um den “Verstand” Ihres Themes – alle Funktionen, die nicht zur Kernbereich der Template-Renderung gehören, sollten dort hinzugefügt werden. Dieses File wird automatisch beim Initialisieren des Themes geladen.

Funktion zur Registrierung von Themen

„In“ functions.php In WordPress können Sie die Funktionalitäten mithilfe verschiedener “Hooks” erweitern – beispielsweise Action-Hooks und Filter-Hooks. Zunächst müssen Sie in der Regel angeben, ob Ihr Theme bestimmte Funktionen unterstützt. Ein Beispiel dafür ist die Hinzufügung von Artikelauszügen (Featured Images) sowie die Unterstützung von Menüs.

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

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 将你的函数 my_first_theme_setup Auf WordPress montiert after_setup_theme Stellen Sie sicher, dass dieser Aktionshaken zu dem richtigen Zeitpunkt ausgeführt wird.

Einführung von Styles und Scripts

Moderne Webseiten sollten die Stylesheets (CSS) sowie JavaScript-Dateien korrekt übertragen bzw. integrieren. wp_enqueue_style() und wp_enqueue_script() Funktionen werden in eine Warteschlange („Queue“) aufgenommen, anstatt direkt in die Template-Dateien mit den `` oder ``-Tags eingefügt zu werden. Der Vorteil dabei ist, dass Abhängigkeiten besser verwaltet werden können, Duplikate der Funktionen vermieden werden und die geltenden WordPress-Best Practices eingehalten werden.

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Die Funktion `getstylesheet_uri()` verweist auf Ihre (spezifischen) Stylesheets. style.css Die Funktion `get_template_directory_uri()` gibt die URL des aktuellen Thema-Verzeichnisses zurück.

Empfohlene Lektüre Ein Leitfaden für den Einstieg in die WordPress-Theme-Entwicklung: Baue dein eigenes benutzerdefiniertes Theme von Grund auf auf。

Erstellen von Seitenlayouts und Vorlagenkomponenten

Eine standardmäßige Webseite besteht in der Regel aus einem Kopfteil, dem Hauptinhalt und einem Fußteil. WordPress empfiehlt es, wieder verwendbare Teile in separate Dateien aufzuteilen und diese anschließend mithilfe spezifischer Funktionen im Haupttemplate einzubinden.

Aufteilen von Template-Teilen

Erstellen header.php、footer.php und sidebar.php. Unter header.php In diesem Fall müssen Sie den vollständigen Abschnitt einfügen und mit einem deutlichen Überschriften-Container (z. B. einem „-Tag“) abschließen. footer.php In der Regel enden sie mit den Tags „“.

Die vollständige Seite wird zusammengestellt.

In der Seitenvorlage (z. B.) index.php、single.phpIn diesem Kontext können Sie die folgenden Funktionen verwenden, um diese Komponenten einzuführen:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

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

`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php Die Datei wird geladen, sofern sie nicht existiert. template-parts/content.phpDies verbessert die Wiederverwendbarkeit und Wartbarkeit des Codes erheblich.

Zusammenfassungen

Das Erstellen eines WordPress-Themes von Grund auf ist ein systematischer Lernprozess. Zunächst müssen Sie eine korrekte lokale Entwicklungsumgebung einrichten und die grundlegende Dateistruktur eines Themes verstehen. Der Schlüssel liegt darin, die Template-Hierarchie von WordPress zu beherrschen – sie bestimmt, wie verschiedene Inhalte dargestellt werden. functions.php Bei der Erstellung von Dateien für Themes kannst du leistungsstarke Funktionen und Eigenschaften hinzufügen sowie die geltenden Best Practices bei der Verwaltung von Styles und Scripts einhalten. Schließlich kannst du durch die Aufteilung der Seite in Template-Teile wie Kopfzeile, Fußzeile und Seitenspalten sowie deren Zusammenstellung mithilfe der von WordPress bereitgestellten Funktionen einen strukturierten und leicht wartbaren Theme-Code erstellen. Indem du diesen Schritten folgst, schaffst du nicht nur dein erstes Theme, sondern legst auch eine solide Grundlage für die Entwicklung komplexerer und professionellerer Projekte in der Zukunft.

Empfohlene Lektüre Einführung in die WordPress-Theme-Entwicklung: Erstelle dein erstes eigenes benutzerdefiniertes Theme von Grund auf。

FAQ Häufig gestellte Fragen

Muss man PHP beherrschen, um WordPress-Themen zu entwickeln?

Ja, PHP ist die Kernprogrammiersprache von WordPress. Die Template-Dateien der Themes (z. B.) index.php、page.php) sowie Funktionsdateien (functions.phpAlle Dateien sind PHP-Dateien. Um dynamisch Daten in WordPress auszugeben und zu verarbeiten, musst du die Grundlagen der PHP-Sprache beherrschen, einschließlich Bedingungssprüche, Schleifen und die Verwendung von Funktionen.

Bei der Themenentwicklung: Was ist der Unterschied zwischen `page.php` und `front-page.php`?

page.php Dient zum Rendering einzelner “Seiten” (Pages), die in WordPress erstellt wurden – beispielsweise “Über uns” oder “Kontaktinformationen”. front-page.php Es handelt sich um ein Template, das speziell zum Rendering der “Startseite” einer Website verwendet wird. Im WordPress-Backend, unter “Einstellungen” -> “Lesen”, kannst du, wenn du die Option “Eine statische Seite” auswählst und die “Startseite” auf eine bestimmte Seite festlegst, dafür sorgen, dass WordPress diese Seite bevorzugt verwendet. front-page.php Um diese Seite anzuzeigen, muss… front-page.php Falls es nicht existiert, wird es verwendet. page.php。

为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？

ausnutzen wp_enqueue_style() Es handelt sich um eine von WordPress offiziell empfohlene Methode. Sie sorgt dafür, dass die Stylesheets nur einmal geladen werden – auch dann, wenn mehrere Plugins oder Themes auf dieselbe Datei verweisen. Zudem ermöglicht sie eine einfache Handhabung von Abhängigkeiten zwischen Stylesheets (z. B. wenn Ihre Styles auf ein bestimmtes Grundframework angewiesen sind). Darüber hinaus ist diese Methode besser mit Caching-Systemen und Plugins kompatibel und erlaubt es Unterteemplaten, die Styles des Überzeichnungs-Themes problemlos zu überschreiben.

Wie kann ich meine Website so gestalten, dass sie mehrere Sprachen unterstützt (internationalisiert wird)?

Um Themen zur Unterstützung mehrerer Sprachen zu machen, sind hauptsächlich zwei Schritte erforderlich. Zunächst müssen in allen Textzeichenketten des Themes die Übersetzungsfunktionen von WordPress verwendet werden, wie zum Beispiel… ()、_e() oder esc_html()Und weisen Sie ihnen die entsprechenden Positionen zu. style.css Definiert in China Text DomainZum Beispiel:_e( 'Hello World', 'my-first-theme' )Zweitens: Verwenden Sie Tools wie Poedit, um Ihren Theme-Code zu scannen und eine entsprechende Ausgabe zu generieren. .pot Template-Dateien – Übersetzer können darauf basierend Übersetzungen in verschiedenen Sprachen erstellen. .po Und das kompilierte… .mo Dateien: Legen Sie die Sprachdateien in das Thema-Verzeichnis. /languages/ Im Verzeichnis lädt WordPress automatisch die entsprechenden Übersetzungen nach, abhängig von den Spracheinstellungen der Website.