Die Entwicklung eines eigenen WordPress-Themes ist der beste Weg, um das WordPress-Framework tiefgründig zu verstehen und die eigenen Fähigkeiten im Frontend-Development zu verbessern. Im Gegensatz zum Einsatz von fertigen Themes gibt Ihnen die Erstellung eines Themes von Grund auf die volle Kontrolle – Sie können so eine einzigartige Website erstellen, die genau den Anforderungen Ihres Projekts entspricht. Dieser Artikel wird Sie durch den gesamten Prozess der Erstellung eines grundlegenden, aber funktionsfähigen WordPress-Themes führen.
Entwicklungsumgebung und Konfiguration der Themenstruktur
Bevor Sie mit dem Schreiben des Codes beginnen, benötigen Sie eine lokale Entwicklungsumgebung. Diese umfasst in der Regel ein Set an lokalen Servern (wie XAMPP, MAMP oder Local by Flywheel), einen Code-Editor (z. B. VS Code) sowie die neueste Version von WordPress.
Zunächst einmal: In WordPress… <code>wp-content/themes</code> Im Verzeichnis erstellen Sie einen Ordner für Ihr neues Thema, zum Beispiel… <code>my-custom-theme</code>Ein grundlegendes WordPress-Theme benötigt mindestens zwei Kerndateien.
Empfohlene Lektüre Vollständiger Tutorial zur Entwicklung von WordPress-Themen: Erstellen Sie von Grund auf ein benutzerdefiniertes Thema。
Erstellen einer Stylesheet-Datei
Die erste erforderliche Datei ist… style.cssDieses Datei definiert nicht nur die Styles des Themes, sondern enthält auch Metadaten, die WordPress über das Theme informieren. Fügen Sie am Anfang der Datei die folgenden Kommentare hinzu:
/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/“Text Domain” wird für die Internationalisierung verwendet und muss unbedingt mit dem Namen Ihrer Thema-Ordner übereinstimmen. Anschließend können Sie alle CSS-Regeln in dieser Datei schreiben.
Erstellen Sie eine Datei mit den Kernfunktionen.
Die zweite erforderliche Datei ist… functions.phpDies ist das “Gehirn” des Themes – es dient dazu, Stylesheets, JavaScript-Dateien einzubinden, Menüs und Seitenausdrücke zu registrieren sowie verschiedene Funktionen zu aktivieren.
Einfach und grundlegend functions.php Der Anfang sieht in der Regel so aus und dient dazu, die Stylesheets in die Warteschlange („Queue“) aufzunehmen:
<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );Zurzeit gibt es zwar noch keine Template-Dateien, aber dein Thema kann bereits in der WordPress-Backend-Übersicht “Erscheinungsbild” -> “Themen” angezeigt und aktiviert werden. Nach der Aktivierung wird die Website-Frontseite eine leere Seite anzeigen, da es keine Template-Dateien gibt, die die Seitenstruktur definieren.
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 Sie die Kernvorlagendateien.
Die Template-Dateien steuern die Anzeige der verschiedenen Teile einer Website. WordPress entscheidet, welches Template für eine aktuelle Anfrage verwendet wird, mithilfe der Hierarchie der Templates.
Erstellen Sie eine einheitliche Kopf- und Fußzeile für die gesamte Website.
Die beste Praxis besteht darin, den öffentlichen Kopf- und Fußcode getrennt zu halten. Erstellen Sie… header.php Eine Datei enthält in der Regel eine Angabe zum Dokumenttyp. Region sowie Öffnen Tags und Hauptnavigation.
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1004>
<header>
<h1><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
<nav>
'primary' ) ); ?>
</nav>
</header>
<main>Dementsprechend wird eine Erstellung vorgenommen. footer.php Kommen Sie und schalten Sie es aus. header.php Der Hauptcontainer sowie die darin enthaltenen Tags, die in „China“ geöffnet wurden.
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>wp_head() und wp_footer() Es handelt sich um entscheidende „Hook-Funktionen“, die es dem WordPress-Kern, Plugins sowie den Themes selbst ermöglichen, an diesen Stellen den erforderlichen Code (z. B. Styles oder Skripte) einzufügen.
Erstellen von Indizes und Artikeltemplates
index.php Dies ist die End-Rücksetzungsdatei der Template-Hierarchie und gleichzeitig der Ausgangspunkt für unser Thema. Sie wird verwendet… get_header() und get_footer() Um die separaten Module einzuführen…
<article>
<h2><a href="/de/</?php the_permalink(); ?>"></a></h2>
<div></div>
</article>
<p>Es gibt derzeit keine Artikel.</p>Um einzelne Artikel separat anzuzeigen, wurde eine Funktion erstellt. single.phpSeine Struktur ähnelt der von… index.php Ähnlich, aber mit der Verwendung von… the_content() Um den vollständigen Text anzuzeigen.
Empfohlene Lektüre Einführung in die Entwicklung von WordPress-Themen – Erstellen Sie Ihr erstes eigenes, angepasstes Thema von Grund auf。
<article>
<h1></h1>
<div></div>
</article>Erweiterung der Themenfunktionen
Nachdem die Grundstruktur erstellt wurde, gehen wir weiter mit… functions.php Um weitere praktische Funktionen hinzuzufügen und das Thema damit professioneller und benutzerfreundlicher zu gestalten…
Registrieren des Navigationsmenüs und der Seitenleiste
„In“ functions.php Fügen Sie den folgenden Code hinzu, um einen Haupt-Navigationsmenü-Bereich und einen Seitenbereich (Tool-Bereich) zu registrieren:
// 注册导航菜单
function my_custom_theme_register_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' );
// 注册侧边栏小工具区域
function my_custom_theme_register_sidebar() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-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_custom_theme_register_sidebar' );Nach der Registrierung müssen Sie diese Funktionen in den Vorlagen verwenden. Zum Beispiel: header.php Wir haben dies bereits in China verwendet. wp_nav_menu Die “primary”-Menüoption wurde aufgerufen. Um Widgets im Seitenbereich anzuzeigen, können Sie… sidebar.php Erstellen Sie ein Seitenaufklappmenü-Template und fügen Sie dieses in … ein. index.php oder single.php Verwenden Sie es in China get_sidebar() Einführung.
Hinzufügen der Unterstützung für die Themenfunktion
WordPress bietet viele integrierte Funktionen, die nur dann in einem Theme verwendet werden können, wenn ihre Unterstützung explizit deklariert wird. Dazu gehören beispielsweise die Unterstützung für das Hinzufügen von Artikel-Vorschaubildern („Featured Images“), die Anpassung des Logos sowie die Unterstützung für HTML5-Markup.
// 添加主题功能支持
function my_custom_theme_setup() {
// 支持文章缩略图
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
// 对搜索表单、评论表单等使用HTML5标记
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 在管理后台提供<title>标签支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );Nachdem die Unterstützung für “Post Thumbnails” hinzugefügt wurde, können Sie diese in der Schleife der Artikel verwenden. the_post_thumbnail() Die Funktion wird verwendet, um spezielle Bilder auszugeben.
Stilgestaltung und responsives Layout
Ein ansprechendes Design, das sich auf verschiedene Geräte anpasst, ist von großer Bedeutung. Sie können… style.css Alle Styles werden in dieser Datei definiert. Es wird empfohlen, eine mobile-first-Strategie anzuwenden.
Grundlegende Styles und Layout-Elemente
Zunächst sollten einige Standard-Styles und grundlegende Layout-Einstellungen festgelegt werden, um eine einheitliche Darstellung in verschiedenen Browsern zu gewährleisten.
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background: #f8f9fa;
padding: 2rem 0;
border-bottom: 1px solid #dee2e6;
}
/* 导航菜单样式 */
.main-navigation ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
.main-navigation a {
text-decoration: none;
color: #007bff;
}Die Umsetzung eines responsiven Designs
Verwenden Sie Media Queries, um die Layout-Anpassungen für verschiedene Bildschirmgrößen zu steuern. Wenn der Bildschirm beispielsweise kleiner wird, sollten die Navigationselemente in eine vertikale Anordnung wechseln.
/* 移动端样式 */
@media (max-width: 768px) {
.main-navigation ul {
flex-direction: column;
gap: 0.5rem;
}
.container {
padding: 0 15px;
}
article {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
}
}Stellen Sie sicher, dass auch die Bilder responsiv sind:
img {
max-width: 100%;
height: auto;
}Zusammenfassungen
Durch die oben genannten Schritte haben Sie erfolgreich ein voll funktionsfähiges, benutzerdefiniertes WordPress-Theme erstellt. Wir haben damit begonnen, die Entwicklungsumgebung einzurichten, und anschließend das grundlegendste Element des Themes erstellt… style.css Und functions.php Der Text beginnt mit der Erwähnung, dass schrittweise die grundlegenden Vorlagendateien erstellt wurden.header.php, footer.php, index.php, single.phpWir haben das Design des Themes weiter verbessert und die praktischen Funktionen erweitert – beispielsweise das Registrierungsmenü, die Seitenleiste sowie die Unterstützung für spezielle Bilder. Zudem haben wir dem Theme grundlegende Styles und eine responsive Layout-Struktur hinzugefügt, damit es auf verschiedenen Geräten gut angezeigt wird. Dies ist nur ein Anfang; du kannst auf dieser Basis weiterentwickeln und eigene Seitenvorlagen erstellen.page.phpArchivierungsvorlagen (Archive Templates)archive.phpSuchvorlagen (Search Templates)search.phpMan kann sogar unterverteilte Themen (Sub-Themen) nutzen, um das Design des Websites anzupassen und so eine noch leistungsfähigere sowie professionellere Website zu erstellen.
FAQ Häufig gestellte Fragen
Welche Techniken muss man beherrschen, um ein WordPress-Theme zu entwickeln?
Um ein grundlegendes WordPress-Theme zu entwickeln, müssen Sie HTML, CSS und PHP beherrschen. HTML dient dazu, die Struktur der Seiten aufzubauen, CSS ist für das Design der Styles und die Anordnung der Elemente verantwortlich, und PHP ist der Kern, der die dynamischen Inhalte von WordPress steuert. Zudem ist ein grundlegendes Verständnis von JavaScript hilfreich, um interaktive Funktionen hinzuzufügen. Ein gutes Verständnis der Kernkonzepte von WordPress – wie der Template-Hierarchie, der „The Loop“-Schleife, den „Hooks“ sowie Funktionen – ist entscheidend für den erfolgreichen Entwurf eines Themes.
Was ist die Funktion der functions.php-Datei im Thema?
functions.php Die Datei ist das zentrale Element eines WordPress-Themes. Ihre Hauptfunktionen umfassen: Das Hinzufügen von CSS- und JavaScript-Dateien in die Warteschlange, das Registrieren von Navigationsmenüs sowie von Widget-Bereichen in den Seitenrändern, die Angabe der von dem Thema unterstützten Funktionen (z. B. Artikel-Abbildern, benutzerdefiniertem Logo), die Definition benutzerdefinierter Funktionen sowie die Modifizierung des Standardverhaltens von WordPress mithilfe von Aktion-Hooks und Filter-Hooks. Dadurch können Sie die Funktionen eines Themes erheblich erweitern und anpassen, ohne die Kerndateien von WordPress zu verändern.
Wie kann ich meine Website so einrichten, dass sie mehrere Sprachen unterstützt?
Um Themen zur Unterstützung mehrerer Sprachen (Internationalisierung) zu machen, sind hauptsächlich zwei Schritte erforderlich. Zunächst muss… style.css Für den Begriff “Text Domain” sowie alle Stellen, an denen die Übersetzungsfunktionen verwendet werden, sollte ein einheitlicher Textbereich (Text Domain) verwendet werden – dieser entspricht in der Regel dem Namen des Themaordners. Zweitens sollten bei der Vorbereitung der zu übersetzenden Zeichenketten die Übersetzungsfunktionen von WordPress eingesetzt werden. __()、_e() oder _x()Danach kannst du Tools wie Poedit verwenden, um die Erstellung vorzunehmen. .pot Template-Dateien und generieren die entsprechenden Ergebnisse. .po und .mo Übersetzen Sie die Dateien. Legen Sie die übersetzten Dateien im Themenbereich ab. /languages Im Verzeichnis lädt WordPress die entsprechenden Dateien automatisch nach, basierend auf den Spracheinstellungen der Website.
Welche Vorteile bietet das Erstellen eines Untertemas im Vergleich zur direkten Änderung des Hauptthemas?
Die Erstellung von Untertemaschen (Sub-Themes) ist eine bewährte Praxis, um die Funktionen eines bestehenden Hauptthemas (Parent-Theme) zu ändern oder zu erweitern. Der Hauptvorteil dabei liegt in der verbesserten Sicherheit: Wenn das Haupttheme aktualisiert wird, kannst du es sicher updaten, ohne dass die von dir vorgenommenen Anpassungen an dem Untertema (z. B. Styles, Funktionen, Templates) verloren gehen. Ein Untertema benötigt dafür in der Regel nur… style.css Und ein optionaler… functions.php Die Datei funktioniert bereits – im Untertopik. style.css In China, durch @import Oder verwenden Sie eine bessere Methode zur Warteschlangenbildung, um die Styles des übergeordneten Themes einzuführen, und fügen Sie anschließend Ihre eigenen CSS-Regeln hinzu, um diese zu überschreiben. functions.php Es wird zusammen mit den Dateien mit dem gleichen Namen des übergeordneten Themas geladen – anstatt diese zu überschreiben. Dadurch können Sie neue Funktionen sicher hinzufügen.
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.
- Core Concepts and Practical Patterns of Tailwind CSS: From Atomic Classes to Responsive Design
- Das ultimative Handbuch für Website-Entwicklung: Der vollständige Prozess von der Konzeption bis zur Veröffentlichung sowie eine Analyse der Kerntechnologien
- Detaillierte Beschreibung des gesamten Prozesses des Webseitenbaus: Ein professioneller Leitfaden von der Anforderungsanalyse bis zur Bereitstellung im Einsatz
- WordPress-Themenentwicklung von Grund auf – Erstellen Sie eine einzigartige Website-Oberfläche
- Das ultimative Handbuch für Website-Bau: Ein umfassendes Praxiskonzept, von den Grundlagen bis zur professionellen Veröffentlichung
Deutsch