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

Vorbereitungen vor dem Start

Bevor du mit dem Schreiben von Code beginnst, musst du sicherstellen, dass die Entwicklungsumgebung bereit ist. Zunächst benötigst du eine lokale Serverumgebung – beispielsweise XAMPP, MAMP oder Docker. Außerdem ist ein Code-Editor unerlässlich; Visual Studio Code oder PHPStorm sind beide gute Wahlmöglichkeiten. Am wichtigsten ist jedoch, dass du die neueste Version von WordPress installiert hast und dass es ordnungsgemäß funktioniert.

Als Nächstes gehen Sie in den Installationsordner Ihres WordPress-Systems.wp-content/themesIm Ordner erstelle einen neuen Ordner, der deine Themendirektorie werden soll. Zum Beispiel kannst du ihn „MyProjects“ nennen.my-first-themeDer Name dieses Verzeichnisses wird direkt zu Ihrem Thema-Identifikator werden; daher empfehlen wir die Verwendung von Kleinbuchstaben, Zahlen und Bindestrichen.

Im Thema-Ordner gibt es zwei Dateien, die für das Starten eines WordPress-Themes unerlässlich und als Mindestanforderung gelten:style.cssundindex.phpOhne diese Elemente kann WordPress dein Theme nicht in der Liste “Erscheinungsbild” -> “Themes” im Backend erkennen.

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

Verstehen Sie die zentrale Dateistruktur des Themas.

Ein voll funktionsfähiges WordPress-Theme besteht aus einer Reihe von Template-Dateien, die einer bestimmten Namenskonvention folgen. Jede Datei ist für die Darstellung eines unterschiedlichen Teils der Website verantwortlich.

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

Style Sheets und Themeninformationen

style.cssDateien dienen nicht nur dazu, CSS-Styles zu speichern; ihre Kopfzeilen (Header-Regionen) werden von WordPress genutzt, um Metadaten der jeweiligen Themes abzurufen. Diese Metadaten enthalten wichtige Informationen über das Theme. Die Kopfzeilen müssen sich unbedingt am Anfang der Datei befinden und einem bestimmten Format entsprechen.

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

“Text Domain” wird für die Internationalisierung verwendet und ist eine wichtige Kennzeichnung für das spätere Laden der Übersetzungsdateien. Nachdem Sie diese Informationen eingegeben haben, aktualisieren Sie die Theme-Page im WordPress-Backend. Dann sollten Sie ein Bildschirmfoto (“Miniatur”) mit dem Namen „Mein erstes Theme“ sehen können.

Die Funktion der Hauptvorlagendatei („Main Template File“)

index.phpDies ist die Hauptvorlagendatei für Ihr Thema und gleichzeitig die standardmäßige “Rücksetzungs”-Vorlage des Websites. Wenn WordPress keine spezifischeren Vorlagendateien finden kann (z. B.single.phpoderpage.phpWenn dies der Fall ist, wird es verwendet.index.phpDie grundlegende Struktur besteht darin, die WordPress-Header-Datei, den Haupt-Inhaltsblock sowie die Footer-Datei aufzurufen.

<main id="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>

<?php get_footer(); ?>

Erweiterung des Basistemplates und Einbindung von Funktionen

Nurindex.php、style.cssDas reicht nicht aus. Wir müssen Teile wie den Kopf, den Fuß und die Seitenspalten voneinander trennen, um die Struktur klarer zu gestalten, und die Kernfunktionen des Themas integrieren.

Empfohlene Lektüre Vom Nullpunkt aus: Eine Schritt-für-Schritt-Anleitung zur Entwicklung eines eigenen WordPress-Themes。

Trennen Sie die Header- und Footer-Templates voneinander.

Erstellenheader.phpDie Datei enthält eine Dokumenttypdeklaration sowie die HTML-Struktur des Inhalts.Einige Teile sowie die Titel und Navigationselemente der Website.wp_head()„Hooks“ dienen dazu, sicherzustellen, dass die benötigten Skripte und Styles sowohl in das Plugin als auch in den Kern von WordPress korrekt eingefügt werden.

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

<header>
    <h1><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>

Erstellenfooter.phpDie Datei enthält die Fußzeileninformationen der Website und ruft am Ende eine bestimmte Funktion auf.wp_footer()Haken.

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

</body>
</html>

So, auf diese Weise…index.phpIn diesem Fall können wir es verwenden.get_header()undget_footer()Funktionen werden verwendet, um sie einzuführen.

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 eine Funktionsdatei.

functions.phpEs handelt sich um das “Gehirn” des Themes – es dient dazu, Funktionen hinzuzufügen, Menüs zu registrieren, spezielle Bilder zu aktivieren sowie die Seitenausstattung zu definieren. Es ist keine Template-Datei, sondern eine PHP-Datei, die bei der Initialisierung des Themes automatisch geladen wird.

Im Folgenden finden Sie…functions.phpEin grundlegendes Beispiel dafür:

<?php
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
function my_first_theme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_register_menus' );

// 引入主题的样式表和脚本
function my_first_theme_enqueue_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 引入一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_enqueue_scripts' );
?>

Erstellen Sie mehr Vorlagendateien.

Um unterschiedlichen Arten von Seiten eine passendere Layout-Struktur zu bieten, müssen wir weitere spezielle Template-Dateien erstellen.

Empfohlene Lektüre Von der Installation bis zur Perfektion: Eine vollständige Anleitung zur Erstellung einer WordPress-Website und eine ausführliche Erläuterung praktischer Tipps.。

Artikel-Einzelseite und Seitenvorlage

single.phpDient zum Rendering eines einzelnen Blogartikels. Seine Struktur entspricht der …index.phpÄhnlich, aber meistens enthält es Kommentarvorlagen.comments.phpDer Aufruf von…

page.phpDient zum Rendering von statischen Webseiten. In der Regel werden keine Metadaten wie Kategorien oder Tags angezeigt; der Fokus liegt vielmehr auf dem Inhalt der Seite selbst.

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

Artikel-Archiv-Liste-Vorlage

archive.phpDient zum Anzeigen von Kategorien, Tags, Autoren, Datumsangaben usw. auf Archivseiten. Sie können dabei bedingte Tags verwenden, wie zum Beispiel…is_category()、is_tag()Damit unterschiedliche Archivtypen erkannt und die entsprechenden Titel angezeigt werden können.

Erstellen einer 404-Fehlerseite

404.phpEs handelt sich um die Seite, die angezeigt wird, wenn ein Benutzer auf eine nicht existierende URL zugreift. Eine gute 404-Seite sollte einen freundlichen Hinweis, eine Suchleiste sowie Links zu den wichtigsten Seiten enthalten, um dem Benutzer zu helfen, das gewünschte Inhalts zu finden.

Zusammenfassungen

Mit dieser Anleitung hast du den gesamten Prozess abgeschlossen – von der Erstellung von Ordnern und Kerndateien über das Verständnis der Template-Hierarchie bis hin zur Erweiterung der Funktionen deines Themes und der Erstellung spezieller Templates. Du hast nun ein Theme erstellt, das über eine grundlegende Struktur verfügt, von WordPress erkannt wird und über Erweiterungsmöglichkeiten verfügt. Obwohl es auf den ersten Blick einfach erscheint, enthält es bereits alle wesentlichen Konzepte. Als Nächstes kannst du tiefer in die Nutzung von Template-Tags, benutzerdefinierten Abfragen sowie WordPress-Cycles eindringen und lernen, wie du benutzerdefinierte Artikeltypen und Theme-Customizer-Optionen erstellst, um die Funktionen deines Themes noch weiter zu stärken und zu personalisieren.

FAQ Häufig gestellte Fragen

Warum wird mein Thema im WordPress-Backend nicht angezeigt?
Bitte überprüfen Sie zunächst, ob Ihre Thema-Ordner an der richtigen Stelle abgelegt sind.wp-content/themes/Im Verzeichnis. Zweitens müssen Sie überprüfen, ob sich im Ordner die erforderlichen Dateien bzw. Elemente befinden.style.cssundindex.phpDatei. Zum Schluss öffnen Sie sie.style.cssStellen Sie sicher, dass der Formatierungsblock mit den Themeninformationen an der Oberseite des Dokuments vollständig korrekt ist – insbesondere…Theme Name:Diese Zeile.

Wie füge ich meiner Website die Unterstützung für ein benutzerdefiniertes Logo hinzu?

Sie benötigen Informationen zum Thema…functions.phpFügen Sie eine Zeile Code zum Aktivieren dieser Funktion in die Datei hinzu.add_theme_support( ‘custom-logo’ )Funktion: Nach der Aktivierung können Benutzer das Logo in den Einstellungen “Erscheinungsbild” -> “Anpassen” -> “Sitzungsidentität” hochladen und festlegen. Sie müssen dies ebenfalls in den entsprechenden Systemkonfigurationen vornehmen.header.phpVerwenden Sie es an der geeigneten Stelle.the_custom_logo()Eine Funktion, die es anzeigt.

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

functions.phpDie Funktionen in diesem Bereich sind eng mit dem aktuell aktivierten Thema verbunden. Wenn Sie das Thema wechseln, werden diese Funktionen nicht mehr verfügbar sein. Die Funktionen von Plugins hingegen sind unabhängig vom Thema – sie werden immer aktiviert, solange das Plugin installiert und eingeschaltet ist. Wenn Ihre Funktionen stark mit der visuellen Darstellung des Themas zusammenhängen (z. B. die Positionierung von Registrierungsformularen oder die Definition von Layouts), sollten Sie diese Funktionen daher am besten in das Thema selbst integrieren.functions.phpWenn es sich um allgemeine Funktionen handelt (z. B. Kontaktformulare, SEO-Optimierung), eignen sie sich besser als Plugins.

Wie kann ich mein Thema mehrsprachig machen?

Sie müssen zwei Dinge erledigen. Erstens: Während der Entwicklung sollten alle für die Benutzer bestimmten Zeichenketten mit einer Übersetzungsfunktion umhüllt werden.__( ‘文本’, ‘my-first-theme’ )oder_e( ‘文本’, ‘my-first-theme’ )Und stellen Sie sicher, dass…‘my-first-theme’Undstyle.cssErstens muss der in der Dokumentation angegebene “Text Domain” übereinstimmen. Zweitens sollte man Werkzeuge wie Poedit verwenden, um alle zu übersetzenden Zeichenketten aus dem Code Ihrer Theme-Dateien zu extrahieren und daraus eine Übersetzungsdatenbank zu erstellen..potDie Dateien werden anschließend von den Übersetzern in die entsprechenden Sprachen übersetzt..poUnd das kompilierte….moDie Datei wird in das Thema eingefügt./languages/Im Verzeichnis.