Einführung in die Entwicklung von WordPress-Themen: Erstellen Sie von Grund auf eine personalisierte Website

Grundlegende Konzepte der WordPress-Theme-Entwicklung

Bevor Sie mit dem Schreiben des Codes beginnen, ist es von entscheidender Bedeutung, die grundlegende Struktur eines WordPress-Themes zu verstehen. Ein Theme ist im Grunde genommen ein Verzeichnis, das eine Reihe von Dateien enthält, die gemeinsam das Erscheinungsbild und einige Funktionen der Website bestimmen. Das WordPress-System liest diese Dateien ab, um die Inhalte der Webseiten darzustellen.

Ein grundlegendes Thema benötigt mindestens zwei Dateien:style.cssundindex.phpDarunter befinden sichstyle.cssNicht nur die Styles sind verantwortlich für die Gestaltung, sondern auch der Kommentarblock am Anfang der Datei enthält Metadaten zum Thema – wie den Namen des Themes, den Autor, eine Beschreibung sowie die Versionsnummer. Dies ist der Ausgangspunkt für WordPress, um das Thema zu erkennen und zu verarbeiten.

WordPress verwendet ein Template-Hierarchiesystem, um zu entscheiden, welches Template-File für die jeweilige Seite verwendet werden soll. Wenn beispielsweise eine einzelne Artikelseite aufgerufen wird, sucht WordPress zunächst nach dem passenden Template.single.phpBeim Besuch der Seite mit der Liste der Blogartikel wird nach folgenden Informationen gesucht:index.phpoderhome.phpWenn man eine Seite besucht, wird nach bestimmten Informationen gesucht.page.phpDas Verständnis dieser Hierarchiebeziehungen ermöglicht es Ihnen, den Code an der richtigen Stelle zu schreiben.

Empfohlene Lektüre Von Null auf Eins: Eine detaillierte Erläuterung der Kerntechniken und Best Practices für den gesamten Prozess der modernen Website-Entwicklung.。

Die Funktion der Kerndateien des Themas

functions.phpDie Datei stellt das zentrale Element einer Theme-Implementierung dar. Es handelt sich dabei nicht um eine zwingend erforderliche Datei, doch nahezu alle modernen Themes nutzen sie. In dieser Datei können Sie Funktionen zur Unterstützung des Themes hinzufügen, Menüs und Seitenausdrücke definieren, Skripte sowie Stylesheets einbinden sowie verschiedene benutzerdefinierte Funktionen erstellen. Die Datei wird bei der Initialisierung des Themes automatisch geladen und ist somit entscheidend für die Erweiterbarkeit der Funktionalitäten des Themes.

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.

Zugangsseite

Ein weiteres wichtiges Dokument ist…header.phpEs enthält in der Regel eine Angabe zum Dokumenttyp, Bereiche für die Einbindung von CSS- und JS-Dateien sowie gemeinsame Elemente des Website- Headers.footer.phpDann enthält es den gemeinsamen Inhalt des Fußes sowie die Abschluss-Tags. Mithilfe einer WordPress-Funktion…get_header()undget_footer()Sie können diese Elemente ganz einfach in andere Template-Dateien einbinden, wodurch der Code modulär und wartbar bleibt.

Aufbau einer lokalen Entwicklungsumgebung und Erstellung der Struktur eines Themes

Bevor Sie ein Thema auf einen Online-Server bereitstellen, ist es die effizienteste und sicherste Methode, eine lokale Entwicklungsumgebung einzurichten. Sie können Tools wie XAMPP, MAMP, Local by Flywheel oder Docker verwenden, um Apache, MySQL und PHP auf Ihrem lokalen Computer schnell zu installieren und WordPress zu betreiben.

Sobald die Umgebung bereit ist, kannst du mit der Erstellung deines ersten Themes beginnen. Zuerst gehst du in das Verzeichnis, in dem WordPress installiert ist.wp-content/themesOrdner: Erstellen Sie hier einen neuen Ordner und benennen Sie ihn nach dem Namen Ihres Themes, zum Beispiel “my-first-theme”. Alle Theme-Dateien werden in diesem Ordner abgelegt.

Als Nächstes erstellen Sie die oben erwähnten Grundlagendateien. Zuerst…style.cssDie Datei muss in ihrem Kopfbereich spezifische Informationen zu den verwendeten Stylesheets enthalten.

Empfohlene Lektüre Erstellen Sie eine professionelle Website: Die umfassende Anleitung zum Entwickeln und Anpassen von WordPress-Themen。

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

Dann erstellt man das Grundlegende.index.phpDateien. Anfangs konnten sie sehr einfach sein – sie dienten lediglich dazu, sicherzustellen, dass das gewünschte Thema von WordPress erkannt und aktiviert werden kann.

<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1001>
    <h1>Hallo, WordPress-Theme-Entwicklung!</h1>
    
</body>
</html>

In diesem Moment solltest du, wenn du dich im WordPress-Backend auf die Seite “Erscheinungsbild” -> “Themes” einloggst, dein Thema dort sehen. Aktiviere es und besuche anschließend die Startseite deines Blogs – dort wirst du die einfachen Informationen sehen, die vom oben genannten Code ausgegeben werden. Damit hast du dein erstes, leeres Theme-Framework erfolgreich erstellt.

Erstellung von Themenvorlagen und Schleifen

Die Hauptaufgabe eines Themes besteht darin, Inhalte anzuzeigen, und die Darstellung von Inhalten in WordPress hängt von sogenannten “Loops” ab. Ein Loop ist eine PHP-Struktur, die in WordPress verwendet wird, um Artikel (einschließlich Seiten und benutzerdefinierter Artikeltypen) aus der Datenbank abzurufen und sie auf der Seite anzuzeigen.

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%

Zugangsseite

Verstehen und implementieren des Hauptzyklus

Die grundlegendste Schleifestruktur sieht wie folgt aus und wird in der Regel verwendet, um…index.phpodersingle.phpIn den Vorlagen-Dateien:

<!-- 在这里输出每篇文章的内容 -->
        <h2></h2>
        <div></div>
    

    <p>Es wurden keine Artikel gefunden.</p>

have_posts()Die Funktion überprüft, ob es Artikel gibt, die angezeigt werden müssen.the_post()Die Funktion setzt die Daten des aktuellen Artikels und macht diese für Template-Tags (z. B.) verfügbar.the_title()、the_content()Aufruf.

Erstellen Sie häufig verwendete Vorlagendateien.

Um sicherzustellen, dass das Thema auf professionelle Weise mit verschiedenen Seiten umgeht, musst du eine Reihe von Vorlagendateien erstellen.index.phpDieses endgültige Rücksetzungs-Template sollte auch Folgendes erstellen:

Empfohlene Lektüre Eine vollständige Anleitung zur Entwicklung von WordPress-Themen: Ein praktisches Tutorial vom Anfänger bis zum Experten.。

• header.phpExtrahieren Sie den gemeinsamen Kopfcode.
• footer.phpEntfernen Sie den gemeinsamen Fußcode.
• single.php\n: Zur Anzeige eines einzelnen Artikels.
• page.phpDient zum Anzeigen einer einzelnen Seite.
• archive.phpDient zur Anzeige von Kategorien, Tags, Autoren und anderen Archivseiten.

Danach musst du die Struktur neu gestalten bzw. das Code-Design überarbeiten.index.phpVerwenden Sie die Funktionen von WordPress, um modulare Teile einzubinden:

<main>
        <?php while ( have_posts() ) : the_post(); ?>
            <article>
                <h2><a href="/de/</?php the_permalink(); ?>"></a></h2>
                
            </article>
        <?php endwhile; ?>
    </main>

Auf diese Weise werden der Anfang und das Ende der Seite durch separate Dateien verwaltet, während die Hauptvorlagendatei sich ausschließlich auf die für die jeweilige Seite spezifische Inhaltslogik konzentriert. Dadurch ist die Struktur klar und die Wartung einfach.

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.

Zugangsseite

Erweiterungen des Themes mittels functions.php

functions.phpEs handelt sich um das “Toolset” zu Ihrem Thema. Hier können Sie Code hinzufügen, um die Kernfunktionen von WordPress sicher zu modifizieren und zu erweitern, ohne die Core-Dateien selbst ändern zu müssen.

Funktionen, die die Registrierung von Themen unterstützen:

Durchadd_theme_support()Mit Funktionen können Sie die verschiedenen Funktionen deklarieren, die ein Theme unterstützen soll. Zum Beispiel können Sie ein Theme so einrichten, dass es Artikel-Bildergalerien, ein benutzerdefiniertes Logo sowie Artikelzusammenfassungen unterstützt.

function my_first_theme_setup() {
    // 让主题支持文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );

// 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );

// 支持文章格式（可选）
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 为文章和页面开启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' );

Bitte beachten Sie, dass wir die Funktion gemountet haben.after_setup_themeDieser Hook befindet sich in der Aktionskette. Es handelt sich um einen Standardhook, der nach dem Laden des WordPress-Themes ausgeführt wird – genau der richtige Zeitpunkt, um die Themeninitialisierung durchzuführen.

Registrierungsmenü und Styleskripte

Registrieren Sie die Position der Navigationselemente, damit Benutzer im Backend unter “Erscheinungsbild” -> “Menü” das Menü verwalten können.

function my_first_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '底部菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_menus' );

In der Template-Datei kannst du verwenden…wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) )um dieses Menü anzuzeigen.

Schließlich müssen die CSS- und JavaScript-Dateien korrekt eingefügt werden – dies ist eine bewährte Vorgehensweise (Best Practice).

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/script.js’, array(‘jquery’), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_first_theme_scripts’ );

ausnutzenwp_enqueue_style()undwp_enqueue_script()Funktion und anschließend mounten…wp_enqueue_scripts„Hooks“ sind die von WordPress offiziell empfohlene Methode. Sie ermöglichen die Verarbeitung von Abhängigkeiten, verhindern das mehrfache Laden von Inhalten und sorgen für die Kompatibilität in Umgebungen wie Plugins.

Zusammenfassungen

Vom Erstellen einer Datei, die enthält…style.cssundindex.phpVom Start mit einer einfachen Ordnerstruktur über das Verständnis der Struktur von Vorlagen und der “Zyklusmechanismen” bis hin zum effektiven Einsatz dieser Mechanismen…functions.phpSie haben der Datei um umfangreiche Funktionen hinsichtlich des Themas hinzugefügt und somit den Kernpfad der WordPress-Theme-Entwicklung bereits durchlaufen. Der Schlüssel zur Theme-Entwicklung liegt in einer modularen Denkweise: Wiederholte Teile – wie das Header- und Footer-Element – sollten in separate Dateien aufgeteilt werden.functions.phpDie Funktionen zur zentralen Verwaltung werden genutzt, und die Logik der Inhaltsanzeige wird gemäß den Regelungen zur Hierarchie der WordPress-Vorlagen organisiert. Nachdem Sie diese Grundkenntnisse erlernt haben, verfügen Sie über die Grundlage, um individuelle Websites zu erstellen. Sie können sich anschließend weiteren fortgeschrittenen Aspekten von WordPress widmen, wie den Bereichen für Zusatzausstattungen („Plugins“), benutzerdefinierten Artikeltypen sowie der API für die Themenanpassung, und so Ihre WordPress-Entwicklungsfähigkeiten kontinuierlich verbessern.

FAQ Häufig gestellte Fragen

Was tun, wenn sich die Webseite nach der Änderung des Themes nicht sofort aktualisiert?

Das liegt in der Regel an der Browser-Cache oder dem Caching-Mechanismus von WordPress. Versuchen Sie zunächst, den Browser durch Drücken von Ctrl+F5 (oder Cmd+Shift+R) zu erzwingen, neu aufzuladen. Wenn das Problem weiterhin besteht, prüfen Sie, ob Sie Caching-Plugins verwendet haben oder ob auf Serverebene Caching aktiviert ist, und versuchen Sie, alle Caches zu leeren. Insbesondere bei CSS- und JS-Dateien…wp_enqueue_styleundwp_enqueue_scriptIn einer Funktion kann man dem Parameter für die Versionsnummer einen dynamischen Wert zuweisen (z. B.time()Vermeiden Sie während der Entwicklung das Caching, aber ändern Sie die Versionnummer in eine feste Zahl, bevor das Produkt online gestellt wird.

Warum wird mein Thema im Hintergrund nicht 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.cssDer Kommentarblock am Anfang des Files ist in der richtigen Formatierung, insbesondere die Zeile “Theme Name:” ist unerlässlich. Stellen Sie abschließend sicher, dass die Berechtigungen für die Theme-Verzeichnis sowie die darin enthaltenen Dateien korrekt eingestellt sind und dass der Webserver (z. B. Apache) die Berechtigung hat, diese Dateien zu lesen.

Wie füge ich eine Seitenleiste zu meinem Thema hinzu?

Das Hinzufügen einer Seitenleiste erfolgt in zwei Schritten. Zuerst…functions.phpVerwenden Sie es in Chinaregister_sidebar()Die Funktion registriert eine oder mehrere Widget-Bereiche. Anschließend wird dies in der Template-Datei durchgeführt, in der Sie die Seitenleiste anzeigen möchten (z. B. …)sidebar.phpIn…) wird verwendet.dynamic_sidebar()Sie müssen eine Funktion erstellen, um es aufzurufen. Gleichzeitig müssen Sie dies in der Hauptvorlagendatei (z. B.) implementieren.index.php), die in derget_sidebar()Um das Seitenaufnahmewerkzeug einzuführen…

Wie kann man bei der Entwicklung eines Themes sicherstellen, dass es mit Plugins kompatibel ist?

Die Einhaltung der WordPress-Codierungsstandards ist die Grundlage für die Gewährleistung der Kompatibilität. Was zu den von Plugins hinzugefügten Inhalten betrifft, stellen Sie sicher, dass Ihr Theme diese korrekt abruft bzw. verarbeitet.wp_head()undwp_footer()Funktionen – schließlich verlassen sich viele Plugins auf diese beiden „Hooks“, um den erforderlichen Code einzufügen (z. B. Statistik-Code, CSS/JS). Darüber hinaus wird bei der Ausgabe des Artikelinhalts stets…the_content()Anstatt direkt auf die Datenbank zuzugreifen, verwendet eine Funktion die Plugins, um alle durch den “the_content”-Filter vorgenommenen Änderungen hinzuzufügen.