{"id":70803,"date":"2024-08-02T09:24:47","date_gmt":"2024-08-02T08:24:47","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=70803&#038;preview=true&#038;preview_id=70803"},"modified":"2024-08-07T14:24:50","modified_gmt":"2024-08-07T13:24:50","slug":"klassiches-wordpress-theme-erstellen","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/","title":{"rendered":"Wie man ein klassisches WordPress-Theme erstellt: Schritt-f\u00fcr-Schritt-Anleitung"},"content":{"rendered":"<p>WordPress ist ein sehr beliebtes <a href=\"https:\/\/kinsta.com\/de\/blog\/content-management-system\/\">Content Management System (CMS)<\/a> f\u00fcr die Erstellung von Blogs, <a href=\"https:\/\/kinsta.com\/ecommerce\/\">E-Commerce-Shops<\/a> und anderen Websites. Es zeichnet sich durch seine Flexibilit\u00e4t aus und unterst\u00fctzt Tausende von <a href=\"https:\/\/kinsta.com\/de\/blog\/kostenlose-vs-kostenpflichtige-wordpress-themes\/\">kostenlosen und kostenpflichtigen Themes<\/a> f\u00fcr verschiedene Plattformen, was den Prozess der Website-Erstellung beschleunigt.<\/p>\n<p>Die wahre St\u00e4rke von WordPress liegt jedoch in seinen Anpassungsm\u00f6glichkeiten, denn du kannst das Aussehen deiner Website mit verschiedenen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/\">Page Buildern<\/a> und Block-Themes nach deinem Geschmack gestalten. Aber was ist, wenn diese Optionen immer noch nicht deinen speziellen Bed\u00fcrfnissen entsprechen? Die gute Nachricht ist, dass du dein Theme von Grund auf neu entwickeln kannst.<\/p>\n<p>Dieser Leitfaden beschreibt die Erstellung eines klassischen <a href=\"https:\/\/kinsta.com\/de\/tools\/wordpress-theme-detector\/\">WordPress-Themes<\/a>. Du lernst Schritt f\u00fcr Schritt, wie du ein Theme erstellst und erh\u00e4ltst so die Grundlage, um in Zukunft fortgeschrittenere Themes zu erstellen.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Du fragst dich vielleicht, was ein klassisches WordPress-Theme ist, was es zu einem klassischen Theme macht und ob es noch andere Arten von Themes gibt. Wenn dir diese Fragen in den Sinn kommen, lautet die direkte Antwort, dass ein klassisches WordPress-Theme die traditionellen PHP-Vorlagendateien und Funktionen verwendet, um die Struktur und das Layout der Website zu erstellen.<\/p>\n<p>Das unterscheidet sich von den modernen Block-Themes, die mit dem <a href=\"https:\/\/kinsta.com\/courses\/gutenberg-block-development\/history-of-gutenberg-block-editor\/\">Gutenberg-Editor<\/a> eingef\u00fchrt wurden und die Bl\u00f6cke und <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-full-site-editing\/\">Full Site Editing (FSE)<\/a> zum Erstellen und Verwalten von Theme-Elementen verwenden. Beide Arten haben ihre Vorteile, aber dieser Leitfaden konzentriert sich auf die klassischen Themes.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Voraussetzungen<\/h2>\n<p>Die Entwicklung deines Themes von Grund auf ist ein technischer Prozess, der das Schreiben von Code beinhaltet. Du solltest mit den folgenden Dingen vertraut sein:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-php\/\">PHP<\/a><\/strong> &#8211; Unverzichtbar f\u00fcr das Hinzuf\u00fcgen von Funktionen und dynamischen Inhalten zu deinem Theme. Es ist das R\u00fcckgrat von WordPress.<\/li>\n<li><strong><a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML<\/a><\/strong> &#8211; Wird verwendet, um die Struktur der Vorlagen deines Themes zu erstellen.<\/li>\n<li><strong><a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">CSS<\/a><\/strong> &#8211; Wird verwendet, um dein Theme zu gestalten und sicherzustellen, dass es auf verschiedenen Ger\u00e4ten und Browsern gut aussieht.<\/li>\n<\/ul>\n<p>Au\u00dferdem ist es wichtig, eine Entwicklungsumgebung einzurichten. Diese kannst du mit <a href=\"https:\/\/kinsta.com\/de\/docs\/devkinsta\/\">DevKinsta<\/a>, einer lokalen Entwicklungssuite f\u00fcr WordPress-Websites, erstellen, indem du diese Schritte befolgst:<\/p>\n<ol start=\"1\">\n<li>Besuche die <a href=\"https:\/\/kinsta.com\/de\/devkinsta\/\">DevKinsta-Website<\/a>, um die Anwendung f\u00fcr dein Betriebssystem herunterzuladen.<\/li>\n<li>Befolge die Installationsanweisungen f\u00fcr dein Betriebssystem.<\/li>\n<li>\u00d6ffne DevKinsta und klicke auf <strong>Neue WordPress-Website<\/strong>.<\/li>\n<li>W\u00e4hle dann die Option <strong>Neue WordPress-Website<\/strong> und f\u00fclle die Felder <strong>Website-Name<\/strong>, <strong>WordPress-Admin-Benutzername<\/strong> und <strong>WordPress-Admin-Passwort<\/strong> aus.<\/li>\n<li>Klicke abschlie\u00dfend auf <strong>Website erstellen<\/strong> und warte 30-60 Sekunden, bis die Website erstellt ist.<\/li>\n<\/ol>\n<p>Sobald deine Website erstellt ist, kannst du sie in der Vorschau ansehen, auf dein WP-Dashboard zugreifen und sogar den Dateipfad zur lokalen WP-Installation auf deinem Computer sehen, sodass du Zugriff auf den gesamten Code hast.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/create-site-devkinsta.png\" alt=\"Website-Details in DevKinsta\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Website-Details in DevKinsta<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Angenommen, du hast eine Live-Site auf MyKinsta. Du kannst <a href=\"https:\/\/kinsta.com\/de\/docs\/devkinsta\/devkinsta-integration\/#pull-a-site-from-kinsta\">deine Seite zu DevKinsta ziehen<\/a>, um lokal daran zu arbeiten, oder deinen <a href=\"https:\/\/kinsta.com\/de\/blog\/verwendest-sftp-verbindung-wordpress-herzustellen\/\">bevorzugten SFTP-Client<\/a> wie <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">FileZilla<\/a> zusammen mit den STFP-Details deiner Seite verwenden, um auf deine WordPress-Dateien zuzugreifen<\/p>\n<\/aside>\n\n<h2>Verstehen der WordPress-Theme-Struktur<\/h2>\n<p>Bevor du Schritt f\u00fcr Schritt in die Erstellung deines klassischen Themes einsteigst, ist es wichtig, die Struktur eines klassischen WordPress-Themes und die wichtigsten beteiligten Dateien zu verstehen. Dieses Wissen bildet eine solide Grundlage f\u00fcr die Entwicklung deines Themes.<\/p>\n<h3>Das WordPress-Theme-Verzeichnis<\/h3>\n<p>Alle WordPress-Themes werden im Verzeichnis <code>wp-content\/themes directory<\/code> deiner WordPress-Installation gespeichert. Jedes Theme befindet sich in einem eigenen Ordner innerhalb dieses Verzeichnisses.<\/p>\n<h3>Die wichtigsten Dateien in einem WordPress-Theme<\/h3>\n<p>Es gibt zwei wichtige Dateien, die jedes klassische WordPress-Theme enthalten muss:<\/p>\n<ul>\n<li><code>index.php<\/code> &#8211; Dies ist die Hauptvorlagendatei, die als Fallback f\u00fcr alle anderen Vorlagendateien dient. Sie ist die Kerndatei, die WordPress verwendet, um Inhalte anzuzeigen.<\/li>\n<li><code>style.css<\/code> &#8211; Diese Datei enth\u00e4lt die Metadaten des Themes und benutzerdefinierte CSS-Stile. Sie ist wichtig, um das Erscheinungsbild des Themes zu definieren und wichtige Informationen wie Name, Autor und Version bereitzustellen.<\/li>\n<\/ul>\n<p>Um dein Theme gut zu strukturieren und weitere Funktionen hinzuzuf\u00fcgen, kannst du zus\u00e4tzliche Vorlagendateien verwenden, wie z. B. die folgenden, die f\u00fcr klassische Themes \u00fcblich sind und in dem in diesem Leitfaden erstellten Beispiel-Theme verwendet werden:<\/p>\n<ul>\n<li><code>header.php<\/code>: Diese Datei kann den Kopfbereich deines Themes enthalten, einschlie\u00dflich des Logos und des Navigationsmen\u00fcs der Seite.<\/li>\n<li><code>footer.php<\/code>: Diese Datei sollte den Fu\u00dfzeilenbereich deines Themes enthalten.<\/li>\n<li><code>functions.php<\/code>: In dieser Datei kannst du benutzerdefinierte Funktionen, Features und Theme-Support-Optionen hinzuf\u00fcgen.<\/li>\n<li><code>single.php<\/code>: Diese Vorlagendatei wird verwendet, um einzelne Blogbeitr\u00e4ge anzuzeigen.<\/li>\n<li><code>page.php<\/code>: Die Vorlagendatei f\u00fcr die Anzeige statischer Seiten.<\/li>\n<\/ul>\n<p>Jetzt, wo du die wichtigsten Dateien und ihre Funktionen kennst, gehen wir Schritt f\u00fcr Schritt vor, um dein klassisches WordPress-Theme zu erstellen.<\/p>\n<h2>Wie man ein klassisches WordPress-Theme erstellt<\/h2>\n<p>Ein bekanntes Sprichwort besagt, dass man am besten lernt, indem man etwas tut. Wenden wir dieses Prinzip an, indem wir ein klassisches Blog-Theme erstellen, das deine WordPress-Beitr\u00e4ge auf der Startseite mit benutzerdefiniertem CSS-Styling und zus\u00e4tzlichen Funktionen anzeigt.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/classic-blog-theme.png\" alt=\"Klassisches WordPress-Blog-Theme\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Klassisches WordPress-Blog-Theme<\/figcaption><\/figure>\n<h3>Schritt 1: Erstelle einen neuen Theme-Ordner<\/h3>\n<p>Erstelle einen Ordner im Verzeichnis <code>themes<\/code>, z. B. <code>myblogtheme<\/code>.<\/p>\n<h3>Schritt 2: Hinzuf\u00fcgen von Theme-Metadaten-Informationen<\/h3>\n<p>Als N\u00e4chstes richten wir die Themendetails in der Datei <code>style.css<\/code> ein. Hier ist ein Beispiel f\u00fcr einige Metadaten, die du in <code>style.css<\/code> einf\u00fcgen kannst:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: Kinsta Blog Theme\nAuthor: Joel Olawanle\nAuthor URI: https:\/\/kinsta.com\/blog\/author\/joelolawanle\/\nDescription: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design.\nVersion: 1.0\nLicense: GNU General Public License v3 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.html\n*\/<\/code><\/pre>\n<p>Im obigen Code:<\/p>\n<ul>\n<li><strong>Theme-Name<\/strong>: Der Name deines Themes, der im WordPress-Adminbereich unter <strong>Darstellung<\/strong> &gt; <strong>Themes<\/strong> angezeigt wird.<\/li>\n<li><strong>Autor<\/strong>: Zeigt den Namen des Erstellers des Themes an.<\/li>\n<li><strong>Autoren-URI<\/strong>: Verweist auf die Website oder das Profil des Autors.<\/li>\n<li><strong>Beschreibung<\/strong>: Bietet einen \u00dcberblick \u00fcber den Zweck und die Funktionen des Themes.<\/li>\n<li><strong>Version<\/strong>: Zeigt die aktuelle Version des Themas f\u00fcr Updates an.<\/li>\n<li><strong>Lizenz<\/strong>: Gibt die Vertriebsbedingungen an.<\/li>\n<li><strong>Lizenz-URI<\/strong>: Verweist auf den vollst\u00e4ndigen Text der Lizenz.<\/li>\n<\/ul>\n<p>Mehr \u00fcber diese Felder erf\u00e4hrst du im <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/main-stylesheet-style-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Theme-Handbuch<\/a>.<\/p>\n<p>Nachdem du diese Informationen in deine <code>style.css<\/code> Datei eingef\u00fcgt hast, navigiere in deinem WordPress-Adminbereich zu <strong>Erscheinungsbild<\/strong> &gt; <strong>Themes<\/strong>. Dort wird das neu erstellte Theme aufgelistet. Wenn du auf die <strong>Theme-Details<\/strong> klickst, wirst du feststellen, dass alle Informationen, die du hinzugef\u00fcgt hast, dort erscheinen.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/theme-details.png\" alt=\"Details zum klassischen Blog-Theme\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Details zum klassischen Blog-Theme<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Wenn du eine <code>screenshot.png<\/code> Datei in den Stammordner deines Themes einf\u00fcgst, erscheint sie als Vorschaubild auf der <strong>Themeseite<\/strong>. So kannst du leichter erkennen, wie ein Theme aussehen wird.<\/p>\n<\/aside>\n\n<p>Nachdem wir nun die Datei <code>style.css<\/code> erstellt haben, k\u00f6nnen wir uns an die Erstellung der anderen wichtigen Themedateien machen.<\/p>\n<h3>Schritt 3: Erstelle die Hauptvorlagendatei f\u00fcr dein Theme<\/h3>\n<p>Die Datei <code>index.php<\/code> dient als Hauptvorlagendatei f\u00fcr dein Thema. Jeder Code, den du hier hinzuf\u00fcgst, wird verwendet, um den Hauptinhalt deiner Seite anzuzeigen.<\/p>\n<p>Wenn du hier zum Beispiel einfachen <a href=\"https:\/\/kinsta.com\/de\/blog\/bearbeitest-wordpress-code\/\">HTML-Code<\/a> hinzuf\u00fcgst, wird alles angezeigt, wenn du das Theme aktivierst und eine Vorschau anschaust. Wenn du jedoch Informationen aus deinem WordPress CMS abrufen willst, um sie in der Vorlagendatei deines Themes anzuzeigen, verwendest du hier PHP, um WordPress-Funktionen hinzuzuf\u00fcgen.<\/p>\n<p>Hier siehst du, wie die Grundstruktur der <code>index.php<\/code> Datei aussehen kann:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    <!-- Main content goes here -->\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>In der obigen Struktur werden <code>get_header()<\/code> und <code>get_footer()<\/code> verwendet, um die Kopf- und Fu\u00dfzeilen aus ihren jeweiligen Vorlagendateien (<code>header.php<\/code> und <code>footer.php<\/code>) zu beziehen.<\/p>\n<p>Wir werden die Datei <code>index.php<\/code> mit dem richtigen Code f\u00fcllen, aber lass uns zuerst an den Kopf- und Fu\u00dfzeilen des Themes arbeiten.<\/p>\n<h3>Schritt 4: Die Header-Datei erstellen<\/h3>\n<p>Die Datei <code>header.php<\/code> zeigt den Kopfbereich deiner Website an, der normalerweise Elemente wie das Website-Logo und das Navigationsmen\u00fc enth\u00e4lt. Sie enth\u00e4lt auch Stylesheets, Skripte und Metatags. So sieht unsere <code>header.php<\/code> Datei aus:<\/p>\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;\n\n&lt;body &lt;?php body_class(); ?&gt;&gt;\n    &lt;header class=\"header-container\"&gt;\n        &lt;div class=\"my-logo\"&gt;\n            &lt;?php\n            if ( function_exists('the_custom_logo') && has_custom_logo() ) {\n                the_custom_logo();\n            } else {\n                \/\/ Fallback image\n                ?&gt;\n                &lt;a href=\"&lt;?php echo home_url('\/'); ?&gt;\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/dummy-logo.png\" alt=\"&lt;?php bloginfo('name'); ?&gt;\" class=\"custom-logo\" width=\"100px\"&gt;\n                &lt;\/a&gt;\n                &lt;?php\n            }\n            ?&gt;\n        &lt;\/div&gt;\n        &lt;nav&gt;\n            &lt;?php wp_nav_menu(array(\n                'theme_location' =&gt; 'header-menu',\n                'menu_class' =&gt; 'header-menu'\n            )); ?&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<p>Wir werden jeden Teil dieser Datei aufschl\u00fcsseln und erkl\u00e4ren und die entsprechenden <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-functions-php\/\">Funktionen<\/a> und <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-hooks\/\">Hooks<\/a> zu <code>functions.php<\/code> hinzuf\u00fcgen.<\/p>\n<p>Beginnen wir mit dem Abschnitt <code>&lt;head&gt;<\/code>. Dieser Abschnitt enth\u00e4lt wichtige Metadaten, den Titel der Seite, die Zeichenkodierung und die Funktion <code>wp_head()<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;<\/code><\/pre>\n<p>Mit der Funktion <code>language_attributes();<\/code> werden die Sprachattribute f\u00fcr das HTML-Dokument festgelegt. Dann ist die Funktion <code>wp_head();<\/code> wichtig, denn sie erm\u00f6glicht es WordPress und Plugins, wichtige Elemente wie Stylesheets und Skripte in den Abschnitt <code>&lt;head&gt;<\/code> einzuf\u00fcgen.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Schlie\u00dfe WordPress-Funktionen immer in <code>&lt;?php ... ?&gt;<\/code> -Tags ein.<\/p>\n<\/aside>\n\n<p><a href=\"https:\/\/learn.wordpress.org\/lesson-plan\/enqueueing-scripts-and-styles\/\">F\u00fcge das Stylesheet ein<\/a>, indem du folgendes zu <code>functions.php<\/code> hinzuf\u00fcgst:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_enqueue_styles() {\n    \/\/ Enqueue the main stylesheet\n    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());\n}\n\nadd_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');<\/code><\/pre>\n<p>Die Funktion <code>wp_enqueue_style()<\/code> f\u00fcgt das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-css\/\">Haupt-Stylesheet<\/a> in den Head-Bereich ein. Wir stellen der Funktion das Pr\u00e4fix <code>my_custom_theme<\/code> voran, um Konflikte mit anderen Themes oder Plugins zu vermeiden. Du kannst das Stylesheet auch direkt in den head-Tag mit dem <code>&lt;link&gt;<\/code> -Tag einf\u00fcgen.<\/p>\n<p>In \u00e4hnlicher Weise k\u00f6nnen wir eine Funktion deklarieren, die den Titel der Website in den Head-Bereich einf\u00fcgt:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_wp_title() {\n    add_theme_support('title-tag');\n}\n\nadd_action('after_setup_theme', 'my_custom_theme_wp_title');<\/code><\/pre>\n<p>Dank der Funktion <code>wp_head()<\/code> werden der Stil und der Titel-Tag dynamisch zum Header hinzugef\u00fcgt. Du kannst das \u00fcberpr\u00fcfen, indem du deine WordPress-Website mit den Entwicklertools deines Browsers ansiehst. Im Abschnitt <code>&lt;head&gt;<\/code> solltest du den Stylesheet-Link und das dynamisch erzeugte Titel-Tag sehen und damit best\u00e4tigen, dass sie enthalten sind.<\/p>\n<p>Als N\u00e4chstes haben wir im Body den Abschnitt f\u00fcr die Navigationsleiste angegeben, in dem wir ein Dummy-Logo anzeigen und eine Option f\u00fcr die Verwendung eines benutzerdefinierten Logos in der WordPress-Site-Identit\u00e4t einrichten:<\/p>\n<pre><code class=\"language-php\">&lt;body&gt;\n    &lt;header class=\"header-container\"&gt;\n        &lt;div class=\"my-logo\"&gt;\n            &lt;?php\n            if ( function_exists('the_custom_logo') && has_custom_logo() ) {\n                the_custom_logo();\n            } else {\n                \/\/ Fallback image\n                ?&gt;\n                &lt;a href=\"&lt;?php echo home_url('\/'); ?&gt;\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/dummy-logo.png\" alt=\"&lt;?php bloginfo('name'); ?&gt;\" class=\"custom-logo\" width=\"100px\"&gt;\n                &lt;\/a&gt;\n                &lt;?php\n            }\n            ?&gt;\n        &lt;\/div&gt;<\/code><\/pre>\n<p>Der Logo-Abschnitt verwendet die Funktion <code>the_custom_logo()<\/code>, um ein benutzerdefiniertes Logo anzuzeigen, wenn eines eingestellt ist. Wenn kein benutzerdefiniertes Logo eingestellt ist, wird ein Standardbild angezeigt.<\/p>\n<p>Um die Unterst\u00fctzung f\u00fcr benutzerdefinierte Logos zu aktivieren, f\u00fcge den folgenden Code zu <code>functions.php<\/code> hinzu:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_setup() {\n    add_theme_support('custom-logo', array(\n        'height'      =&gt; 100,\n        'width'       =&gt; 400,\n        'flex-height' =&gt; true,\n        'flex-width'  =&gt; true,\n    ));\n}\n\nadd_action('after_setup_theme', 'my_custom_theme_setup');<\/code><\/pre>\n<p>Diese Funktion f\u00fcgt die Unterst\u00fctzung f\u00fcr ein benutzerdefiniertes Logo hinzu. Zum Schluss noch der Abschnitt zum Navigationsmen\u00fc:<\/p>\n<pre><code class=\"language-php\">        &lt;nav&gt;\n            &lt;?php wp_nav_menu(array(\n                'theme_location' =&gt; 'header-menu',\n                'menu_class' =&gt; 'header-menu'\n            )); ?&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<p>Die Funktion <code>wp_nav_menu()<\/code> zeigt das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-menue\/\">Navigationsmen\u00fc<\/a> an, das der Position &#8222;Header Menu&#8220; zugewiesen ist. Um das Navigationsmen\u00fc zu registrieren, stelle sicher, dass du diesen Code in <code>functions.php<\/code> hast:<\/p>\n<pre><code class=\"language-php\">register_nav_menus(array(\n    'header-menu' =&gt; __('Header Menu', 'my-custom-theme'),\n));<\/code><\/pre>\n<p>So sieht deine <code>function.php<\/code> Datei jetzt aus:<\/p>\n<pre><code class=\"language-php\"> 100,\n        'width'       =&gt; 400,\n        'flex-height' =&gt; true,\n        'flex-width'  =&gt; true,\n    ));\n}\nadd_action('after_setup_theme', 'my_custom_theme_setup');\n\nfunction my_custom_theme_enqueue_styles() {\n    \/\/ Enqueue the main stylesheet\n    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());\n}\nadd_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');\n\n\/\/ Function to add the site title to the head section\nfunction my_custom_theme_wp_title() {\n    add_theme_support('title-tag');\n}\nadd_action('after_setup_theme', 'my_custom_theme_wp_title');\n?&gt;<\/code><\/pre>\n<p>Wenn du diese Schritte befolgst, stellst du sicher, dass dein Header ein benutzerdefiniertes Logo unterst\u00fctzt und ein Navigationsmen\u00fc anzeigt, sodass er dynamisch und leicht \u00fcber das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-admin\/\">WordPress-Admin-Dashboard<\/a> anpassbar ist.<\/p>\n<h3>Schritt 5: Erstelle die Footer-Datei<\/h3>\n<p>Die Datei <code>footer.php<\/code> ist f\u00fcr die Anzeige des Footer-Bereichs deiner Website verantwortlich. Bei diesem Theme wird in der Datei <code>footer.php<\/code> nur das Copyright-Jahr angezeigt:<\/p>\n<pre><code class=\"language-php\">&lt;footer&gt;\n  &lt;p&gt;Copyright \u00a9 2024&lt;\/p&gt;\n&lt;\/footer&gt;\n&lt;?php wp_footer(); ?&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>In diese Datei f\u00fcgen wir die Funktion <code>wp_footer()<\/code> ein, \u00e4hnlich wie wir wp_head() in den Header eingef\u00fcgt haben. Die Funktion <code>wp_footer()<\/code> erm\u00f6glicht es WordPress und Plugins, wichtige Elemente, wie z. B. Skripte, kurz vor dem schlie\u00dfenden <code>&lt;\/body&gt;<\/code> Tag einzuf\u00fcgen. Dies ist wichtig, um sicherzustellen, dass alle notwendigen Ressourcen korrekt geladen werden und deine Seite wie erwartet funktioniert.<\/p>\n<h3>Schritt 6: Anzeige von Blogbeitr\u00e4gen mit der WordPress-Schleife<\/h3>\n<p>Kehren wir zur Datei <code>index.php<\/code> zur\u00fcck, um zu erkl\u00e4ren, wie du mit der WordPress-Schleife &#8211; einer leistungsstarken Methode zur dynamischen Anzeige von Inhalten &#8211; die Beitr\u00e4ge deiner WordPress-Seite in einer Schleife anzeigen kannst. So sieht die Schleife aus:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"my-posts\"&gt;\n    &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n        &lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;\n            &lt;article class=\"article-loop\"&gt;\n                &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n                    &lt;?php the_post_thumbnail(); ?&gt;\n                &lt;?php endif; ?&gt;\n                &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n                &lt;div class=\"flex-info\"&gt;\n                    &lt;p&gt;By: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n                    &lt;p&gt;&lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;?php the_excerpt(); ?&gt;\n            &lt;\/article&gt;\n        &lt;\/a&gt;\n    &lt;?php endwhile; else : ?&gt;\n        &lt;article&gt;\n            &lt;p&gt;Sorry, no posts were found!&lt;\/p&gt;\n        &lt;\/article&gt;\n    &lt;?php endif; ?&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Der obige Code pr\u00fcft, ob es Beitr\u00e4ge gibt, die angezeigt werden sollen, bevor die Schleife beginnt. In der Schleife zeigen WordPress-Funktionen wie <code>the_title()<\/code>, <code>the_author()<\/code>, <code>the_time('F j, Y')<\/code> und <code>the_excerpt()<\/code> Informationen \u00fcber jeden WordPress-Beitrag an.<\/p>\n<p>Die Funktion <code>the_post_thumbnail()<\/code> wird auch verwendet, um das Vorschaubild anzuzeigen, aber sie ist in eine if-Anweisung verpackt, so dass sie nur angezeigt wird, wenn es ein Featured Image f\u00fcr deinen Beitrag gibt. In der Datei <code>functions.php<\/code> m\u00fcssen wir mit dieser Funktion Unterst\u00fctzung f\u00fcr Post-Thumbnails hinzuf\u00fcgen, damit es eine Option zum Hochladen von Vorschaubildern gibt, wenn du neue Posts erstellst:<\/p>\n<pre><code class=\"language-php\">add_theme_support('post-thumbnails');<\/code><\/pre>\n<p>F\u00fcge dies zu der Funktion <code>my_custom_theme_setup()<\/code> hinzu, die wir in der Datei <code>functions.php<\/code> erstellt haben. So sieht die Datei <code>index.php<\/code> jetzt aus:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    &lt;div class=\"hero\"&gt;\n        &lt;h1&gt;Welcome to my blog!&lt;\/h1&gt;\n        &lt;p&gt;Here, you'll find posts on a variety of topics, including programming, web development, and more.&lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"my-posts\"&gt;\n        &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n            &lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;\n                &lt;article class=\"article-loop\"&gt;\n                    &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n                        &lt;?php the_post_thumbnail(); ?&gt;\n                    &lt;?php endif; ?&gt;\n                    &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n                    &lt;div class=\"flex-info\"&gt;\n                        &lt;p&gt;By: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n                        &lt;p&gt;&lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n                    &lt;\/div&gt;\n                    &lt;?php the_excerpt(); ?&gt;\n                &lt;\/article&gt;\n            &lt;\/a&gt;\n        &lt;?php endwhile; else : ?&gt;\n            &lt;article&gt;\n                &lt;p&gt;Sorry, no posts were found!&lt;\/p&gt;\n            &lt;\/article&gt;\n        &lt;?php endif; ?&gt;\n    &lt;\/div&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Du wirst feststellen, dass ein statischer Code hinzugef\u00fcgt wurde, der als Banner mit der Aufschrift &#8222;Willkommen in meinem Blog&#8220; und einem Textabsatz gestaltet wird.<\/p>\n<h3>Schritt 7: Eine Vorlage f\u00fcr einen einzelnen Beitrag erstellen<\/h3>\n<p>Bevor wir unser Theme gestalten, m\u00fcssen wir eine grundlegende Vorlage definieren, die einzelne Blogbeitr\u00e4ge anzeigt, wenn sie von einer beliebigen Seite oder einem Beitrag in deinem Theme angeklickt werden. Dazu erstellst du eine <code>single.php<\/code> Datei im Stammverzeichnis deines Themes und f\u00fcgst den folgenden Code ein:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    &lt;section class=\"single__post\"&gt;\n        &lt;article class=\"article-full\"&gt;\n          &lt;div class=\"single__post-header\"&gt;\n            &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n              &lt;?php the_post_thumbnail(); ?&gt;\n            &lt;?php endif; ?&gt;\n            &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n            &lt;p&gt;By: &lt;?php the_author(); ?&gt; on &lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;?php the_content(); ?&gt;\n        &lt;\/article&gt;\n    &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Im obigen Code enthalten <code>get_header()<\/code> und <code>get_footer()<\/code> die Kopf- und Fu\u00dfzeile. In den anderen Teilen des Codes zeigen WordPress-Funktionen dynamische Inhalte an.<\/p>\n<h3>Schritt 8: Erstelle eine Vorlagendatei f\u00fcr WordPress-Seiten<\/h3>\n<p>So wie du eine Vorlage f\u00fcr einzelne WordPress-Beitr\u00e4ge erstellt hast, kannst du auch eine Vorlage f\u00fcr die Anzeige deiner WordPress-Websites erstellen. Dazu erstellst du eine <code>page.php<\/code> Datei im Stammverzeichnis deines Themeordners und f\u00fcgst den folgenden Code ein:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main class=\"wrap\"&gt;\n  &lt;section class=\"\"&gt;\n      &lt;article class=\"article-full\"&gt;\n        &lt;div class=\"page-header\"&gt;\n          &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n        &lt;\/div&gt;\n        &lt;?php the_content(); ?&gt;\n      &lt;\/article&gt;\n  &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<h3>Schritt 9: Styling deines Themes<\/h3>\n<p>Bis jetzt haben wir einige grundlegende Vorlagen f\u00fcr unser Theme erstellt. Jetzt ist es an der Zeit, ein eigenes Styling hinzuzuf\u00fcgen, damit es gut aussieht. Du kannst deine Stile in der Datei <code>style.css<\/code> in deinem Theme-Ordner hinzuf\u00fcgen. F\u00fcr den Anfang kopierst du das Styling aus diesem <a href=\"https:\/\/gist.github.com\/olawanlejoel\/8cf4cee4429df83a7e005275d1f4275d\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub-Gist<\/a> f\u00fcr das in dieser Anleitung erstellte Theme-Beispiel.<\/p>\n<h3>Schritt 10: Teste und setze dein Theme ein<\/h3>\n<p>Bis jetzt hast du erfolgreich ein WordPress-Theme erstellt. Jetzt ist es an der Zeit, es zu testen und bereitzustellen.<\/p>\n<p>Vergewissere dich zun\u00e4chst, dass dein Theme aktiviert ist, indem du im WordPress-Admin-Dashboard <strong>Erscheinungsbild<\/strong> &gt; <strong>Themes<\/strong> ausw\u00e4hlst. Wenn du das noch nicht getan hast, klicke auf dein Theme und aktiviere es. Du kannst auch auf die Schaltfl\u00e4che <strong>Anpassen<\/strong> klicken, um die Website-Identit\u00e4t festzulegen, das Men\u00fc anzupassen und andere Einstellungen zu \u00e4ndern, damit deine Website richtig angezeigt wird.<\/p>\n<p>Wenn du mit deinem Theme zufrieden bist, hast du mehrere M\u00f6glichkeiten, es einzusetzen:<\/p>\n<ol start=\"1\">\n<li>Du kannst <strong>deine lokale Website online stellen<\/strong>: Wenn du lokal mit DevKinsta entwickelst, kannst du deine Seite ganz einfach in eine Staging-Umgebung verschieben. So kannst du dein Theme in einer live-\u00e4hnlichen Umgebung testen, bevor du es in die Live-Umgebung verschiebst. Eine ausf\u00fchrliche Anleitung dazu findest du in unserer <a href=\"https:\/\/kinsta.com\/de\/docs\/devkinsta\/devkinsta-integration\/#push-changes-to-staging\">DevKinsta-Dokumentation<\/a>.<\/li>\n<li><strong>Paketiere dein Theme und lade es hoch<\/strong>: Alternativ kannst du dein Theme auch in einen gezippten Ordner packen und auf eine Online-Website hochladen. Gehe im WordPress-Admin-Dashboard auf <strong>Darstellung<\/strong> &gt; <strong>Themes<\/strong> &gt; <strong>Neu hinzuf\u00fcgen<\/strong> &gt; <strong>Theme hochladen<\/strong> und w\u00e4hle deine gezippte Theme-Datei zum Hochladen aus.<\/li>\n<\/ol>\n<p>Teste dein Theme gr\u00fcndlich in einer Staging-Umgebung, um sicherzustellen, dass alles wie erwartet funktioniert, bevor du es online stellst. Dieser Schritt ist wichtig, um m\u00f6gliche Probleme zu erkennen und sicherzustellen, dass deine Website perfekt aussieht und funktioniert.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>In diesem Artikel haben wir ein klassisches WordPress-Theme von Grund auf erstellt. Wir haben uns mit dem Einrichten wichtiger Dateien, dem Hinzuf\u00fcgen benutzerdefinierter Designs und dem Erstellen von Vorlagen f\u00fcr einzelne Beitr\u00e4ge und Seiten besch\u00e4ftigt.<\/p>\n<p>Wenn du m\u00f6chtest, dass deine Website genau die Funktionen und das Aussehen hat, die du dir w\u00fcnschst, ist die Entwicklung deines WordPress-Themes der richtige Weg. Wenn du jedoch nicht die Zeit, die F\u00e4higkeiten oder die Lust dazu hast, kannst du einen Profi beauftragen, der dir hilft, deine Vorstellungen effizient umzusetzen.<\/p>\n<p>Wenn du endlich eine Website hast, die deinem Geschmack entspricht, brauchst du ein stabiles Hosting, um Probleme wie <a href=\"https:\/\/kinsta.com\/de\/blog\/webseite-down\/\">Ausfallzeiten<\/a>, <a href=\"https:\/\/kinsta.com\/de\/blog\/ddos-attacken-verhindern\/\">DDoS-Angriffe<\/a> und mehr zu vermeiden. Hier k\u00f6nnen Premium-Hosting-Anbieter wie Kinsta gl\u00e4nzen.<\/p>\n<p>Kinsta bietet leistungsstarkes <a href=\"https:\/\/kinsta.com\/de\/wordpress-hosting\/\">Managed WordPress Hosting<\/a> mit einer vollst\u00e4ndig containerisierten Architektur, die ausschlie\u00dflich von der <a href=\"https:\/\/kinsta.com\/de\/blog\/cloud-plattform-fuer-entwickler\/\">Google Cloud Platform<\/a> im Google Premium Tier Netzwerk betrieben wird.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/de\/kontaktiere-uns\/\">Kontaktiere uns<\/a>, um mehr \u00fcber unsere erstklassige Managed-Hosting-L\u00f6sung zu erfahren.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress ist ein sehr beliebtes Content Management System (CMS) f\u00fcr die Erstellung von Blogs, E-Commerce-Shops und anderen Websites. Es zeichnet sich durch seine Flexibilit\u00e4t aus und &#8230;<\/p>\n","protected":false},"author":287,"featured_media":70804,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[999,1009],"class_list":["post-70803","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-entwicklung","topic-wordpress-themes"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie man ein klassisches WordPress-Theme erstellt - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Erfahre, wie du ein klassisches WordPress-Theme von Grund auf neu erstellst, indem du Vorlagendateien erstellst und WordPress-Funktionen verwendest.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man ein klassisches WordPress-Theme erstellt: Schritt-f\u00fcr-Schritt-Anleitung\" \/>\n<meta property=\"og:description\" content=\"Erfahre, wie du ein klassisches WordPress-Theme von Grund auf neu erstellst, indem du Vorlagendateien erstellst und WordPress-Funktionen verwendest.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-02T08:24:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-07T13:24:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/create-your-own-wordpress-theme.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1461\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Erfahre, wie du ein klassisches WordPress-Theme von Grund auf neu erstellst, indem du Vorlagendateien erstellst und WordPress-Funktionen verwendest.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/create-your-own-wordpress-theme-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"18\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Wie man ein klassisches WordPress-Theme erstellt: Schritt-f\u00fcr-Schritt-Anleitung\",\"datePublished\":\"2024-08-02T08:24:47+00:00\",\"dateModified\":\"2024-08-07T13:24:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/\"},\"wordCount\":2427,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/create-your-own-wordpress-theme.png\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/\",\"name\":\"Wie man ein klassisches WordPress-Theme erstellt - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/create-your-own-wordpress-theme.png\",\"datePublished\":\"2024-08-02T08:24:47+00:00\",\"dateModified\":\"2024-08-07T13:24:50+00:00\",\"description\":\"Erfahre, wie du ein klassisches WordPress-Theme von Grund auf neu erstellst, indem du Vorlagendateien erstellst und WordPress-Funktionen verwendest.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/create-your-own-wordpress-theme.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/create-your-own-wordpress-theme.png\",\"width\":1461,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress-Themes\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-themes\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man ein klassisches WordPress-Theme erstellt: Schritt-f\u00fcr-Schritt-Anleitung\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man ein klassisches WordPress-Theme erstellt - Kinsta\u00ae","description":"Erfahre, wie du ein klassisches WordPress-Theme von Grund auf neu erstellst, indem du Vorlagendateien erstellst und WordPress-Funktionen verwendest.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man ein klassisches WordPress-Theme erstellt: Schritt-f\u00fcr-Schritt-Anleitung","og_description":"Erfahre, wie du ein klassisches WordPress-Theme von Grund auf neu erstellst, indem du Vorlagendateien erstellst und WordPress-Funktionen verwendest.","og_url":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-08-02T08:24:47+00:00","article_modified_time":"2024-08-07T13:24:50+00:00","og_image":[{"width":1461,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/create-your-own-wordpress-theme.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Erfahre, wie du ein klassisches WordPress-Theme von Grund auf neu erstellst, indem du Vorlagendateien erstellst und WordPress-Funktionen verwendest.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/create-your-own-wordpress-theme-1024x512.png","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"18\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Wie man ein klassisches WordPress-Theme erstellt: Schritt-f\u00fcr-Schritt-Anleitung","datePublished":"2024-08-02T08:24:47+00:00","dateModified":"2024-08-07T13:24:50+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/"},"wordCount":2427,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/create-your-own-wordpress-theme.png","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/","url":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/","name":"Wie man ein klassisches WordPress-Theme erstellt - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/create-your-own-wordpress-theme.png","datePublished":"2024-08-02T08:24:47+00:00","dateModified":"2024-08-07T13:24:50+00:00","description":"Erfahre, wie du ein klassisches WordPress-Theme von Grund auf neu erstellst, indem du Vorlagendateien erstellst und WordPress-Funktionen verwendest.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/create-your-own-wordpress-theme.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/create-your-own-wordpress-theme.png","width":1461,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress-Themes","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-themes\/"},{"@type":"ListItem","position":3,"name":"Wie man ein klassisches WordPress-Theme erstellt: Schritt-f\u00fcr-Schritt-Anleitung"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/70803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=70803"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/70803\/revisions"}],"predecessor-version":[{"id":70846,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/70803\/revisions\/70846"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70803\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70803\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70803\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70803\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70803\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70803\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70803\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70803\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70803\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/70804"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=70803"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=70803"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=70803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}