Kompletter Leitfaden: Wie Sie von Grund auf ein benutzerdefiniertes WordPress-Theme erstellen

Vorbereitungsarbeiten und Umgebungseinstellungen

Bevor du mit dem Schreiben der ersten Zeile Code beginnst, brauchst du eine geeignete Entwicklungsumgebung. Dazu gehören ein lokaler Server, ein Code-Editor sowie ein Verständnis der Struktur der WordPress-Kerndateien. Es wird empfohlen, XAMPP, MAMP oder Local by Flywheel zu verwenden, um schnell eine lokale WordPress-Umgebung aufzubauen. Dadurch kannst du in einer sicheren und isolierten Umgebung entwickeln und testen.

Ein WordPress-Theme ist im Wesentlichen ein Design für eine WordPress-Website./wp-content/themes/Die Ordner im Verzeichnis – der Name dieses Ordners ist gleichzeitig Ihr Thema-Identifikator. Sie müssen einen neuen Ordner erstellen, zum Beispiel…my-custom-themeIn diesem Ordner müssen mindestens zwei Kerndateien vorhanden sein:style.cssundindex.phpDer erste Teil dient zum Speichern der Stilinformationen und Metadaten des Themas, während der zweite Teil die standardmäßige Vorlagendatei darstellt.

Dokument zur Verständnis der Kerninformationen des Themas

style.cssDie Datei wird nicht nur für CSS-Styles verwendet, sondern auch der Kommentarblock am Anfang der Datei dient als “Identifikationsdokument” des Themes. Hier müssen Sie wichtige Informationen zum Thema angeben, wie den Namen, den Autor, eine Beschreibung sowie die Version. Diese Informationen werden auf der WordPress-Backend-Seite “Erscheinungsbild” -> “Themes” angezeigt.

Empfohlene Lektüre Praktische Anleitung zur WordPress-Theme-Entwicklung: Ein vollständiger Leitfaden zum Erstellen eines benutzerdefinierten Themes von Grund auf。

eine grundlegendestyle.cssEin Beispiel für die Datei-Hauptzeile (File Header) sieht wie folgt aus:

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: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个为学习目的而创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

Darunter befinden sichText DomainDient der Internationalisierung (Mehrsprachige Übersetzung) und muss mit dem Namen Ihrer Thema-Ordnerüberschrift übereinstimmen.

Erstellen Sie die Struktur der Grundvorlagen-Dateien.

WordPress verwendet ein Template-Hierarchiesystem, um zu bestimmen, welches Template-File für verschiedene Arten von Seiten geladen wird. Das Verständnis dieser Systeme sowie das Erstellen der entsprechenden Dateien ist entscheidend für den Aufbau eines Themes.

Erstellen Sie die erforderlichen Vorlagendateien.

Außerindex.phpDu solltest schrittweise spezifischere Vorlagen erstellen. Zum Beispiel…header.phpDient zum Speichern des Kopfbereichs aller Seiten (HTML-Head-Inhalte, Website-Navigation usw.).footer.phpDient zum Speichern des Fußes der Seite.sidebar.phpFür die Seitenleiste. Mithilfe der in WordPress integrierten Funktionen.get_header()、get_footer()undget_sidebar()Sie können diese Teile ganz einfach in anderen Templates einbinden.

index.phpDies ist das letzte, verbleibende Reservetemplate. Du solltest spezifischere Templates erstellen, um deine Kontrolle zu verbessern – zum Beispiel:
- front-page.phpDient als statische Startseite.
- home.phpAnzeige des Indexes der Blogartikel.
- single.phpEin einzelner Blogartikel oder eine benutzerdefinierte Artikelvorlage wird angezeigt.
- page.phpEine einzelne Seite anzeigen.
- archive.phpDie Archivseite zeigt Kategorien, Tags, Autoren, Datumsangaben usw. an.
- 404.phpDie Seite “Nicht gefunden” wird angezeigt.
- search.phpAnzeigen der Suchergebnisse.

Empfohlene Lektüre Der ultimative Leitfaden für die Entwicklung von WordPress-Themen: Erstellen von benutzerdefinierten WordPress-Website-Themen von Grund auf。

Das Verständnis der Zyklusmechanismen

Das Herzstück von WordPress ist die sogenannte “The Loop”. Es handelt sich dabei um einen PHP-Codeabschnitt, der überprüft, ob es Artikel gibt, und bei Bedarf den Inhalt jedes Artikels wiederholt ausgibt. Eine der grundlegendsten Strukturen für solche Schleifen sieht wie folgt aus; dieser Codeabschnitt wird in der Regel an bestimmten Stellen im WordPress-Code platziert.single.phpoderhome.phpMittel:

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

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

Darunter befinden sichthe_title()undthe_content()Die Template-Tags dienen dazu, die konkreten Daten eines Artikels auszugeben.

Integration der Kernfunktionen von WordPress

Ein qualitativ hochwertiges Theme muss die verschiedenen Funktionen von WordPress korrekt integrieren, darunter Menüs, Widget-Bereiche, spezielle Bilder für Artikel sowie Funktionen zur Unterstützung des Themes selbst.

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

Registrieren Sie das Navigationsmenü und die Bereich für Widgets.

Sie müssen Folgendes verwenden:register_nav_menus()Die Funktion befindet sich im Thema.functions.phpDie Registerierungsposition der Menüeinheiten im File. Zum Beispiel: Die Registrierung eines “Hauptmenüs”.

function my_custom_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
        'footer'  => __( 'Footer Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Und dann,header.phpIn China wird es verwendet.wp_nav_menu()Eine Funktion wird verwendet, um dieses Menü aufzurufen.

Ähnlich verhält es sich bei der Verwendung derregister_sidebar()Funktionen können Bereiche für kleine Hilfsmittel (Bereiche am Seitenrand) erstellen.functions.phpNach der Registrierung können Sie die Elemente im Backend unter “Erscheinungsbild” -> “Widgets” per Drag-and-Drop verwalten und sie in Ihren Templates verwenden.dynamic_sidebar()Eine Funktion, die es anzeigt.

Empfohlene Lektüre Der vollständige Leitfaden zur WordPress-Theme-Entwicklung: Erstellung benutzerdefinierter Schnittstellen von Anfang bis Ende。

Fügen Sie die Funktion zur Unterstützung von Themen hinzu.

Durchadd_theme_support()Mit Funktionen können Sie eine Reihe von Kernfunktionen für Ihr Thema aktivieren. Die am häufigsten genutzten Funktionen sind unter anderem:
- post-thumbnailsAktivieren Sie die Funktion für spezielle Bilder zu Artikeln.
- title-tagLassen Sie WordPress die Dokumentenschlagzeilen automatisch verwalten.<title>Tags sind eine der besten Praktiken in modernen Designs.
- html5Aktivieren Sie die HTML5-Unterstützung für die Schlüsselmarken, die das Thema definieren (z. B. Kommentarformulare, Suchformulare usw.).

Der Code, der diese Funktionen aktiviert, sollte ebenfalls an der entsprechenden Stelle platziert werden.functions.phpDie Datei derafter_setup_themeIm Haken.

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

Stil, Skripte und Leistungsoptimierung

Moderne Webthemen erfordern eine korrekte Handhabung beim Laden von CSS- und JavaScript-Dateien sowie die Berücksichtigung von Aspekten wie Leistung und responsivem Design.

CSS und JavaScript müssen korrekt in die entsprechenden Dateien eingefügt werden.

Verwenden Sie niemals direkte Hardlinks zu CSS- und JS-Dateien in Template-Dateien. Stattdessen sollten Sie andere Methoden zur Einbindung dieser Dateien verwenden.wp_enqueue_style()undwp_enqueue_script()Funktionen, durchwp_enqueue_scriptsDie „Hooken“-Mechanismen fügen die entsprechenden Elemente in die Warteschlange ein. Dadurch wird eine korrekte Verwaltung der Abhängigkeiten sowie die richtige Reihenfolge des Ladens gewährleistet, wodurch Konflikte vermieden werden.

„In“functions.phpBeispiel aus dem Text:

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 加载自定义JavaScript文件
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Achten Sie darauf…get_stylesheet_uri()Was zurückgegeben wird, ist das Thema.style.cssBei JS-Dateien werden wir…trueAls letzter Parameter wird angegeben, dass die Inhalte am Fuß der Seite geladen werden sollen – dies trägt zur Verbesserung der Ladeleistung der Seite bei.

Implementieren von Responsivität und grundlegenden Styles

Deinstyle.cssEs sollte eine Grundlage für ein responsives Design enthalten. Verwenden Sie die Strategie „Mobile First“: Erstellen Sie zunächst die Styles für kleine Bildschirme und passen Sie diese anschließend mithilfe von Media Queries schrittweise an größere Bildschirme an. Stellen Sie außerdem sicher, dass Medienelemente wie Bilder…max-width: 100%;Eigenschaften, die verhindern, dass Inhalte aus dem Container herausfließen.

Zusammenfassungen

Die Erstellung eines eigenen WordPress-Themes von Grund auf ist ein umfassender Lernprozess, der von einem Verständnis von PHP, HTML, CSS, JavaScript sowie der Kern-API von WordPress ausgeht. Wir beginnen mit der Vorbereitung der Umgebung und den Kerndateien…style.cssZunächst haben wir schrittweise die Hierarchie der Template-Struktur aufgebaut und das “Schleifen”-Mechanismus verstanden. Anschließend haben wir Kernfunktionen wie das Navigationsmenü, Hilfsmittel sowie spezielle Bilder integriert und gelernt, wie Stylesheets und Script-Dateien auf korrekte und effiziente Weise hinzugefügt werden. Durch die Befolgung dieser Schritte und bewährter Methoden können nicht nur originelle Themes mit umfassenden Funktionen erstellt werden, sondern auch die Codequalität, Wartbarkeit und Leistung des Themes gesichert werden. Denken Sie daran: Die Entwicklung von Themes ist ein kontinuierlicher Prozess der Iteration – es ist entscheidend, ständig zu testen und Feedback aus der realen Anwendung zu erhalten.

FAQ Häufig gestellte Fragen

Muss ich PHP-Kenntnisse haben, um WordPress-Themes zu entwickeln?

Sie benötigen ein grundlegendes Verständnis und die Fähigkeit, PHP zu verwenden, da WordPress selbst in PHP entwickelt wurde und die Dateien der Themes hauptsächlich aus PHP-Code bestehen. Sie sollten zumindest Variablen, Funktionen, Schleifen und Bedingungssätze verstehen sowie wissen, wie Sie die Templates und Funktionen von WordPress aufrufen. Die tiefergehende Entwicklung von Themes beinhaltet komplexere Aspekte der objektorientierten Programmierung in PHP.

Kann man auf der Grundlage eines bestehenden Themes modifizieren, um ein neues Theme zu erstellen?

Ja, das ist eine gängige Methode zum Lernen und zum Einstieg – insbesondere wenn man das offizielle “Underscores”-Theme als Ausgangspunkt verwendet. Wenn man jedoch ein Theme für die öffentliche Nutzung veröffentlicht, muss man sicherstellen, dass man die Rechte hat, das Theme zu modifizieren und zu verbreiten, und die entsprechenden Lizenzbedingungen einhalten (in der Regel die GPL). Eine bessere Vorgehensweise ist es, die Funktionsweise des Themes zu verstehen und anschließend seine Struktur sowie sein Erscheinungsbild von Grund auf selbst zu entwickeln.

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

functions.phpDie Dateien sind ein Teil des Themes und ihre Funktionen hängen eng mit dem Aussehen und der Darstellung des Themes zusammen. Plugins hingegen dienen dazu, dem Website zusätzliche, vom Theme unabhängige Funktionen hinzuzufügen. Es gibt eine einfache Regel: Wenn eine Funktion das Aussehen oder die Struktur der Website verändert, sollte sie in der Regel im Theme implementiert werden; wenn es sich jedoch um eine zusätzliche, unabhängige Funktion handelt (z. B. ein Kontaktformular oder SEO-Optimierungen), ist es sinnvoller, diese als Plugin zu erstellen. Auf diese Weise bleiben die Kernfunktionen auch bei einem Wechsel des Themes erhalten.

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

Sie müssen sich auf die Internationalisierung (I18n) vorbereiten. Das bedeutet, dass alle für die Benutzer bestimmten Zeichenketten in Ihrem Thema mit den Übersetzungsfunktionen von WordPress versehen werden müssen.esc_html_e(‘Read More’， ‘my-custom-theme’);Sie haben bereits…style.cssEs wurde in der Mitteilung erklärt…Text DomainDer hier verwendete Textbereich muss mit diesem übereinstimmen. Anschließend kann der Übersetzer die `.po`- und `.mo`-Dateien verwenden, um diese Zeichenketten zu übersetzen.