wp-content\/themes\/<\/code> Die Ordnern im Verzeichnis dienen als Identifikatoren f\u00fcr deine Themen. Es wird empfohlen, Namen aus kleinen Buchstaben, Zahlen und Bindestrichen zu verwenden \u2013 Leerzeichen sind nicht zul\u00e4ssig. Zum Beispiel k\u00f6nntest du einen Ordner mit dem Namen \u201emy-project-2023\u201c erstellen. my-first-theme<\/code> Der Ordner \u201e\u2026\u201c<\/p>\n\n\n\nIn diesem Ordner m\u00fcssen mindestens zwei Kerndateien vorhanden sein:style.css<\/code> und index.php<\/code>\u3002style.css<\/code> Es handelt sich nicht nur um Stylesheets \u2013 ihre wichtigste Funktion besteht darin, Metadaten zum Thema bereitzustellen. Diese Metadaten werden auf der WordPress-Backend-Seite \u201cErscheinungsbild\u201d -> \u201cThemen\u201d angezeigt.<\/p>\n\n\n\nErstellen Sie eine Kopfzeile f\u00fcr die Themeninformationen.<\/h3>\n\n\n\n
\u201eIn\u201c style.css<\/code> Am Anfang des Files m\u00fcssen Sie einen bestimmten Kommentarblock hinzuf\u00fcgen, um die Themeninformationen zu definieren. Hier ist ein Beispiel:<\/p>\n\n\r\n\r\n \r\n \r\n \r\n UltaHost \u2013 WordPress-Hosting-Anbieter <\/strong>\r\n 30-t\u00e4gige Geld-zur\u00fcck-Garantie, unbegrenztes Bandbreiten- und Datenbankvolumen, kostenlose DDoS-Schutzma\u00dfnahmen sowie ein Rabatt von 501 auf 4 Terabyte bei einer Kaufdauer von 3 Jahren.<\/div>\r\n <\/div>\r\n\r\n \r\n \r\n ![\"Das](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251227020448.webp\" "\\"\\"")
\r\n ![\"Das](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251229052118.webp\" "\\"\\"")
\r\n <\/a>\r\n \r\n \r\n Zugangsseite <\/a>\r\n <\/div>\r\n<\/div>\n\n\n\n\n\n\n\/*\nTheme Name: My First Theme\nTheme URI: https:\/\/example.com\/my-first-theme\/\nAuthor: Your Name\nAuthor URI: https:\/\/example.com\/\nDescription: \u4e00\u4e2a\u7b80\u6d01\u3001\u8f7b\u91cf\u7ea7\u7684\u5165\u95e8\u7ea7 WordPress \u4e3b\u9898\uff0c\u7528\u4e8e\u5b66\u4e60\u4e3b\u9898\u5f00\u53d1\u3002\nVersion: 1.0.0\nLicense: GPL v2 or later\nText Domain: my-first-theme\n*\/<\/code><\/pre>\n\n\n\nDarunter befinden sichText Domain<\/code> Dieses Element dient der Internationalisierung (Unterst\u00fctzung mehrerer Sprachen) und muss mit dem Namen Ihrer Theme-Ordner \u00fcbereinstimmen.index.php<\/code> Die Datei ist das Standardvorlagenfile f\u00fcr das Thema und dient als Ersatzvorlage f\u00fcr alle Seiten. Zuerst k\u00f6nnen Sie dort eine einfache HTML-Struktur einf\u00fcgen, um sie zu testen.<\/p>\n\n\n\nCore template files and the template hierarchy structure<\/h2>\n\n\n\n
WordPress verwendet ein System namens \u201cTemplate Hierarchy\u201d (Vorlagenhierarchie), um zu entscheiden, welche Vorlagendatei f\u00fcr eine bestimmte Seitenanfrage verwendet werden soll. Das Verst\u00e4ndnis dieser Struktur ist entscheidend f\u00fcr die Entwicklung von Themes. Die Grundidee ist folgende: WordPress beginnt mit der Suche in der spezifischsten Vorlagendatei. Wenn diese nicht gefunden wird, sucht es nach einer allgemeineren Vorlage \u2013 und schlie\u00dflich, wenn auch diese nicht vorhanden ist, nach einer weiter allgemeineren Vorlage. index.php<\/code>\u3002<\/p>\nEmpfohlene Lekt\u00fcre Einf\u00fchrung in die Entwicklung von WordPress-Themen: Erstellen Sie Ihr erstes eigenes, angepasstes Thema von Grund auf<\/a>\u3002<\/p>\n\n\n\n\nH\u00e4ufig verwendete Vorlagendateien und ihre Verwendungszwecke<\/h3>\n\n\n\nheader.php<\/code>Der Kopfbereich einer Website enth\u00e4lt in der Regel die Region, das Logo der Website sowie die Hauptnavigation.<\/li>footer.php<\/code>Der Fu\u00dfbereich einer Website enth\u00e4lt in der Regel Informationen zur Urheberrechtsverfolgung sowie zus\u00e4tzliche Links.<\/li>sidebar.php<\/code>Bereich der Seitenleiste.<\/li>index.php<\/code>Die Hauptvorlage dient als letzte R\u00fcckversicherung f\u00fcr alle Seiten.<\/li>single.php<\/code>Dient zur Anzeige eines einzelnen Blogartikels.<\/li>page.php<\/code>Dient zur Anzeige einer einzelnen Seite (z. B. \u201c\u00dcber uns\u201d oder \u201cKontakt\u201d).<\/li>archive.php<\/code>Dient zur Anzeige einer Liste von Artikelarchiven (z. B. nach Kategorien, Tags, Autoren oder Datum).<\/li>front-page.php<\/code>Dient zur Definition der Startseite der Website (falls eine statische Seite als Startseite festgelegt wurde).<\/li>home.php<\/code>Dieses Template wird verwendet, um die Indexseite der Blogartikel anzuzeigen. Falls eine statische Startseite eingestellt ist, zeigt dieses Template die Liste der neuesten Artikel.<\/li>404.php<\/code>Dient zur Anzeige der Fehlerseite \u201c404 Nicht gefunden\u201d.<\/li>search.php<\/code>Dient zur Anzeige der Suchergebnisse.<\/li>functions.php<\/code>Dies ist keine Vorlage-Datei, sondern eine Funktionen-Datei f\u00fcr ein Thema, die dazu dient, Funktionen hinzuzuf\u00fcgen, Men\u00fcs und Seitenleisten zu registrieren usw.<\/li><\/ul>\n\n\n\nTemplate Tags und Schleifen<\/h3>\n\n\n\n
In den Template-Dateien werden h\u00e4ufig \u201cTemplate-Tags\u201d verwendet. Dabei handelt es sich um PHP-Funktionen, die von WordPress bereitgestellt werden und zur Ausgabe dynamischer Inhalte dienen. bloginfo('name')<\/code> Titel der Website:the_title()<\/code> \u201eWie man effektiv mit Zeitmanagement-Tools arbeitet\u201c<\/p>\n\n\n\nDas zentrale Konzept ist die \u201cWordPress-Schleife\u201d. Es handelt sich um eine PHP-Codestruktur, die \u00fcberpr\u00fcft, ob auf der aktuellen Seite Artikel (oder eine Liste von Artikeln) vorhanden sind, die angezeigt werden m\u00fcssen, und diese anschlie\u00dfend schrittweise ausgibt. Eine sehr einfache Schleife sieht wie folgt aus:<\/p>\n\n\n\n
<h2><\/h2>\n <div class="entry-content">\n \n <\/div>\n\n <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?><\/p><\/code><\/pre>\n\n\n\n\u8fd9\u6bb5\u4ee3\u7801\u7684\u610f\u601d\u662f\uff1a\u5982\u679c\u6709\u6587\u7ae0\uff0c\u5c31\u5faa\u73af\uff08while\uff09\u6bcf\u4e00\u7bc7\uff0c\u5728\u5faa\u73af\u4e2d\u663e\u793a\u6587\u7ae0\u6807\u9898\u548c\u5185\u5bb9\uff1b\u5982\u679c\u6ca1\u6709\u6587\u7ae0\uff0c\u5219\u663e\u793a\u4e00\u6761\u9519\u8bef\u4fe1\u606f\u3002`_e()` \u662f\u4e00\u4e2a\u7528\u4e8e\u56fd\u9645\u5316\u7684\u7ffb\u8bd1\u51fd\u6570\u3002<\/p>\n\n\n\n
Integration von Thema-Funktionen und -Designelementen<\/h2>\n\n\n\n
functions.php<\/code> Es handelt sich um den \u201cVerstand\u201d Ihres Themes \u2013 alle Funktionen, die nicht zur Kernbereich der Template-Renderung geh\u00f6ren, sollten dort hinzugef\u00fcgt werden. Dieses File wird automatisch beim Initialisieren des Themes geladen.<\/p>\n\n\n\n\nFunktion zur Registrierung von Themen<\/h3>\n\n\n\n
\u201eIn\u201c functions.php<\/code> In WordPress k\u00f6nnen Sie die Funktionalit\u00e4ten mithilfe verschiedener \u201cHooks\u201d erweitern \u2013 beispielsweise Action-Hooks und Filter-Hooks. Zun\u00e4chst m\u00fcssen Sie in der Regel angeben, ob Ihr Theme bestimmte Funktionen unterst\u00fctzt. Ein Beispiel daf\u00fcr ist die Hinzuf\u00fcgung von Artikelausz\u00fcgen (Featured Images) sowie die Unterst\u00fctzung von Men\u00fcs.<\/p>\n\n\r\n\r\n \r\n \r\n \r\n hosting.com Shared Hosting <\/strong>\r\n Hohe Leistung mit AMD EPYC-CPUs, NVMe-SSD-Speicher und LiteSpeed, fachkundiger Inhouse-Support rund um die Uhr, erweiterte Sicherheitsma\u00dfnahmen einschlie\u00dflich SSL, Brute-Force-, Malware- und DDoS-Schutz, Einsparungen von bis zu 73%<\/div>\r\n <\/div>\r\n\r\n \r\n \r\n ![\"Das](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/09\/20250901222940.svg\" "\\"\\"")
\r\n ![\"Das](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251228220957.webp\" "\\"\\"")
\r\n <\/a>\r\n \r\n \r\n Zugangsseite <\/a>\r\n <\/div>\r\n<\/div>\n\n\n\n\n\n\n<?php\nfunction my_first_theme_setup() {\n \/\/ \u8ba9\u4e3b\u9898\u652f\u6301\u6587\u7ae0\u548c\u9875\u9762\u4f7f\u7528\u201c\u7279\u8272\u56fe\u50cf\u201d\n add_theme_support( 'post-thumbnails' );\n\n\/\/ \u6ce8\u518c\u5bfc\u822a\u83dc\u5355\u4f4d\u7f6e\n register_nav_menus( array(\n 'primary' => __( 'Primary Menu', 'my-first-theme' ),\n 'footer' => __( 'Footer Menu', 'my-first-theme' ),\n ) );\n\n\/\/ \u8ba9 WordPress \u7ba1\u7406\u6587\u6863\u6807\u9898\u6807\u7b7e\n add_theme_support( 'title-tag' );\n}\nadd_action( 'after_setup_theme', 'my_first_theme_setup' );\n?><\/code><\/pre>\n\n\n\n`add_action()` \u5c06\u4f60\u7684\u51fd\u6570 my_first_theme_setup<\/code> Auf WordPress montiert after_setup_theme<\/code> Stellen Sie sicher, dass dieser Aktionshaken zu dem richtigen Zeitpunkt ausgef\u00fchrt wird.<\/p>\n\n\n\nEinf\u00fchrung von Styles und Scripts<\/h3>\n\n\n\n
Moderne Webseiten sollten die Stylesheets (CSS) sowie JavaScript-Dateien korrekt \u00fcbertragen bzw. integrieren. wp_enqueue_style()<\/code> und wp_enqueue_script()<\/code> Funktionen werden in eine Warteschlange (\u201eQueue\u201c) aufgenommen, anstatt direkt in die Template-Dateien mit den `` oder ``-Tags eingef\u00fcgt zu werden. Der Vorteil dabei ist, dass Abh\u00e4ngigkeiten besser verwaltet werden k\u00f6nnen, Duplikate der Funktionen vermieden werden und die geltenden WordPress-Best Practices eingehalten werden.<\/p>\n\n\n\nfunction my_first_theme_scripts() {\n \/\/ \u5f15\u5165\u4e3b\u6837\u5f0f\u8868\n wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );\n\n\/\/ \u5f15\u5165\u81ea\u5b9a\u4e49 JavaScript \u6587\u4ef6\n wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '\/js\/navigation.js', array(), '1.0.0', true );\n}\nadd_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );<\/code><\/pre>\n\n\n\nDie Funktion `getstylesheet_uri()` verweist auf Ihre (spezifischen) Stylesheets. style.css<\/code> Die Funktion `get_template_directory_uri()` gibt die URL des aktuellen Thema-Verzeichnisses zur\u00fcck.<\/p>\nEmpfohlene Lekt\u00fcre Ein Leitfaden f\u00fcr den Einstieg in die WordPress-Theme-Entwicklung: Baue dein eigenes benutzerdefiniertes Theme von Grund auf auf<\/a>\u3002<\/p>\n\n\n\n\nErstellen von Seitenlayouts und Vorlagenkomponenten<\/h2>\n\n\n\n
Eine standardm\u00e4\u00dfige Webseite besteht in der Regel aus einem Kopfteil, dem Hauptinhalt und einem Fu\u00dfteil. WordPress empfiehlt es, wieder verwendbare Teile in separate Dateien aufzuteilen und diese anschlie\u00dfend mithilfe spezifischer Funktionen im Haupttemplate einzubinden.<\/p>\n\n\n\n\n
Aufteilen von Template-Teilen<\/h3>\n\n\n\n
Erstellen header.php<\/code>\u3001footer.php<\/code> und sidebar.php<\/code>. Unter header.php<\/code> In diesem Fall m\u00fcssen Sie den vollst\u00e4ndigen Abschnitt einf\u00fcgen und mit einem deutlichen \u00dcberschriften-Container (z. B. einem \u201e-Tag\u201c) abschlie\u00dfen. footer.php<\/code> In der Regel enden sie mit den Tags \u201e\u201c.<\/p>\n\n\r\n\r\n \r\n \r\n \r\n InterServer Shared Hosting <\/strong>\r\n Shared Hosting $2.50 USD pro Monat, erster Monat $0.1 USD Promo-Code tryinterserver, 461 Cloud-Apps Skripte, ein Klick installieren.<\/div>\r\n <\/div>\r\n\r\n \r\n \r\n ![\"Das](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251228045033.svg\" "\\"\\"")
\r\n ![\"Das](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251229054830.webp\" "\\"\\"")
\r\n <\/a>\r\n \r\n \r\n Zugangsseite <\/a>\r\n <\/div>\r\n<\/div>\n\n\n\n\n\n\nDie vollst\u00e4ndige Seite wird zusammengestellt.<\/h3>\n\n\n\n
In der Seitenvorlage (z. B.) index.php<\/code>\u3001single.php<\/code>In diesem Kontext k\u00f6nnen Sie die folgenden Funktionen verwenden, um diese Komponenten einzuf\u00fchren:<\/p>\n\n\n\n<?php get_header(); ?>\n\n<main id="primary" class="site-main">\n <?php\n \/\/ \u8fd9\u91cc\u653e\u7f6e WordPress \u5faa\u73af\n if ( have_posts() ) :\n while ( have_posts() ) : the_post();\n \/\/ \u5185\u5bb9\u8f93\u51fa\n endwhile;\n endif;\n ?>\n<\/main>\n\n<?php get_sidebar(); ?>\n<?php get_footer(); ?><\/code><\/pre>\n\n\n\n`get_header()`\u3001`get_sidebar()` \u548c `get_footer()` \u4f1a\u5206\u522b\u52a0\u8f7d\u5bf9\u5e94\u7684\u6a21\u677f\u6587\u4ef6\u3002\u4f60\u8fd8\u53ef\u4ee5\u4f7f\u7528 `get_template_part()` \u51fd\u6570\u6765\u52a0\u8f7d\u66f4\u7ec6\u7c92\u5ea6\u7684\u6a21\u677f\u90e8\u4ef6\uff0c\u4f8b\u5982 `get_template_part( 'template-parts\/content', 'page' );` \u4f1a\u5c1d\u8bd5\u52a0\u8f7d template-parts\/content-page.php<\/code> Die Datei wird geladen, sofern sie nicht existiert. template-parts\/content.php<\/code>Dies verbessert die Wiederverwendbarkeit und Wartbarkeit des Codes erheblich.<\/p>\n\n\n\nZusammenfassungen<\/h2>\n\n\n\n
Das Erstellen eines WordPress-Themes von Grund auf ist ein systematischer Lernprozess. Zun\u00e4chst m\u00fcssen Sie eine korrekte lokale Entwicklungsumgebung einrichten und die grundlegende Dateistruktur eines Themes verstehen. Der Schl\u00fcssel liegt darin, die Template-Hierarchie von WordPress zu beherrschen \u2013 sie bestimmt, wie verschiedene Inhalte dargestellt werden. functions.php<\/code> Bei der Erstellung von Dateien f\u00fcr Themes kannst du leistungsstarke Funktionen und Eigenschaften hinzuf\u00fcgen sowie die geltenden Best Practices bei der Verwaltung von Styles und Scripts einhalten. Schlie\u00dflich kannst du durch die Aufteilung der Seite in Template-Teile wie Kopfzeile, Fu\u00dfzeile und Seitenspalten sowie deren Zusammenstellung mithilfe der von WordPress bereitgestellten Funktionen einen strukturierten und leicht wartbaren Theme-Code erstellen. Indem du diesen Schritten folgst, schaffst du nicht nur dein erstes Theme, sondern legst auch eine solide Grundlage f\u00fcr die Entwicklung komplexerer und professionellerer Projekte in der Zukunft.<\/p>\n