Lernen Sie WordPress-Theme-Entwicklung von Grund auf: Erstellen Sie eine personalisierte Website.

Aufbau einer Entwicklungsumgebung für WordPress-Themes

Bevor Sie mit dem Schreiben von Code beginnen, ist es äußerst wichtig, die lokale Entwicklungsumgebung richtig einzurichten. Eine effiziente Entwicklungsumgebung kann Ihre Arbeitsproduktivität erheblich steigern und Ihnen das Debuggen und Testen von Code erleichtern. Unter den zahlreichen Tools empfehlen wir die Verwendung von Local、MAMP oder XAMPP Als lokale Serverlösung können diese Tools mit einem einzigen Klick installiert werden und enthalten PHP, MySQL (oder MariaDB) und einen Webserver (wie Apache oder Nginx), die für den Betrieb von WordPress erforderlich sind.

Gleichzeitig ist ein leistungsstarker Code-Editor unverzichtbar. Zum Beispiel Visual Studio Code oder PhpStormSie unterstützen alle Syntax-Hervorhebung, Code-Vorschläge und Versionskontrollintegration, um Ihnen beim effizienteren Schreiben und Debuggen von Code zu helfen. Es wird empfohlen, WordPress-bezogene Plugins wie PHP Intelephense in Ihrem Editor zu installieren.

Erstellt eure erste thematische Infrastruktur.

Ein WordPress-Theme ist im Wesentlichen ein wp-content/themes/your-theme-name Der Ordner im Verzeichnis. Die wichtigsten Bestandteile dieses Ordners sind Stylesheets und Vorlagendateien. Zunächst müssen Sie diesen Themenordner manuell oder über die Befehlszeile erstellen.

Empfohlene Lektüre Ein perfektes Webseitenprojekt erstellen – von Grund auf eine benutzerdefinierte WordPress-Thema entwickeln。

Als Nächstes erstellen Sie die Stylesheet-Datei für das Thema. Diese Datei wird in der Regel mit dem Namen „theme.css“ bezeichnet. style.cssEs ist nicht nur der Ort, an dem CSS-Regeln gespeichert werden, sondern noch wichtiger ist, dass die Kommentarblöcke am Anfang der Datei Metadaten des Themas enthalten. Diese Informationen sind für WordPress entscheidend, um ein Thema zu erkennen. Ein typisches Beispiel ist style.css Der Dateikopf könnte wie folgt aussehen:

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

/*
Theme Name: 我的个性化主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始打造的个性化WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-personal-theme
*/

Darunter befinden sichText Domain Für die Internationalisierung müssen Sie es in allen nachfolgenden übersetzbaren Zeichenketten verwenden. Nachdem Sie diese Datei erstellt haben, legen Sie sie in Ihrem Themenordner ab, und Sie können sie im WordPress-Dashboard unter “Erscheinungsbild” -> “Themen” sehen, auch wenn sie derzeit noch ein leeres Shell ist.

Das Verständnis der zentralen Vorlagen-Datei des Themas

WordPress verwendet ein Templat-Hierarchiesystem, um zu bestimmen, welche Datei für verschiedene Seitenanfragen geladen wird. Das bedeutet, wenn ein Benutzer die Startseite Ihrer Website besucht, sucht WordPress zunächst nach front-page.phpWenn nicht, suchen Sie danach. home.phpUnd zum Schluss kommt das Standardmodell index.phpDas Verständnis dieser Hierarchie ist die Grundlage für die Erstellung einer thematischen Logik.

Erstellen Sie eine grundlegende Vorlagendatei.

Die grundlegendsten Dateien, die alle Themen enthalten müssen, sind index.php und style.cssAber um eine strukturierte und voll funktionsfähige Website zu erstellen, müssen wir normalerweise eine Reihe von Vorlagendateien erstellen. Darunter fallen unter anderemheader.php und footer.php Dies sind zwei äußerst wichtige Vorlagenabschnitte. Sie enthalten den Header (z. B. Navigationsmenü, Sitelogo) und den Footer (z. B. Copyright-Informationen), die auf jeder Seite der Website wiederholt werden.

In der Seitenvorlage kannst du die von WordPress bereitgestellten Vorlagefunktionen verwenden, um diese Teile einzubinden. Zum Beispiel… index.php Am Anfang eines Satzes können Sie Folgendes verwenden: Um das Header-Template einzuführen. Diese Funktion sucht und lädt automatisch das Template aus dem Themenverzeichnis. header.php Dokument. Ebenso verwenden Sie am Ende der Seite < Um das Endteil-Template einzuführen. Dieses modulare Design erleichtert die Wiederverwendung und Wartung von Code erheblich.

Empfohlene Lektüre Eine vollständige Anleitung zur Entwicklung von WordPress-Themen: Erstellen Sie eine personalisierte Website von Grund auf.。

Erstellung der Hauptschleife

Die Kernfunktion von WordPress besteht darin, Inhalte anzuzeigen, und die Anzeige von Inhalten wird über den “Hauptzyklus” erreicht. Ein Zyklus ist eine PHP-Code-Struktur in WordPress, die zum Abrufen von Artikeln (oder Seiten, benutzerdefinierten Artikeltypen) aus der Datenbank und zur Anzeige auf der Seite verwendet wird. Der grundlegendste Zyklus-Code sieht wie folgt aus:

<article>
            <h2></h2>
            <div></div>
        </article>
    

    <p>Es gibt derzeit keinen Inhalt.</p>

Dieser Code prüft zunächst, ob es Artikel gibt.have_posts()Wenn ja, springt man in die Schleife (while ( have_posts() ) : the_post();Im Inneren der Schleife können Sie eine Reihe von Vorlagen-Tags, die mit “the_” beginnen, verwenden, um Artikelinformationen auszugeben, z. B. the_title() Artikeltitel:the_content() Output des Artikelinhalts. Diese Schleifenstruktur wird auf Listen-Seiten wie der Startseite, Kategorieseiten und Suchseiten verwendet.

Hinzufügen von Themenfunktionen und Stilen

Ein hervorragendes Theme muss nicht nur eine gute Struktur aufweisen, sondern auch über umfangreiche Funktionen und ein ansprechendes Design verfügen. WordPress erreicht dies durch “Funktions”-Dateien und eine “Design”-Datei.

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

Verwenden Sie Funktionsdateien, um das Thema zu verbessern.

„Themenbezogen“ functions.php Die Datei ist Ihr “Schweizer Taschenmesser”. Es handelt sich nicht um eine Vorlagendatei, sondern um eine PHP-Datei, die beim Initialisieren des Themas automatisch geladen wird, um Ihrem Thema verschiedene Funktionen hinzuzufügen. Hier können Sie die vom Thema unterstützten Funktionen definieren, Navigationsmenüs registrieren, Stylesheets und Skriptdateien laden, Widget-Bereiche definieren usw.

Beispielsweise, um die Unterstützung für Bilder mit Bildunterschriften (Thumbnails) für Artikel zum Thema hinzuzufügen, können Sie dies in functions.php Fügen Sie den folgenden Code in die Datei ein:

<?php
add_theme_support( 'post-thumbnails' );

Um einen Hauptnavigationsmenü-Platz zu registrieren, können Sie Folgendes verwenden:

Empfohlene Lektüre Wie man ein professionelles WordPress-Theme entwirft und entwickelt。

<?php
register_nav_menus( array(
    'primary' => __( '主导航菜单', 'my-personal-theme' ),
) );

Danach kannst du… header.php Verwenden Sie es in China wp_nav_menu( array( 'theme_location' => 'primary' ) ); um dieses Menü anzuzeigen.

Das Schreiben von responsivem und modularem CSS

Modernen Websites müssen responsiv sein und auf Geräten mit unterschiedlichen Bildschirmgrößen gut angezeigt werden. style.css Bei der Entwicklung sollten Sie eine mobil-zentrierte CSS-Strategie verfolgen und Medienabfragen sinnvoll einsetzen, um sowohl Tablets als auch Desktop-Geräte zu unterstützen. Gleichzeitig ist es eine gute Gewohnheit, Ihren CSS-Code zu modularisieren, indem Sie beispielsweise separate Stylesheets für Header, Navigation, Artikelkarten, Fußzeilen usw. erstellen und diese mit klaren Kommentaren versehen.

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

Um die Wartbarkeit des Codes zu verbessern, wird empfohlen, die wichtigsten CSS-Regeln zu verwenden. wp_enqueue_style() Die Funktion befindet sich in functions.php Die Inhalte werden nacheinander geladen, anstatt alle auf einmal aufzubewahren. style.css Das ermöglicht es Ihnen, Abhängigkeiten und die Reihenfolge des Ladens besser zu verwalten.

Praktikum: Erstellen eines Vorlagen für eine Einzelartikel-Seite

Nun werden wir das Gelernte zusammenfassen und eine strukturiertere Vorlage für eine einzelne Artikelseite erstellen. single.phpDieses Template wird verwendet, um einen einzelnen Blog-Artikel anzuzeigen.

Erstellung einer vollständigen Artikelvorlagenstruktur

Ein vollständiger single.php Es enthält normalerweise einen Header, einen Bereich für den Artikelinhalt und einen Footer. Im Bereich für den Artikelinhalt organisieren wir die Metadaten des Artikels detaillierter, z. B. das Veröffentlichungsdatum, den Autor, die Kategorien und die Tags.

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1013>
            <header class="entry-header">
                <h1 class="entry-title"></h1>
                <div class="entry-meta">
                    <span class="posted-on">
                        <?php the_time( 'Y年m月d日' ); ?>
                    </span>
                    <span class="byline">
                        Autor:
                    </span>
                    <span class="cat-links">
                        Kategorien:
                    </span>
                </div>
            </header>

<?php if ( has_post_thumbnail() ) : ?>
                <div class="post-thumbnail">
                    <?php the_post_thumbnail( 'large' ); ?>
                </div>
            

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

<footer class="entry-footer">
                <span class="tags-links">
                    Tag:
                </span>
            </footer>
        </article>


</main>

Dieses Template zeigt, wie man nutzen kann the_time()、the_author_posts_link()、the_category()、the_tags() Sie können Seiteninhalte mit Vorlagen-Tags bereichern. Gleichzeitig verwendet es post_class() Die Funktion fügt dem Artikel-Container automatisch semantische CSS-Klassen hinzu, um die Stilkontrolle zu erleichtern.

Einführung von Seitenleisten und Kommentarvorlagen

Auf der Seite eines einzelnen Artikels sind Seitenleisten und Kommentarbereiche häufige Elemente. Sie können Folgendes verwenden: get_sidebar() Um die Funktion einzuführen sidebar.php Eine Vorlagendatei, die normalerweise Code für Widget-Aufrufe enthält. Kommentarvorlagen werden über comments_template() Die Funktion wird eingeführt, und sie lädt automatisch die Dateien unter dem Themenverzeichnis. comments.php Sie benötigen zwei Vorlagen-Dateien, um die Anzeige von Kommentaren und Formularen zu verarbeiten. Sie müssen diese beiden Vorlagen-Dateien selbst erstellen, um die vollständige Funktionalität zu erreichen.

Zusammenfassungen

Die Entwicklung eines WordPress-Themas von Grund auf ist ein systematischer Lernprozess, der sowohl Kenntnisse in PHP-Programmierung, HTML-Strukturierung, CSS-Styling als auch ein tiefes Verständnis der Kernkonzepte von WordPress (wie Template-Hierarchie, Hauptschleife und Hook-Funktionen) erfordert. Dies geschieht durch die Einrichtung einer Umgebung, die Erstellung von Kern-Template-Dateien und die Nutzung von functions.php Sie können nicht nur eine vollständig auf Ihre Bedürfnisse zugeschnittene, personalisierte Website erstellen, sondern auch das Funktionsprinzip dieses leistungsstarken Content-Management-Systems von WordPress gut verstehen, indem Sie zunächst Funktionen hinzufügen und dann spezifische Seitenvorlagen erstellen. Denken Sie daran, dass die Entwicklung von Themes ein fortlaufender Prozess ist, der mit den einfachsten Schritten beginnt. style.css und index.php Zu Beginn ist es der beste Weg zum Erfolg, schrittweise komplexe Funktionen hinzuzufügen.

FAQ Häufig gestellte Fragen

Welche Programmiersprachenkenntnisse sind für die Entwicklung von WordPress-Themes erforderlich?

Um WordPress-Themes zu entwickeln, benötigt man hauptsächlich Grundkenntnisse in PHP, HTML, CSS und JavaScript. PHP wird zur Verarbeitung von Logik und zum Aufrufen von WordPress-Funktionen verwendet; HTML ist für die Seitenstruktur zuständig; CSS steuert Stil und Layout; und JavaScript wird zur Implementierung von Interaktivität auf der Benutzeroberfläche eingesetzt. Dabei stehen PHP und die für WordPress typischen Vorlagen-Tags, Funktionen und Hook-Mechanismen im Mittelpunkt des Lernprozesses.

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

functions.php Die Datei ist Teil des Themas, und ihre Funktionalität ist an das aktuell aktivierte Thema gebunden. Wenn Sie das Thema wechseln, wird dies durch functions.php Die hinzugefügten Funktionen werden nicht mehr funktionieren. Plugins sind Module, die unabhängig vom Theme sind, und ihre Funktionalität ändert sich nicht, wenn das Theme gewechselt wird. Funktionen, die eng mit dem Aussehen und der Struktur der Website verbunden sind, befinden sich normalerweise im Theme. functions.php Diejenigen, die unabhängige, allgemein nutzbare Funktionen bieten, eignen sich besser als Plugins, um die Portabilität des Codes zu verbessern.

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

Um das Thema für die Internationalisierung zu unterstützen, müssen Sie zunächst in style.css Die Kopf-Anmerkungen sowie das Laden des Textfeldes müssen korrekt eingestellt werden. Text DomainDann werden in allen PHP-Vorlagendateien des Themas alle benutzerorientierten Zeichenketten mit der Übersetzungsfunktion von WordPress umhüllt, beispielsweise __( ‘字符串’, ‘your-text-domain’ ) oder _e( ‘字符串’, ‘your-text-domain’ )。

Als nächstes müssen Sie ein Tool wie Poedit verwenden, um den Quellcode des Themas zu scannen und zu generieren. .pot Vorlagen-Datei und auf dieser Grundlage für jede Sprache eine entsprechende Version erstellen. .po Und das kompilierte… .mo Übersetzen Sie die Dokumente. Zum Schluss legen Sie diese übersetzten Dokumente unter dem entsprechenden Thema ab. /languages Unter dem Verzeichnis lädt WordPress automatisch die entsprechende Übersetzung basierend auf den Spracheinstellungen der Website.

Wie kann man während der Entwicklung Fehler debuggen und beheben?

Während der Entwicklungsphase wird dringend empfohlen, den Debug-Modus von WordPress zu aktivieren. Sie können dies auf der Website tun. wp-config.php Die Datei definiert die folgenden Konstanten, um dies zu aktivieren:

define( ‘WP_DEBUG’, true );
define( ‘WP_DEBUG_LOG’, true ); // 将错误记录到 /wp-content/debug.log 文件
define( ‘WP_DEBUG_DISPLAY’, false ); // 不建议在页面上直接显示错误

Gleichzeitig können Sie die HTML-Struktur, CSS-Stile und JavaScript-Konsolenfehler mit den in Ihrem Browser integrierten Entwicklerwerkzeugen (die Sie durch Drücken von F12 öffnen) überprüfen. Für die Logik des PHP-Codes können Sie diese Werkzeuge in Kombination mit anderen Tools verwenden. var_dump() oder error_log() Der Funktion wird die Ausgabe und die Aufzeichnung übertragen, um die Werte der Variablen und den Ablauf der Programmausführung zu verfolgen.