Bevor du mit dem Schreiben des Codes beginnst, brauchst du eine lokale Entwicklungsumgebung. Diese umfasst in der Regel einen lokalen Server (z. B. XAMPP, MAMP oder Local by Flywheel), PHP, eine MySQL-Datenbank sowie einen Code-Editor (z. B. VS Code, Sublime Text). Stelle sicher, dass deine PHP-Version den offiziellen Anforderungen von WordPress entspricht.
Als Nächstes gehen Sie in den Installationsordner Ihres WordPress-Systems.wp-content/themesIm Ordner erstellen Sie einen neuen Ordner, zum Beispiel…my-first-themeDiese Ordner wird alle Dateien zu Ihrem Thema enthalten.
Ein ganz einfaches WordPress-Theme benötigt nur zwei Dateien:style.cssundindex.phpZuerst erstellen wir…style.cssDateien, und fügen Sie an den Anfang der Dateien Kommentare mit Themeninformationen hinzu – dies ist erforderlich, damit WordPress das Thema erkennen kann.
Empfohlene Lektüre Maßgeschneiderte WordPress-Themen: Eine vollständige Anleitung zum Erstellen eines individuellen Website-Looks von Grund auf.。
/*
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
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Dann erstellen Sie das Einfachste davon.index.phpDie Datei enthält vorerst nur ein HTML-Rahmengerüst sowie den Text “Hello World”.
<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1001>
<h1>Hallo Welt! Dies ist mein erstes Theme.</h1>
</body>
</html>Melden Sie sich jetzt in Ihrem WordPress-Backend an und gehen Sie zu “Erscheinungsbild” -> “Themen”. Dort sollte “My First Theme” angezeigt werden und Sie können es aktivieren. Obwohl es derzeit nur über einfache Funktionen verfügt, haben Sie erfolgreich ein Thema erstellt, das von WordPress erkannt wird.
Erstellung der zentralen Vorlagendatei für das Thema
Ein vollständiges Thema besteht aus einer Reihe von Vorlagendateien, die die Anzeige der verschiedenen Teile einer Website steuern. Beginnen wir mit den wichtigsten Dateien.
Trennen Sie den Kopf- und Fußbereich voneinander.
Das Trennen wiederholten Codes – wie des Kopf- und Fußbereichs – in separate Dateien ist der erste Schritt. Erstellen Sie diese Dateien.header.phpDie Datei enthält Inhalte, die aus… stammen.<!DOCTYPE html>Bis es geöffnet wird…<body>Alles, was sich vor dem Tag befindet.
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
</head>
<body no numeric noise key 1003>
<header id="masthead" class="site-header">
<h1 class="site-title"><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>Erstellenfooter.phpDatei, die Fußzeileninhalte sowie Abschlussetiketten enthält.
Empfohlene Lektüre Vom Nullpunkt aus – Ihr eigenes WordPress-Theme erstellen: Eine umfassende Anleitung zu Architektur, Design und Entwicklung。
<footer id="colophon" class="site-footer">
<p>©</p>
</footer>
</body>
</html>Dann ändere dein…index.phpDokumente, Verwendungget_header()undget_footer()Eine Funktion wird verwendet, um diese Teile einzuführen.
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 文章内容将在这里显示
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>No content found.</p>';
endif;
?>
</main>
<?php get_footer(); ?>Erstellen einer Artikelzirkulation und eines Seitenbalkens
Oben genanntesindex.phpEs enthält bereits die grundlegende WordPress-Schleife („The Loop“), die verwendet wird, um eine Liste von Artikeln abzurufen und anzuzeigen. Als Nächstes wird…sidebar.phpLassen Sie uns einen Seitenbereich hinzufügen.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Um eine Seitenleiste auf der Seite einzufügen, müssen Sie…index.phpAnpassen Sie die Struktur des Hauptinhaltsbereichs vorne und hinten und verwenden Sie dazu…get_sidebar()Funktionen. Gleichzeitig muss eine weitere Funktion erstellt werden.functions.phpDateien werden benötigt, um diese Seitenleiste-Widget-Region zu registrieren.
Implementierung einer responsiven Layout- und Stilgestaltung
Reaktives Design sorgt dafür, dass Ihr Thema auf verschiedenen Geräten gut angezeigt wird. Wir beginnen mit der grundlegenden CSS-Struktur und Medienabfragen.
Einstellen der Grundlagen-Styles und des Flexbox-Modells
In deinemstyle.cssUnter den Anmerkungen zu den Themainformationen sollten die Stilvorlagen sowie die Grundlage der Layout-Struktur hinzugefügt werden. Der Einsatz von Flexbox ist ein guter Ausgangspunkt, um ein einfaches, responsives Layout zu erstellen.
/* 基础重置与样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
/* 主要布局容器 */
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex: 1;
padding: 2rem;
}
/* 头部与底部样式 */
.site-header, .site-footer {
background-color: #f8f9fa;
padding: 1rem 2rem;
text-align: center;
}Hinzufügen von Medienabfragen
Medienabfragen sind das Herzstück des responsiven Designs. Wir haben einen einfachen „Breakpoint“ hinzugefügt, der die Anordnung des Inhaltsbereichs und der Seitenleiste von nebeneinander auf gestapelt ändert, wenn die Bildschirmdicke unter 768 Pixeln liegt (unterhalb typischer Tablet-Geräte).
Empfohlene Lektüre WordPress-Themenentwicklung: Ein umfassender Leitfaden von der Grundlage bis zur Meisterschaft。
Zunächst muss die HTML-Struktur geändert werden.index.phpDer Hauptinhalt sowie die Seitenleiste werden in einem Container zusammengefasst.
<div class="content-area">
<main id="primary" class="site-main">
<!-- 主循环内容 -->
</main>
<?php get_sidebar(); ?>
</div>Danach fügen Sie die entsprechenden Styles in das CSS hinzu.
.content-area {
display: flex;
flex-wrap: wrap;
}
.site-main {
flex: 3;
min-width: 300px;
}
#secondary {
flex: 1;
min-width: 250px;
padding-left: 2rem;
}
/* 响应式断点：平板及以下 */
@media (max-width: 768px) {
.content-area {
flex-direction: column;
}
#secondary {
padding-left: 0;
padding-top: 2rem;
}
.site-header, .site-footer, .site-main {
padding: 1rem;
}
}Die Funktionalität des Themes wird durch functions.php erweitert.
functions.phpDie Dateien sind sozusagen die “Motorenraum” deines Projekts – sie dienen dazu, Funktionen hinzuzufügen, Eigenschaften zu registrieren sowie Skripte und Styles sicher einzubinden.
Registrierung des Navigationsmenüs und der Widget-Region
„In“functions.phpIn China wird es verwendet.register_nav_menusEine Funktion zur Registrierung der Position der Navigationseinträge für ein Thema.
esc_html__( 'Primary Menu', 'my-first-theme' ),
'footer' => esc_html__( 'Footer Menu', 'my-first-theme' ),
) );
// 注册侧边栏小工具区域
register_sidebar( array(
'name' => esc_html__( 'Main Sidebar', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', '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( 'after_setup_theme', 'my_first_theme_setup' );
?>Nach der Registrierung können Sie aufheader.phpundfooter.phpVerwenden Sie es in Chinawp_nav_menu()Die Funktion wird verwendet, um diese Menüs aufzurufen.
Sichere Ladung von Styles und Scripts
Verwenden Sie niemals direkte Hardlinks zu CSS- oder JavaScript-Dateien in Template-Dateien. Stattdessen sollten Sie andere Methoden einsetzen, um diese Dateien zu referenzieren.wp_enqueue_style()undwp_enqueue_script()Funktionen, und durchwp_enqueue_scriptsEs werden „Haken“ verwendet, um sie zu laden.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载一个自定义JavaScript文件（如果需要）
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Erstellen Sie mehr Vorlagendateien, um die Funktionalitäten zu erweitern.
Derzeit haben wir nur ein Thema.index.phpEs wird auf allen Seiten verwendet. Die Hierarchie der WordPress-Vorlagen bestimmt, welche spezifischeren Vorlagen für verschiedene Arten von Seiten gesucht werden. Lassen Sie uns einige Vorlagen erstellen.
Einzelner Artikel und Seitenvorlage
Erstellensingle.phpDient zum Anzeigen eines einzelnen Artikels.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'single' );
// 显示文章导航
the_post_navigation();
// 如果评论开启，则加载评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Erstellenpage.phpDient zum Anzeigen von statischen Webseiten. Seine Struktur entspricht der von…single.phpÄhnlich, aber in der Regel werden keine Metadaten wie Kategorien oder Tags angezeigt.
Um dem DRY-Prinzip (‘Don’t Repeat Yourself“ – „Wiederholen Sie sich nicht“) zu folgen, können wir Teile des Inhalts von Artikeln und Seiten in Template-Teile extrahieren. Erstellen Sie diese im Wurzelverzeichnis des Themes.template-partsOrdner erstellen und darin Inhalte hinzufügen.content-single.phpundcontent-page.php。
Artikel-Archiv-Seitenvorlage
Erstellenarchive.phpEs wird eine Archivseite angezeigt, die Kategorien, Tags, Autoren usw. enthält. Diese Funktion kann wiederverwendet werden.index.phpDie Schleife innerhalb des Codes wird verwendet, um die Inhalte zu verarbeiten, aber normalerweise wird der Archivtitel an der Oberseite angezeigt.
<main id="primary" class="site-main">
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="archive-description">', '</div>' );
?>
</header>
<?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>Zusammenfassungen
Mit dieser Anleitung hast du die Erstellung eines grundlegenden, aber vollständigen responsiven WordPress-Themes abgeschlossen. Du hast die grundlegende Dateistruktur eines Themes verstanden, gelernt, wie man Template-Teile (Header, Footer, Seitenleiste) voneinander trennt, die Kernfunktionen von WordPress eingesetzt sowie eine responsive Layout-Struktur mithilfe von CSS-Media Queries erstellt. Darüber hinaus hast du auch gelernt, wie man…functions.phpSie lernen, wie Sie Dateien verwenden, um Menüs, Widgets sowie Ressourcen sicher zu laden, und machen sich außerdem mit dem leistungsstarken Template-System von WordPress vertraut.
Die Themenentwicklung ist ein kontinuierlicher, vertiefender Prozess. Als Nächstes kannst du weitere Vorlagendateien (z. B.) untersuchen…404.php、search.php），学习使用WordPress的Body Class和Post Class来增加样式控制的精细度，深入研究主题定制器（Customizer）API为用户提供可视化设置选项，甚至尝试将Sass或ES6等现代前端工作流集成到你的开发过程中。
FAQ Häufig gestellte Fragen
Welche Dateien sind für ein WordPress-Theme mindestens erforderlich?
Ein für WordPress erkennbares, minimalistisches Theme benötigt nur zwei Dateien:style.cssundindex.php。style.cssDer Kopf muss die korrekten Themeninformationen und Anmerkungen enthalten.index.phpDann wird es als Standardvorlage für alle Seiten verwendet.
Wie kann ich mein Thema für mehrsprachige Übersetzungen optimieren?
Sie müssen zwei Dinge erledigen. Zuerst…style.cssDie Kopf-Anmerkungen sowie alle Stellen, an denen Text verwendet wird (z. B. durch…)__()oder_e()Die Funktion nutzt ein Textfeld (“Text Domain”). In dieser Anleitung verwenden wir das Textfeld „my-first-theme“. Anschließend erstellen Sie mit einem Tool wie Poedit eine .pot-Datei und übersetzen Sie diese in .po- und .mo-Dateien, die Sie dann in das Thema einfügen./languagesIm Verzeichnis. Schließlich…functions.phpVerwenden Sie es in Chinaload_theme_textdomain()Funktionen laden…
Warum funktionieren meine benutzerdefinierten Stile oder Skripte nicht?
Das liegt in der Regel daran, dass die Inhalte nicht auf die von WordPress empfohlene Weise geladen werden. Stellen Sie sicher, dass Sie die entsprechenden Vorgaben befolgen.functions.phpIm File wird dies verwendet.wp_enqueue_style()undwp_enqueue_script()Funktionen und deren Einbindung inwp_enqueue_scriptsMit den „Hooken“ können Styles und Scripts hinzugefügt werden. Links, die direkt in der Template-Datei geschrieben werden, könnten von Caching-Plugins ignoriert werden oder in manchen Fällen in der falschen Reihenfolge geladen werden.
Wie füge ich meiner Website die Unterstützung für ein benutzerdefiniertes Logo hinzu?
Das ist eine sehr häufig vorkommende Funktion. Sie benötigen…functions.phpIn der Funktion zur Festlegung des Themas einer Datei (durch…)after_setup_themeHook-Execution), hinzufügenadd_theme_support( 'custom-logo' )Sie können ein Array von Parametern übergeben, um Eigenschaften wie die Größe des Logos zu definieren. Nach der Hinzufügung können die Benutzer das Logo in “Erscheinungsbild” -> “Anpassen” -> “Website-Identität” hochladen. Auf der Frontend-Seite können Sie dies nutzen…the_custom_logo()Eine Funktion, die es anzeigt.
Wie fügt man während des Entwicklungsprozesses PHP-Fehler hinzu?
Es wird empfohlen, dies in der lokalen Entwicklungsumgebung zu tun.wp-config.phpDer WordPress-Debugging-Modus im File wird aktiviert.WP_DEBUGDie Konstante ist auftrueSie können auch gleichzeitig mehrere Einstellungen vornehmen.WP_DEBUG_LOGundWP_DEBUG_DISPLAYEs geht darum zu entscheiden, ob Fehler in eine Protokolldatei geschrieben oder auf dem Bildschirm angezeigt werden sollen. Denken Sie daran: Bevor Sie das Thema online stellen, müssen Sie den Debugging-Modus unbedingt deaktivieren.
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.
- 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
- Praktische WordPress-Themenentwicklung: Von Null aus responsive, unternehmensgerechte Webseiten erstellen
- Kodlose Erstellung von WordPress-Themen: Ein umfassender Leitfaden von Grund auf
Deutsch