Komplettanleitung zur Entwicklung von WordPress-Themen: Erstellen Sie von Grund auf benutzerdefinierte Webseiten

Sie möchten von Grund auf Ihr eigenes… aufbauen.WordPressBei einer Website ist es zunächst wichtig, ihr Kernkonzept – das Thema – zu verstehen. Das Thema bestimmt das Erscheinungsbild, die Struktur, die Funktionen sowie die Benutzererfahrung der Website. Im Gegensatz zum Einsatz von vorgefertigten Themes bietet die selbst entwickelte Lösung die volle Kontrolle, bessere Leistung sowie ein einzigartiges Markenimage. Egal, ob Sie ein Frontend-Entwickler sind und tiefer in die Details eindringen möchten…PHPDynamic rendering – oder?PHPBackend-Entwickler, die ihre Frontend-Fähigkeiten verbessern möchten, werden durch das Beherrschen des Thema-Developments eine neue Tür öffnen.

Vorbereitende Arbeit: Aufbau einer lokalen Entwicklungsumgebung

Bevor man die erste Zeile Code schreibt, kann eine professionelle lokale Entwicklungsumgebung die Effizienz und das Erlebnis erheblich verbessern. Dadurch werden die Risiken vermieden, die mit direkten Änderungen auf einem Online-Server einhergehen.

Konfiguration der lokalen Entwicklungsumgebung

Zunächst müssen wir auf unserem lokalen Computer eine Netzwerkserverumgebung simulieren. Es wird empfohlen, Softwarepakete wie … zu verwenden. Local(VonWP EngineProduziert von:XAMPP oder MAMPDiese Tools lassen sich mit nur einem Klick installieren.Apache、MySQLundPHP. MitLocalZum Beispiel integriert es…WordPressEinfache Einrichtung mit nur einem Knopfdruck.SSLDie Funktionen zur Erstellung von Zertifikaten sowie zur Aufzeichnung von E-Mails sind für Entwickler äußerst benutzerfreundlich.

Empfohlene Lektüre Vom Nullpunkt aus lernen, wie man WordPress-Themen entwickelt: Ein umfassender Leitfaden zur Erstellung benutzerdefinierter Website-Themen。

Nach der Installation erstellen Sie bitte eine neue…WordPress„Site.“ Bitte stellen Sie sicher, dass Ihre Angaben korrekt sind.PHPDie Version muss 7.4 oder höher sein. Denken Sie auch daran, sich den Namen der Datenbank, den Benutzernamen sowie das Passwort zu notieren – diese Informationen werden später bei der Konfiguration benötigt.

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

Code-Editierung und Versionskontrolle

Ein Handwerker, der seine Arbeit gut erledigen will, muss zuerst seine Werkzeuge schärfen. Es wird empfohlen, einen leistungsstarken Code-Editor zu verwenden, wie zum Beispiel… Visual Studio Code、PhpStorm oder Sublime TextSie bieten Syntaxhervorhebung, Code-Vorschläge, automatische Vervollständigung sowie eine umfassende Plugin-Infrastruktur.

Gleichzeitig sollten Sie unverzüglich mit dem Einsatz eines Versionskontrollsystems beginnen – die bevorzugte Option hierfür ist…GitDurch die Initialisierung eines Elements im Wurzelverzeichnis des Projekts…GitLager und verwenden es..gitignoreUm unnötige Dateien (z. B. hochgeladene Medien und Caches) auszuschließen, kannst du die Codeänderungen sicher verwalten, was das Nachvollziehen von Veränderungen sowie die Zusammenarbeit erleichtert. Befinde das Repository an einer zuverlässigen und sicheren Stelle.GitHub、GitLaboderBitbucketEs handelt sich um eine branchenübliche Vorgehensweise.

Verständnis der Dateistruktur des Themas sowie der Kernvorlagen

Ein Standard…WordPressEin Thema ist eine Ordnerstruktur, die bestimmte Dateien enthält. Das Verständnis der Funktion jeder einzelnen Datei ist die Grundlage für den Aufbau eines Themas.

Themen-Dateien, die unbedingt enthalten sein müssen:

Nach Angaben von…WordPressLaut den offiziellen Vorgaben benötigt ein grundlegendes Thema nur zwei Dateien:style.css und index.phpDarunter befinden sichstyle.cssNicht nur eine Stylesheet – sondern vielmehr die “Identität” eines Themes. Die Kommentare am Anfang der Datei enthalten Metadaten zu diesem Theme.

Empfohlene Lektüre Eine vollständige Anleitung zum Aufbau einer Website: Ein professioneller Prozess von Null bis zur Online-Veröffentlichung sowie eine Erläuterung der Kerntechniken.。

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

index.phpEs dient als Reserve-Template-Datei und wird verwendet, wenn keine anderen, spezifischeren Template-Dateien vorhanden sind. Natürlich umfasst ein ausgereiftes Thema weitaus mehr als nur diese beiden Dateien.

Häufig verwendete Vorlagendateien und ihre Hierarchie

WordPressEin Template-Hierarchiesystem wird verwendet, um zu entscheiden, welches Template für verschiedene Arten von Inhalten verwendet werden soll.PHPTemplate-Dateien – das ist ein zentrales Konzept bei der Themenentwicklung.

Ein typischer Ablauf der Vorlagenaufrufprozesse ist wie folgt:
1. 访问单篇文章：优先使用single-post.phpFalls nichts vorhanden ist, wird stattdessen … verwendet.single.phpZum Schluss ist…singular.php。
2. 访问页面：优先使用page-{slug}.phpoderpage-{id}.phpFalls nichts vorhanden ist, wird stattdessen … verwendet.page.phpZum Schluss ist…singular.php。
3. 访问文章归档页：优先使用archive-{post-type}.phpFalls nichts vorhanden ist, wird stattdessen … verwendet.archive.phpZum Schluss ist…index.php。

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

Weitere wichtige Vorlagen umfassen:header.php(Header)footer.php(Fußzeile)sidebar.php(Nebenleiste)functions.php(Funktionsdateien) sowiefront-page.php(Statische Startseite). Verstehen Sie, wie diese Dateien funktionieren bzw. wie sie genutzt werden können?get_header()， get_footer()Funktionen wie diese, die zusammengefügt werden, sind entscheidend für den Aufbau von Webseiten.

Vom Nullpunkt aus ein Thema-Grundgerüst aufbauen

Jetzt lassen Sie uns gemeinsam eine Anwendung erstellen, die den Namen “…“ trägt.“MyFirstTheme”Das Thema ‚Praxis führt zu wahrer Erkenntnis‘ bildet die Grundstruktur dieses Konzepts.“

Erstellen Sie eine grundlegende Vorlagendatei.

In deinemWordPress„Installationsverzeichnis“wp-content/themes/Unter „Neu“ erstellen Sie eine neue Eintrag mit dem Namen…my-first-themeDas Verzeichnis. Dann erstellen Sie die folgenden Dateien:

Empfohlene Lektüre Der gesamte Prozess des modernen Webseitenbaus: Von der Architekturplanung bis hin zu den Kerntechnologien und Praktiken der Bereitstellung sowie des Betriebs。

1. style.cssSchreiben Sie die oben genannten Kopfinformationen hin.
2. index.phpDies ist das grundlegendste Template.

„In“index.phpZunächst erstellen wir die einfachste Version davon.HTML5Die Struktur wird erstellt, und anschließend werden der Kopf (Header) sowie der Fuß (Footer) manuell eingefügt.

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

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1002>
    <header>
        <h1>Mein benutzerdefiniertes Thema</h1>
    </header>
    <main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            _e( '抱歉，没有找到您要的内容。', 'my-first-theme' );
        endif;
        ?&gt;
    </main>
    <footer>
        <p>© Meine Website</p>
    </footer>
    
</body>
</html>

zur Kenntnis nehmenwp_head()undwp_footer()Diese beiden „Haken“ ermöglichen es Plugins und Themes, Code an den entsprechenden Stellen einzufügen; sie müssen daher aktiviert bzw. aufgerufen werden.

Teilen Sie das Template in modulare Komponenten auf.

Der obige Code enthält alle Inhalte in einer einzigen Datei, was sehr bald zu Schwierigkeiten bei der Wartung führen wird. Als nächstes werden wir den Code modular aufteilen.

Erstellenheader.php\n, wirdBis es geöffnet wird…Alle Codezeilen, die sich vor dem Tag befinden, werden in die entsprechende Stelle verschoben.

<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1001>
<header>
    <h1><a href="/de/</?php echo esc_url( home_url( '/' ) ); ?>">Mein benutzerdefiniertes Thema</a></h1>
</header>
<main>

Erstellenfooter.phpEs wird geschlossen.Alle Codeszenen, die nach dem Tag stehen, werden in die entsprechende Position verschoben.

</main>
<footer>
    <p>©  我的网站</p>
</footer>

</body>
</html>

Dann vereinfache es noch weiter.index.phpDatei:

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        the_title( &#039;<h2>', '</h2>' );
        the_content();
    endwhile;
else :
    _e( '抱歉，没有找到您要的内容。', 'my-first-theme' );
endif;
?&gt;

Jetzt ist die Struktur deines Themas klar und leicht zu verwalten. Du kannst…WordPressSie können es im Backend unter “Erscheinungsbild” -> “Themen” sehen und aktivieren.

Integration von Kernfunktionen und benutzerdefinierten Optionen

Nachdem der grundlegende Rahmen eines Themas erstellt wurde, muss er mit Leben erfüllt werden – das bedeutet, dass weitere Inhalte hinzugefügt und die Struktur weiterentwickelt werden müssen.functions.phpFunktionen und Eigenschaften zur Datei hinzufügen.

Die Registrierung von Themes mithilfe von functions.php wird unterstützt.

functions.phpDie Datei ist zu Ihrem Thema “Backend” und dient dazu, Funktionen zu definieren, Eigenschaften zu registrieren, Filter hinzuzufügen usw. Es handelt sich nicht um eine Vorlagendatei, wird aber bei jedem Seitenladen automatisch eingebunden.

Darin können wir verwenden… add_theme_support() Funktionen werden verwendet, um die von einem Thema unterstützten Funktionen zu deklarieren. Beispielsweise können Funktionen zum Aktivieren von Artikel-Bildern mit besonderen Effekten, zum Anpassen des Logos oder zur Unterstützung von individuellen Artikelformaten aktiviert werden.

<?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' );
    // 启用自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 启用HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Die richtige Methode, Stylesheets und Skripte einzuführen:

Verwenden Sie niemals in Template-Dateien fest eingebettete („härte kodierte“) Werte. oder Tags werden verwendet, um statische Ressourcen einzubinden. Die korrekte Methode besteht darin, diese über die entsprechenden Tags zu referenzieren. wp_enqueue_style() und wp_enqueue_script() Funktionen – dies sorgt für eine effektive Abhängigkeitsverwaltung, Versionskontrolle sowie die Vermeidung von doppelten Ladungen.

„In“functions.phpFügen Sie hinzu:

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

Hinzufügen eines Navigationsmenüs

Das Navigationsmenü ist das Gerüst eines Webseites. Zunächst einmal sollte man… register_nav_menus() Funktionsregistrierungs-Position:

function my_first_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '页脚菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_menus' );

Und dann,header.phpDas ist eine gute Frage.Innerhalb der Region können Sie dieses Menü aufrufen:

<?php
wp_nav_menu(
    array(
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
        'container'      => 'nav',
        'container_class'=> 'primary-navigation',
    )
);
?>

Durch die oben genannten Schritte haben Sie ein Theme mit einer grundlegenden Struktur, Funktionalitätssupport sowie modularem Code erstellt. Obwohl es auf den ersten Blick einfach erscheint, enthält es bereits alle notwendigen Komponenten.WordPressAlle Kernkonzepte der Themenentwicklung.

Zusammenfassungen

Von der Einrichtung einer lokalen Umgebung über die Erstellung des ersten Template-Files bis hin zum Abschluss des gesamten Prozesses…functions.phpBei der Integration der Kernfunktionen haben wir bereits eine Menge Erfahrung gesammelt.WordPressDer gesamte Prozess der Schaffung eines neuen Themes von Grund auf. Der Schlüssel liegt darin, das Template-Hierarchiesystem zu verstehen – dieses System weist verschiedene Inhaltsanfragen auf die entsprechenden Ressourcen oder Komponenten zu.PHPTemplate-Dateien. Gleichzeitig ist ein modulares Denken (die Aufteilung in einzelne Komponenten) von großer Bedeutung.header.php， footer.phpStandardisierte Entwicklungsmethoden (z. B. korrekte Registrierung von Skripten, Verwendung von Hook-Funktionen) bilden die Grundlage für das Erstellen wartbarer und robuster Themes. Von diesem Ausgangspunkt aus kannst du weitere Funktionen erkunden, wie z. B. die Anpassung von Artikelausgaben, die Erstellung von Widget-Bereichen sowie die Integration weiterer Komponenten.Customizer APISowie die Entwicklung benutzerdefinierter Templates und anderer fortgeschrittener Funktionen, um so eine noch leistungsfähigere und professionellere Website zu erstellen.

FAQ Häufig gestellte Fragen

Wie fügt man einer Seite einen Seitenbereich (Sidebar) hinzu?

„In“WordPressIn diesem Kontext wird die Seitenleiste als “Widget-Region” bezeichnet. Zunächst einmal…functions.phpVerwenden Sie es in China register_sidebar() Die Funktion registriert eine oder mehrere Komponentenbereiche.

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; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Danach, in der Template-Datei, in der Sie die Seitenleiste anzeigen möchten (z. B.single.phpoderpage.phpIn diesem Kontext wird eine Funktion aufgerufen. dynamic_sidebar() Verwenden Sie eine Funktion, um es auszugeben.

Was ist ein Subthema und warum sollte man es verwenden?

Ein Untertema (Subtopic) ist ein Thema, das alle Funktionen und Styles eines anderen Themas (das als Überthema bezeichnet wird) erbt. Seine zentrale Datei ist…style.cssDarin muss unbedingt eine Überprüfung erfolgen.Template:Die Kopffelder deklarieren ihr übergeordnetes Thema.

Der größte Vorteil der Verwendung von Untertemaschen ist ihre Sicherheit und Nachhaltigkeit: Wenn das übergeordnete Thema („Parent-Theme“) aktualisiert wird, bleiben alle von Ihnen vorgenommenen Anpassungen an der Untertempe (Stiländerungen, Funktionserweiterungen, Template-Modifikationen) erhalten. Dies ist die standardmäßige und empfohlene Methode, um bestehende Themes individuell anzupassen.

Was kann passieren, wenn es in der Datei functions.php einen Fehler gibt?

functions.phpSyntaxfehler oder schwerwiegende Fehler in der Datei können dazu führen, dass die gesamte Website einen “White Screen”-Effekt aufweist – das heißt, eine leere Seite angezeigt wird. Dies liegt daran, dass die Datei nicht korrekt funktioniert und die Website nicht in der Lage ist, die erforderlichen Inhalte zu laden oder zu verarbeiten.WordPressWährend des Kernladens werden bestimmte Komponenten eingebunden; jeglicher Fehler kann den Initialisierungsprozess unterbrechen.

Wenn Sie auf diese Situation stoßen, müssen Sie folgende Schritte unternehmen:FTPOder der Host-Dateimanager – es wird ein Fehler auftreten.functions.phpDatei umbenennen (z. B. in…)functions.php.bakDadurch ignoriert die Website den Datei vorübergehend und stellt den Zugriff wieder her, sodass Sie die Fehler beheben können.

Wie erstellt man benutzerdefinierte Seitenvorlagen?

Die benutzerdefinierten Seitenvorlagen ermöglichen es Ihnen, bestimmten Seiten eine einzigartige Gestaltung zu verleihen. Beginnen Sie damit, indem Sie in Ihrem Thema-Verzeichnis eine neue Vorlage erstellen.PHPFügen Sie an der Spitze des Files einen Kommentar in einem bestimmten Format hinzu, um zu erklären, dass es sich um ein Seitenvorlage handelt.

Beispielsweise, erstellen Sie einen Namen namenspage-fullwidth.phpDie Dokumente:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板。
 */
get_header(); ?>
<!-- 你的全宽页面内容结构 -->
<?php get_footer(); ?>

Nach dem Speichern können Sie beim Erstellen oder Editieren einer Seite im Dropdown-Menü “Seiten-Eigenschaften” -> “Template” das Template “Vollbreitseite” auswählen.