WordPress-Theme-Entwicklung: Erstellen Sie Ihr erstes benutzerdefiniertes Theme von Grund auf

Verstehen der Kernstruktur von WordPress-Themen

Bevor Sie mit dem Schreiben des Codes beginnen, müssen Sie die Grundlagen eines WordPress-Themes verstehen: die Template-Dateien und die Stylesheets. WordPress verwendet eine Reihe spezifischer Dateien, um verschiedene Teile der Website anzuzeigen, und diese Dateien folgen standardisierten Namenskonventionen. Ein minimiertes Theme benötigt nur zwei Dateien:index.php(Haupt Vorlagendateien) undstyle.cssDie Kern-Stylesheets und die Themeninformationen-Dateien sind zwar bereits vorhanden, aber um eine funktionell ausgestattete Website zu erstellen, benötigen wir noch weitere Elemente.

style.cssDie Datei enthält nicht nur CSS-Regeln, sondern auch Kommentarblöcke im Dateiheader, die Metadaten des Themes definieren – wie den Thema-Namen, den Autor, die Beschreibung und die Version. So erkennt WordPress ein Theme. Ein Beispiel für einen grundlegenden Header-Kommentar lautet wie folgt:

/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Neben den Kerndateien umfasst eine typische Theme-Struktur auch:header.php(Nicken des Kopfes)footer.php(Unten auf der Seite)sidebar.php(Seitenleiste) undfunctions.php(Themenfunktionsdateien). Verstehen Sie, wie diese Dateien mithilfe von Template-Tags (z. B.) verwendet werden können.get_header(), get_footer()Die modulare Kombination von Komponenten ist der Schlüssel zu einer effizienten Entwicklung.

Empfohlene Lektüre WordPress Theme Development Starter Guide: Erstellen Sie Ihre eigene Web-Schnittstelle von Grund auf neu。

Erstellen Sie eine Themendatei und einen entsprechenden Verzeichnisstruktur.

Zunächst müssen wir im Installationsverzeichnis von WordPress…wp-content/themes/Erstellen Sie einen neuen Ordner an dieser Position. Der Name dieses Ordners sollte der Identifikator Ihres Themas sein. Es wird empfohlen, kleine Buchstaben, Zahlen und Bindestriche zu verwenden, zum Beispiel:my-first-themeAlle Themen-Dateien werden hier abgelegt.

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

Erstellen Sie eine Datei mit der Kern-Schnittstilvorlage.

Wie bereits betont wurde…style.cssEs ist erforderlich, diese Datei in der Thema-Ordner zu erstellen und die vollständigen Informationen zum Thema-Header einzufüllen. Danach kannst du mit dem Schreiben der grundlegenden CSS-Dateien beginnen, um das Erscheinungsbild der Website zu definieren. Um Störungen durch die Standardvorlagen der Browser zu vermeiden, startet man in der Regel mit der Zurücksetzung der Styles („Reset Styles“).

/* 在 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;
}

Erstellen Sie die Hauptvorlagendatei.

Als nächstes erstellen Sieindex.phpDies ist die standardmäßige, wichtigste Vorlagendatei. Ihre grundlegende Struktur sollte Aufrufe für den Kopfbereich, die Inhaltszufuhr sowie den Fußbereich enthalten. Die Vorlagetags sind eingebaute Funktionen von WordPress, die verwendet werden, um dynamischen Inhalt einzufügen.
Ein minimalistischesindex.phpDie erste Version könnte wie folgt aussehen:

<main id="primary" class="site-main">
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            // 文章内容将在这里输出
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

Template-Aufteilung: Kopfteil, Fußteil und Seitenspalte

Zur Wiederverwendung und Übersichtlichkeit des Codes werden die allgemeinen Teile einer WordPress-Theme-Seite in separate Dateien ausgegliedert.

Implementierung eines Kopf-Templates für die Website

Erstellenheader.phpDieses Datei enthält den Kopfbereich einer HTML-Dokumentation.bisDer Bereich, in dem die Tags aktiviert werden, sowie der Navigationsbereich an der oberen Seite der Website. Zu den wichtigen Vorlagen-Tags gehören…bloginfo()Dient zum Abrufen von Informationen über die Website sowiewp_head()Ein „Hook“ ermöglicht es Plugins und Themes, Code teilweise einzufügen (d.h. bestimmte Abschnitte des Codes werden direkt in die entsprechenden Bereiche eingefügt).
eine grundlegendeheader.phpBeispiel:

Empfohlene Lektüre Kompletter Leitfaden für die Entwicklung von WordPress-Themen: Erstellen Sie von Grund auf benutzerdefinierte Websites。

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body no numeric noise key 1005>

<header class="site-header">
    <div class="site-branding">
        <h1 class="site-title"><a href="/de/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p class="site-description"><?php bloginfo('description'); ?></p>
    </div>
    <nav class="main-navigation">
        'primary',
            'menu_id'        =&gt; 'primary-menu',
        ));
        ?&gt;
    </nav>
</header>

Implementierung des Templates für die Fußzeile der Website

Erstellenfooter.phpEs enthält alle Inhalte, die nach dem Ende des Hauptinhaltsbereichs folgen – beispielsweise die Fußzeilen mit Urheberinformationen – sowie weitere, äußerst wichtige Elemente.wp_footer()Hook-Anrufe sind für das normale Funktionieren vieler Plugins (z. B. zur Analyse von Code) erforderlich.

<footer class="site-footer">
    <p>©  . All rights reserved.</p>
</footer>

</body>
</html>

Verbessern der Themenfunktionen sowie der Möglichkeit zur Personalisierung

functions.phpEs handelt sich um das “Hirn” Ihres Projekts – es dient dazu, Funktionen hinzuzufügen, Funktionen zu registrieren (z. B. Navigationsmenü, Widget-Bereiche) sowie Styles in Skripte einzubauen, ohne die Kerndateien ändern zu müssen.

Funktionen, die die Registrierung von Themen unterstützen:

„In“functions.phpIn diesem Kontext kannst du folgende Elemente verwenden:add_theme_support()Funktionen dienen dazu, die von einem Thema unterstützten Funktionen zu deklarieren. Beispielsweise sind die Aktivierung von Artikelauszügen („Featured Images“) sowie die Anpassung von Logos Standardfunktionen moderner Themes.

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

<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>

Einbetten in die Stylesheet- und Skriptdateien

Die korrekte Methode zum Laden von Styles und Scripts besteht darin, sie über geeignete Mechanismen einzubinden.wp_enqueue_style()undwp_enqueue_script()Funktionen und deren Einbindung inwp_enqueue_scriptsAuf der Schlaufe. Dadurch werden Abhängigkeiten ordnungsgemäß verwaltet und eine doppelte Ladung verhindert.

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');

Zusammenfassungen

Vom Erstellen des Thema-Ordners an…style.cssVon Anfang bis zur Konstruktionindex.phpZerlegen in einzelne Bestandteileheader.phpundfooter.phpWarten Sie auf die Vorlagendateien, und dann gehen Sie weiter mit dem Prozess.functions.phpDie Dateien fügen Ihrer WordPress-Thematik wesentliche Funktionen und Ressourcen hinzu – dieser Prozess bildet die Grundlage für die Entwicklung von WordPress-Themen. Jeder Schritt betont das Konzept der Hierarchie der WordPress-Vorlagen sowie bewährte Vorgehensweisen, wie die korrekte Verwendung von Vorlagetags und Hooks. Wenn Sie diese Grundlagen beherrschen, verfügen Sie über einen soliden Ausgangspunkt, um Funktionen anzupassen und zu erweitern, um die Anforderungen verschiedener Projekte zu erfüllen.

FAQ Häufig gestellte Fragen

Wie viele Dateien benötigt mindestens ein WordPress-Theme mit dem Namen „###“?
Ein funktionierendes WordPress-Theme benötigt mindestens zwei Dateien:index.phpundstyle.cssDarunter befinden sichstyle.cssDer Kommentarblock am Anfang der Datei muss vorhanden sein und die korrekten Themeninformationen enthalten. Dies ist eine notwendige Voraussetzung, damit WordPress das Thema erkennen kann.

Empfohlene Lektüre Vom Nullpunkt zum Erfolg: Das ultimative Handbuch und Praxislehrbuch für die Entwicklung von WordPress-Themen。

Wie füge ich einer meiner Themes eine kleine Werkzeugleiste hinzu?

Sie müssen durch…functions.phpDatei zur Registrierung des Widgets-Bereichs (Sidebar). Verwenden Sie sie.register_sidebar()Funktionen werden definiert und ihre Parameter angegeben, wie z. B. Name, ID und Beschreibung. Danach können Sie diese Funktionen in den entsprechenden Template-Dateien verwenden.sidebar.php), die in derdynamic_sidebar()Eine Funktion, die es aufruft.

Warum wird mein benutzerdefiniertes Navigationsmenü nicht angezeigt?

Das liegt in der Regel daran, dass dies nicht erfolgt hat…functions.phpDie Adresse der Küchenzeile wurde korrekt registriert. Stellen Sie sicher, dass Sie die richtige Adresse verwendet haben.register_nav_menus()Eine Funktion wird verwendet, um eine Speiseposition (z. B. ‘primary’) zu registrieren, und außerdem…header.phpAufruf in „China“wp_nav_menu()Wenn…‘theme_location’Die Werte der Parameter entsprechen genau denen, die bei der Registrierung eingegeben wurden. Zum Schluss muss noch in den WordPress-Benutzeroberflächen-Einstellungen unter “Erscheinungsbild > Menü” ein bestimmtes Menü an die entsprechende Stelle zugewiesen werden.

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

我应该在什么时候使用get_template_part()函数？

get_template_part()Funktionen dienen dazu, wiederverwendbare Codeabschnitte zu modularisieren – sie eignen sich insbesondere gut für die Ausgabe von Inhalten in unterschiedlichen Formaten innerhalb von Schleifen in Artikeln. Zum Beispiel können Sie eine Funktion erstellen, die…content.phpDie Datei definiert die allgemeine HTML-Struktur für jeden Artikel, und anschließend…index.phpin der Schleife verwendenget_template_part(‘content’)Rufen Sie es auf. Dadurch wird die Wiederverwendbarkeit und Wartbarkeit des Codes verbessert und es wird einfacher, professionellere Vorlagen zu erstellen (z. B.content-page.phpDies wird möglich.