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

Vorbereitungsarbeiten und Umgebungseinstellungen

Bevor du mit dem Schreiben des Codes beginnst, benötigst du eine stabile, professionelle lokale Entwicklungsumgebung. Es wird dringend empfohlen, die Themen-Dateien nicht direkt auf einem Online-Server zu ändern. Eine lokale Entwicklungsumgebung ermöglicht es dir, frei zu testen, ohne die normale Zugänglichkeit der Website zu beeinträchtigen. Du kannst Entwicklungsumgebungssoftware wie XAMPP, MAMP (für Mac) oder Laragon (für Windows) verwenden – diese installieren und konfigurieren Apache, MySQL und PHP mit nur einem Klick.

WordPress muss ebenfalls in Ihrer lokalen Umgebung installiert werden. Besuchen Sie die offizielle WordPress-Website, um das neueste Installationspaket herunterzuladen, und entpacken Sie es im Wurzelverzeichnis Ihrer lokalen Website-Serverumgebung (z. B. in dem Verzeichnis, in dem XAMPP installiert ist). htdocs Anschließend rufen Sie die Datei mit dem Installationsprogramm über einen Browser auf und führen die berühmte “Fünf-Minuten-Installation” durch. Während des Installationsvorgangs denken Sie bitte an die von Ihnen eingegebenen Daten.

Zum Schluss benötigen Sie einen praktischen Code-Editor oder eine integrierte Entwicklungsumgebung (IDE). Visual Studio Code, PhpStorm oder Sublime Text sind alle hervorragende Optionen – sie bieten Funktionen wie Syntax-Hervorhebung, Code-Vorschläge sowie Datei-Management und verbessern damit die Entwicklungseffizienz erheblich.

Empfohlene Lektüre Schritt für Schritt das Themaentwicklung mit WordPress erlernen: Von Grund auf eigene Themes erstellen。

Verständnis der Grundstruktur von WordPress-Themen

Ein WordPress-Theme ist im Wesentlichen ein /wp-content/themes/ Die Ordner im Verzeichnis enthalten eine Reihe von Dateien und Unterordnern, die bestimmten Regeln folgen. Diese Dateien arbeiten zusammen, um WordPress mitzuteilen, wie die Website aussehen und welche Inhalte sie anzeigen soll.

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

Sein zentrales Mechanismus ist die “Template-Hierarchie”. WordPress wählt automatisch das entsprechende Template aus, abhängig vom Typ der aktuellen Seite, um die Inhalte anzuzeigen. Wenn beispielsweise eine Blogartikelseite aufgerufen wird, sucht WordPress zuerst nach dem passenden Template. single.phpWenn die Startseite des Blogs aufgerufen wird, wird nach bestimmten Inhalten gesucht. home.php oder index.phpDieses Mechanismus verleiht den Themen eine große Flexibilität.

Jedes Thema muss zwei grundlegende Dateien enthalten:style.css und index.php。style.css Die Funktion dieser Datei besteht nicht nur darin, Styles bereitzustellen; der Kommentarblock am Anfang der Datei dient außerdem als “Identifikationsdokument” des Themes. Er wird verwendet, um WordPress mit Metadaten wie dem Namen, dem Autor und der Beschreibung des Themes zu informieren.index.php Es handelt sich dabei um die letzte „Sicherheitsnetz“-Option: Falls keine anderen, spezifischeren Template-Dateien vorhanden sind, verwendet WordPress diese Standard-Datei.

Eine typische Anmerkung im Themenkopf sieht wie folgt aus:

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的简单 WordPress 主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Text Domain Zur Internationalisierung dient dieser Identifier, der bei nachfolgenden Aufrufen der Übersetzungsfunktion verwendet wird.

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

Neben diesen beiden Dateien enthält ein voll funktionsfähiges Theme in der Regel auch:header.php(Webseitenkopf)footer.php(Unten auf der Webseite)sidebar.php(Nebenleiste) sowie functions.php(Dokument zur Erweiterung der Thema-Funktionen.) Indem Sie diese Grundstruktur verstehen, haben Sie das Gerüst für die Entwicklung von Themes erlernt.

Erstellen Sie die Kernvorlagendateien.

Jetzt beginnen wir mit der Erstellung des ersten Themes. In Ihrem… /wp-content/themes/ Im Verzeichnis erstellen Sie ein neues Verzeichnis und geben ihm beispielsweise den Namen „NeuesVerzeichnis“. my-first-themeDanach erstellen Sie innerhalb dieses Ordners die grundlegendsten Dateien.

Zuerst wird etwas erstellt. style.cssFügen Sie auch die in dem vorherigen Abschnitt erwähnten Themen-Headline-Anmerkungen hinzu. Anschließend erstellen Sie… index.phpDas ist deine erste Vorlage-Datei – eine der einfachsten überhaupt. index.php Es ist möglich, nur eine Schleife zu verwenden, die den Titel und den Inhalt des Artikels anzeigt:

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

<main>
  
    
      <article>
        <h2></h2>
        <div></div>
      </article>
    
    <p>Es gibt derzeit keinen Inhalt.</p>
  
</main>

Dieser Code verwendet Template-Tags. get_header(), get_sidebar(), get_footer(), the_title() und the_content()Um es funktionieren zu lassen, müssen Sie die entsprechenden Dateien für den Kopfbereich, die Seitenleiste und den Fußbereich erstellen.

Erstellen header.phpEs sollte den Anfang des HTML-Dokuments enthalten – bis zum Beginn des Hauptinhaltsbereichs.

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
</head>
<body no numeric noise key 1004>
  <header>
    <h1><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
    <p></p>
    <nav>
      'primary'
        ) );
      ?&gt;
    </nav>
  </header>

Hier,wp_head() Es handelt sich um einen entscheidenden „Hook“ (eine Schnittstelle), der es dem WordPress-Kern, Plugins sowie Themes ermöglicht, den notwendigen Code (z. B. Links zu Stylesheets) in die Kopfzeile der Seite einzufügen.body_class() Die Funktion gibt eine Reihe semantischer CSS-Klassennamen aus, die es Ihnen ermöglichen, die Styles präziser zu steuern.

Empfohlene Lektüre Die Kernarchitektur und Funktionsweise von WordPress。

Erstellen footer.php Um die geöffnete Tab zu schließen:

  <footer>
    <p>©</p>
    
  </footer>
</body>
</html>

Achten Sie darauf…wp_footer() Es ist mit wp_head() Der entsprechende „Hinterteil-Haken“ ist ebenfalls unverzichtbar.

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

Erstellen sidebar.phpVorerst kann man nur eine einfache Steuerelement-Aufrufung verwenden:

<aside>
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
</aside>

In diesem Moment verfügt Ihr Thema bereits über die grundlegende Funktion eines “Vorlagen-Systems”, das im Hintergrund aktiviert und vorab angezeigt werden kann. Obwohl es noch einfach ist, folgt es der Kernarchitektur von WordPress.

Die Funktionalität des Themes mithilfe von Functions.php verbessern

functions.php Die Datei ist das “Zentrum der Steuerung” für Ihr Thema. Es handelt sich nicht um eine Vorlage-Datei, sondern um eine PHP-Datei, die bei der Initialisierung des Themas automatisch geladen wird. Sie dient dazu, Funktionen hinzuzufügen, Komponenten zu registrieren sowie Verbindungen zu verschiedenen APIs von WordPress herzustellen. Dies ist der Schlüssel zur Professionalisierung Ihres Themas.

Sie müssen diese Datei im Wurzelverzeichnis des Themes erstellen. Zuerst fügen wir dem Theme Stylesheets und Script-Dateien hinzu. Die richtige Vorgehensweise besteht darin, diese mithilfe der von WordPress bereitgestellten Funktionen zu integrieren, anstatt sie direkt in das HTML zu schreiben. <link> Tags.

<?php
function my_first_theme_scripts() {
    // 添加主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 添加一个自定义样式表
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 添加一个 JavaScript 文件
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Hier,wp_enqueue_style() und wp_enqueue_script() Es handelt sich um eine Funktion, die zum sicheren Hinzufügen von Ressourcen verwendet wird.get_stylesheet_uri() thematically relevant style.css。add_action() Mount our function to… wp_enqueue_scripts Stellen Sie sicher, dass dieser Hook zu dem richtigen Zeitpunkt ausgeführt wird.

Als Nächstes registrieren Sie das Navigationsmenü sowie die Seitenleiste (die Bereich für Widgets):

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );

// 为“文章”类型启用文章格式支持
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 添加对 HTML5 标记格式的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 启用标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() Stellen Sie auf der Backend-Seite unter “Erscheinungsbild” -> “Menü” eine Auswahl an Menüpositionen zur Verfügung.add_theme_support() Funktionen dienen dazu, verschiedene Themenfunktionen zu aktivieren – das ist die Standardpraxis in der modernen Themenentwicklung. Zum Beispiel wird damit die Aktivierung… title-tag Danach musst du es nicht mehr tun. header.php Manuelle Ausgabe in Chinesisch: <title> Etikettiert.

Zum Schluss: Registrieren Sie einen Bereich für Widgets in der 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' );

Bis jetzt verfügt Ihr Thema über eine vollständige Abfolge von Funktionen – von der grundlegenden Darstellung bis hin zur Erweiterung der Funktionalität. Durch die Verwendung des Backend-Settings-Menüs sowie der Hinzufügung von Zusatzfunktionen („Widgets“) können Sie die dynamischen Veränderungen des Themes beobachten.

Zusammenfassungen

Vom Erstellen einer Datei, die enthält… style.css und index.php Beginnen Sie mit dem Ordner und erstellen Sie anschließend die separaten Template-Teile.header.php, footer.phpVon dort aus geht es weiter über die Nutzung leistungsstarker… functions.php Das Menü zur Dateierfassung, die Seitenleiste sowie die sichere Ladung von Ressourcen – damit haben Sie bereits den gesamten Kernprozess der Erstellung eines benutzerdefinierten WordPress-Themes durchlaufen. Der Schlüssel zu diesem Prozess liegt darin, das Template-Verzeichnis sowie das Hook-System von WordPress zu verstehen und entsprechend zu nutzen.

Du bist nicht mehr nur ein Nutzer der jeweiligen Themen, sondern auch ihr Schöpfer. Nachdem du diese Grundkenntnisse erlernt hast, kannst du dich weiter mit komplexeren Vorlagen-Dateien beschäftigen. single.php、page.php、archive.phpErkunden Sie die weiteren Möglichkeiten von WordPress-Schleifen und nutzen Sie bedingte Tags (wie z. B. is_page(), is_single()Eine genauere Steuerung der Seiten zu ermöglichen – die Welt der Themaentwicklung ist weiträumig und faszinierend; dies ist lediglich ein solider Ausgangspunkt.

FAQ Häufig gestellte Fragen

Ist es erforderlich, PHP zu beherrschen, um ein WordPress-Theme zu entwickeln?

需要具备 PHP 的基础知识，但无需达到精通的水平。你至少需要理解变量、数组、条件语句（if/else）、循环（while/foreach）以及函数的基本概念。因为 WordPress 主题开发大量使用了其内置的 PHP 函数（模板标签）和钩子系统，所以学习重点在于理解 WordPress 特有的 PHP 函数如何使用，而非从头编写复杂的 PHP 算法。

Warum müssen die Funktionen wp_head() und wp_footer() verwendet werden?

Diese beiden Funktionen sind Kern-Hooks von WordPress.wp_head() befindet sich in </head> Vor den Tags ermöglicht dies es dem WordPress-Kern, Plugins sowie Ihrer eigenen Theme, den notwendigen Code in die Kopfzeile der Seite einzufügen – beispielsweise Links zu CSS-Dateien, Meta-Tags, JavaScript-Variable usw.wp_footer() befindet sich in </body> Vor den Tags werden häufig Analysecodes sowie JavaScript-Dateien verwendet, die verzögert geladen werden. Ohne diese Elemente funktionieren viele Plugins nicht ordnungsgemäß, und sogar einige Funktionen von WordPress selbst können fehlerhaft sein.

Wie füge ich einem Thema eine Seitenvorlage hinzu?

Erstellen Sie eine neue PHP-Datei, zum Beispiel… page-fullwidth.phpAm Anfang dieses Files müssen Sie einen Kommentarblock mit dem Namen des spezifischen Templates hinzufügen. Zum Beispiel:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的页面模板
 */

Danach können Sie in dieser Datei etwas anderes schreiben als… page.php Die HTML-Struktur, zum Beispiel die Auslassung bestimmter Elemente… get_sidebar() Nach dem Speichern wird die Option “Vollbreitseite” im Drop-down-Menü “Template” unter “Seiten-Eigenschaften” im WordPress-Backend angezeigt, sodass Sie diese auswählen können.

Wie ist es nach den besten Praktiken, mit CSS und JavaScript umzugehen, wenn man Themen für Websites entwickelt?

Die beste Praxis ist es, die von WordPress bereitgestellten Funktionen und Tools zu verwenden. wp_enqueue_style() und wp_enqueue_script() Funktionen… functions.php „Mount to“ wp_enqueue_scripts Haken zum Hinzufügen von Ressourcen. Auf diese Weise können Sie: 1) Abhängigkeiten korrekt verarbeiten (z. B. wenn Ihr Skript von jQuery abhängig ist); 2) verhindern, dass dieselbe Ressource mehrfach geladen wird; 3) die Verwaltung von Plugins und anderem Themen-Code vereinfachen; und 4) die WordPress-Codierungsstandards einhalten. Vermeiden Sie unbedingt, sie direkt in den Vorlagendateien zu verwenden. <link> oder <script> Hardcodierte Ressourcen für Tags.

Wie kann meine Anwendung mehrsprachige Unterstützung (Internationalisierung) bieten?

Sie müssen zwei Dinge erledigen. Zuerst… style.css Beim Übersetzen von Kopfkommentaren und Aufruftexten ist es wichtig, das richtige “Textfeld” (Text Domain) zu verwenden. Wie in der Anleitung beschrieben, sollte dies definiert werden. Text Domain: my-first-themeZweitens, in… functions.php In allen Template-Dateien sollte der für die Übersetzung von Benutzeroberflächeninhalten verwendete Text mit den Übersetzungsfunktionen von WordPress umschlossen werden. Die am häufigsten genutzte Methode ist… __()\n(Zurück zur übersetzten Zeichenfolge) und _e()(Directly display the translated string.) Beispiel:<?php _e( ‘Hello World’, ‘my-first-theme’ ); ?>Danach können Sie Tools wie Poedit verwenden, um die Übersetzung zu erstellen. .pot Template-Dateien, die es Übersetzern ermöglichen, Texte in verschiedenen Sprachen zu erstellen. .po und .mo Dokumente.