Einführung in die Entwicklung von WordPress-Themen: Erstellen Sie Ihre Website von Grund auf

Vorbereitungsarbeiten und Umgebungseinstellungen

Bevor du mit dem Schreiben des Codes beginnst, brauchst du eine geeignete Entwicklungsumgebung. Dazu gehören eine lokale Serverumgebung (z. B. XAMPP, MAMP oder Local by Flywheel) sowie ein Code-Editor (z. B. VS Code, Sublime Text oder PHPStorm). Die lokale Serverumgebung ermöglicht es dir, das Thema sicher auf deinem eigenen Computer zu entwickeln und zu testen, ohne jedes Mal nach einer Änderung das Projekt auf einen Webserver hochzuladen.

Die Kerndateien bilden die Grundlage jedes WordPress-Themes. Ein grundlegendes Theme benötigt mindestens zwei Dateien:style.css und index.phpDarunter befinden sichstyle.css Es handelt sich nicht nur um eine Stylesheet, sondern um eine viel wichtiger funktionierende Komponente – nämlich um den “Informationsteil” („Header“) des Themes, der dem WordPress-System mitteilt, um welches Theme es sich handelt. In dieser Datei musst du mithilfe spezifischer Kommentarblöcke Metadaten wie den Namen des Themes, den Autor, eine Beschreibung sowie die Version definieren.

Darüber hinaus wird, obwohl es nicht zwingend erforderlich ist, dringend empfohlen, ein… zu erstellen.functions.php Dieses Datei ist Ihr Thema “Feature Enhancer” und dient dazu, benutzerdefinierte Funktionen hinzuzufügen, Menüs und Seitenleisten zu registrieren sowie weitere Skripte und Styles-Dateien einzubinden. Mithilfe dieses Tools können Sie die Funktionalitäten Ihres Themas erweitern, ohne die Kerndateien des Themas selbst zu ändern.

Empfohlene Lektüre Einführung in die Entwicklung von WordPress-Themen: Erstellen Sie Ihr erstes eigenes, angepasstes Thema von Grund auf。

Bei der Entwicklung moderner WordPress-Themen wird auch die Verwendung von Child-Themes empfohlen. Dies ist eine sichere Methode, um ein Theme zu personalisieren und Funktionen hinzuzufügen, ohne die Dateien des Parent-Themes direkt zu ändern. Wenn das Parent-Theme aktualisiert wird, bleiben Ihre eigenen Anpassungen (die im Child-Theme gespeichert sind) erhalten. Zum Erstellen eines Child-Themes sind ebenfalls die beiden genannten Kerndateien erforderlich.style.css In den Style-Headern wird dies durch… („In the style headers, this is achieved by…“)Template:Das Feld gibt an, zu welchem übergeordneten Thema es gehört.

UltaHost – WordPress-Hosting-Anbieter

30-tägige Geld-zurück-Garantie, unbegrenztes Bandbreiten- und Datenbankvolumen, kostenlose DDoS-Schutzmaßnahmen sowie ein Rabatt von 501 auf 4 Terabyte bei einer Kaufdauer von 3 Jahren.

Zugangsseite

Erstellung der zentralen Vorlagendatei für das Thema

WordPress nutzt ein System der Template-Hierarchie, um zu entscheiden, welches PHP-Template-File für die Darstellung der Inhalte bei einer bestimmten Seitenanfrage verwendet werden soll. Das Verständnis dieser Regeln ist entscheidend für die Entwicklung von Themes.

Artikel- und Seitenanzeigemuster

Das grundlegendste Template ist…single.phpundpage.phpSie werden jeweils verwendet, um die Anzeige von einzelnen Blogartikeln und unabhängigen Seiten zu steuern. In diesen Templates wendest du eine Reihe von WordPress-Kernfunktionen an, um den Inhalt zu iterativ auszugeben. Die wichtigste Iterationsstruktur sieht in der Regel wie folgt aus:

<h1></h1>
    <div class="entry-content">
        
    </div>

Dieser Code überprüft, ob es Artikel gibt, und fällt anschließend in eine Schleife, in der nacheinander die Titel und Inhalte der Artikel ausgegeben werden. Die Funktionen sind wie folgt:the_title()undthe_content()Dient zum Ausgeben der entsprechenden Daten.

Artikelliste und Archivvorlage

Wenn Benutzer die Startseite des Blogs, die Kategorienübersicht oder die Autorenarchive besuchen, verwendet WordPress Liste-Vorlagen. Die häufigste Liste-Vorlage ist…index.php(Als letzte, notwendige Option) undarchive.phpIn der Listevorlage durchläuft die Schleife mehrere Artikel. Normalerweise verwenden wir dazu…the_excerpt()Bitte geben Sie einen Auszug aus dem Artikel an, anstatt den vollständigen Text zu veröffentlichen.

Empfohlene Lektüre Schritt für Schritt das Themaentwicklung mit WordPress erlernen: Von Grund auf eigene Themes erstellen。

// In der Schleife werden die Artikelliste-Einträge ausgegeben.
<article>
    <h2><a href="/de/</?php the_permalink(); ?>"></a></h2>
    
</article>

the_permalink()Die Funktion dient dazu, den permanenten Link zum aktuellen Artikel zu erhalten.

Allgemeine Bestandteile eines Themas

Um die Wiederverwendbarkeit und Wartbarkeit des Codes zu verbessern, sollten Sie die gemeinsamen Seitenbereiche in separate Template-Dateien aufteilen. Dies wird erreicht, indem…get_header(), get_footer(), get_sidebar()undget_template_part()Diese Funktionen werden verwendet, um bestimmte Aufgaben auszuführen.

Zum Beispiel: Dein…header.phpDie Datei enthält den Kopfbereich einer HTML-Dokumentation.Die Region sowie das oberste Navigationsmenü der Website.single.phpIn diesem Fall müssen Sie die Funktion lediglich am Anfang aufrufen.get_header()Dann wird WordPress die entsprechenden Funktionen automatisch einbinden.header.phpInhalt:

hosting.com Shared Hosting

Hohe Leistung mit AMD EPYC-CPUs, NVMe-SSD-Speicher und LiteSpeed, fachkundiger Inhouse-Support rund um die Uhr, erweiterte Sicherheitsmaßnahmen einschließlich SSL, Brute-Force-, Malware- und DDoS-Schutz, Einsparungen von bis zu 73%

Zugangsseite

Ebenso kannst du Codeblöcke, die an mehreren Stellen wiederholt verwendet werden (z. B. Metadaten für Artikel), als solche speichern.content.phpodertemplate-parts/content.phpUnd dann verwenden Sie es im Haupttemplate.get_template_part('template-parts/content', get_post_format());Rufen Sie es auf. Der zweite Parameter ermöglicht es Ihnen, je nach Art des Artikels (z. B. Bildergalerie, Zitate) unterschiedliche Variante-Dateien zu laden.content-gallery.php）。

Die Funktionen einer Theme-Datei werden durch die Verwendung von Funktionen-Dateien erweitert.

functions.php Die Datei dient als “Zentrale” für die Funktionen eines Themes; sämtlicher funktionaler Code, der nicht direkt in die HTML-Ausgabe einfließt, sollte dort platziert werden. Dieser Code wird von WordPress automatisch beim Initialisieren des Themes geladen.

Die Funktion zur Registrierung von Themen sowie das zugehörige Menü

Eine grundlegende und notwendige Operation ist die Verwendung von…add_theme_support() Verwende Funktionen, um anzugeben, welche WordPress-Funktionen dein Thema unterstützt. Beispielsweise ist es üblich, die Aktivierung von Artikelfotos, benutzerdefinierten Menüs sowie die Unterstützung für HTML5-Markup zu ermöglichen.

Empfohlene Lektüre Die Kernarchitektur und Funktionsweise von WordPress。

function my_theme_setup() {
    // 添加文章和页面特色图片支持
    add_theme_support('post-thumbnails');
    // 为导航菜单功能添加支持
    add_theme_support('menus');
    // 为评论列表、搜索表单等添加HTML5标记支持
    add_theme_support('html5', array('comment-list', 'search-form'));
}
add_action('after_setup_theme', 'my_theme_setup');

Danach kannst du es verwenden.register_nav_menus() Eine Funktion wird verwendet, um die verfügbaren Platzierungen für Menüelemente im Thema zu definieren, wie beispielsweise “Obere Hauptnavigation” und “Fußzeilennavigation”.

Einführung von Stylesheets und JavaScript

Die korrekte Einreihung (Enqueue) von CSS- und JavaScript-Dateien in die Warteschlange ist ein Schlüsselaspekt professioneller Entwicklung. Dadurch werden Abhängigkeiten ordnungsgemäß berücksichtigt und Script-Konflikte vermieden. Unter keinen Umständen sollten diese Dateien direkt in den Template-Dateien verwendet werden.oderTags werden verwendet, um Ressourcen einzubinden.

InterServer Shared Hosting

Shared Hosting $2.50 USD pro Monat, erster Monat $0.1 USD Promo-Code tryinterserver, 461 Cloud-Apps Skripte, ein Klick installieren.

Zugangsseite

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
    // 引入自定义JavaScript文件，依赖于jQuery
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Hakenwp_enqueue_scripts Dient zum Laden von Scripts und Styles auf der Frontend-Seite einer Website.get_stylesheet_uri()undget_template_directory_uri() Die Funktion kann Ihnen helfen, die korrekte URL des Thema-Verzeichnisses zu erhalten.

Erstellen Sie eine Bereich für kleine Hilfsprogramme („Widgets“).

Die Widget-Bereiche in der Seitenleiste oder im Fußbereich ermöglichen es den Nutzern, Inhalte mithilfe einer Backend-Benutzeroberfläche auf einfache Weise anzupassen und zu personalisieren.register_sidebar() Eine Funktion kann eine neue Werkzeugleiste („Toolbar“) erstellen.

function my_theme_widgets_init() {
    register_sidebar(array(
        'name'          => '主侧边栏',
        'id'            => 'sidebar-1',
        'description'   => '此区域的小工具将显示在文章和页面侧边。',
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ));
}
add_action('widgets_init', 'my_theme_widgets_init');

Nach der Registrierung müssen Sie die Vorlagendateien (z. B.) bearbeiten.sidebar.php), die in derdynamic_sidebar('sidebar-1');Eine Funktion, die diese Region ausgibt.

Erstellung einer responsiven Layout- und Stilgestaltung

Moderne Webseiten müssen auf verschiedenen Geräten gut angezeigt werden. Das bedeutet, dass das verwendete Theme responsiv sein muss. Die Umsetzung eines responsiven Designs erfolgt hauptsächlich mithilfe von CSS-Media Queries und Fließenden Layouts (Fluid Layouts).

Mobile-First-Style-Strategy

Es wird empfohlen, eine CSS-Strategie mit “Mobile First”-Ansatz zu verwenden. Das bedeutet, zunächst die Grundstile für mobile Geräte (kleine Bildschirme) zu erstellen und anschließend mithilfe von Media Queries nach und nach weitere Styles für größere Bildschirme hinzuzufügen oder bestehende zu übernehmen.

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 0 15px;
}
.article {
    font-size: 16px;
    line-height: 1.6;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* 针对桌面设备 */
@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
    .article {
        font-size: 18px;
    }
}

Diese Strategie stellt sicher, dass der Kerninhalt auf allen Geräten zugänglich ist, und verbessert nach und nach die Benutzererfahrung auf größeren Bildschirmen.

Flexibles Umgang mit Bildern und Medieninhalten

Es ist eine grundlegende Anforderung des responsiven Designs, sicherzustellen, dass Bilder und eingebettete Inhalte (wie Videos) nicht aus ihrem Container herausragen. Eine einfache, allgemeine Regel lautet:

img,
iframe,
video {
    max-width: 100%;
    height: auto;
}

Diese CSS-Regel sorgt dafür, dass die Breite von Medienelementen nicht die Breite ihres übergeordneten Containers überschreitet und dass die Höhe proportional angepasst wird. Dadurch wird verhindert, dass die Layoutstruktur gestört wird.

Verwendung von WordPress-Hilfsklassen und -Funktionen

WordPress selbst stellt viele nützliche CSS-Klassen zur Verfügung, die Sie nutzen können, um eine genauere Steuerung der Styles zu erreichen. Zum Beispiel…Auf den Tags werden Klassen für die Art der Seite bzw. des Artikels hinzugefügt (z. B.…).page, .single-post), sowie Artikel-ID-Klassen (z. B..postid-123Während der Schleife durch die Liste der Artikel…post_class()Die Funktion generiert für den Container jedes Artikels eine Reihe von Klassennamen (z. B. Artikelformat, Kategorie usw.), was die detaillierte Gestaltung der Styles sehr erleichtert.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <!-- 文章内容 -->
</article>

In der Stylesheet kannst du die Positionierung folgendermaßen durchführen:

/* 为所有文章添加通用样式 */
article {
    margin-bottom: 2em;
}
/* 仅为“引语”格式的文章添加特殊样式 */
.format-quote {
    background-color: #f9f9f9;
    border-left: 4px solid #ccc;
    padding-left: 1em;
}

Zusammenfassungen

Die Entwicklung von WordPress-Themen ist ein Prozess, bei dem Kreativität, Frontend-Technologien (HTML, CSS, JavaScript) sowie Backend-Technologien (PHP) miteinander kombiniert werden. Beginnend mit der Erstellung eines Themas, das…style.cssundindex.phpStarten Sie mit der Grundordnerstruktur und lernen Sie schrittweise das Template-Hierarchiesystem kennen. Teilen Sie die Seiten in wiederverwendbare Template-Bauteile auf. Das Kernkonzept dabei ist…functions.phpDie Dateien bilden die Grundlage dafür, deine Theme-Funktionen zu erweitern, Menüs zu registrieren sowie Skripte zu implementieren. Schließlich sorgt ein responsives CSS-Design dafür, dass dein Theme auf allen Geräten – von Mobiltelefonen bis hin zu Desktop-Computern – ein hervorragendes Benutzererlebnis bietet. Die Einhaltung von Best Practices – wie die Verwendung von Sub-Themes für Anpassungen sowie die korrekte Einordnung von Skripten und Styles – macht dein Theme professioneller, sicherer und einfacher zu warten.

FAQ Häufig gestellte Fragen

Kann man ohne PHP-Kenntnisse WordPress-Themes entwickeln?

Obwohl es theoretisch möglich ist, das Erscheinungsbild eines bestehenden Themes nur durch Anpassungen an HTML und CSS zu verändern, ist PHP-Kenntnis unerlässlich, wenn man wirklich von Grund auf ein vollständig funktionsfähiges und WordPress-konformes Theme entwickeln möchte. Man muss die grundlegende PHP-Syntax sowie Funktionen verstehen und sich mit den spezifischen Template-Tags und dem Hook-System von WordPress vertraut machen. Es wird empfohlen, zunächst zumindest die Grundlagen von PHP sowie die grundlegenden Template-Tags von WordPress zu erlernen.

Wie wird eine entwickelte Anwendung oder ein Thema an andere Personen zur Nutzung bereitgestellt?

Bevor du ein Thema im offiziellen WordPress-Themenverzeichnis veröffentlichst oder es kommerziell verkaufst, musst du es gründlich testen und sicherstellen, dass es den Codestandards des „WordPress Theme Development Handbook“ entspricht. Dazu gehört eine Sicherheitsüberprüfung des Codes, die Gewährleistung, dass das Thema vollständig responsiv ist, sowie die Vorbereitung auf die Internationalisierung (i18n) – unter Verwendung von Übersetzungsfunktionen wie…__()und_e()Entfernen Sie anschließend alle Debugging-Codes. Danach können Sie die Dateien entweder in das offizielle Verzeichnis hochladen oder über Ihre eigene Website verbreiten.

Wie steht es zwischen den Updates von Untertemachen und Oberthemen?

Die Existenz von Untertemachen dient dazu, das Hauptthema sicher zu modifizieren. Wenn Sie ein Untertema verwenden, werden alle Ihre Anpassungen an den Styles und Funktionen in den Dateien des Untertemas gespeichert. Wenn das Hauptthema aktualisiert wird, müssen Sie es einfach wie jedes andere Thema aktualisieren – die Dateien Ihres Untertemas bleiben unverändert und alle individuellen Einstellungen bleiben erhalten. Dies ist die beste Praxis, um die Kernfunktionen (das Hauptthema) zu aktualisieren, ohne das individuelle Design (das Untertema) zu verlieren.

Wie füge ich einer meiner Themen eine benutzerdefinierte Optionenseite hinzu?

Um benutzerdefinierte Optionenseiten für fortgeschrittene Themes hinzuzufügen, wird in der Regel die WordPress-Settings-API verwendet oder ein beliebtes Options-Framework integriert (z. B. Redux, Kirki oder die Carbon Fields-Bibliothek). Die Settings-API stellt eine standardisierte Schnittstelle bereit, die es ermöglicht, Optionen sicher zu erstellen, zu überprüfen und zu speichern. Für Anfänger kann die Verwendung eines ausgereiften Frameworks die Erstellung einer benutzerfreundlichen Optionenoberfläche beschleunigen; allerdings erhöht dies die Komplexität des Themes sowie die Größe der Dateien.