Bevor du mit dem Schreiben von Code beginnst, benötigst du eine lokale Entwicklungsumgebung. Diese umfasst in der Regel einen lokalen Server (z. B. XAMPP, MAMP oder Local) sowie einen Code-Editor (z. B. VS Code, PhpStorm). Stelle sicher, dass in deiner Umgebung PHP (empfohlen ist die Version 7.4 oder höher) und MySQL installiert sind.
Ein standardisiertes WordPress-Theme ist ein Ordner, der eine bestimmte Sammlung von Dateien enthält. Beginnen Sie damit, indem Sie diese Dateien in Ihre lokale WordPress-Installation importieren.wp-content/themesErstellen Sie in dem Verzeichnis ein neues Verzeichnis und nennen Sie es beispielsweise „NeuesVerzeichnis“.my-first-theme。
Als Nächstes erstellen Sie zwei der grundlegendsten und notwendigsten Dateien:style.cssundindex.phpDarunter befinden sichstyle.cssNicht nur eine Stylesheet – sondern vielmehr die “Identität” eines Themes. Der Kommentarblock am Anfang der Datei dient dazu, WordPress mitteilen zu geben, um welches Theme es sich handelt.
Empfohlene Lektüre Einführung in die Entwicklung von WordPress-Themen: Erstellen Sie von Grund auf eine personalisierte Website。
„In“style.cssIm File musst du folgende Formatierung für die Kopfinformationen hinzufügen:
/*
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
*/Diese Informationen werden auf der WordPress-Backend-Seite “Erscheinungsbild” -> “Themes” angezeigt.index.phpDie Datei ist das Standardvorlage für ein Thema. Auch wenn sie vorübergehend leer ist, muss sie vorhanden sein, damit WordPress erkennt, dass es sich um ein gültiges Thema handelt.
Erstellen Sie eine grundlegende Vorlagendatei.
Nachdem die Grunddateien erstellt wurden, kann dein Thema noch keine Inhalte anzeigen. WordPress verwendet ein System aus mehreren Template-Ebenen, um zu entscheiden, welches Template für verschiedene Arten von Seiten geladen werden soll. Als Nächstes werden wir einige Kern-Template-Dateien erstellen.
Erstellen Sie Vorlagen für den Kopf- und Fußbereich.
Um die Wiederverwendbarkeit und Konsistenz des Codes zu gewährleisten, trennen wir in der Regel den Kopfbereich (Header) und den Fußbereich (Footer) einer Webseite in separate Dateien. Beginnen wir damit, diese Dateien erst einmal zu erstellen.header.phpDie Datei enthält den Kopfbereich des HTML-Dokuments.<body>Tags sowie die öffentlichen Bereiche an der Oberseite der Website (z. B. Logo und Navigationsmenü).
Eines der einfachsten…header.phpDie Beispiele können folgende Inhalte enthalten:
Empfohlene Lektüre Erstellen Sie eine professionelle Website: Die umfassende Anleitung zum Entwickeln und Anpassen von WordPress-Themen。
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1003>
<header>
<h1><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>Achten Sie auf die folgenden Punkte:wp_head()Eine Funktion ist etwas, das unbedingt aufgerufen werden muss, um es dem WordPress-Kern, den Plugins sowie den Themes selbst zu ermöglichen, den notwendigen Code (z. B. CSS und JS) in die Kopfzeile der Seite einzufügen.
Anschließend erstellen Siefooter.phpDie Datei wird verwendet, um etwas zu schließen.<body>und<html>Die Seite enthält Tags sowie Fußzeileninhalte.
<footer>
<p>© . All rights reserved.</p>
</footer>
</body>
</html>Ebenso…wp_footer()Funktionen sind ebenfalls erforderlich.
Jetzt können wir aktualisieren.index.phpVerwenden Sieget_header()undget_footer()Eine Funktion wird verwendet, um diese beiden Teile einzuführen:
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 文章内容将在这里显示
endwhile;
else :
// 没有找到文章时的内容
endif;
?>
</main>
<?php get_footer(); ?>Erstellen einer Artikelzirkulation und eines Inhaltsvorlagen-Systems
Oben genannt…index.phpDort sehen wir das Herzstück von WordPress: The Loop. Es wird verwendet, um alle Artikel auf der aktuellen Seite (oder einen einzelnen Artikel) durchzugehen. Um die Darstellung der Artikelinhalte strukturierter zu gestalten, extrahieren wir die Logik zur Anzeige eines einzelnen Artikels in der Regel in eine separate Datei.
Erstellencontent.phpodertemplate-parts/content.phpDateien, und anschließend werden sie im Laufe einer Schleife verarbeitet.get_template_part()Die Funktion ruft sie auf.
Empfohlene Lektüre Eine vollständige Anleitung zur Entwicklung von WordPress-Themen: Ein praktisches Tutorial vom Anfänger bis zum Experten.。
// 在 index.php 的循环中
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;Und dann erstellen Sie es.template-parts/content.php：
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<h2><a href="/de/</?php the_permalink(); ?>"></a></h2>
<div class="entry-meta">
by
</div>
<div class="entry-content">
</div>
</article>So werden der Artikeltitel, der Abstract sowie die Metadaten in einem standardisierten Format ausgegeben.
Einführung von Styles und Scripts
Ein modernes Design ist untrennbar von CSS und JavaScript. WordPress stellt standardisierte Funktionen bereit, um Stylesheets und Script-Dateien sicher in die Warteschlange („Queue“) zu geben, anstatt sie direkt in den Templates zu verwenden.<link>oder<script>Tags.
„Registering and Queuing the Main Style Sheets“
Obwohl wir es bereits haben…style.cssAber normalerweise tun wir das auf folgende Weise:functions.phpUm die Datei zu laden, erstellen Sie zunächst eine Datei im Wurzelverzeichnis des Themes.functions.phpDokumente.
Und dann wird es verwendet.wp_enqueue_style()Es gibt eine Funktion zum Laden von Stylesheets. Wir benötigen diese Funktion…functions.phpErstellen Sie eine Funktion in „China“ und verbinden Sie diese mit der entsprechenden Aktion bzw. dem System.wp_enqueue_scriptsBei dieser Aktion.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 加载Google Fonts示例
wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );get_stylesheet_uri()Die Funktion erhält automatisch das Thema.style.cssDateipfad.
Hinzufügen eines Skripts für ein responsives Navigationsmenü
Um interaktive Funktionen hinzuzufügen – beispielsweise ein responsives Menü für mobile Geräte – müssen wir JavaScript einsetzen. Angenommen, wir haben eine einfache Scripte, um das Anzeigen bzw. Verbergen des Menüs zu steuern.
Zunächst erstellen Sie einjs/navigation.jsDatei. Und dann…functions.phpIn derselben Funktion wird dies verwendet.wp_enqueue_script()Laden Sie es herunter.
function my_first_theme_scripts() {
// ... 之前的样式代码 ...
// 加载导航脚本
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}Der letzte ParametertrueDies bedeutet, dass das Skript am unteren Rand der Seite platziert werden soll.</body>(Vor dem Tag) – Dies trägt in der Regel zur Verbesserung der Ladeleistung der Seite bei.
Implementierung der Kernfunktionen des Themas
functions.phpEs handelt sich um das “Gehirn” des Themes, welches für die Hinzufügung verschiedener Funktionen und die Bereitstellung von Unterstützung zuständig ist. Neben dem Laden von Ressourcen müssen wir hier auch die von dem Theme unterstützten Funktionen deklarieren.
Hinzufügen der Unterstützung für die Themenfunktion
WordPress bietet eine Reihe von “Theme-Funktionen”, die Sie explizit unterstützen müssen, um sie nutzen zu können. Zu den grundlegendsten Funktionen gehören Artikel-Vorschaubilder („Featured Images“), benutzerdefinierte Menüs sowie die Unterstützung für HTML5-Markup.
„In“functions.phpFügen Sie den folgenden Code hinzu:
function my_first_theme_setup() {
// 让主题支持文章和评论的RSS feed链接自动添加到head中
add_theme_support( 'automatic-feed-links' );
// 让文章和页面支持“特色图像”
add_theme_support( 'post-thumbnails' );
// 启用对HTML5标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 启用标题标签支持，WordPress会自动管理文档标题
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );after_setup_themeEs handelt sich um einen Aktionshaken, der beim Initialisieren eines Themes ausgeführt wird – dies ist der standardmäßige Ort, an dem Funktionen eines Themes eingestellt werden.
Registrieren Sie sich für das Navigationsmenü.
Die meisten Webseiten benötigen ein Navigationsmenü. Das Menüsystem von WordPress ermöglicht es Benutzern, Menüeinträge im Backend unter “Erscheinungsbild” -> “Menü” anzupassen. Zunächst müssen Sie die Menüpositionen für Ihr Thema registrieren.
Vorhin…my_first_theme_setupIn der Funktion fügen Sie weiterhin hinzu:
function my_first_theme_setup() {
// ... 之前的 add_theme_support 代码 ...
// 注册一个主菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}Nach der Registrierung können Sie Vorlagendateien (z. B. ) verwenden.header.php), die in derwp_nav_menu()Die Funktion wird verwendet, um dieses Menü anzuzeigen:
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>Erstellen Sie eine Seitenleiste sowie eine Bereich für Widgets.
Widgets sind eine weitere leistungsstarke Funktion von WordPress. Um sie nutzen zu können, müssen Sie zunächst eine Seitenleiste (das Bereich, in dem Widgets angezeigt werden) registrieren.
„In“functions.phpErstellen Sie in „China“ eine neue Funktion und verbinden Sie sie mit dem entsprechenden System bzw. Prozess.widgets_initIn Bezug auf die Aktionen:
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' );Nach der Registrierung können Sie im Backend unter “Erscheinungsbild” -> “Widgets” den Bereich “Haupt-Seitenleiste” einsehen und dort Widgets hinzufügen. Um dieses Widget in Ihrem Thema anzuzeigen, müssen Sie es in das Template einbinden.sidebar.phpDas wird in der Methode main() aufgerufen.dynamic_sidebar( 'sidebar-1' )Funktion.
Zusammenfassungen
Mithilfe dieses Leitfadens haben wir einen minimalistischen, aber funktionsreichen Entwicklungsprozess für WordPress-Themes abgeschlossen. Wir begannen mit der Einrichtung der Umgebung und der Erstellung der grundlegenden Dateien, bauten schrittweise die Struktur der Templates auf, trennten den Kopfbereich („Header“) vom Fußbereich („Footer“) ab und implementierten die zentrale Funktion zur Anzeige von Artikeln. Anschließend haben wir gelernt, wie man Themen auf standardisierte Weise mit Styles und Scripts ausstattet, um Kompatibilität und Leistung zu gewährleisten. Zum Schluss…functions.phpIn diesem Prozess haben wir die Kernfunktionen des Themes aktiviert – darunter die benutzerdefinierten Bilder, das Navigationsmenü sowie die Bereich für Widgets – wodurch das Theme eine hohe Grad an Anpassbarkeit erhält.
Das ist nur ein Ausgangspunkt. Auf dieser Grundlage kannst du weiterhin professionellere Vorlagen erstellen (z. B.single.php、page.php、archive.phpSie können die komplexeren APIs von WordPress erkunden, wie z. B. die für benutzerdefinierte Artikeltypen, Kategorien sowie die Customizer-API, um so ein eigenes Website-Thema zu erstellen, das sowohl funktional als auch optisch einzigartig ist.
FAQ Häufig gestellte Fragen
Welche Techniken muss man beherrschen, um ein WordPress-Theme zu entwickeln?
Um ein WordPress-Theme zu entwickeln, sind einige Kerntechnologien beherrscht werden. Zunächst einmal ist PHP erforderlich, da WordPress selbst in PHP programmiert ist – alle Template-Dateien sowie die Funktionalitäten basieren auf PHP. Es ist wichtig, die grundlegende PHP-Syntax, Funktionen, Schleifen und Bedingungssätze zu verstehen.
Als Nächstes kommen HTML und CSS, die zur Erstellung der Struktur und des Designs von Webseiten verwendet werden. Es ist sehr wichtig, die Prinzipien des responsiven Webdesigns sowie moderne CSS-Layout-Techniken wie Flexbox und Grid zu verstehen. Zudem ist ein grundlegendes Verständnis von JavaScript erforderlich, um interaktive Funktionen auf der Frontend-Seite zu implementieren. Die Vertrautheit mit den spezifischen PHP-Funktionen und dem Hook-System von WordPress ist der Schlüssel für die effiziente Entwicklung von Themes.
Welches der Dateien, style.css und functions.php, ist wichtiger?
Diese beiden Dateien spielen in der Entwicklung von WordPress-Themen völlig unterschiedliche, aber dennoch entscheidende Rollen und lassen sich nicht einfach miteinander vergleichen, um festzustellen, welche von beiden wichtiger ist.style.cssDie Datei stellt die “Identifikation” eines Themes dar, und der Kommentarblock am Anfang der Datei ist für WordPress erforderlich, um ein Theme zu erkennen. Ohne diesen Kommentarblock wird das Theme nicht in der Liste der Themes im Backend angezeigt.
undfunctions.phpDie Datei stellt das “Funktionszentrum” eines Themes dar; fast der gesamte Code, der die Funktionen eines Themes erweitert, befindet sich darin – beispielsweise die Implementierung des Registrierungsmenüs, die Unterstützung für das Hinzufügen neuer Themes, das Laden von Skripten und Styles sowie die Definition benutzerdefinierter Funktionen. Ohne diese Datei verliert das Theme die meisten seiner dynamischen Funktionen und Erweiterbarkeiten. Beide Komponenten ergänzen sich gegenseitig und sind unverzichtbar.
Warum müssen die Funktionen wp_head() und wp_footer() verwendet werden?
wp_head()undwp_footer()Es handelt sich um den entscheidenden „Hook“ für die Kommunikation zwischen dem Kern von WordPress sowie den Themes und Plugins.header.phpDas ist eine gute Frage.</head>Aufruf vor dem Tagwp_head()Es handelt sich um eine Standardmethode, die es WordPress selbst, den von Ihnen installierten Plugins sowie anderen Teilen Ihres Themes ermöglicht, notwendigen Code in die Kopfzeile der Seite einzufügen (z. B. Meta-Tags, Verweise auf Stylesheets, Scripte, strukturierte JSON-LD-Daten usw.).
Ebenso auch…footer.phpDas ist eine gute Frage.</body>Aufruf vor dem Tagwp_footer()Diese Funktionen dienen dazu, Skripte einzufügen, die am unteren Rand der Seite geladen werden müssen – beispielsweise Analysecodes, verzögert geladene JS-Dateien oder andere HTML-Inhalte. Wenn diese Funktionen ausgelassen werden, kann dies dazu führen, dass Plugins nicht ordnungsgemäß funktionieren, dass die Verwaltungsleiste nicht angezeigt wird, sowie zu verschiedenen Kompatibilitätsproblemen.
Wie kann ich mein Thema an die offiziellen Standards von WordPress anpassen?
Damit Ihr Thema den offiziellen WordPress-Standards entspricht und von hoher Qualität ist, müssen Sie sich an die „WordPress Theme Development Guidelines“ sowie die „Theme Review Requirements“ halten. Dazu gehören unter anderem die Anwendung sicherer Programmierpraktiken sowie die Verwendung von Entschlüsselungsfunktionen für alle dynamisch generierten Daten.esc_html(), esc_url()Für alle Übersetzungszeichenketten werden internationale Funktionen verwendet (z. B.__(), _e()) und das Textfeld lädt sich.
Das Thema sollte ein responsives Design aufweisen, um auf allen Geräten eine gute Darstellung zu gewährleisten. Der Code sollte klar und kommentiert sein und den WordPress-Codestandards entsprechen. Darüber hinaus sollte das Thema über ausreichende Anpassungsmöglichkeiten über den WordPress-Customizer bieten sowie alle Kernfunktionen und Hooks von WordPress korrekt implementieren. Es ist eine gute Gewohnheit, vor der Veröffentlichung das Theme mit dem Plugin „Theme Check“ zu testen.
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-Einsteigerhandbuch: Erstelle deine erste professionelle Website von Grund auf
- Komplete Lösung für die Website-Erstellung – Eine umfassende Anleitung zur Umsetzung von der Grundlage bis zur Live-Veröffentlichung
- Vorwort: Warum die Entwicklung mit WordPress?
- Das ultimative Handbuch für Website-Entwicklung: Der vollständige Prozess, um professionelle Webseiten von Grund auf zu erstellen
- Wie man das beste WordPress-Theme auswählt: Eine umfassende Kaufanleitung – von Design bis Leistung
Deutsch