Das ultimative Handbuch für die Entwicklung von WordPress-Themen: Erstellen Sie Ihr erstes maßgeschneidertes Thema von Grund auf

Vorbereitungsarbeiten und Umgebungseinstellungen

Bevor du mit dem Schreiben des Codes beginnst, ist eine stabile und effiziente lokale Entwicklungsumgebung von großer Bedeutung. Sie ermöglicht es dir, auch offline zu arbeiten und vermeidet die Risiken, die mit direkten Operationen auf Online-Servern verbunden sind. Zunächst musst du eine lokale Serverumgebung installieren – beispielsweise XAMPP, MAMP oder das professionellere Local by Flywheel. Diese Tools konfigurieren Apache, MySQL und PHP für dich, die Grundlagen für den Betrieb von WordPress sind.

Als Nächstes müssen Sie die neuesten WordPress-Kerndateien herunterladen und sie auf Ihrem lokalen Server installieren. Nach der Grundinstallation können Sie mit der Erstellung Ihres Themes-Verzeichnisses beginnen. Alle WordPress-Themes befinden sich… /wp-content/themes/ Im Verzeichnis. Bitte erstellen Sie hier ein neues Verzeichnis – zum Beispiel mit dem Namen „NeuesVerzeichnis“. my-first-themeDer Name dieser Ordner ist gleichzeitig auch Ihre Thema-Identifikation.

Ein effektives WordPress-Theme benötigt mindestens zwei Kerndateien:style.css und index.php。style.css Die Datei ist nicht nur eine Stylesheet, sondern auch die “Identität” eines Themes; die Kommentare im Dateihaupt enthalten alle Metadaten des Themes.

Empfohlene Lektüre Erstellen Sie eine professionelle Website: Ein vollständiger Leitfaden zum Entwickeln eines benutzerdefinierten WordPress-Themes von Grund auf。

Header-Informationen der Thema-Stylesheet-Datei

style.css Am Anfang der Datei muss ein bestimmter CSS-Comment enthalten sein, der WordPress Informationen über Ihr Thema liefert. Diese Informationen werden auf der Backend-Seite “Erscheinungsbild” -> “Themen” angezeigt.

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: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习 WordPress 主题开发的简单定制主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Darunter befinden sichText Domain Für die Internationalisierung sollte dieser Name mit dem Namen Ihrer Themenordner übereinstimmen. index.php Es handelt sich um die Standardvorlage-Datei des Themes und dient als Ersatzvorlage für alle Seiten. Ursprünglich konnte es lediglich eine einfache HTML-Struktur sein, die dazu diente, zu überprüfen, ob das Theme von WordPress korrekt erkannt wird.

Verständnis der Template-Hierarchie und Erstellung von Kerntemplates

WordPress verwendet ein intelligentes System namens “Template Hierarchy” (Template-Struktur), um zu entscheiden, welches Template-File für eine bestimmte Seite geladen werden soll. Das Verständnis dieser Regeln ist der Kern der Theme-Entwicklung. Kurz gesagt: Wenn ein Benutzer eine Seite aufruft, sucht WordPress nach dem passenden Template-File in der Reihenfolge von spezifisch bis allgemein.

Beispielsweise sucht WordPress bei der Aufrufung eines Blogartikels mit der ID 5 nacheinander nach:single-post-5.php -> single-post.php -> single.php -> singular.php -> Und schließlich kommt das Letzte. index.phpWenn eine passende Datei gefunden wird, wird sie verwendet; andernfalls wird die Suche weitergeführt.

Erstellen Sie ein Template für die Artikel-Ausgabe-Seite.

single.php Dies ist das Standardtemplate zur Anzeige eines einzelnen Blogartikels. In diesem File wirst du eine Reihe von WordPress-kernigen Template-Tags und Funktionen verwenden, um den Inhalt des Artikels auszugeben.

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

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1008>
            <header class="entry-header">
                <h1 class="entry-title"></h1>
                <div class="entry-meta">
                    发布于： | 作者：
                </div>
            </header>
            <div class="entry-content">
                
            </div>
            <footer class="entry-footer">
                &lt;?php the_tags(&#039;标签：&#039;, &#039;, &#039;, &#039;<br>'); ?&gt;
            </footer>
        </article>
        <?php
        // 输出上一篇、下一篇文章导航
        the_post_navigation();
    endwhile;
    ?>
</main>

Dieses Template verwendet… the_post() Um globale Einstellungen vorzunehmen… $post Variable, und dann durch… the_title()、the_content() Funktionen wie diese liefern die Daten der Artikel aus. Gleichzeitig wurden Template-Elemente eingeführt:get_header(), get_sidebar(), get_footer()。

Erstellen einer Seitevorlage

page.php Templates werden verwendet, um statische Webseiten anzuzeigen. Ihre Struktur… single.php Ähnlich, aber in der Regel enthalten diese Seiten keine typischen Artikelmetadaten wie Kategorien oder Tags. Sie können nach Bedarf weitere spezifische Seitenvorlagen erstellen – zum Beispiel eine Vorlage für die “Über uns”-Seite. page-about.php Wenn Sie eine Datei mit dieser Bezeichnung erstellen, wendet WordPress sie automatisch auf Seiten an, deren Titel oder Alias (“Slug”) „about“ lautet.

Integration von Template-Elementen und Navigationsmenüs

Um die Modularität und Wiederverwendbarkeit des Codes zu gewährleisten, teilen WordPress-Themes üblicherweise Teile wie die Kopfzeile, Fußzeile und Seitenspalten in separate “Template-Component”-Dateien auf. Durch die Verwendung dieser Dateien kann das Layout des Themes flexibler gestaltet und leichter angepasst werden. get_template_part() Sie können diese Komponenten mühelos in verschiedenen Templates einbinden.

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

Erstellen Sie die Header-Datei für das Thema.

header.php Die Datei enthält den Kopfbereich („Header“) einer HTML-Dokumentation. Die sichtbaren Bereiche am oberen Teil der Website, wie das Logo und die Hauptnavigation.

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

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( has_custom_logo() ) {
            the_custom_logo();
        } else {
            ?>
            <h1 class="site-title"><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
            <p class="site-description"></p>
            <?php
        }
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-primary',
                'menu_id'        =&gt; 'primary-menu',
                'container'      =&gt; false,
            )
        );
        ?&gt;
    </nav>
</header>

Schlüsselfunktionen wp_head() Es wird erlaubt, dass das WordPress-Core, Plugins sowie andere Skripte den Seitenkopf mit dem erforderlichen Code (z. B. CSS- und JS-Links) ergänzen.wp_nav_menu() Die Funktion dient dazu, ein registriertes Navigationsmenü auszugeben.

Positionierung der Registerkarte „Navigation“

Das Navigationsmenü muss zunächst im Bereich “Registrierung” der jeweiligen Theme-Datei registriert werden, damit die Benutzer es später im Backend unter “Erscheinungsbild” -> “Menü” zuweisen können. Dies geschieht in der Regel in den Einstellungen der Theme-Datei. functions.php Die Bearbeitung des Files ist abgeschlossen.

Empfohlene Lektüre Vom Nullpunkt aus lernen, wie man WordPress-Themes entwickelt: Ein umfassender Leitfaden zur Erstellung personalisierter Webseiten。

function my_first_theme_setup() {
    // 注册一个主导航菜单
    register_nav_menus(
        array(
            'menu-primary' => esc_html__( '主导航', 'my-first-theme' ),
            'menu-footer'  => esc_html__( '页脚导航', 'my-first-theme' ),
        )
    );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持文章和评论的 RSS feed 链接
    add_theme_support( 'automatic-feed-links' );
    // 支持标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() Die Funktion hat zwei Menüpositionen registriert. add_theme_support() Bei der Funktionen-Implementierung haben wir benutzerdefinierte Logos sowie Titeltagungen aktiviert – dies ist die Standardpraxis in der Entwicklung moderner WordPress-Themen.

Fortgeschrittene Funktionen und Styles für Themen

functions.php Die Datei ist Ihr Thema “Control Center” und dient dazu, Funktionen hinzuzufügen, Standardverhalten zu ändern, Skripte sowie Stylesheets zu laden. Ihre Funktion ähnelt der von Plugins, allerdings bezieht sie sich ausschließlich auf Ihr eigenes Thema.

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

Die sichere Einführung von Styles und Skripten

Die korrekte Methode zum Laden von Styles und Scripts besteht darin, sie über geeignete Mechanismen einzubinden. wp_enqueue_style() und wp_enqueue_script() Funktionen und deren Einbindung in wp_enqueue_scripts Dieser Action-Hook ist aktiviert.

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

Diese Methode stellt sicher, dass die Abhängigkeiten korrekt erfüllt werden, und verhindert das mehrfache Laden von Ressourcen. Funktion get_stylesheet_uri() Zurück zur Hauptseite style.css Die URL, und get_template_directory_uri() Geben Sie die URL zum Themaverzeichnis zurück.

Erstellen Sie eine Bereich für Widgets in der Seitenleiste.

Der Bereich für kleine Hilfsmittel (Sidebar) ermöglicht es den Benutzern, Inhaltsblöcke durch Ziehen im Hintergrund nach ihren Wünschen anzupassen. Die Registrierung eines neuen Bereichs für kleine Hilfsmittel erfolgt ebenfalls auf dieselbe Weise. functions.php In China wird dies abgeschlossen.

function my_first_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          => esc_html__( '主侧边栏', 'my-first-theme' ),
            'id'            => 'sidebar-1',
            'description'   => esc_html__( '在此添加小工具。', 'my-first-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_first_theme_widgets_init' );

Nach der Registrierung können Sie auf sidebar.php Verwendung in Template-Teilen dynamic_sidebar( 'sidebar-1' ) Die Funktion wird verwendet, um diesen Bereich auszugeben.

Zusammenfassungen

Diese Anleitung führt systematisch durch die Kernprozesse der Entwicklung von WordPress-Themen. Von der Einrichtung einer lokalen Entwicklungsumgebung und der Erstellung grundlegender Theme-Dateien über das Verständnis sowie die Implementierung des leistungsstarken Template-Systems von WordPress bis hin zur Integration von Template-Teilen, der Registrierung von Navigationsmenüs und Widget-Bereichen – und schließlich zur Veröffentlichung des fertigen Themes. functions.php Erweitere die Funktionen deines Themes sicher und sorgfältig. Wenn du diesen Schritten folgst, hast du erfolgreich ein benutzerdefiniertes Theme erstellt, das eine klare Struktur aufweist, vollständige Funktionen bietet und den WordPress-Codestandards entspricht. Dies legt eine solide Grundlage für die Entwicklung komplexerer und funktionellerer Themes in Zukunft. Denke daran: Die Entwicklung von Themes ist ein kontinuierlicher Lernprozess – kontinuierliches Üben sowie die Referenzierung an die offiziellen Dokumentationen sind der Schlüssel, um deine Fähigkeiten zu verbessern.

FAQ Häufig gestellte Fragen

Was ist die Hierarchie der WordPress-Vorlagen?
Die Template-Hierarchie ist ein System in WordPress, das bestimmt, welches Template-File für verschiedene Arten von Seiten verwendet wird. Es handelt sich dabei um eine Suchreihenfolge, die von den spezifischen bis hin zu den allgemeineren Templates verläuft. Zum Beispiel sucht WordPress bei einem bestimmten Artikel zunächst nach einem Template, das mit der ID oder dem Arttyp des Artikels übereinstimmt. Wenn kein passendes Template gefunden wird, wird die Suche schrittweise auf allgemeinere Templates fortgesetzt, bis schließlich ein passendes Template gefunden wird. index.phpDas Verständnis der Hierarchiebeziehungen ist für die Erstellung von thematisch korrekten Inhalten von entscheidender Bedeutung.

Warum muss man unbedingt `wp_enqueue_style` verwenden, um Styles zu laden?

ausnutzen wp_enqueue_style() und wp_enqueue_script() Es handelt sich um die von WordPress offiziell empfohlene und standardisierte Methode zum Laden von Ressourcen. Diese Methode behandelt Abhängigkeiten korrekt (z. B. stellt sicher, dass jQuery vor benutzerdefinierten Skripten geladen wird), verhindert das mehrfache Laden derselben Ressourcen und ist außerdem gut mit Cache-Plugins, Sub-Themes sowie anderen Bestandteilen des WordPress-Ökosystems kompatibel. Sie kann direkt in den Template-Dateien verwendet werden. oder Das Verwenden von Tags ist eine nicht empfohlene Vorgehensweise.

Was ist der Unterschied zwischen der Datei functions.php und einem Plugin?

functions.php Die Dateien sind Teil eines Themes und ihre Funktionen werden aktiviert, sobald das Theme aktiviert wird, und deaktiviert, wenn das Theme gewechselt wird. Sie dienen hauptsächlich dazu, Eigenschaften hinzuzufügen, die eng mit der visuellen Darstellung und den Funktionen des Themes verbunden sind. Die Funktionen, die durch Plugins bereitgestellt werden, sind in der Regel unabhängig vom Theme – auch wenn das Theme gewechselt wird, bleiben die Funktionen der Plugins weiterhin verfügbar. Im Allgemeinen kann eine Funktion, die stark mit dem Stil oder der Layoutstruktur eines Themes verbunden ist, in solchen Dateien abgelegt werden. functions.phpWenn es sich um eine allgemein nutzbare Funktion handelt, wäre es sinnvoller, sie als Plugin zu implementieren.

Wie kann ich meine Website so gestalten, dass sie mehrere Sprachen unterstützt (internationalisiert wird)?

Um ein Thema mehrsprachig zu unterstützen, also internationalisieren zu können (i18n), sind folgende Schritte erforderlich: Zunächst muss… style.css Der Kopf und alles andere… load_theme_textdomain() Die Einrichtung erfolgt während der Aufrufung korrekt. Text DomainZweitens, in… functions.php Aufruf in „China“ load_theme_textdomain() Eine Funktion wird verwendet, um den Verzeichnispfad der Sprachdateien anzugeben. Schließlich, und das ist der entscheidendste Schritt, werden in allen PHP-Template-Dateien des Themes… functions.php In diesem Fall werden alle für die Benutzer bestimmten Zeichenketten mit den Übersetzungsfunktionen von WordPress umgeben. esc_html__( ‘文本’, ‘my-first-theme’ ) oder _e( ‘文本’, ‘my-first-theme’ )Nach Abschluss kann man mit Tools wie Poedit eine Übersetzung erstellen. .pot Template-Dateien, die es Übersetzern ermöglichen, Texte in verschiedenen Sprachen zu erstellen. .po und .mo Dokumente.