Einführung in die WordPress-Themenentwicklung: Erstellen Sie Ihr erstes benutzerdefiniertes Thema von Grund auf

Vorbereitungsarbeiten und Umgebungseinstellungen

Bevor du mit dem Schreiben des Codes beginnst, brauchst du eine geeignete Entwicklungsumgebung. Das bedeutet in der Regel, dass du auf deinem lokalen Computer eine Serverumgebung einrichtest, die in der Lage ist, WordPress zu betreiben. Du kannst integrierte Softwarepakete wie XAMPP, MAMP (für Mac) oder Local by Flywheel verwenden – diese ermöglichen die einstufige Installation von Apache, MySQL und PHP. Nach der Installation des lokalen Servers kannst du die neueste Version von WordPress von der Website WordPress.org herunterladen und die Installation abschließen.

Als Nächstes müssen Sie den Verzeichnisordner für WordPress-Themes finden. Er befindet sich in… wp-content/themes/In diesem Verzeichnis erstellen Sie einen Ordner für Ihr neues Thema, zum Beispiel… my-first-themeDer Name dieser Ordner ist Ihr Thema-Identifikator. Es wird empfohlen, kleine Buchstaben, Zahlen und Bindestriche zu verwenden und Leerzeichen zu vermeiden.

Die grundlegendsten Dateien eines WordPress-Themes bestehen aus nur zwei Dateien:style.css und index.php。style.css Es handelt sich nicht nur um eine Stylesheet, sondern auch um die “Identität” eines Themes – diese identifiziert das Theme anhand von Kommentarblöcken im Dateiheader an WordPress.

Empfohlene Lektüre Einführung in die WordPress-Themenentwicklung: Erstellen Sie ein benutzerdefiniertes Thema von Grund auf。

Erstellen Sie eine Datei mit den Themeninformationen.

style.css Am Anfang des Files muss eine bestimmte Stylesheet-Header-Information enthalten sein. Dies ist entscheidend dafür, dass WordPress das Theme erkennen und laden kann. Hier ist ein sehr einfaches Beispiel:

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 First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个用于学习的自定义 WordPress 主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Darunter befinden sichText Domain Dient der Internationalisierung von Themen (Übersetzung) und entspricht in der Regel dem Namen des Thema-Ordners.Theme Name Es wird in der Liste “Erscheinungsbild” -> “Themen” im WordPress-Backend angezeigt.

Erstellen Sie die Kernvorlagendateien.

index.php Dies ist die zentrale Vorlagendatei für Ihr Thema. Wenn WordPress keine spezifischeren Vorlagendateien finden kann (z. B. single.php oder page.phpWenn es benötigt wird, wird es als standardmäßiges Ersatzvorlage verwendet. Die einfachste Variante davon ist… index.php Es können nur Funktionen enthalten sein, die dazu dienen, den Kopfbereich, die Hauptschleife sowie den Fußbereich der Website abzurufen.

<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>

In diesem Moment kann Ihr Thema von WordPress erkannt und aktiviert werden. Obwohl die Funktionen noch rudimentär sind, bilden sie die Grundlage für alles Weitere.

Verständnis der Template-Hierarchie und der Kerndateien

WordPress verwendet ein intelligentes System namens “Template Hierarchy” (Template-Struktur), um zu entscheiden, welches Template-File für die aktuell angeforderte Seite verwendet werden soll. Das Verständnis dieser Struktur ist entscheidend für eine effiziente Entwicklung. Das grundlegende Prinzip lautet: Je spezifischer ein Template ist, desto höher ist seine Priorität.

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

Artikel und Seitenvorlagen

Für einzelne Blogartikel sucht WordPress nach Templates in folgender Reihenfolge:single-post-{slug}.php -> single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.phpZum Beispiel wird bei einem Artikel mit dem Pseudonym “hello-world” zuerst dieser Artikel verwendet. single-post-hello-world.php。

Für die einzelnen Seiten (Page) gilt die folgende Reihenfolge:custom template(Gegeben in den Seiten-Eigenschaften) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。

Archiv- und Startseite-Vorlagen

Auch die Seite mit der Liste der Blogartikel (Archivseite) folgt bestimmten Regeln. Startseite des Hauptblogs:home.php -> index.phpKategorien- und Archivierungseiten:category-{slug}.php -> category-{id}.php -> category.php -> archive.php -> index.phpDie Archivierung von Tags, Autoren und Datumsangaben folgt einem ähnlichen Muster.

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

Verwendung auf der Suchseite search.php404-Fehlerseite in Gebrauch 404.phpFalls diese spezifischen Dateien nicht vorhanden sind, wird letztendlich auf einen vorherigen Zustand zurückgegriffen. index.php。

Erstellen Sie häufig verwendete Vorlagendateien.

Basierend auf diesen Strukturen sollten Sie einige der am häufigsten genutzten Vorlagen erstellen, um die Funktionalitäten des Themes zu erweitern. Zuerst… header.phpEs enthält eine HTML-Dokumentation. <head> Einige Teile sowie die Kopfzeilebereiche der Webseiten.

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

<header>
    <h1><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
    <p></p>
    <nav>
        'primary',
            'container'      =&gt; false,
        ) );
        ?&gt;
    </nav>
</header>

footer.php Enthält Fußzeilen-Inhalt sowie Script-Aufrufe.

Empfohlene Lektüre Die Kernkompetenzen im Themaentwicklung mit WordPress beherrschen: Ein Leitfaden zu den besten Praktiken für das Erstellen benutzerdefinierter Themes von Grund auf。

<footer>
    <p>©</p>
</footer>

</body>
</html>

functions.php Dies ist das “Gehirn” des Themes – es dient dazu, Funktionen hinzuzufügen, Menüs zu erstellen, Stylesheets sowie Skripte zu verwalten.

Integration von Thema-Funktionen und -Designelementen

functions.php Die Datei ist nicht zwingend erforderlich, aber ohne sie sind die Funktionen des Themes sehr eingeschränkt. Diese Datei wird bei der Initialisierung des Themes automatisch geladen und bietet den idealen Ort für die Einbindung von Funktionen, Filtern und Hook-Methoden.

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

Registrierung des Navigationsmenüs und der Seitenleiste

„In“ functions.php In China wird es verwendet. register_nav_menus() Eine Funktion zur Deklaration der von einem Thema unterstützten Speisepositionen.

function my_first_theme_setup() {
    // 注册一个主导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
    // 为文章和评论添加 RSS feed 链接支持
    add_theme_support( 'automatic-feed-links' );
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持 HTML5 标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持自定义 logo
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

ausnutzen register_sidebar() Eine Funktion zum Registrieren von Widgets im Bereich der Benutzeroberfläche (Seitenleiste).

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

Dynamische Einbindung von Styles und Scripts

Die richtige Vorgehensweise besteht darin, … zu verwenden. wp_enqueue_style() und wp_enqueue_script() Es gibt eine Funktion, die CSS- und JavaScript-Dateien in die Warteschlange (Queue) aufnimmt. Dadurch werden Abhängigkeiten korrekt berücksichtigt und es verhindert, dass Dateien doppelt geladen werden.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 引入一个自定义的 CSS 文件
    wp_enqueue_style( 'my-first-theme-custom', get_template_directory_uri() . '/assets/css/custom.css', array( 'my-first-theme-style' ), '1.0' );

// 引入一个 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );

// 为评论回复功能添加脚本（仅在需要时加载）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Verbessern von Vorlagen und fortgeschrittenen Konzepten

Mit der Etablierung der Kernfunktionen des Themas kannst du beginnen, die einzelnen Template-Dateien zu verfeinern, um eine professionellere Gestaltung und mehr Funktionalität zu erreichen.

Erstellen einer Schleife zur Anzeige einer Liste von Artikeln

„In“ archive.php oder home.php In diesem Fall müssen Sie in der Regel mehrere Artikel in Form eines Zusammenfassens darstellen. Dafür können Sie die von WordPress bereitgestellten Template-Funktionen nutzen. the_excerpt()、the_post_thumbnail()。

<?php if ( have_posts() ) : ?>
    <div class="posts-list">
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" no numeric noise key 1015>
                <?php if ( has_post_thumbnail() ) : ?>
                    <a href="/de/</?php the_permalink(); ?>">
                        <?php the_post_thumbnail( 'medium' ); ?>
                    </a>
                
                <h2><a href="/de/</?php the_permalink(); ?>"></a></h2>
                <div class="entry-meta">
                    |
                </div>
                <div class="entry-summary">
                    
                </div>
                <a href="/de/</?php the_permalink(); ?>" class="read-more">Mehr lesen</a>
            </article>
        <?php endwhile; ?>
    </div>
    
    <p><?php _e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>

Implementierung eines Kommentartemplates

Die Kommentarfunktion ist ein wichtiger Bestandteil eines Blogs. WordPress bietet leistungsstarke Funktionen für die Erstellung von Kommentarvorlagen. comments_template()Die beste Praxis besteht darin, die Anzeige der Kommentare sowie das entsprechende Formular in einer separaten Datei zu speichern – meistens in einer eigenen Datei. comments.phpUnd dann… single.php Es wird in der Mitte aufgerufen.

„In“ single.php Nach dem Ausgeben des Inhalts des Artikels fügen Sie hinzu:

<?php
if ( comments_open() || get_comments_number() ) :
    comments_template();
endif;
?>

Und dann erstellen Sie es. comments.php Die Dateien dienen dazu, die Kommentarliste sowie die Darstellung der Formulare zu verarbeiten. Du kannst ein grundlegendes Beispiel aus einem vorhandenen Theme (z. B. Twenty Twenty-One) kopieren und an deine eigenen Bedürfnisse anpassen. comments.php Und es wird modifiziert – das ist ein komplexer, aber standardisierter Prozess.

Hinzufügen von benutzerdefinierten Optionen für das Thema

Um es den Nutzern zu ermöglichen, das Thema ohne Änderungen am Code anzupassen, kannst du die WordPress Customizer-API nutzen. WP_Customize_Manager Zu einem Objekt können Sie Einstellungen, Steuerelemente sowie Bereiche hinzufügen.

function my_first_theme_customize_register( $wp_customize ) {
    // 添加一个‘颜色’板块
    $wp_customize->add_section( 'theme_colors', array(
        'title'    => __( '主题颜色', 'my-first-theme' ),
        'priority' => 30,
    ) );

// 添加一个‘主色调’设置
    $wp_customize->add_setting( 'primary_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 实时预览
    ) );

// 为该设置添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label'    => __( '主色调', 'my-first-theme' ),
        'section'  => 'theme_colors',
        'settings' => 'primary_color',
    ) ) );
}
add_action( 'customize_register', 'my_first_theme_customize_register' );

Danach kannst du… style.css Oder dieser Farbwert kann dynamisch mithilfe von Inline-Styles ausgegeben werden.

Zusammenfassungen

Die Entwicklung von WordPress-Themen ist ein schrittweiser Prozess, der von der Struktur über die Gestaltung bis hin zu den Grundlagen und den Details reicht. Indem man mit den grundlegendsten Aspekten beginnt… style.css und index.php Zuerst hast du die Grundlagen für das Thema gelegt. Das Verständnis der Template-Hierarchie ermöglicht es dir, präzise Templates für verschiedene Arten von Seiten zu erstellen.functions.php Es handelt sich dabei um ein mächtiges Werkzeug, um die Funktionen deines Themes zu erweitern – es dient dazu, Navigationen, Widgets, Styleskripte sowie Anpassungsoptionen zu integrieren. Schließlich wird dein Theme durch die Optimierung des Artikellaufs, der Kommentarvorlagen und der individuellen Einstellungen sowohl professionell als auch benutzerfreundlich. Denke daran: Die ständige Referenzierung an die offizielle Dokumentation sowie den Code hochwertiger, bereits vorhandener Themes ist der beste Weg, um deine Entwicklungsfähigkeiten zu verbessern.

FAQ Häufig gestellte Fragen

Welche Dateien sind für ein WordPress-Theme mindestens erforderlich?

Theoretisch benötigt ein WordPress-Theme nur zwei Dateien:style.css und index.php。style.css Es muss eine korrekte Kopfzeile mit Themeninformationen enthalten sein, damit WordPress diese erkennen kann. index.php Als standardmäßiges Ersatztemplate für alle Seiten. Natürlich sind die Funktionen eines solchen Themes sehr begrenzt, aber es kann aktiviert und verwendet werden.

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

Sie müssen die Internationalisierungs-(I18N)-Funktionen von WordPress verwenden. functions.php In China wird es verwendet. load_theme_textdomain() Eine Funktion zum Laden der Übersetzungsdateien. In Ihrem Thema-Code sollten alle für die Benutzer bestimmten Zeichenketten durch diese Funktion ersetzt werden. __()(Dieze Zeile wird zum Ausgeben verwendet) oder _e()(Die Übersetzung wird direkt ausgegeben und verwendet Funktionen zur Umwandlung von Texten.) style.css Definiert in China Text DomainDanach kann man mit Tools wie Poedit eine .pot-Datei erstellen, die es den Übersetzern ermöglicht, die .po- und .mo-Übersetzungsdateien zu erstellen.

Warum werden meine benutzerdefinierten Styles oder Skripte nicht geladen?

Der häufigste Grund ist, dass Sie… functions.php Die Hook-Funktionen, die zur Ladung von Styles oder Scripts während des Seitenladevorgangs verwendet werden, sind nicht korrekt mit den entsprechenden Aktionen in WordPress verknüpft. Stellen Sie sicher, dass Sie die erforderlichen Dateien ( Stylesheets und JavaScript-Dateien ) bereits in Ihr WordPress-Projekt integriert haben. wp_enqueue_style() oder wp_enqueue_script() Die Funktion, durch… add_action( ‘wp_enqueue_scripts’, ‘your_function_name’ ) Mounten auf wp_enqueue_scripts Bei dieser Aktion sollten auch die Dateipfade überprüft werden.get_template_directory_uri()Ob dies korrekt ist und ob die Datei tatsächlich an dieser Adresse existiert.

Wie erstellt man ein einzigartiges Template für eine bestimmte Seite?

Es gibt hauptsächlich zwei Methoden. Die erste Methode besteht darin, Seitenvorlagen zu verwenden: Fügen Sie am Anfang der PHP-Datei einen bestimmten Kommentarblock hinzu, zum Beispiel: /* Template Name: 全宽页面 */Speichern Sie es anschließend in Ihrem Themes-Verzeichnis. Wenn Sie die Editierseite im WordPress-Backend bearbeiten, können Sie es aus der Dropdown-Liste “Seiten-Eigenschaften” -> “Template” auswählen. Eine weitere Möglichkeit besteht darin, die Template-Hierarchie zu nutzen: Wenn Sie beispielsweise ein Template für eine Seite mit dem Alias “Contact” erstellen möchten, genügt es, ein Template mit dem Namen „contact“ zu erstellen. page-contact.php Bei Dateien, die für die Darstellung einer Seite verwendet werden, verwendet WordPress automatisch diejenigen, die priorisiert werden. Der Vorteil der erstgenannten Variante besteht darin, dass die Ressourcen im Hintergrund frei zuweisen sind; der Vorteil der zweiten Variante liegt darin, dass die Namensregeln automatisch angewendet werden.