Einführung in die Entwicklung von WordPress-Themes: Von den Grundlagen bis zur praktischen Veröffentlichung

Vorbereitung der WordPress-Themenentwicklungsumgebung

Bevor Sie mit dem Schreiben von Code beginnen, ist es äußerst wichtig, eine stabile und effiziente lokale Entwicklungsumgebung einzurichten. Dies ermöglicht Ihnen nicht nur, offline zu arbeiten, sondern vermeidet auch die Risiken, die beim Testen auf einem Online-Server auftreten können.

Aufbau einer lokalen Entwicklungsumgebung

Die am häufigsten verwendete Methode ist die Verwendung integrierter lokaler Server-Pakete, wie z. B. XAMPP, MAMP oder Laragon. Diese Tools installieren Apache, MySQL und PHP mit einem einzigen Klick und ersparen so den mühsamen Konfigurationsprozess. Für die WordPress-Entwicklung wird die Verwendung einer speziell für WordPress optimierten Umgebung, wie Local by Flywheel oder DesktopServer, empfohlen, die praktische Funktionen wie das Erstellen von Websites, die Verwaltung von Datenbanken und das Wechseln zwischen PHP-Versionen bietet.

Wahl der Kernwerkzeuge und Editoren

Du benötigst einen Code-Editor. Es wird empfohlen, Visual Studio Code, PhpStorm oder Sublime Text zu verwenden. Alle diese Programme bieten leistungsstarke Funktionen zur Code-Hervorhebung, automatischen Vervollständigung und Projektverwaltung. Insbesondere Visual Studio Code kann in Kombination mit WordPress-bezogenen Plugins (wie WordPress Snippet und PHP Intelephense) die Entwicklungseffizienz erheblich steigern.

Empfohlene Lektüre Erlernen Sie die Entwicklung von WordPress-Plugins: Erstellen Sie Ihre erste Funktionserweiterung von Grund auf.。

Zudem ist das Versionskontrollsystem Git unverzichtbar. Selbst wenn Sie ein unabhängiger Entwickler sind, ist es eine gute Gewohnheit, Codeänderungen mit Git zu verfolgen, Zweige zu erstellen und Projekte zu sichern. Sie können ein Repository lokal initialisieren und erwägen, es in Zukunft auf eine Remote-Hosting-Plattform wie GitHub, GitLab oder Bitbucket hochzuladen.

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 grundlegende Strukturverständnis von WordPress-Themen.

Ein standardisiertes WordPress-Theme ist ein Ordner, der bestimmte Dateien enthält und sich in einer bestimmten Verzeichnissstruktur befindet. /wp-content/themes/ Unter „Katalog“. Selbst das einfachste Thema muss zwei Kern-Dateien enthalten.

Die Stylesheet-Datei des Themas

style.css Es ist die “Identitätskarte” und die Datei zur Definition des Erscheinungsbildes des Themes. Sein Header-Anmerkungsblock enthält alle Metainformationen des Themes, die von WordPress gelesen und auf der Seite “Erscheinungsbild” -> “Themes” im Backend angezeigt werden. Eine grundlegende Header-Anmerkung sieht wie folgt aus:

/*
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
*/

In diesem Dokument werden Sie weiterhin alle CSS-Stilregeln schreiben, um das Erscheinungsbild der Website-Frontend zu steuern, wie z. B. Schriftarten, Farben, Layout usw.

Die zentrale Index-Vorlagendatei

index.php ist die Standardvorlage für das Thema und wird benötigt. Wenn WordPress eine spezifischere Vorlagendatei nicht finden kann (z. B. die single.php oder page.phpWenn Sie auf „Veröffentlichen“ klicken, wird es zum Rendern der Seite verwendet. Es enthält normalerweise die Vorlagen-Tags von WordPress, die zum Aufrufen von Kopfzeilen, zum Durchlaufen von Artikelinhalten, zum Anzeigen von Seitenleisten und zum Einfügen von Fußzeilen verwendet werden.

Empfohlene Lektüre Eine vollständige Anleitung zur Entwicklung von WordPress-Themen: Von den Grundlagen bis zur Praxis – unverzichtbare Fähigkeiten zum Erstellen individueller Websites.。

Neben diesen beiden Dateien enthält ein voll funktionsfähiges Theme in der Regel auch die folgenden Template-Dateien:
* header.phpDer Kopfbereich der Website (<head> (Und die Navigation am oberen Rand).
* footer.phpDer Fußbereich der Website.
* functions.php: Zur Hinzufügung von Themenfunktionen, Registrierungsmenüs, Seitenleisten usw.
* page.php: Zur Rendering von statischen Seiten.
* single.php:Dient zur Darstellung eines einzelnen Artikels.
* archive.php: Zur Darstellung von Archivseiten mit Kategorien, Tags usw.

Erstellt euer erstes Thema von Grund auf.

Nun lassen Sie uns damit beginnen, ein sehr einfaches Thema zu erstellen, um zu verstehen, wie die verschiedenen Teile zusammenarbeiten.

Erstellung von Basisdateien und Verzeichnissen

Zunächst, auf Ihrer lokalen WordPress-Seite. /wp-content/themes/ Im Verzeichnis erstellen Sie ein neues Verzeichnis und nennen Sie es… my-first-themeDann erstellen Sie innerhalb dieses Ordners zwei leere Dateien:style.css und index.phpSchreiben Sie die im vorherigen Abschnitt erwähnten CSS-Kopfzeilenkommentare ein. style.css Dokumente.

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

Erstellung einer grundlegenden Indexvorlage

Als nächstes bearbeiten Sie index.php Dokument. Eine grundlegende Version kann Aufrufe der WordPress-Kernfunktionen enthalten. Zunächst verwenden wir get_header() Um den Header einzufügen, verwenden Sie eine Funktion.

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) .
            the_post();
            // Hier den Inhalt des Beitrags ausgeben
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile.
    else :
        echo '<p>Keine Artikel zu diesem Zeitpunkt. </p>';
    endif;
    ? &gt;
</main>

<?php get_footer(); ?>

Dieser Code implementiert den Kern-“Loop” von WordPress, der prüft, ob Artikel vorhanden sind, und dann jeden Artikel durchläuft und dessen Titel und Inhalt ausgibt. Abschließend wird < verwendet. get_footer() Einfügen eines Fußzeilen-Elements.

Hinzufügen von Funktionen und Registrierungsmenü

Um das Thema praktischer zu gestalten, haben wir functions.php Dokument. In diesem Dokument können wir über WordPress bereitgestellte Informationen nutzen. add_theme_support() Funktionen zur Aktivierung von Themenfunktionen, wie z. B. Artikel-Thumbnails (Featurebilder) und benutzerdefinierte Logos.

Empfohlene Lektüre Eine umfassende Anleitung zur Entwicklung von WordPress-Themen: Von Null auf Eins – So erstellen Sie professionelle Website-Themen。

<?php
function my_first_theme_setup() {
    // 让主题支持文章特色图像
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册一个侧边栏小工具区域
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( '在此添加小工具。', 'my-first-theme' ),
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Dann musst du… header.php Die Datei verwendet wp_nav_menu() Eine Funktion, um das von Ihnen registrierte Menü anzuzeigen.

Fortgeschrittene Entwicklung des Themas sowie Vorbereitungen für die Veröffentlichung

Nachdem das grundlegende Thema fertig ist, können Sie seine Funktionalität und Flexibilität mithilfe von erweiterteren Vorlagen und Hooks verbessern.

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

\nVerwenden Sie Vorlagenkomponenten, um die Struktur zu optimieren.

Template Parts (Vorlagen-Teile) sind eine gute Möglichkeit, wiederverwendbare Vorlagen-Segmente (wie zum Beispiel Artikel-Abstract-Karten) zu modularisieren. Sie können ein solches Segment erstellen, indem Sie template-parts/content.php Den Code, der den Inhalt jedes Artikels in der Schleife ausgibt, verschieben Sie in die Datei. Anschließend können Sie in der index.php Im Laufe der Schleife wird dies verwendet. get_template_part() Eine Funktion, die es aufruft:

while ( have_posts() ) :
    the_post();
    get_template_part( 'template-parts/content', get_post_type() );
endwhile;

Die Verwendung von Aktionen und Filter-Haken

Hooks sind der Grundstein für die Plugin-Entwicklung in WordPress und werden auch häufig bei der Theme-Entwicklung eingesetzt. Aktions-Hooks (Action Hooks) ermöglichen es Ihnen, zu bestimmten Zeitpunkten Code einzufügen, z. B. um Inhalte nach dem Artikeltext hinzuzufügen. Filter-Hooks (Filter Hooks) ermöglichen es Ihnen, Daten zu ändern, z. B. die Länge des Artikel-Abstracts zu ändern.

Zum Beispiel, wenn man verwendet… wp_enqueue_scripts Aktions-Hooks zum korrekten Einbinden von JavaScript- und CSS-Dateien:

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' );

Durchführung der letzten Tests und Verpackung

Vor der Veröffentlichung müssen umfassende Tests durchgeführt werden. Stellen Sie sicher, dass das Thema in verschiedenen Browsern (Chrome, Firefox, Safari, Edge) korrekt angezeigt wird. Überprüfen Sie außerdem die responsive Layout-Optik auf mobilen Geräten und Computern. Aktivieren Sie im WordPress-Backend den Debug-Modus, um eventuelle Fehler zu erkennen und zu beheben. wp-config.php Einstellungen in der Mitte define( 'WP_DEBUG', true );), beheben Sie alle PHP-Warnungen und -Fehler. Überprüfen Sie, ob alle WordPress-Kernfunktionen (wie Kommentare, Suche, Paginierung) ordnungsgemäß funktionieren.

Zum Schluss löschen Sie unnötige Inhalte wie Protokolldateien und Backup-Dateien während des Entwicklungsprozesses. Komprimieren Sie den gesamten Themenordner in eine ZIP-Datei, und diese Datei kann dann zur Installation verwendet werden.

Zusammenfassungen

Die Entwicklung von WordPress-Themes erfordert ein Verständnis der zugrunde liegenden Struktur.style.css, index.phpZu Beginn gehen wir schrittweise tiefer in die Vorlagenebene, Funktions-Hooks und modulare Komponenten ein. Wir tun dies, indem wir eine lokale Umgebung einrichten, Kern-Dateien erstellen und diese nutzen. functions.php Nachdem Sie die Funktionen verbessert und schließlich gründliche Tests durchgeführt haben, können Sie ein standardkonformes und funktionsreiches Theme erstellen. Wenn Sie diese Kernkonzepte beherrschen, werden Sie in der Lage sein, das Aussehen und die Funktionalität jeder gewünschten Website anzupassen und eine solide Grundlage für das Erlernen fortgeschrittener Frameworks wie Underscores oder Sage zu schaffen.

FAQ Häufig gestellte Fragen

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

Ja, um WordPress-Themes intensiv zu entwickeln, muss man PHP beherrschen. Da WordPress selbst in PHP geschrieben ist, enthalten alle Vorlagendateien (.php) PHP-Code, um Inhalte dynamisch zu generieren. Obwohl Sie das Design eines Unterthemas ändern können, ohne viel PHP zu schreiben, sind PHP-Kenntnisse unerlässlich, um benutzerdefinierte Vorlagen zu erstellen, komplexe Funktionen zu implementieren oder die Abfrage-Logik zu ändern.

Was ist die Funktion der functions.php-Datei des Themas?

functions.php Die Datei ist das “Funktionszentrum” des Themas. Sie wird verwendet, um die Funktionen des Themas hinzuzufügen oder zu ändern, ohne die Kern-Dateien zu modifizieren. Zu ihren Hauptfunktionen gehören: Aktivieren der Unterstützung für Themenfunktionen (z. B. hervorgehobene Bilder, benutzerdefinierte Hintergründe), Registrierung von Navigationsmenüs und Widget-Bereichen in der Seitenleiste, Einbindung von Stylesheets und Skriptdateien in einer Warteschlange, Definition benutzerdefinierter Funktionen sowie Verwendung von Aktionen und Filter-Haken, um das Standardverhalten von WordPress zu ändern.

Was ist ein Unterthema, und warum sollte man es verwenden?

Ein Unterthema ist ein Thema, das von einem anderen Thema (dem übergeordneten Thema) abhängig ist. Es erbt alle Funktionen, Stile und Vorlagendateien des übergeordneten Themas, erlaubt es Ihnen jedoch, neue Funktionen sicher zu überschreiben oder hinzuzufügen. Der Hauptzweck der Verwendung von Unterthemen besteht darin, Ihre benutzerdefinierten Änderungen beizubehalten, wenn das übergeordnete Thema aktualisiert wird. Wenn Sie die Dateien des übergeordneten Themas direkt ändern, werden die Änderungen beim Update überschrieben, während die Änderungen des Unterthemas erhalten bleiben. Dies ist eine bewährte Methode zur Anpassung von Themen und zur Wartung von Updates.

Wie kann ich mein Thema für mehrsprachige Übersetzungen optimieren?

Um ein Theme für mehrere Sprachen zu unterstützen (Internationalisierung und Lokalisierung, i18n/l10n), sind hauptsächlich zwei Schritte erforderlich. Zunächst müssen alle Textzeichenfolgen im Theme mit den Übersetzungsfunktionen von WordPress umhüllt werden, z. B. mit esc_html__( ‘文本’, ‘text-domain’ ) oder _e( ‘文本’, ‘text-domain’ )Zweitens wird mit Hilfe von Tools (wie Poedit) eine .pot-Übersetzungsvorlage erstellt, auf deren Grundlage Übersetzer .po- und .mo-Dateien (z. B. zh_CN.po) erstellen können. style.css Die Kopfzeile ist korrekt eingestellt. Text Domain Das ist der Schlüssel.