Wenn du mit dem Lernen der WordPress-Entwicklung beginnst, ist die Erstellung deines eigenen Themes ein aufregendes Meilenstein. Es ermöglicht es dir nicht nur, das Erscheinungsbild und die Funktionen deiner Website vollständig zu kontrollieren, sondern ist auch der beste Weg, um das Kernarchitekturkonzept von WordPress tiefer zu verstehen. Dieser Artikel wird dich durch den gesamten Prozess von der Einrichtung der Umgebung bis zur Erstellung eines grundlegenden Themes führen und dir dabei helfen, den ersten Schritt auf dem Weg zum WordPress-Entwickler zu machen.
Vorbereitungen vor der Entwicklung
Bevor Sie mit dem Schreiben von Code beginnen, ist es von großer Bedeutung, eine effiziente lokale Entwicklungsumgebung einzurichten. Dies ermöglicht es Ihnen, Tests und Fehlersuche durchzuführen, ohne die Online-Website zu beeinträchtigen.
Aufbau einer lokalen Entwicklungsumgebung
Zuerst müssen wir die lokale Server-Software installieren. Sie können Tools wie XAMPP, MAMP oder Local by Flywheel verwenden. Diese Softwarepakete enthalten den Apache-Server, die MySQL-Datenbank sowie PHP und sind daher erforderlich, um WordPress zu betreiben. Nehmen wir XAMPP als Beispiel: Nach der Installation starten Sie die Apache- und MySQL-Dienste, und Ihr Computer wird zu einem lokalen Server.
Empfohlene Lektüre Einführung in die Entwicklung von WordPress-Themen: Erstellen Sie Ihr erstes eigenes, angepasstes Thema von Grund auf。
Als Nächstes laden Sie die neueste Version von WordPress herunter und entpacken Sie sie im Wurzelverzeichnis Ihrer lokalen Website auf dem Server (z. B. im Verzeichnis von XAMPP).htdocsDann wird durch das Aufrufen…http://localhost/your-wordpress-folderUm die berühmte “Fünf-Minuten-Installation” durchzuführen, müssen Sie während des Installationsprozesses eine Datenbank erstellen sowie den Benutzernamen und das Passwort für den Website-Administrator festlegen.
Vorbereiten Sie einen Code-Editor sowie die benötigten Werkzeuge.
Ein ausgezeichneter Code-Editor kann die Entwicklungseffizienz erheblich steigern. Visual Studio Code, PhpStorm oder Sublime Text sind alle gute Wahlmöglichkeiten. Insbesondere VS Code verfügt über eine umfangreiche Auswahl an Erweiterungen für WordPress und PHP, wie beispielsweise PHP Intelephense, die intelligente Code-Vervollständigungen sowie Syntaxprüfungen ermöglichen.
Darüber hinaus wird empfohlen, ein Plugin für die Browser-Entwicklungstools zu installieren – beispielsweise das offizielle “Theme Check”-Plugin von WordPress – um im späteren Entwicklungsstadium zu überprüfen, ob das Theme den Standards entspricht. Sie können auch die Funktion “Elemente überprüfen” des Browsers verwenden, um HTML und CSS in Echtzeit zu debuggen.
Verständnis der grundlegenden Struktur von WordPress-Themen
Ein stark vereinfachtes WordPress-Theme benötigt nur zwei Dateien. Eine voll funktionsfähige, standardkonforme Struktur hingegen umfasst mehrere spezifische Dateien, die jeweils unterschiedliche Aufgaben übernehmen.
Die zentrale Stylesheet-Datei
Jedes WordPress-Theme muss einen…style.cssDatei: Dieses Datei ist nicht nur eine CSS-Datei, die die Designvorlagen (“Themes”) definiert, sondern auch der Block mit den Kommentaren am Anfang der Datei stellt die „Identität“ des Themes dar – er enthält alle Metadaten, die WordPress benötigt, um das Theme zu erkennen. Ein grundlegender Block mit Kommentaren am Anfang der Datei sieht wie folgt aus:
Empfohlene Lektüre WordPress-Themenentwicklung: Eine vollständige Anleitung zum Erstellen eines benutzerdefinierten Themas von Grund auf.。
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的简单自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Darunter befinden sichText DomainZur Internationalisierung verwendet – dient der anschließenden Aufruf der Übersetzungsfunktion.__()oder_e()Der Identifier, der bei der Verwendung zu diesem Zeitpunkt verwendet wird.
Grundlegende Vorlagendateien
Ein weiteres erforderliches Dokument ist…index.phpEs handelt sich um das Standardvorlage-Design für ein Thema. Wenn WordPress keine spezifischeren Vorlagendateien findet (z. B.single.phpoderpage.phpWenn es benötigt wird, wird es verwendet, um die Seite zu rendern.
Mit diesen beiden Dateien kann dein Thema bereits in der WordPress-Backend-Übersicht “Erscheinungsbild” -> “Themen” angezeigt und aktiviert werden. Allerdings handelt es sich dabei im Moment nur um einen leeren Rahmen. Damit das Thema tatsächlich funktioniert, müssen wir noch einige wichtige Template-Dateien erstellen.
Zuerst wird etwas erstellt.header.phpEs enthält den Kopfbereich einer HTML-Dokumentation, wie zum Beispiel…<doctype>Erklärung,<head>Region (in der folgenden Form sollte verwendet werden):wp_head()Die Funktion führt die WordPress-Kernskripte und -Stile ein sowie die Markierungen für die Website-Header.
Zweitens wird die Erstellung durchgeführt.footer.phpEs enthält den Fußertext der Website und ruft diese Funktion vor dem Ende auf.wp_footer()Eine Funktion – das ist der notwendige „Hook“, mit dem viele Plugins Code am unteren Rand der Seite hinzufügen können.
Zum Schluss: Erstellen Sie…functions.phpDieses File ist nicht zwingend erforderlich, aber es stellt das “Zentrum” der Thematik dar. Hier können Sie Funktionen zur Unterstützung der Thematik hinzufügen, Registrierungsmenüs und Seitenschränke einbinden, Styles- und Skriptdateien einfügen sowie verschiedene benutzerdefinierte Funktionen definieren.
Empfohlene Lektüre Wie man ein benutzerdefiniertes WordPress-Theme von Grund auf entwickelt。
Die Kernfunktionen bei der Erstellung eines Themes sind:
Nachdem die Grunddateien erstellt wurden, können wir beginnen, dem Thema „Leben einzuhauchen“ und es mit den grundlegenden Funktionen einer Website auszustatten.
Implementieren eines Navigation-Menüs
Moderne Webseiten verfügen in der Regel über ein Navigationsmenü. Zunächst müssen Sie…functions.phpVerwenden Sie es in Chinaregister_nav_menus()Eine Funktion zur Registrierung der Position der Speisekarte.
function my_first_theme_setup() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
'footer' => __( '页脚菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );Dieser Code registriert zwei Menüpositionen: “Hauptnavigation” und “Fußzeilenmenü”. Anschließend werden diese Menüs an den Stellen im Template angezeigt, an denen Sie sie haben möchten.header.phpIn (China), wird dies verwendet.wp_nav_menu()Die Funktion ruft sie auf.
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );Die Benutzer können jetzt im WordPress-Backend unter “Erscheinungsbild” -> “Menü” neue Menüs erstellen und diese der Position “Hauptnavigation” zuweisen.
Aktivieren Sie die Funktion für spezielle Bilder zu den Artikeln sowie die Seitenleiste.
Viele Themes unterstützen Artikel-Zusammenfassungen („Featured Images“) sowie eine Widget-Sidebar. Ebenso gilt dies für…functions.phpDas ist eine gute Frage.my_first_theme_setupFügen Sie den folgenden Code in die Funktion hinzu, um diese Funktionen zu aktivieren:
add_theme_support( 'post-thumbnails' ); // 启用文章特色图像
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 启用HTML5标记支持Um einen Bereich für Widgets in der Seitenleiste zu registrieren, verwenden Sie…register_sidebar()Funktion:
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在这里添加小工具。', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );Danach, in der Template-Datei (z. B.)sidebar.php), die in derdynamic_sidebar( 'sidebar-1' )Damit dieser Bereich angezeigt wird.
Integration von Vorlagen und Hinzufügen von Styles
Jetzt verbinden wir die einzelnen Teile der Templates miteinander und fügen ihnen grundlegende Styles hinzu, damit die Website eine sichtbare, erkennbare Form annimmt.
Eine Funktion mithilfe eines Templates einbinden
WordPress bietet einige Kernfunktionen zur Einbindung anderer Template-Dateien, was die Modularität und Wartbarkeit des Codes gewährleistet. In Ihrem…index.phpDie Struktur sollte wie folgt aussehen:
<?php get_header(); ?>
<main id="main" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 循环输出文章内容
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
the_posts_navigation(); // 文章导航
else :
get_template_part( 'template-parts/content', 'none' ); // 没有找到内容时的模板
endif;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>get_header(), get_sidebar(), get_footer()Die Funktionen laden jeweils die entsprechenden Template-Dateien ein.get_template_part()Es handelt sich um eine flexiblere Funktion, die dazu anregt, wiederholt verwendete Inhaltsblöcke – wie z. B. Artikelzusammenfassungen – aus dem Haupttext herauszulösen und separat zu speichern.template-partsIn den einzelnen Dateien innerhalb des Ordners, zum Beispiel…content.php。
Erstellen Sie grundlegende Styles sowie responsives Design.
Jetzt öffnen Sie es.style.cssFangen Sie an, Ihrem Thema Stil zu verleihen. Legen Sie zunächst einige globale Styles fest, wie das Box-Modell, die Schriftarten und die Farben.
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}Um ein responsives Design zu realisieren, werden Media Queries verwendet, um die Anordnung auf verschiedenen Bildschirmgrößen anzupassen. Zum Beispiel kann die Seitenleiste auf kleinen Bildschirmen unter den Hauptinhalt verschoben werden.
@media (max-width: 768px) {
.site-main {
width: 100%;
}
#sidebar {
width: 100%;
margin-top: 2rem;
}
}Vergessen Sie nicht, bei … mitzumachen.header.phpDas ist eine gute Frage.<head>Einige viewport-Metatags wurden hinzugefügt, um eine korrekte Skalierung auf mobilen Geräten zu gewährleisten:<meta name="viewport" content="width=device-width, initial-scale=1">。
Zusammenfassungen
Vom Erstellen einer Datei, die enthält…style.cssundindex.phpMit der Erstellung einer einfachen Ordnerstruktur beginnend und bis hin zur Entwicklung eines vollständigen WordPress-Themes mit Navigation, Seitenleiste und responsivem Layout – dieser Prozess umfasst die Kernkonzepte der WordPress-Theme-Entwicklung. Du hast gelernt, wie man…functions.phpErweiterung der Themenfunktionen: Wie verwendet man ein Template-Hierarchiesystem zur Organisation des Codes und wie wandelt man Designs in die Frontend-Elemente HTML und CSS um? Das ist nur der Anfang – später kannst du noch fortgeschrittene Template-Dateiformate (z. B.) erkunden…single.php, page.php, archive.phpSie können auch benutzerdefinierte Artikeltypen sowie APIs für das Themaanpassen nutzen und sogar Frameworks wie Sass und JavaScript, um noch komplexere und modernere Themes zu erstellen. Durch kontinuierliches Üben sowie die Einbeziehung der offiziellen Entwicklerdokumentation ist der beste Weg, Ihre Fähigkeiten zu verbessern.
FAQ Häufig gestellte Fragen
Muss man bei der Entwicklung eines Themas unbedingt Unterthemen (Sub-Themes) verwenden?
Nicht unbedingt. Es ist durchaus möglich, von Grund auf ein eigenständiges Thema zu erstellen – und das ist auch die beste Methode, um die Kernprinzipien zu verstehen. Die Verwendung von Untertemas ist in der Regel die beste Praxis, wenn es notwendig ist, ein vorhandenes Elternthema (z. B. ein Thema eines beliebten Frameworks) anzupassen und zu modifizieren, da so sichergestellt wird, dass Ihre eigenen Änderungen nicht bei einem Update des Elternthemas überschrieben werden. Bei brandneuen Entwicklungsprojekten ist es jedoch üblicher, von Grund auf ein eigenständiges Thema zu erstellen.
Wie kann ich mein Thema mehrsprachig machen?
Um Themen zur Unterstützung mehrerer Sprachen (Internationalisierung) zu machen, sind hauptsächlich zwei Schritte erforderlich. Zunächst muss…style.cssDer Kopfteil und…functions.phpAlle zu übersetzenden Zeichenketten in diesem Text werden mit den Übersetzungsfunktionen von WordPress umschlossen, zum Beispiel:__( ‘文本’, ‘my-first-theme’ )oder_e( ‘文本’, ‘my-first-theme’ )Zweitens müssen Sie Werkzeuge wie Poedit verwenden, um die erforderlichen Änderungen vorzunehmen..potÜbersetzen Sie die Template-Datei und erstellen Sie anschließend für jede Sprache die entsprechenden Versionen..pound.moDateien, und legen Sie sie zum Thema hin./languagesIm Verzeichnis.
Wie wird eine entwickelte Thema-Struktur veröffentlicht?
Vor der Veröffentlichung solltest du dein Thema unbedingt mit dem “Theme Check”-Plugin gründlich testen, um sicherzustellen, dass es alle Codierungsstandards sowie Sicherheitsanforderungen des WordPress-Themenverzeichnisses erfüllt. Entferne alle Debugging-Code-Elemente und Kommentare. Danach kannst du das Thema entweder zum offiziellen WordPress.org-Themenverzeichnis einreichen (dies erfordert eine Überprüfung) oder es in eine ZIP-Datei verpacken, um es direkt an Kunden zu versenden oder auf deiner eigenen Website zu verteilen. Falls du das Thema selbst verbreitest, stelle bitte klare Installationsanleitungen und Dokumentation zur Verfügung.
Warum verschwinden meine benutzerdefinierten Styles, nachdem sie im Hintergrund aktualisiert wurden?
Das liegt wahrscheinlich daran, dass Sie direkt die Dateien des verwendeten Hauptthemas geändert haben. Wenn das Hauptthema über die WordPress-Backend-Verwaltung aktualisiert wird, werden alle Kerndateien durch die neue Version ersetzt, wodurch Ihre Änderungen verloren gehen. Deshalb wird für jegliche Anpassungen und Weiterentwicklungen dringend die Verwendung von Untertemasen empfohlen. Die Styles und Funktionen eines Untertemas werden unabhängig vom Hauptthema geladen, sodass Ihre Änderungen auch nach einem Update des Hauptthemas vollständig erhalten bleiben.
Was kommt als Nächstes, was kommt als Nächstes?
Erweiterte Lektüre und praktische Kenntnisse
Die folgenden Artikel stehen im Zusammenhang mit dem Thema dieses Artikels und eignen sich für eine vertiefte Lektüre. Oft ist es besser, mit dem Artikel zu beginnen, der Ihrem aktuellen Problem am nächsten kommt, und dann nach und nach die umliegenden Themen zu behandeln.
- WordPress-Themenentwicklung von der Grundlage bis zur Meisterschaft: Ein umfassender Leitfaden für das Erstellen personalisierter Webseiten
- WordPress-Themenentwicklung von Grund auf – Erstellen Sie eine einzigartige Website-Oberfläche
- Leitfaden für die Entwicklung von WordPress-Themen: Erstellen Sie von Grund auf eine benutzerdefinierte Website
- Kompletter Leitfaden für die Entwicklung von WordPress-Themen: Ein Praktikum, um von Grund auf Meister zu werden
- Kompletter Leitfaden für die Entwicklung von WordPress-Themen: Erstellen Sie von Grund auf professionelle Website-Vorlagen
Deutsch