Einführung in die Entwicklung von WordPress-Themen: Erstellen Sie Ihre erste Website-Optik von Grund auf

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 WordPress-Theme ist im Wesentlichen eine Sammlung von Dateien, die gemeinsam das Erscheinungsbild und die Funktionen einer Website definieren. Zu diesen Dateien gehören Template-Dateien, Stylesheets sowie optionale Funktionen- und Skriptdateien.

Die Kern-Dokumente sindstyle.cssundindex.phpDarunter befinden sichstyle.cssNicht nur die Stylesheets der Themes, sondern auch die sogenannten “Identifikationsdokumente” der Themes enthalten wichtige Metadaten wie den Namen des Themes, den Autor, eine Beschreibung sowie die Version. WordPress nutzt diese Informationen, um die Themes im Hintergrund zu erkennen und zu verwalten.

Die Template-Dateien sind dafür verantwortlich, die Anzeigelogik der verschiedenen Seiten zu steuern. Zum Beispiel…single.phpDient zur Anzeige eines einzelnen Artikels.page.phpEs wird verwendet, um unabhängige Seiten anzuzeigen, währendarchive.phpDiese Dateien werden verwendet, um eine Liste der Artikelarchivs anzuzeigen. Sie folgen dem Template-Hierarchiesystem von WordPress. Wenn ein bestimmtes Template nicht vorhanden ist, wechselt das System automatisch zu einem allgemeineren Template – und schließlich zu einem Standardtemplate.index.php。

Empfohlene Lektüre WordPress Theme Development Starter Guide: Erstellen Sie Ihre eigene Web-Schnittstelle von Grund auf neu。

Ein weiteres wichtiges Dokument ist…functions.phpDieses Datei ist keine Vorlage-Datei, sondern eine Funktionseinheit des Themes. Darin können Sie benutzerdefinierte Funktionen hinzufügen, Menüs und Seitenleisten (Borderelemente) registrieren, die Unterstützung für spezielle Bilder (Artikel-Zusammenfassungen) für das Theme bereitstellen sowie JavaScript- und CSS-Dateien schrittweise einbinden. Es fungiert sozusagen als das “Gehirn” des Themes und ist verantwortlich für die Verarbeitung von Logik sowie die Erweiterung der Funktionalitäten.

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

Das Verständnis dieser grundlegenden Dateien und ihrer Funktionen ist der erste Schritt bei der Erstellung eines stabilen und wartungsfreundlichen Themes.

Aufbau einer lokalen Entwicklungsumgebung und Erstellung der Struktur eines Themes

Bevor Sie mit dem Codieren beginnen, ist es unerlässlich, eine effiziente lokale Entwicklungsumgebung einzurichten. Es wird empfohlen, lokale Entwicklungstools wie Local by Flywheel, XAMPP oder MAMP zu verwenden. Diese ermöglichen es, auf Ihrem lokalen Computer schnell eine WordPress-Entwicklungsumgebung mit Apache, MySQL und PHP aufzubauen. Dadurch können Sie offline entwickeln und frei testen sowie debuggen, ohne dass dies die Online-Website beeinträchtigt.

Sobald die Umgebung bereit ist, müssen Sie im Installationsverzeichnis von WordPress…wp-content/themes/Im Ordner erstelle einen neuen Ordner als Verzeichnis für dein Thema. Der Name des Ordners sollte aus Kleinbuchstaben, Zahlen und Bindestrichen bestehen und beschreibend sein – zum Beispiel:my-first-theme。

Als Nächstes erstellen Sie die beiden grundlegendsten Dateien. Zuerst…style.cssDie Datei muss an ihrem Anfang eine Kommentarzeile enthalten, die folgenden Formatanforderungen erfüllt:

Empfohlene Lektüre Was ist die Entwicklung von WordPress-Themen?。

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

“Text Domain” wird für die Internationalisierung verwendet und entspricht in der Regel dem Namen des Themenverzeichnisses. Danach folgt…index.phpDies ist die grundlegendste Vorlage-Datei, die vorerst nur eine einfache HTML-Struktur enthalten kann:

<!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>Mein erstes Thema</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>© Alle Rechte vorbehalten</p>
    </footer>
    
</body>
</html>

In diesem Moment loggen Sie sich in das WordPress-Backend ein und gehen Sie zu “Erscheinungsbild” -> “Themen”. Dort sollten Sie das neue Thema sehen und es aktivieren können. Obwohl es noch einfach gehalten ist, handelt es sich bereits um ein funktionsfähiges Thema.

Einführung in die Kernvorlagen-Dateien und Schleifen

WordPress verwendet die sogenannte “The Loop”, um Inhalte von Artikeln aus der Datenbank abzurufen und auf der Seite anzuzeigen. Die „The Loop“ ist ein zentrales Konzept bei der Entwicklung von WordPress-Themen – nahezu alle Template-Dateien basieren auf dieser Struktur.

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 des Hauptzyklus von WordPress

Die grundlegende Struktur einer Schleife besteht aus einer Reihe von Anweisungen, die nacheinander ausgeführt werden.ifundwhileDie Anweisung prüft, ob es in der aktuellen Abfrage Artikel gibt, und durchläuft anschließend jeden Artikel, um seine Daten (Titel, Inhalt, Autor usw.) für die Aufrufe von Template-Tags verfügbar zu machen. Eine typische Schleifenstruktur sieht wie folgt aus:

<!-- 在这里输出文章内容，例如： -->
        <h2></h2>
        <div></div>
    

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

the_post()Die Funktion dient dazu, die Daten des aktuellen Artikels zu setzen, bevor dieser verwendet werden kann.the_title()、the_content()Dazu gehören auch Vorlagen-Tags.

Erstellen Sie häufig verwendete Vorlagendateien.

Um sicherzustellen, dass das Thema professionell mit verschiedenen Seiten umgehen kann, müssen Sie einige Kernvorlagen erstellen. Zuerst…header.phpundfooter.phpDient dazu, den Code für die Kopf- und Fußzeile aus…index.phpEs wurde aus der Mitte getrennt.header.phpIm Inneren befinden sich Gegenstände, die von dort stammen.bisDer Inhalt, der nach dem Beginn des Tags folgt; in…footer.phpInnen, platzierenDann, weiterhin…index.phpIn China wird es verwendet.get_header()undget_footer()Funktionen werden verwendet, um sie einzuführen.

Empfohlene Lektüre Kompletter Tutorial zur Entwicklung von WordPress-Themen: Von den Grundlagen des Codes bis zu praktischen Tipps。

Anschließend erstellen Siesingle.phpFür einzelne Artikel verwendet.page.phpFür separate Seiten geeignet. Sie können diese Dateien zunächst verwenden…get_header()undget_footer()Anschließend wird die entsprechende Schleife sowie die HTML-Struktur für ein einzelnes Artikel- oder Seitenobjekt eingefügt. Zum Beispiel:single.phpEs könnte sein, dass in diesem Zusammenhang eine Aufruf erfolgt.the_post_thumbnail()Um die charakteristischen Bilder des Artikels anzuzeigen…page.phpDie Veröffentlichungsdatum könnte in diesem Fall nicht angezeigt werden.

Zum Schluss: Erstellen Sie…archive.phpDiese Datei wird verwendet, um Seiten zur Klassifizierung, Verzeichnisierung von Inhalten (Tags), Angabe von Autoren usw. zu verwalten. In dieser Datei werden typischerweise bestimmte Konventionen und Strukturen angewendet, um die Organisation und Struktur dieser Seiten sicherzustellen.the_archive_title()Generieren Sie Archivtitel und stellen Sie mehrere Artikel in Form eines Zusammenfassens oder einer Liste dar.

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

Durch die Trennung dieser Templates wird die Struktur deines Themas klarer und einfacher zu warten sein.

Verbessern der Funktionen und des Designs der Themen

Nachdem ein grundlegender Themenrahmen fertiggestellt wurde, ist der nächste Schritt die Hinzufügung von Funktionen sowie die Verbesserung des Designs. Dies erfolgt hauptsächlich durch…functions.phpundstyle.cssUm dies zu erreichen…

Durch die Verwendung von Funktionen in Dateien werden Kernfunktionen hinzugefügt.

functions.phpDie Dateien sind der Hauptort, an dem Sie Funktionen für Ihr Thema hinzufügen. Zunächst sollten Sie Ihrer Themat die Unterstützung für grundlegende Funktionen bieten – dies erfolgt durch…add_theme_support()Funktionsimplementierung.

function my_first_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 让主题支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 让主题支持HTML5的标记格式（用于搜索表单、评论表单等）
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 让主题支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Zweitens müssen Sie die Positionen der Menüs sowie der Seitenleiste (die Bereich für Widgets) für das gewählte Thema registrieren. Verwenden Sie dazu die entsprechenden Registrierungsmethoden.register_nav_menus()Funktion:

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

Danach können Sie in der Template-Datei (z. B.)header.php), die in derwp_nav_menu( array( 'theme_location' => 'primary' ) );Damit das Menü angezeigt wird.

Einführung von Styles und Scripts

Die richtige Methode, CSS- und JavaScript-Dateien einzufügen, besteht darin, sie über entsprechende Einbettungsmechanismen in die HTML-Datei zu integrieren.wp_enqueue_style()undwp_enqueue_script()Funktionen, die sie anhängenwp_enqueue_scriptsAuf der Schlaufe. Dadurch werden die Abhängigkeiten korrekt berücksichtigt und eine doppelte Ladung verhindert.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入Google字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );
    // 引入主题的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' );

Erstellen Sie grundlegende Styles.

Zum Schluss:style.cssHier kannst du mit dem Schreiben von Styles beginnen. Fang damit an, die Standardstyles des Browsers zurückzusetzen, und füge anschließend nach und nach weitere Styles hinzu.body、headerNavigationsmenü, Artikelinhalte, Seitenspalten undfooterDefinieren Sie die Styles und verwenden Sie responsive Design-Mediaqueries, um sicherzustellen, dass Ihr Thema auf Mobiltelefonen, Tablets und Desktop-Geräten eine gute Darstellung bietet. Durch kontinuierliche Anpassungen und Tests wird Ihre erste Website-Oberfläche allmählich schöner und professioneller.

Zusammenfassungen

Vom Erstellen einer Datei, die enthält…style.cssundindex.phpVon einer einfachen Ordnerstruktur aus beginnend, bis hin zum Aufbau…header.php、footer.php、single.phpVom Erstellen professioneller Vorlagen-Dateien bis hin zum Einsatz dieser Dateien…functions.phpDurch die Hinzufügung von Funktionen zur Themenanpassung, Menüs und Skripten hast du den Kernprozess der Erstellung deines ersten WordPress-Themes abgeschlossen. Dieser Prozess hat dir nicht nur die Schlüsselkonzepte wie Template-Ebenen, Schleifen und Aktionshaken vermittelt, sondern auch verstanden, wie WordPress-Themes Daten, Logik und die Darstellungsebene voneinander trennen. Setze deine Übung fort und versuche, deinem Thema weitere Templates hinzuzufügen (z. B. …).search.php、404.phpMit den grundlegenden Funktionen sowie den erweiterten Funktionen (wie der Unterstützung für benutzerdefinierte Artikeltypen) werden Sie in der Lage sein, noch leistungsfähigere und einzigartigere Website-Designs zu erstellen.

FAQ Häufig gestellte Fragen

Muss man PHP beherrschen, um eine WordPress-Theme zu entwickeln?

Ja, PHP ist die Kernsprache für die Programmierung von WordPress. Um Themes mit vollständigen Funktionen zu entwickeln, musst du die Grundlagen der PHP-Sprache beherrschen – insbesondere Funktionen, Bedingungssätze, Schleifen sowie die Interaktion mit der WordPress-API (z. B. Template-Tags, Hook-Funktionen). HTML und CSS bilden die Grundlage für die Erstellung der Benutzeroberfläche, während JavaScript verwendet wird, um interaktive Effekte hinzuzufügen.

Was ist der Unterschied zwischen der functions.php-Datei eines Themes und einem Plugin?

functions.phpDie Funktionen im File sind mit dem aktuell aktivierten Thema verknüpft. Wenn Sie das Thema wechseln, werden diese Funktionen nicht mehr verfügbar sein. Dieser Ansatz eignet sich am besten, um Funktionen hinzuzufügen, die eng mit der visuellen Darstellung und dem Layout des Themas zusammenhängen – beispielsweise Menüpositionen, Seitenleisten, die spezifisch für dieses Thema sind, oder Shortcodes, die das Thema definiert.

Die von Plugins bereitgestellten Funktionen sind unabhängig von den verwendeten Themes – unabhängig davon, welches Theme ausgewählt wird, bleiben die Funktionen der Plugins in der Regel erhalten. Plugins eignen sich besonders gut dazu, allgemeine Funktionen hinzuzufügen, die mit dem Erscheinungsbild des Themes nichts zu tun haben, wie beispielsweise Kontaktformulare, SEO-Optimierungen oder Caching-Mechanismen. Eine gute Praxis besteht darin, allgemeine Funktionen, die auch in anderen Themes genutzt werden könnten, als Plugins zu erstellen.

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

Um ein Thema für mehrere Sprachen zu unterstützen, also internationalisieren zu können (i18n), ist es wichtig, alle für die Benutzer bestimmten Zeichenketten im Code entsprechend zu formatieren. In PHP-Dateien kann dies beispielsweise mithilfe der Funktionen `gettext()` und deren Erweiterungen erreicht werden.__()、_e()Um Texte mit Übersetzungsfunktionen auszugeben, müssen diese Funktionen in der entsprechenden Sprache implementiert werden. In JavaScript-Dateien muss dies ebenfalls erfolgen, indem die entsprechenden Bibliotheken oder Methoden eingebunden werden.wp_set_script_translations()Einen ähnlichen Prozess durchführen.

Sie benötigen…style.css“Text Domain” undfunctions.phpAufruf in „China“load_theme_textdomain()Wenn Sie dies tun, müssen Sie einen eindeutigen Textbereich („Text Domain“) angeben. Anschließend verwenden Sie ein Tool wie Poedit, um Ihren Theme-Code zu scannen und die entsprechenden Daten zu generieren..potÜbersetzung der Template-Datei – Die Übersetzer können darauf basierend eigene Inhalte erstellen..pound.moSprachdateien. Legen Sie diese Sprachdateien in das Thema-Verzeichnis./languages/Sie können es einfach im Verzeichnis ablegen.

Wie fügt man während der Entwicklung Fehler in einem WordPress-Thema hin?

Die Aktivierung des Debugging-Modus in WordPress ist der Schlüssel zur Fehlererkennung und -behebung. Dies erfolgt durch das Editieren bestimmter Einstellungen im WordPress-System.wp-config.phpDatei, wird…WP_DEBUGDie Konstante ist auftrueSie können auch gleichzeitig aktivierenWP_DEBUG_LOG(Die Fehler werden in einer Protokolldatei aufgezeichnet) undWP_DEBUG_DISPLAY(Ein Fehler wird auf der Seite angezeigt.) Bitte beachten Sie, dass Sie den Debugging-Modus unbedingt deaktivieren müssen, bevor die Website online gestellt wird.

Darüber hinaus ist es ein unverzichtbares Mittel zur Frontend-Debugging, die Browser-Entwicklungstools (mit F12 öffnen) zu nutzen, um die HTML-Struktur, die CSS-Styles sowie Fehler in der JavaScript-Konsole zu überprüfen. Bei komplexer PHP-Logik ist es sinnvoll, zusätzliche Hilfsmittel einzusetzen.error_log()Funktionen oder spezielle Debugging-Plugins (wie Query Monitor) können ebenfalls die Effizienz erheblich steigern.