Praktischer Leitfaden zur Entwicklung von WordPress-Themes: Aufbau eines modernen, responsiven Themes von Grund auf

Vorbereitungsarbeiten und Umgebungseinstellungen

Um ein WordPress-Themenentwicklungsprojekt zu starten, ist es zunächst notwendig, eine geeignete Arbeitsumgebung einzurichten. Dazu gehört nicht nur ein lokaler Entwicklungsserver, sondern auch die Erstellung einer klaren Projektordnungsstruktur sowie die Nutzung moderner Entwicklungstools.

Es gibt verschiedene Möglichkeiten, eine lokale Entwicklungsumgebung aufzubauen. Sie können integrierte Softwarepakete wie XAMPP, MAMP oder Local by Flywheel verwenden, die es ermöglichen, Apache, MySQL und PHP schnell auf Ihrem lokalen Computer zu installieren. Für ein Erlebnis, das der Produktionsumgebung näher kommt, können Sie Docker-Container in Betracht ziehen. Darüber hinaus beginnt die Entwicklung von Themes in der Regel mit einem grundlegenden Code-Editor wie VS Code, ergänzt durch die notwendigen Plugins, um die Effizienz des Programmierens zu steigern.

Eine standardisierte und klare Struktur des Themenverzeichnisses ist die Grundlage für die Wartbarkeit eines Projekts – insbesondere bei WordPress.wp-content/themesIm Verzeichnis erstellen Sie einen Ordner mit dem Namen Ihres Themas, zum Beispiel:my-modern-themeIn diesem Ordner musst du zwei Kerndateien erstellen:style.cssundindex.phpDarunter befinden sichstyle.cssNicht nur die Stylesheets enthalten Metadaten zu den jeweiligen Themen, sondern auch die übrigen Dateien und Verzeichnisse – beispielsweise diejenigen, in denen JavaScript-Skripte gespeichert sind./jsFür die Speicherung von Vorlageteilen…/template-partsFür die Speicherung von Seitenvorlagen…/page-templatesDas kann im Laufe der Entwicklung schrittweise aufgebaut werden.

Empfohlene Lektüre Tailwind CSS – Die ultimative Anleitung: Von der Einführung bis zu praktischen Tricks und Fähigkeiten。

Themen-Style-Tabellenkopf-Informationen

„Themenbezogen“style.cssDer Dateianfang muss einen standardisiert formatierten Kommentar enthalten, der dem WordPress-System deine Theme-Informationen mitteilt. Diese Angaben sind von großer Bedeutung, da sie den Namen des Themes, den Autor, die Beschreibung, die Version usw. definieren.

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

/*
Theme Name: My Modern Theme
Theme URI: https://example.com/my-modern-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个从零开始构建的现代、响应式WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-modern-theme
*/

DavonText DomainDies dient der Internationalisierung und wird als Textbereich für nachfolgende Übersetzungsfunktionen verwendet. Nachdem diese Informationen definiert wurden, wird Ihr Thema in der WordPress-Backend-Übersicht “Erscheinungsbild” -> “Themen” angezeigt.

Importieren der Datei mit den Kernfunktionen

auch wennindex.phpundstyle.cssGenug, um ein Thema zu erkennen – doch ein voll funktionsfähiges Thema muss zusätzlich noch weitere Elemente enthalten.functions.phpDatei: Diese Datei dient nicht dazu, Inhalte direkt auszugeben, sondern fungiert als “Funktionsmotor” für ein Thema. Sie wird verwendet, um Thema-Unterstützung hinzuzufügen, Menüs und Seitenspalten zu registrieren sowie Styles und Skripte einzubinden.

Erstellen Sie im Stammverzeichnis des Themasfunctions.phpDateien. In der Anfangsphase können wir zunächst einige grundlegende Funktionalitäten hinzufügen. Du kannst dies durch…add_theme_support()Funktionen werden verwendet, um die von einem Thema unterstützten Funktionen zu deklarieren – beispielsweise Artikel-Vorschaubilder (Featured Image), benutzerdefinierte Logos, HTML5-Markierungen usw.

Erstellen Sie die Kernvorlagendateien.

WordPress verwendet ein Template-Hierarchiesystem, um zu bestimmen, wie verschiedene Arten von Inhalten angezeigt werden. Das Verständnis sowie die Erstellung dieser Kern-Template-Dateien ist der Schlüssel, um Ihre Designs in dynamische Webseiten umzusetzen.

Empfohlene Lektüre Gründliche Analyse des modernen Webseitenbaus: Ein umfassender Praxisleitfaden von der Planung bis zur Veröffentlichung。

Die grundlegendste Vorlagen-Datei istindex.phpEs handelt sich um das standardmäßige Rücksetzungs-Template für alle Seiten. Um jedoch eine genauere Steuerung zu ermöglichen, sollten wir spezifischere Templates erstellen – beispielsweise eines, das zur Anzeige der Liste der Blogartikel verwendet wird.home.phpoderindex.phpDient zur Anzeige eines einzelnen Artikels.single.phpDient zum Anzeigen von statischen Webseiten.page.phpsowie für die Anzeige von Artikelkategorien, Tags und anderen Archivseitenarchive.phpDarüber hinaus…header.phpundfooter.phpDient zum Trennen des Codes für den Kopf- und Fußbereich einer Website.get_header()undget_footer()Die Funktion wird in verschiedenen Templates aufgerufen, um die Wiederverwendung von Code zu ermöglichen.

Erstellen Sie ein Header-Template.

header.phpDatei enthält normalerweise die HTML-Dokumente<head>Die Struktur des Beginns von Abschnitten und Seiten – beispielsweise die Identifikation des Websites sowie das Hauptmenü – ist von entscheidender Bedeutung. Ein wichtiger Schritt dabei ist…<head>Aufruf in „China“wp_head()„Hook“ – das ist der Ort in der WordPress-Core-Software, in Plugins sowie in Themes, an dem die notwendigen CSS-, JavaScript-Dateien sowie Metadaten ausgegeben werden.

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php the_custom_logo(); ?>
        <div class="site-title"><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>"></a></div>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
            'menu_id'        =&gt; 'primary-menu',
        ) );
        ?&gt;
    </nav>
</header>

Implementierung einer Art „Artikel-Zyklus“

Die Artikelzirkulation ist das zentrale Mechanismus für die dynamische Ausgabe von Inhalten in WordPress.index.php、single.phpIn diesen Vorlagen verwenden wir…if ( have_posts() ) : while ( have_posts() ) : the_post();Wir durchlaufen alle Artikel und zeigen sie an.

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

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?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>
</div>

get_template_part()Eine Funktion ist eine gute Praxis – sie ermutigt dazu, die HTML-Struktur, die den Inhalt eines Artikels anzeigt, von anderen Komponenten zu trennen.template-parts/content.phpIn solchen Komponenten-Dateien wird das Hauptvorlagen-File dadurch einfacher und übersichtlicher.

Implementieren Sie responsives Design und Styling.

Moderne Webseiten müssen responsiv gestaltet sein, um auf verschiedenen Bildschirmgrößen – von Mobiltelefonen bis hin zu Desktop-Computern – ein optimales Benutzererlebnis zu bieten. Dies wird hauptsächlich mithilfe von CSS-Mediaqueries, dem Flexbox-Modell sowie der CSS-Grid-Layout-Technik erreicht.

Zunächst einmal…functions.phpVerwenden Sie es korrekt auf Chinesisch.wp_enqueue_style()Die Funktion fügt Ihre Hauptstylesheet in die Warteschlange ein. Stellen Sie sicher, dass bei der Aufrufung auch die auf WordPress eigene Stylesheets basierenden Einstellungen berücksichtigt werden.dashicons。

Empfohlene Lektüre Der ultimative Leitfaden für Tailwind CSS: Vom Einstieg bis zur Meisterschaft in der modernen Webentwicklung。

function my_modern_theme_scripts() {
    // 引入主题主要样式表
    wp_enqueue_style( 'my-modern-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义脚本（如果有）
    wp_enqueue_script( 'my-modern-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()-`get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_modern_theme_scripts' );

Mobile-First-CSS-Strategie

CSS sollte nach der “Mobile-First”-Strategie erstellt werden. Das bedeutet, zunächst die Grundstile für kleine Bildschirmgeräte (z. B. Mobiltelefone) zu definieren und anschließend mithilfe von Media Queries zusätzliche Styles sowie Anpassungen der Layouts für größere Bildschirme (Tablets, Desktop-Computer) hinzuzufügen.

/* 基础样式 - 针对移动设备 */
.site-header {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.main-navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .site-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .main-navigation ul {
        flex-direction: row;
        gap: 2rem;
    }
}

/* 针对大桌面设备 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

Bearbeiten von responsiven Bildern

WordPress bietet eine umfassende Unterstützung für responsive Bilder.the_post_thumbnail()Führen Sie die Funktion aus und übergeben Sie die entsprechenden Größenparameter – WordPress generiert anschließend automatisch die Ausgabe mit den angegebenen Daten.srcsetundsizes„Attribute of“

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

Tags ermöglichen es dem Browser, das am besten geeignete Bildfile je nach Bildschirmgröße des Geräts auszuwählen, wodurch die Ladeleistung optimiert wird.

<?php if ( has_post_thumbnail() ) : ?>
    <figure class="post-thumbnail">
        <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?>
    </figure>
<?php endif; ?>

Hinzufügen der Funktionen für Themen und Personalisierung

Nachdem ein grundlegendes Thema erstellt wurde, können verschiedene Funktionen mithilfe der WordPress-API hinzugefügt werden, um seine Benutzerfreundlichkeit und Professionalität zu verbessern. Dazu gehören benutzerdefinierte Menüs, Widget-Bereiche (Seitenleisten) sowie die Anpassung des Themas mithilfe von Customizern oder Optionenseiten.

Registrieren Sie sich für das Navigationsmenü.

„In“functions.phpVerwenden Sie es in Chinaregister_nav_menus()Eine Funktion wird verwendet, um festzulegen, welche Menüpositionen Ihr Thema unterstützt. Anschließend können Benutzer im Backend unter “Erscheinungsbild” -> “Menü” Menüelemente diesen Positionen zuweisen.

function my_modern_theme_setup() {
    // 注册一个主菜单
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary Menu', 'my-modern-theme' ),
        'footer' => esc_html__( 'Footer Menu', 'my-modern-theme' ),
    ) );
    // 添加其他主题支持...
}
add_action( 'after_setup_theme', 'my_modern_theme_setup' );

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

Die Bereich für kleine Hilfsmittel (Sidebar) ermöglicht es den Benutzern, die Seitenblöcke durch Ziehen von Hilfsmitteln selbst zu gestalten.register_sidebar()Die Funktion wird registriert. In der Regel erstellst du mehrere Widget-Bereiche für die Hauptseiteleiste, die Fußzeilen-Widget-Region usw.

function my_modern_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar', 'my-modern-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'my-modern-theme' ),
        '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_modern_theme_widgets_init' );

Nach der Registrierung finden Sie die Vorlagendateien (z. B.) in …sidebar.php), die in derdynamic_sidebar( 'sidebar-1' )Durch die Aufrufung der Funktion wird dieser Bereich angezeigt.

Integration der Customizer-API

Der WordPress-Customizer ermöglicht es den Nutzern, Theme-Einstellungen in Echtzeit anzupassen. Mithilfe der Customizer-API können einfache Einstellungen hinzugefügt werden, wie zum Beispiel die Auswahl von Farben oder das Hochladen eines Logos. Dafür ist die Nutzung bestimmter Funktionen des Customizers erforderlich.$wp_customize->add_setting()und$wp_customize->add_control()Method.

function my_modern_theme_customize_register( $wp_customize ) {
    // 添加一个站点标题颜色的设置
    $wp_customize->add_setting( 'header_textcolor', array(
        'default'           => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'    => __( 'Header Text Color', 'my-modern-theme' ),
        'section'  => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_modern_theme_customize_register' );

Und dann inheader.phpIn diesem Fall kann man dies durchführen, indem man…get_theme_mod( 'header_textcolor' )Diesen Wert abrufen und auf verschiedene Weise anwenden – beispielsweise durch in-line-Style-Attribute.

Zusammenfassungen

Die Entwicklung eines modernen, responsiven WordPress-Themes von Grund auf ist ein systematisches Projekt, das von Entwicklern erfordert, nicht nur mit PHP und den Kern-APIs von WordPress vertraut zu sein, sondern auch HTML5, CSS3 (insbesondere Flexbox/Grid und Media Queries) sowie JavaScript beherrschen zu können. Der gesamte Prozess folgt modularen und wartungsfreundlichen Prinzipien: Beginnend mit der Einrichtung der Umgebung und der Definition der Thema-Informationen, werden schrittweise PHP-Dateien erstellt, die den Template-Strukturen folgen, um die grundlegende Funktionalität des Blogs zu realisieren. Anschließend wird mithilfe einer “Mobile-First”-CSS-Strategie und responsiver Bildtechnologien sichergestellt, dass die Website auf allen Geräten optimal dargestellt wird. Abschließend werden mit den leistungsstarken Funktionen der WordPress-API Navigationsmenüs, Widget-Bereiche und Anpassungsmöglichkeiten hinzugefügt, um den Nutzern eine flexible Individualisierung zu ermöglichen. Indem Sie diesen Schritten folgen, können Sie ein professionelles, effizientes und leicht wartbares WordPress-Theme erstellen.

FAQ Häufig gestellte Fragen

Welche Kerntechnologien muss man beherrschen, um WordPress-Themes zu entwickeln?

Um ein vollständiges WordPress-Theme zu entwickeln, ist es notwendig, eine Reihe von Kerntechnologien zu beherrschen. Zunächst einmal kommt PHP zum Einsatz – schließlich ist WordPress selbst in PHP programmiert, und alle Template-Dateien sowie die Funktionalitäten basieren auf dieser Programmiersprache. Ebenfalls wichtig sind HTML5 und CSS3, die zur Erstellung der Struktur und des Designs der Seiten verwendet werden. Insbesondere das responsive Design hängt von CSS-Mediaqueries sowie modernen Layout-Modellen wie Flexbox und Grid ab. Ein grundlegendes Verständnis von JavaScript ist ebenfalls erforderlich, um interaktive Funktionen zu implementieren. Abschließend ist es unerlässlich, die Kernkonzepte von WordPress zu verstehen, wie z. B. die Hierarchie der Templates, die Ausgabe von Artikeln, Hooks sowie Filter.

Was bewirkt der „Text Domain“-Einstellung in der Datei „style.css“?

Text DomainEs handelt sich um einen Schlüsselidentifier für die Internationalisierung und Lokalisierung von Themes. Seine Funktion besteht darin, einen eindeutigen Namensraum für alle übersetzbaren Zeichenketten in Ihrem Theme zu erstellen. Im Code wird dieser Identifier verwendet, wenn Sie Elemente bearbeiten, die übersetzt werden sollen.__('Hello World', 'my-modern-theme')oder_e('Read More', 'my-modern-theme')Bei einer solchen Übersetzungsfunktion ist der zweite Parameter das Textfeld. Dadurch wird sichergestellt, dass Übersetzungstools (wie Poedit) die zu Ihrem Thema gehörenden Zeichenketten korrekt erkennen und extrahieren können, um anschließend die Übersetzung zu erstellen..pound.moÜbersetzen Sie die Dateien, sodass Ihr Thema problemlos in jede Sprache übersetzt werden kann.

Wie kann man ein Thema so konfigurieren, dass es die Funktion von Artikel-Abbildern („Artikel-Abbildern“) unterstützt?

Um sicherzustellen, dass ein Thema Artikel-Abbildungen (auch als „Featured Images“ bezeichnet) unterstützt, müssen Sie entsprechende Einstellungen in den Konfigurationen des Themas vornehmen.functions.phpFügen Sie in die Datei die entsprechenden Erklärungen zur Themenunterstützung hinzu.add_theme_support()Funktion, und übergeben Sie die entsprechenden Parameter/daten.'post-thumbnails'Parameter: Sie können diese Funktion für alle Artikelarten aktivieren oder festlegen, dass sie nur für bestimmte Artikelarten (z. B.…) gilt.postundpageAktivieren Sie dies auf der entsprechenden Ebene.

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    // 或者指定文章类型：add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
    // 你还可以在这里定义默认的缩略图尺寸：set_post_thumbnail_size( 800, 600, true );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Nach der Aktivierung der Unterstützung wird auf der Artikeldienstbearbeitungsseite ein Meta-Feld für “Besonderes Bild” angezeigt, über das Benutzer Bilder hochladen oder auswählen können. In der Vorlage wird dies entsprechend verwendet.has_post_thumbnail()Prüfen Sie, ob es Vorschaubilder gibt, und verwenden Sie diese, falls vorhanden.the_post_thumbnail()Eine Funktion, die es anzeigt.

Warum wird die Funktion `get_template_part` empfohlen?

get_template_part()Funktionen sind eine der besten Praktiken für die Wiederverwendung von Code und die Modularisierung bei der Entwicklung von WordPress-Themen. Sie dienen hauptsächlich dazu, häufig verwendeten Template-Codes (z. B. die HTML-Struktur zur Anzeige von Artikelinhalten) in separate Komponenten-Dateien auszulagern. Dadurch entstehen mehrere deutliche Vorteile: Zum einen wird der Code lesbarer und wartbarer, da nicht mehr der gesamte Haupttemplate-File-Inhalt durchgesehen werden muss.index.phpEs wurde sehr übersichtlich gestaltet; außerdem wurde die Flexibilität verbessert – Sie können je nach Bedingungen (z. B. Art des Artikels) unterschiedliche Komponenten-Dateien laden.get_template_part( 'template-parts/content', 'page' )Die Ladung erfolgt prioritär.content-page.phpSchließlich erleichtert dies die Überarbeitung von Untertemachen: Für eine Änderung der Anzeige-Logik des Hauptthemas genügt es, eine Komponenten-Datei mit dem gleichen Namen bereitzustellen.