Vorbereitungsarbeiten und Umgebungskonfiguration
Bevor du mit dem Schreiben der ersten Zeile Code beginnst, brauchst du eine geeignete Entwicklungsumgebung. Dazu gehören eine lokale Serverumgebung sowie ein Code-Editor. Es wird empfohlen, XAMPP, MAMP oder Laragon zu verwenden, um eine lokale Serverumgebung einzurichten – diese ermöglichen die einfache Installation und den Betrieb von Apache, MySQL und PHP mit nur einem Klick. Wähle einen Code-Editor deiner Wahl, wie z. B. Visual Studio Code, Sublime Text oder PHPStorm; ihre Unterstützung für Code-Hervorhebung und automatische Vervollständigung wird deine Entwicklungseffizienz erheblich steigern.
Als Nächstes müssen Sie in Ihrer lokalen WordPress-Installation ein Verzeichnis für Ihr neues Thema erstellen. Alle WordPress-Themen werden in einem bestimmten Verzeichnis abgelegt. /wp-content/themes/ Im Verzeichnis. In dieser Ordner erstelle eine neue Unterverzeichnung für das Thema, das du bald erstellen wirst – nenne sie beispielsweise „MyNewTopic“. my-first-themeDer Name dieser Ordner ist Ihre Themaidentifikation und wird in der Liste der verfügbaren Themen im Hintergrundbereich angezeigt.
Gleichzeitig müssen Sie die beiden Grundpfeiler der WordPress-Theme-Entwicklung verstehen: die Template-Dateien und die Stylesheet-Dateien. Die grundlegendsten WordPress-Themes benötigen nur zwei Dateien:style.css und index.php。style.css Nicht nur steuert es das visuelle Erscheinungsbild der Website, sondern auch der Kommentarblock am Anfang der Datei dient als “Identifikationsdokument” des Themes. Er enthält Metadaten wie den Namen des Themes, den Autor, eine Beschreibung sowie weitere relevante Informationen.index.php Dies ist die standardmäßige Hauptvorlagendatei.
Empfohlene Lektüre Der vollständige Leitfaden zur WordPress-Theme-Entwicklung: Erstellen von benutzerdefinierten Themes von Grund auf。
Erstellen Sie eine Kernthemendatei.
Definition von Thema-Styles und Informationen
Alles beginnt mit… style.css Fangen Sie an. Erstellen Sie diese Datei im Wurzelverzeichnis des Themes-Ordners und fügen Sie an den Anfang der Datei einen formatierten Kommentarblock hinzu. Dieser Kommentarblock ist entscheidend dafür, dass WordPress das Theme erkennt und lädt. Der folgende Code zeigt einen grundlegenden Kopfteil einer Stylesheet-Datei:
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个学习 WordPress 主题开发而创建的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Darunter befinden sichText Domain Dieses File dient der Internationalisierung (i18n) und bereitet die Grundlage für zukünftige Mehrsprachigübersetzungen vor. Nach der Erstellung dieses Files sollten Sie sich im WordPress-Backend unter “Erscheinungsbild” -> “Themes” anmelden und dort Ihr Thema sehen können – auch wenn es derzeit noch keine Funktionen besitzt.
Erstellung der grundlegenden Vorlagenstruktur
Als Nächstes erstellen Sie die Strukturdatei für das Thema. index.phpDies ist das grundlegendste Template. Wenn WordPress keine spezifischeren Template-Dateien finden kann (z. B. single.php oder page.phpWenn es benötigt wird, wird es verwendet. Die einfachste Variante davon… index.php Es können nur grundlegende Funktionen enthalten sein, die die WordPress-Header-Datei aufrufen, Schleifen ausführen sowie die Abschlussbereiche der WordPress-Struktur erstellen.
<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1008>
<header>
<h1><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 文章内容输出
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>暂无文章。</p>';
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>Dieses Dokument verwendet die Kern-Templatetags von WordPress, wie zum Beispiel… bloginfo() Website-Informationen abrufen.the_title() und the_content() In der Schleife werden die Artikeltitel und Inhalte ausgegeben.wp_head() und wp_footer() Es handelt sich um entscheidende „Hooks“ (Verbindungsmechanismen), die es dem WordPress-Kern, Plugins sowie anderen Skripten ermöglichen, auf die Inhalte der Seiten zuzugreifen und diese zu verändern. <head> und <footer> Regional Code Injection.
Templating-Strukturierung und Funktionen-Integration
Modulare Vorlagendateien
Ich werde dieses Buch übersetzen. index.php Wenn der gesamte Code in einer einzigen Datei gespeichert ist, wird die Wartung des Codes schwierig. Die beste Praxis besteht darin, den Code in mehrere Template-Teile aufzuteilen. Erstellen Sie die folgenden Dateien, um die Codestruktur zu organisieren:
* header.phpSpeichern <head> Common header content, such as the region and the top navigation bar on websites.
* footer.phpHier werden öffentliche Inhalte am Ende der Website abgelegt, wie beispielsweise die Urheberrechtsangaben.
* sidebar.phpBereich zur Speicherung von Seitenleisten-Tools (optional).
* functions.phpDatei mit den funktionalen Funktionen des Themas.
Empfohlene Lektüre Vom Nullpunkt aus: Eine Schritt-für-Schritt-Anleitung zur Entwicklung eines eigenen WordPress-Themes。
Und dann wird es verwendet. get_header()、get_footer() und get_sidebar() Funktionen wie „Wait“ sind in … verfügbar. index.php Sie werden in das System integriert. Nach der Umgestaltung… index.php Der Kernbereich wird sehr übersichtlich und kompakt sein:
<main>
<article>
<?php the_title( '<h2>', '</h2>' ); ?>
</article>
<p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
</main>Beachten Sie, dass wir … verwendet haben. esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ) Das ist die standardisierte Vorgehensweise bei der Internationalisierung.
Erweiterung der Themenfunktionen
functions.php Die Datei ist das “Zentrum der Steuerung” für Ihr Thema. Sie dient dazu, Funktionen zur Unterstützung des Themas hinzuzufügen, Menüs und Seitenleisten zu registrieren, Stylesheets sowie Skripte zu laden usw. Es handelt sich nicht um eine Vorlagendatei, sondern wird bei der Initialisierung des Themas automatisch geladen.
Hier ist eine grundlegende… functions.php Beispiel:
__( '主导航菜单', 'my-first-theme' ),
) );
// 添加对 HTML5 标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 添加标题标签支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册侧边栏小工具区域
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' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );
// 加载主题的样式表
function my_first_theme_scripts() {
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>In diesem File haben wir Funktionen definiert. my_first_theme_setupUnd durch… add_action( ‘after_setup_theme’， ‘my_first_theme_setup’ ) Befestigen Sie es an einen bestimmten Aktionshaken („Action Hook“) des WordPress-Initialisierungs-Themes. Ebenso verwenden wir… register_sidebar Die Funktion hat eine kleine Hilfeselement-Region registriert und diese über … (The function registered a small help-element area and made it available via …) wp_enqueue_style Die Funktion hat die Thema-Stylesheet korrekt eingeführt.
Erstellen Sie spezielle Vorlagen und Styles.
Für verschiedene Seitenarten individuelle Vorlagen erstellen.
Die Template-Hierarchie von WordPress ermöglicht es Ihnen, spezifische Template-Dateien für verschiedene Arten von Seiten zu erstellen. Zum Beispiel:
* front-page.phpDient als statische Startseite.
* home.phpSeite mit der Liste der Blogartikel.
* single.phpSeite mit den Details zu einem einzelnen Artikel.
* page.php: Eine einzelne Seite.
* archive.php: Archivseiten für Kategorien, Tags, Autoren usw.
* search.php: Suchergebnisseite.
* 404.php404-Fehlerseite.
Empfohlene Lektüre Einführung in die Entwicklung von WordPress-Themen: Wie Sie von Grund auf eine eigene Theme-Architektur und -Template-Struktur erstellen。
Erstellen page.php Es ermöglicht Ihnen, das Erscheinungsbild aller Seiten unabhängig zu steuern, ohne dass dies die Artikelseiten beeinträchtigt. Seine Struktur ist… index.php Ähnlich, aber in der Regel werden keine Metadaten zur Veröffentlichung des Artikels angezeigt (z. B. Datum, Autor).
Entwerfen von responsiven Layouts und Interaktionen
Moderne WordPress-Themen müssen responsiv sein – das bedeutet, dass Ihre CSS-Dateien auf alle Bildschirmgrößen angepasst werden müssen, von Handys über Tablets bis hin zu Desktop-Computern. Es wird empfohlen, die „Mobile First“-CSS-Strategie zu verwenden: Zuerst werden die Grundstile für kleine Bildschirme erstellt, und anschließend werden mithilfe von Media Queries zusätzliche Styles für größere Bildschirme hinzugefügt.
Gleichzeitig könnte Ihr Thema JavaScript benötigen, um interaktive Funktionen wie Dropdown-Menüs oder Bilderrolladen zu ermöglichen. Die richtige Vorgehensweise besteht darin, JavaScript in die entsprechenden Bereiche des Codes einzubauen. functions.php Verwenden Sie es in China wp_enqueue_script() Es gibt Funktionen, die es ermöglichen, Skripte zu registrieren und in einer Warteschlange zu platzieren, sowie sicherzustellen, dass Abhängigkeiten (z. B. jQuery) korrekt deklariert sind. Dadurch können Skriptkonflikte und doppelte Ladungen vermieden werden und die Skriptoptimierungsfunktionen von WordPress voll genutzt werden.
Zusammenfassungen
Durch die oben genannten Schritte haben Sie ein sehr grundlegendes, funktionierendes WordPress-Custom-Theme erstellt. Sie haben gelernt, wie man die Informationen zum Thema definiert. style.css„Aufbau einer Grundlage“ index.php Templates: Zerlegen Sie Templates in modulare Komponenten. functions.php Die Funktionen zum Erweitern von Themen wurden verbessert. Außerdem haben Sie die starke Template-Hierarchie von WordPress kennengelernt, was den Weg für die Erstellung komplexerer, speziell angepasster Template-Seiten ebnet.
Die Entwicklung von Themes ist ein kontinuierlicher, iterativer und vertiefter Prozess. Als Nächstes kannst du dich mit der Entwicklung von Child-Themes beschäftigen, um bestehende Themes sicher zu modifizieren. Lerne außerdem, wie du die WordPress Customizer-API nutzt, um Benutzern die Möglichkeit zu geben, die Theme-Einstellungen über das Backend in Echtzeit anzupassen. Oder vertiefe dein Wissen über die WordPress REST-API, um Themes zu erstellen, die mit Frontend-Frameworks kombiniert werden können. Es ist entscheidend, die offiziellen Entwicklerdokumente stets im Auge zu behalten und aktiv in der Community mitzumachen, um deine Fähigkeiten kontinuierlich zu verbessern.
FAQ Häufig gestellte Fragen
Muss man zum Entwickeln von WordPress-Themen wirklich PHP beherrschen?
Ja, eine solide Grundlage in PHP ist eine notwendige Voraussetzung für die Entwicklung von WordPress-Themen. Da WordPress selbst in PHP programmiert ist, sind alle Template-Dateien (wie …) ebenfalls in PHP geschrieben. index.php、single.php) sowie Funktionsdateien (functions.phpFür all diese Zwecke ist PHP-Code erforderlich, um Inhalte dynamisch zu generieren, WordPress-Funktionen aufzurufen und Daten zu verarbeiten.
Außerdem müssen Sie sich mit HTML und CSS vertraut machen, um die Struktur und das Erscheinungsbild der Seiten zu gestalten, sowie über grundlegende Kenntnisse von JavaScript verfügen – insbesondere von jQuery, da dieses in der WordPress-Software enthalten ist – um interaktive Funktionen hinzuzufügen.
Warum wird meine Änderung des Themes im WordPress-Backend nicht angezeigt?
Das wird in der Regel durch das Caching des Browsers oder des Servers verursacht. Versuchen Sie zunächst, im Browser… Ctrl + F5(Windows/Linux) oder Cmd + Shift + R(Mac) Durchführen Sie einen erzwungenen Neuladen, um den Browser-Cache zu löschen.
Falls das Problem weiterhin besteht, könnte es daran liegen, dass auf der Serverseite oder durch WordPress-Cache-Plugins (wie W3 Total Cache, WP Super Cache) alte Dateien gespeichert werden. Versuchen Sie bitte, die Caches in allen Cache-Plugins zu löschen. In der Entwicklungsphase empfiehlt es sich, diese Cache-Plugins vorübergehend deaktiviert zu lassen, um Störungen zu vermeiden.
Wie kann ich mein Thema mehrsprachig machen?
Die Unterstützung mehrerer Sprachen in einem Thema (Internationalisierung und Lokalisierung, i18n und l10n) hängt in erster Linie von den Übersetzungsfunktionen von WordPress ab. In einem Thema sollten alle für die Benutzer bestimmten Textzeichenketten nicht direkt geschrieben werden, sondern mit den entsprechenden Übersetzungsfunktionen umhüllt werden.
Zum Beispiel, wenn man verwendet… (‘文本’， ‘my-first-theme’) Führen Sie die Übersetzung durch oder verwenden Sie die entsprechenden Funktionen. echo esc_html(‘文本’， ‘my-first-theme’) Sie müssen die Ausgabe durchführen und die Zeichen entsprechend entschlüsseln/entkommen lassen. style.css Der Kopfteil und… load_theme_textdomain() Die Funktion wird korrekt aufgerufen. Text Domain(Eingabefeld), und anschließend mit einem Tool wie Poedit eine Übersetzung erstellen. .pot „Translation Template and“ .po/.mo Sprachdateien.
Was ist der Unterschied zwischen der functions.php eines Themes und der Funktionalität eines Plugins?
functions.php Die Funktionalität des Codes in der Datei ähnelt der Funktionalität des Plugins-Codes; beide können verwendet werden, um WordPress zu erweitern. Der Hauptunterschied liegt in ihrem Scope (Gültigkeitsbereich) und ihrer Verwendung.
functions.php Die Funktionen sind eng mit dem aktuellen Thema verbunden. Wenn der Benutzer das Thema wechselt, sind diese Funktionen in der Regel nicht mehr verfügbar. Sie eignen sich dazu, Funktionen hinzuzufügen, die direkt mit der visuellen Darstellung, dem Layout und den Templates des Themas zusammenhängen (z. B. die Position des Registrierungsformulars oder Optionen zur Unterstützung des neuen Themas).
Die von Plugins bereitgestellten Funktionen sind unabhängig vom verwendeten Thema – egal welches Thema verwendet wird, sofern das Plugin aktiviert ist, sind die Funktionen weiterhin verfügbar. Sie eignen sich dazu, allgemeine Funktionen hinzuzufügen, die mit dem Erscheinungsbild des Themas nichts zu tun haben (z. B. Kontaktformulare, SEO-Optimierungen, E-Commerce-Funktionen). Wenn eine Funktion auch nach einem Wechsel des Themas weiterhin benötigt wird, sollte sie als Plugin implementiert werden.
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