{"id":70938,"date":"2024-08-21T08:19:11","date_gmt":"2024-08-21T07:19:11","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=70938&#038;preview=true&#038;preview_id=70938"},"modified":"2024-08-23T12:41:07","modified_gmt":"2024-08-23T11:41:07","slug":"wordpress-theme-kernkonzepte","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/","title":{"rendered":"Grundlegende Konzepte, die du bei der Entwicklung von WordPress-Themes verstehen musst"},"content":{"rendered":"<p>WordPress-Themes spielen eine entscheidende Rolle bei der Gestaltung des Aussehens und der Funktionalit\u00e4t deiner Website. Sie legen fest, wie deine Inhalte angezeigt werden und bieten verschiedene Designoptionen, um eine einzigartige Seite zu gestalten. Im Laufe der Jahre haben sich die <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-ein-wordpress-theme\/\">WordPress-Themes<\/a> stark weiterentwickelt, angefangen mit den sogenannten &#8222;klassischen Themes&#8220;.<\/p>\n<p>Klassische Themes waren lange Zeit der Standard. Sie basierten auf <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-beitrags-vorlagen\/\">PHP-Vorlagen<\/a> und erforderten einige Programmierkenntnisse, um sie anzupassen. Diese Themes boten eine gro\u00dfe Flexibilit\u00e4t, konnten aber f\u00fcr Anf\u00e4nger\/innen in der <a href=\"https:\/\/kinsta.com\/web-development\/\">Webentwicklung<\/a> eine Herausforderung sein. Mit der Ver\u00f6ffentlichung von <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-9\/\">WordPress 5.9<\/a> kam es dann zu einer bedeutenden Ver\u00e4nderung: die Einf\u00fchrung von &#8222;<a href=\"https:\/\/wordpress.org\/documentation\/article\/block-themes\/\" target=\"_blank\" rel=\"noopener noreferrer\">Block-Themes<\/a>&#8222;.<\/p>\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>WordPress klassische Themes vs. Block-Themes<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/\">Klassische Themes<\/a> sind die traditionelle Art von WordPress-Themes. Sie bestimmen das allgemeine Aussehen einer Website, indem sie in PHP geschriebene Vorlagendateien, <a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">CSS<\/a> f\u00fcr das Styling und <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\">JavaScript<\/a> f\u00fcr zus\u00e4tzliche Funktionen verwenden. Diese hochgradig anpassbaren Themes sind seit vielen Jahren das R\u00fcckgrat von WordPress-Websites.<\/p>\n<p>Block-Themes hingegen sind eine neuere Art von WordPress-Themes, die eingef\u00fchrt wurden, um die Funktionen zur <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-full-site-editing\/\">vollst\u00e4ndigen Bearbeitung von Websites<\/a> (FSE) zu unterst\u00fctzen. Im Gegensatz zu klassischen Themes verwenden sie Bl\u00f6cke, um alle Teile einer Website aufzubauen, einschlie\u00dflich Kopf- und Fu\u00dfzeilen sowie Inhaltsbereiche. Dies erm\u00f6glicht eine visuellere und intuitivere Art, Websites direkt im WordPress-Editor zu gestalten und anzupassen.<\/p>\n<p>Die wichtigsten Unterschiede zwischen klassischen und Block-Themes sind:<\/p>\n<ol start=\"1\">\n<li><strong>Anpassung<\/strong> &#8211; Klassische Themes erfordern PHP und einige Programmierkenntnisse, w\u00e4hrend Block-Themes einen visuellen Editor f\u00fcr eine einfachere Anpassung verwenden.<\/li>\n<li><strong>Flexibilit\u00e4t<\/strong> &#8211; Klassische Themes bieten <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-entwickler-engagiert\/\">Entwicklern<\/a> mehr Flexibilit\u00e4t, w\u00e4hrend bei Block-Themes die Benutzerfreundlichkeit und Zug\u00e4nglichkeit im Vordergrund stehen.<\/li>\n<li><strong>Bearbeitung<\/strong> &#8211; Klassische Themes werden \u00fcber Themedateien und den <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-du-dein-wordpress-theme-anpasst\/\">WordPress Customizer<\/a> bearbeitet. Block-Themes k\u00f6nnen vollst\u00e4ndig \u00fcber den <a href=\"https:\/\/wordpress.org\/documentation\/article\/wordpress-block-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Block-Editor<\/a> bearbeitet werden.<\/li>\n<\/ol>\n<h3>Die Entscheidung, welche Art von Theme du entwickeln willst<\/h3>\n<p>Die Wahl zwischen klassischen und Block-Themes h\u00e4ngt von deinen Bed\u00fcrfnissen und deinen F\u00e4higkeiten ab. Wenn du ein Entwickler bist, der maximale Flexibilit\u00e4t sucht, sind klassische Themes vielleicht deine erste Wahl. Wenn du jedoch eine benutzerfreundlichere und visuelle Herangehensweise an die Erstellung deiner Website bevorzugst, sind Block-Themes eine gute Wahl.<\/p>\n<p>Beide Arten von Themes haben ihre St\u00e4rken und eignen sich f\u00fcr unterschiedliche Arten von Nutzern und Projekten. Wenn du die wichtigsten Unterschiede kennst, kannst du eine fundierte Entscheidung treffen, welches Theme am besten zu den Anforderungen deiner Website passt.<\/p>\n<p>Dieser Artikel soll dir helfen, die grundlegenden Konzepte von klassischen und Block-Themes zu verstehen und zu beherrschen, damit du WordPress-Themes effektiv erstellen und anpassen kannst.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Die Erstellung eines Themes kann das Erscheinungsbild deiner Website beeinflussen. Es ist immer besser, zuerst <a href=\"https:\/\/kinsta.com\/de\/blog\/kinsta-backup-funktionen\/\">ein Backup deiner Website zu erstellen<\/a>. Wenn du einen Hoster wie Kinsta nutzt, kannst du eine <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/staging-umgebung\/\">Staging-Umgebung<\/a> f\u00fcr deine Arbeit einrichten. Sobald du fertig bist, kannst du <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/staging-umgebung\/#push-environment-to-live-or-staging\">die \u00c4nderungen auf die Live-Site \u00fcbertragen<\/a>. Alternativ kannst du <a href=\"https:\/\/kinsta.com\/de\/docs\/devkinsta\/devkinsta-integration\/\">deine Website zu DevKinsta ziehen<\/a> oder <a href=\"https:\/\/kinsta.com\/de\/blog\/verwendest-sftp-verbindung-wordpress-herzustellen\/\">SFTP\/SSH<\/a> mit deinem bevorzugten Client f\u00fcr sichere Datei\u00fcbertragungen verwenden.<\/p>\n<\/aside>\n\n<h2>Die Struktur eines Themes verstehen<\/h2>\n<p>Die Struktur eines Themes zu verstehen, egal ob es sich um ein klassisches oder ein Block-Theme handelt, ist der Schl\u00fcssel zur effektiven Anpassung deiner WordPress-Website.<\/p>\n<p>Bevor wir uns mit der Struktur der einzelnen Themes besch\u00e4ftigen, solltest du wissen, dass alle WordPress-Themes im Verzeichnis <code>wp-content\/themes<\/code> deiner WordPress-Installation gespeichert werden und jedes Theme in einem eigenen Ordner liegt.<\/p>\n<h3>Struktur eines klassischen Themes<\/h3>\n<p>Ein klassisches Theme besteht aus mehreren wichtigen Dateien und Verzeichnissen, die das Aussehen und die Funktionalit\u00e4t der Website bestimmen. Die zwei wichtigsten Dateien sind:<\/p>\n<ol start=\"1\">\n<li><code>style.css<\/code> &#8211; Dies ist das Haupt-Stylesheet, das das visuelle Styling des Themes definiert. Es enth\u00e4lt oben Metadaten \u00fcber das Theme (wie Name, Autor und Version), gefolgt von CSS-Regeln, die das Theme gestalten.<\/li>\n<li><code>index.php<\/code> &#8211; Dies ist die Hauptvorlagendatei, die f\u00fcr die Anzeige der Inhalte auf der Startseite verwendet wird. Sie dient als Fallback f\u00fcr andere Vorlagendateien, die fehlen k\u00f6nnten.<\/li>\n<\/ol>\n<p>Dar\u00fcber hinaus gibt es weitere wichtige Dateien, die ein modulares Design erm\u00f6glichen und daf\u00fcr sorgen, dass die verschiedenen Teile der Website leicht angepasst und gepflegt werden k\u00f6nnen. Diese Dateien sind zwar optional, werden aber als Standard angesehen:<\/p>\n<ul>\n<li><code>header.php<\/code> &#8211; Diese Datei enth\u00e4lt den Kopfbereich des Themes, einschlie\u00dflich des Seitentitels, des Logos und des Navigationsmen\u00fcs. Sie wird oben auf jeder Seite eingef\u00fcgt, um einen einheitlichen Seitenkopf zu gew\u00e4hrleisten.<\/li>\n<li><code>footer.php<\/code> &#8211; Diese Datei enth\u00e4lt den Fu\u00dfzeilenbereich des Themes, der oft Copyright-Informationen und die Fu\u00dfzeilennavigation enth\u00e4lt. Sie wird am unteren Ende jeder Seite eingef\u00fcgt und sorgt f\u00fcr eine einheitliche Fu\u00dfzeile auf der gesamten Website.<\/li>\n<li><code>functions.php<\/code> &#8211; Diese Datei wird verwendet, um dem Theme eigene Funktionen hinzuzuf\u00fcgen. Sie kann Men\u00fcs registrieren, Stile und Skripte in die Warteschlange aufnehmen und Funktionen zur Unterst\u00fctzung des Themes wie Post-Thumbnails und benutzerdefinierte Hintergr\u00fcnde hinzuf\u00fcgen. Im Wesentlichen dient sie als Kontrollzentrum f\u00fcr Theme-Anpassungen und -Erweiterungen.<\/li>\n<li><code>page.php<\/code> <code>single.php<\/code>, , etc. &#8211; Diese Vorlagendateien definieren die Struktur f\u00fcr verschiedene Arten von Inhalten, wie Seiten, einzelne Beitr\u00e4ge und Archive. <code>archive.php<\/code><\/li>\n<\/ul>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>In diesem ausf\u00fchrlichen Artikel findest du eine Schritt-f\u00fcr-Schritt-Anleitung f\u00fcr die <a href=\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/\">Erstellung klassischer WordPress-Themes<\/a>.<\/p>\n<\/aside>\n\n<h3>Aufbau eines Block-Themes<\/h3>\n<p>Ein Block-Theme besteht aus mehreren wichtigen Dateien und Verzeichnissen, die speziell f\u00fcr die Arbeit mit Bl\u00f6cken und den FSE-Funktionen entwickelt wurden. Die wichtigsten Dateien und Verzeichnisse sind:<\/p>\n<ol start=\"1\">\n<li><code>theme.json<\/code> &#8211; Diese Datei ist entscheidend f\u00fcr die Konfiguration der Einstellungen, Stile und Anpassungen des Themes. Sie definiert globale Stile und Einstellungen f\u00fcr Bl\u00f6cke und bietet eine zentrale M\u00f6glichkeit, das Aussehen und Verhalten des Themes zu verwalten. Sie ersetzt eine Menge eigenen PHP-Code und erm\u00f6glicht die einfache Konfiguration von Farben, Typografie, Abst\u00e4nden und mehr.<\/li>\n<li><code>style.css<\/code> &#8211; Obwohl der Gro\u00dfteil des Stylings innerhalb von <code>theme.json<\/code> abgewickelt wird, wird \u00e4hnlich wie bei klassischen Themes <code>style.css<\/code> verwendet, um die Metadaten des Themes zu deklarieren, z. B. den Namen des Themes, den Autor, die Version und die Beschreibung.<\/li>\n<li><code>templates\/<\/code> &#8211; Dieses Verzeichnis enth\u00e4lt HTML-Dateien, die das Layout f\u00fcr die verschiedenen Teile der Website festlegen. Zu diesen Dateien geh\u00f6ren Vorlagen wie index.html f\u00fcr die Startseite, <code>single.html<\/code> f\u00fcr einzelne Beitr\u00e4ge, <code>page.html<\/code> f\u00fcr Seiten und mehr. Jede Datei ist aus Bl\u00f6cken aufgebaut.<\/li>\n<li><code>parts\/<\/code> &#8211; Dieses Verzeichnis enth\u00e4lt wiederverwendbare Teile von Vorlagen, wie z. B. Kopf- und Fu\u00dfzeilen. Diese Teile k\u00f6nnen in mehreren Vorlagen enthalten sein und sorgen so f\u00fcr Konsistenz auf der gesamten Website.<\/li>\n<\/ol>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-muster\/\">Muster<\/a> sind zwar nicht zwingend erforderlich, aber bei der Entwicklung fortgeschrittener Themes ebenfalls wichtig. Muster sind vordefinierte Blocklayouts, die in Seiten und Beitr\u00e4ge eingef\u00fcgt werden k\u00f6nnen und eine schnelle M\u00f6glichkeit bieten, komplexe Designs zu erstellen.<\/p>\n<p>Bei Blockthemes kannst du darauf verzichten, die Struktur des Themes manuell zu erstellen. Du kannst den Einrichtungsprozess mit dem Plugin <a href=\"https:\/\/wordpress.org\/plugins\/create-block-theme\/\" target=\"_blank\" rel=\"noopener noreferrer\">Create Block Theme<\/a> rationalisieren, das alle notwendigen Dateien und Details zusammenfasst.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/create-block-theme.png\" alt=\"Block-Theme-Plugin erstellen\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Block-Theme-Plugin erstellen<\/figcaption><\/figure>\n<p>Sobald du die Details eingegeben hast, wird ein neuer Theme-Ordner im Verzeichnis <code>wp-content\/themes<\/code> erstellt und das neue Theme erscheint im <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-admin\/\">WordPress-Verwaltungsbereich<\/a> unter <strong>Erscheinungsbild<\/strong> &gt; <strong>Themes<\/strong>. Du kannst weitere Details zum Thema in der Meta-Beschreibung <code>style.css<\/code> hinzuf\u00fcgen.<\/p>\n<h2>Die Vorlagenhierarchie des WordPress-Themes<\/h2>\n<p>Die Vorlagenhierarchie legt fest, welche Vorlagendatei(en) WordPress verwendet, um verschiedene Arten von Inhalten anzuzeigen. Klassische und Block-Themes folgen einer \u00e4hnlichen Hierarchie, unterscheiden sich aber in den Dateitypen, die sie verwenden: Klassische Themes verwenden <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-php\/\">PHP-Dateien<\/a>, w\u00e4hrend Block-Themes <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML-Dateien<\/a> verwenden.<\/p>\n<p>Die Vorlagenhierarchie folgt einer bestimmten Reihenfolge, um zu bestimmen, welche Vorlagendatei verwendet werden soll. Wenn WordPress eine bestimmte Vorlagendatei nicht finden kann, geht es zur n\u00e4chsten in der Hierarchie \u00fcber.<\/p>\n<p>Wenn WordPress z. B. einen einzelnen Blog-Beitrag anzeigen muss, sucht es zuerst nach einer Vorlage, die f\u00fcr den Beitragstyp spezifisch ist, z. B. <code>single-{post-type}.php<\/code> oder <code>single-{post-type}.html<\/code>. Wenn diese Datei nicht existiert, sucht es nach der generischen Vorlage <code>single.php<\/code> oder <code>single.html<\/code>. Wenn keine dieser Dateien gefunden wird, greift WordPress auf die allgemeinste Vorlage <code>index.php<\/code> oder <code>index.html<\/code> zur\u00fcck.<\/p>\n<p>Das gleiche Verfahren gilt f\u00fcr andere Arten von Inhalten. Bei einer statischen Seite pr\u00fcft WordPress zun\u00e4chst, ob der Seite benutzerdefinierte Vorlagen zugewiesen sind. Wird keine gefunden, sucht es nach einer Vorlage, die auf dem Slug der Seite (z. B. <code>page-about.php<\/code> oder <code>page-about.html<\/code>) oder ihrer ID (<code>page-42.php<\/code> oder <code>page-42.html<\/code>) basiert. Wenn diese speziellen Vorlagen nicht verf\u00fcgbar sind, verwendet WordPress die allgemeinen <code>page.php<\/code> oder <code>page.html<\/code>. Wenn auch diese fehlen, greift es auf <code>index.php<\/code> oder <code>index.html<\/code> zur\u00fcck.<\/p>\n<h2>Vorlagen erstellen<\/h2>\n<p>Durch das Erstellen von Vorlagen in WordPress kannst du festlegen, wie die verschiedenen Arten von Inhalten auf deiner Website angezeigt werden. Unabh\u00e4ngig davon, ob du mit klassischen Themes oder Block-Themes arbeitest, musst du die notwendigen Dateien einrichten und sie nach deinen Bed\u00fcrfnissen konfigurieren.<\/p>\n<p>Lass uns eine Seitenvorlage f\u00fcr beide Arten von Themes einrichten.<\/p>\n<h3>Seitenvorlage f\u00fcr klassische Themes<\/h3>\n<p>Bei klassischen Themes erstellst du eine Seitenvorlage mit PHP. So geht&#8217;s:<\/p>\n<ol start=\"1\">\n<li><strong>Vorlagendatei erstellen<\/strong> &#8211; Erstelle mit einem <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-texteditoren\/\">Texteditor<\/a> eine neue PHP-Datei im Verzeichnis deines Themes und nenne sie <code>page.php<\/code>.<\/li>\n<li><strong>Vorlagencode hinzuf\u00fcgen<\/strong> &#8211; Schreibe den notwendigen PHP-Code, um die Struktur und den Inhalt der Seitenvorlage zu definieren. Dazu geh\u00f6ren in der Regel WordPress-Template-Tags, um den Seiteninhalt anzuzeigen.<\/li>\n<li><strong>Kopf- und Fu\u00dfzeile einbinden<\/strong> &#8211; Stelle sicher, dass deine Vorlage die Kopf- und Fu\u00dfzeile enth\u00e4lt, indem du die Funktionen <code>get_header()<\/code> und <code>get_footer()<\/code> hinzuf\u00fcgst. So bleibt das Layout konsistent mit dem Rest deiner Website.<\/li>\n<\/ol>\n<p>Hier ist ein Beispiel daf\u00fcr, wie <code>page.php<\/code> aussehen k\u00f6nnte:<\/p>\n<pre><code class=\"language-php\">&lt;?php\nget_header(); ?&gt;\n\n&lt;main&gt;\n    &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n    &lt;div&gt;&lt;?php the_content(); ?&gt;&lt;\/div&gt;\n&lt;\/main&gt;\n\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>In diesem Beispiel enth\u00e4lt die Vorlage die Kopfzeile, zeigt den Seitentitel und den Inhalt an und enth\u00e4lt dann die Fu\u00dfzeile.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Stelle sicher, dass du die Vorlagen <code>header.php<\/code> und <code>footer.php<\/code> bereits deklariert hast. Mehr dar\u00fcber, wie sie funktionieren <a href=\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#step-4-create-the-header-file\">,<\/a> erf\u00e4hrst du <a href=\"https:\/\/kinsta.com\/de\/blog\/klassiches-wordpress-theme-erstellen\/#step-4-create-the-header-file\">in diesem Leitfaden<\/a>.<\/p>\n<\/aside>\n\n<h3>Blocktheme-Seitenvorlage<\/h3>\n<p>In Block-Themes kannst du eine Seitenvorlage \u00fcber den WordPress-Site-Editor erstellen oder indem du eine <code>page.html<\/code> Datei im templates-Verzeichnis anlegst.<\/p>\n<p>Sobald diese Datei erstellt ist, kannst du ein Layout entwerfen, indem du zum Seiteneditor navigierst (<strong>Darstellung<\/strong> &gt; <strong>Editor<\/strong> in deinem WordPress-Dashboard).<\/p>\n<p>Mit dem Blockeditor kannst du Bl\u00f6cke hinzuf\u00fcgen und anordnen, um dein Seitenlayout zu gestalten. Du kannst Bl\u00f6cke f\u00fcr den Seitentitel, das Hauptbild und den Inhalt hinzuf\u00fcgen. Passe jeden Block nach deinen Designvorlieben an.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/block-editor.png\" alt=\"Passe die Seitenvorlage mit dem Blockeditor an\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Passe die Seitenvorlage mit dem Blockeditor an<\/figcaption><\/figure>\n<p>Wenn du mit dem Layout zufrieden bist, speichere die Vorlage. WordPress erstellt dann automatisch die entsprechende HTML-Datei im Verzeichnis deines Themes.<\/p>\n<h2>Themes Styling<\/h2>\n<p>Die Gestaltung deines WordPress-Themes ist ein entscheidender Schritt, um das Erscheinungsbild deiner Website zu definieren. Sowohl klassische als auch Block-Themes bieten robuste M\u00f6glichkeiten zur Anpassung der Stile, gehen dabei aber unterschiedlich vor.<\/p>\n<h3>Styling klassischer Themes<\/h3>\n<p>Bei klassischen Themes wird das Styling in der Regel mit CSS vorgenommen. Hier erf\u00e4hrst du, wie du ein klassisches Theme stylen kannst:<\/p>\n<p>Das wichtigste Stylesheet f\u00fcr ein klassisches Theme ist die Datei <code>style.css<\/code>. Diese Datei enth\u00e4lt alle CSS-Regeln, die das Aussehen deines Themes bestimmen. Hier gibst du auch die Metadaten des Themes an, z. B. den Namen des Themas, den Autor, die Version und die Beschreibung.<\/p>\n<p>Um sicherzustellen, dass dein CSS richtig geladen wird, musst du dein Stylesheet in der Datei <code>functions.php<\/code> mit der Funktion <code>wp_enqueue_style()<\/code> einreihen.<\/p>\n<pre><code class=\"language-js\">function my_theme_enqueue_styles() {\n    wp_enqueue_style('my-theme-style', get_stylesheet_uri());\n}\nadd_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');<\/code><\/pre>\n<p>Dieser Schritt ist wichtig, um die WordPress-Standards einzuhalten und sicherzustellen, dass die Styles korrekt angewendet werden.<\/p>\n<p>Au\u00dferdem kannst du benutzerdefiniertes CSS direkt in die Datei <code>style.css<\/code> einf\u00fcgen oder separate CSS-Dateien f\u00fcr verschiedene Teile deines Themes erstellen. Benutzerdefinierte CSS k\u00f6nnen auch mit dem Tag <code>&lt;style&gt;<\/code> in einzelne Vorlagendateien eingebettet werden. Diese Praxis ist jedoch weniger verbreitet und wird nur f\u00fcr bestimmte, isolierte Stile empfohlen.<\/p>\n<p>F\u00fcr fortgeschrittenes Styling kannst du CSS-Pr\u00e4prozessoren wie <a href=\"https:\/\/www.frontendmentor.io\/articles\/css-preprocessors-sass-or-less-which-to-choose-JOI20I1xNL#:~:text=Less%20provides%20flexibility%20for%20larger,Sass%2C%20Less%20encourages%20code%20organization.\" target=\"_blank\" rel=\"noopener noreferrer\">SASS oder LESS<\/a> verwenden. Mit diesen Tools kannst du wartungsfreundlicheres und modulares CSS schreiben, was die Verwaltung und Erweiterung der Stile deines Themes erleichtert.<\/p>\n<h3>Styling von Blockthemen<\/h3>\n<p>Das Styling von Blockthemen wird haupts\u00e4chlich \u00fcber die Datei <code>theme.json<\/code> und den Blockeditor verwaltet.<\/p>\n<p>Die Datei <code>theme.json<\/code> ist der zentrale Ort, an dem du die globalen Stile und Einstellungen f\u00fcr dein Theme konfigurierst. In dieser Datei kannst du Farben, Typografie, Abst\u00e4nde und andere Stile in einem strukturierten JSON-Format definieren und so das Aussehen und Verhalten des Themes zentral verwalten. Globale Stile, die in <code>theme.json<\/code> definiert werden, gelten f\u00fcr deine gesamte Website und sorgen f\u00fcr ein einheitliches Erscheinungsbild.<\/p>\n<p>Zus\u00e4tzlich zu <code>theme.json<\/code> kannst du den Block-Editor verwenden, um benutzerdefinierte Stile direkt auf Bl\u00f6cke anzuwenden. Mit dem Blockeditor kannst du \u00c4nderungen in Echtzeit sehen und das Design visuell anpassen, ohne dass du manuell Code schreiben musst. Das macht den Prozess zug\u00e4nglicher, vor allem f\u00fcr diejenigen, die eine visuelle Schnittstelle dem Programmieren vorziehen.<\/p>\n<p>Auch wenn die <code>theme.json<\/code> Datei die meisten Stylings \u00fcbernimmt, kannst du CSS f\u00fcr eine genauere Kontrolle verwenden. Benutzerdefinierte CSS k\u00f6nnen in der Datei <code>style.css<\/code> oder direkt in einzelnen Bl\u00f6cken mit dem Blockeditor hinzugef\u00fcgt werden.<\/p>\n<p>Ein Beispiel f\u00fcr eine <code>theme.json<\/code> Datei k\u00f6nnte Einstellungen f\u00fcr Farbpaletten, Typografie und Blockstile enthalten, mit denen sich das Design des Themes leicht verwalten und anpassen l\u00e4sst.<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 2,\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"name\": \"Primary\",\n          \"slug\": \"primary\",\n          \"color\": \"#0073aa\"\n        },\n        {\n          \"name\": \"Secondary\",\n          \"slug\": \"secondary\",\n          \"color\": \"#005177\"\n        }\n      ]\n    },\n    \"typography\": {\n      \"fontSizes\": [\n        {\n          \"name\": \"Small\",\n          \"slug\": \"small\",\n          \"size\": \"12px\"\n        },\n        {\n          \"name\": \"Normal\",\n          \"slug\": \"normal\",\n          \"size\": \"16px\"\n        }\n      ]\n    }\n  },\n  \"styles\": {\n    \"color\": {\n      \"background\": \"#ffffff\",\n      \"text\": \"#333333\"\n    },\n    \"typography\": {\n      \"fontFamily\": \"Arial, sans-serif\"\n    }\n  }\n}<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Mehr \u00fcber die M\u00f6glichkeiten von <code>theme.json<\/code> erf\u00e4hrst du in unserem Leitfaden, wie du <a href=\"https:\/\/kinsta.com\/de\/blog\/theme-json\/\">dein WordPress-Block-Theme wie ein Profi anpasst<\/a>.<\/p>\n<\/aside>\n\n<h2>Themes anpassen<\/h2>\n<p>Mit der Anpassung von WordPress-Themes kannst du das Aussehen und die Funktionalit\u00e4t deiner Website an deine Bed\u00fcrfnisse und Vorlieben anpassen. Sowohl klassische Themes als auch Block-Themes bieten verschiedene Methoden zur Anpassung, gehen dabei aber unterschiedlich vor.<\/p>\n<h3>Klassische Themes anpassen<\/h3>\n<p>Klassische Themes bieten mehrere M\u00f6glichkeiten, das Aussehen und die Funktionen deiner Website anzupassen:<\/p>\n<ol start=\"1\">\n<li><strong>Theme Customizer<\/strong> &#8211; Der WordPress Theme Customizer ist eine einfach zu bedienende Schnittstelle, mit der du das Aussehen deines Themes \u00e4ndern kannst, ohne den Code zu ver\u00e4ndern. Du kannst ihn \u00fcber <strong>Darstellung<\/strong> &gt; <strong>Anpassen<\/strong> aufrufen. Hier kannst du die Identit\u00e4t deiner Website, Farben, Men\u00fcs, Widgets und vieles mehr \u00e4ndern. Die \u00c4nderungen k\u00f6nnen vor dem Speichern in Echtzeit \u00fcberpr\u00fcft werden.<\/li>\n<li><strong>Benutzerdefiniertes CSS<\/strong> &#8211; F\u00fcr spezifischere Stil\u00e4nderungen kannst du direkt im Theme Customizer unter dem Abschnitt <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-css\/\">Zus\u00e4tzliches CSS<\/a> benutzerdefiniertes CSS hinzuf\u00fcgen. Diese Methode ist ideal, um kleinere \u00c4nderungen vorzunehmen, ohne die Themedateien zu bearbeiten.<\/li>\n<li><strong>Child-Themes<\/strong> &#8211; Wenn du umfangreiche \u00c4nderungen vornehmen musst, empfiehlt es sich, ein <a href=\"https:\/\/kinsta.com\/de\/blog\/child-theme-wordpress-erstellen\/\">Child-Theme<\/a> zu erstellen. Ein Child-Theme erbt die Funktionen des Parent-Theme und erm\u00f6glicht es dir, neue Stile und Funktionen zu \u00fcberschreiben oder hinzuzuf\u00fcgen. So wird sichergestellt, dass deine Anpassungen erhalten bleiben, wenn das Parent-Theme aktualisiert wird.<\/li>\n<li><strong>Themedateien<\/strong> &#8211; Fortgeschrittene Benutzer k\u00f6nnen Themedateien wie <code>header.php<\/code>, <code>footer.php<\/code> und <code>functions.php<\/code> direkt bearbeiten, um gr\u00f6\u00dfere \u00c4nderungen vorzunehmen. Diese Methode erfordert jedoch ein gutes Verst\u00e4ndnis von PHP und der WordPress-Vorlagenhierarchie.<\/li>\n<li><strong>Plugins<\/strong> &#8211; Es gibt zahlreiche Plugins, die die Anpassungsm\u00f6glichkeiten deines Themes erweitern. Mit <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/\">Page-Builder-Plugins<\/a> wie <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-elementor\/\">Elementor<\/a> kannst du zum Beispiel komplexe Layouts ohne Programmierkenntnisse erstellen.<\/li>\n<\/ol>\n<h3>Block-Themes anpassen<\/h3>\n<p>Mit ihrem Schwerpunkt auf FSE bieten Block-Themes einen visuelleren und benutzerfreundlicheren Ansatz f\u00fcr die Anpassung:<\/p>\n<ol start=\"1\">\n<li><strong>Site-Editor<\/strong> &#8211; Der WordPress Site-Editor (<strong>Erscheinungsbild<\/strong> &gt; <strong>Editor<\/strong>) ist das wichtigste Werkzeug f\u00fcr die Anpassung von Block-Themes. Er erm\u00f6glicht es dir, alle Aspekte deiner Website, einschlie\u00dflich Kopf- und Fu\u00dfzeilen, Vorlagen und einzelne Bl\u00f6cke, \u00fcber eine visuelle Schnittstelle zu \u00e4ndern. Die \u00c4nderungen werden sofort \u00fcbernommen, so dass du leicht erkennen kannst, wie sich deine Anpassungen auf das Design der Seite auswirken.<\/li>\n<li><strong>Globale Stile<\/strong> &#8211; Blockthemes verwenden die Datei <code>theme.json<\/code>, um globale Stile zu definieren. Du kannst Farben, Typografie, Abst\u00e4nde und vieles mehr global anpassen und so die Konsistenz deiner Website sicherstellen. Mit dem Site Editor kannst du diese Einstellungen auch visuell anpassen.<\/li>\n<li><strong>Wiederverwendbare Bl\u00f6cke und Muster<\/strong> &#8211; Du kannst wiederverwendbare Bl\u00f6cke und Muster erstellen, um die Konsistenz zu wahren und den Gestaltungsprozess zu rationalisieren. Wiederverwendbare Bl\u00f6cke k\u00f6nnen gespeichert und in jeden Beitrag oder jede Seite eingef\u00fcgt werden, w\u00e4hrend Blockmuster vordefinierte Layouts bieten, die du an deine Bed\u00fcrfnisse anpassen kannst.<\/li>\n<li><strong>Benutzerdefinierte Vorlagen<\/strong> &#8211; Mit Blockthemes kannst du direkt im Site-Editor benutzerdefinierte Vorlagen f\u00fcr verschiedene Arten von Inhalten erstellen. So kannst du das Layout und Design bestimmter Seiten oder Beitragstypen anpassen, ohne Code zu schreiben.<\/li>\n<li><strong>Plugins<\/strong> &#8211; Wie klassische Themes k\u00f6nnen auch Block-Themes mit Plugins erweitert werden. Viele Plugins wurden entwickelt, um die M\u00f6glichkeiten des Blockeditors zu erweitern und bieten zus\u00e4tzliche Bl\u00f6cke, Muster und Anpassungsm\u00f6glichkeiten.<\/li>\n<\/ol>\n<h2>Zusammenfassung<\/h2>\n<p>Wenn du WordPress-Themes anpasst, kannst du deine Website einzigartig und funktional gestalten. Klassische Themes setzen auf den Theme Customizer, benutzerdefinierte CSS, Child-Themes und direkte Dateibearbeitung, um flexibel zu sein. Block-Themes nutzen den Site Editor und <code>theme.json<\/code> f\u00fcr einen visuellen und intuitiven Ansatz.<\/p>\n<p>Beide Methoden bieten leistungsstarke Werkzeuge, mit denen du deine Website an deine Bed\u00fcrfnisse anpassen kannst, egal ob du lieber programmierst oder sie visuell anpasst.<\/p>\n<p>Nachdem du ein Theme nach deinem Geschmack erstellt hast, entweder ein klassisches oder ein Block-Theme, ist es wichtig, dass deine Website auf einem stabilen Hosting-System gehostet wird, 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","protected":false},"excerpt":{"rendered":"<p>WordPress-Themes spielen eine entscheidende Rolle bei der Gestaltung des Aussehens und der Funktionalit\u00e4t deiner Website. Sie legen fest, wie deine Inhalte angezeigt werden und bieten verschiedene &#8230;<\/p>\n","protected":false},"author":287,"featured_media":70939,"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-70938","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>Kernkonzepte bei der Entwicklung von WordPress-Themes - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Entdecke die grundlegenden Konzepte der WordPress-Theme-Entwicklung, einschlie\u00dflich klassischer und Block-Themes, Vorlagenhierarchie und benutzerdefinierter Beitragstypen.\" \/>\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\/wordpress-theme-kernkonzepte\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Grundlegende Konzepte, die du bei der Entwicklung von WordPress-Themes verstehen musst\" \/>\n<meta property=\"og:description\" content=\"Entdecke die grundlegenden Konzepte der WordPress-Theme-Entwicklung, einschlie\u00dflich klassischer und Block-Themes, Vorlagenhierarchie und benutzerdefinierter Beitragstypen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/\" \/>\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-21T07:19:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-23T11:41:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\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=\"Entdecke die grundlegenden Konzepte der WordPress-Theme-Entwicklung, einschlie\u00dflich klassischer und Block-Themes, Vorlagenhierarchie und benutzerdefinierter Beitragstypen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development-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=\"15\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Grundlegende Konzepte, die du bei der Entwicklung von WordPress-Themes verstehen musst\",\"datePublished\":\"2024-08-21T07:19:11+00:00\",\"dateModified\":\"2024-08-23T11:41:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/\"},\"wordCount\":2818,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/\",\"name\":\"Kernkonzepte bei der Entwicklung von WordPress-Themes - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png\",\"datePublished\":\"2024-08-21T07:19:11+00:00\",\"dateModified\":\"2024-08-23T11:41:07+00:00\",\"description\":\"Entdecke die grundlegenden Konzepte der WordPress-Theme-Entwicklung, einschlie\u00dflich klassischer und Block-Themes, Vorlagenhierarchie und benutzerdefinierter Beitragstypen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#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\":\"Grundlegende Konzepte, die du bei der Entwicklung von WordPress-Themes verstehen musst\"}]},{\"@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":"Kernkonzepte bei der Entwicklung von WordPress-Themes - Kinsta\u00ae","description":"Entdecke die grundlegenden Konzepte der WordPress-Theme-Entwicklung, einschlie\u00dflich klassischer und Block-Themes, Vorlagenhierarchie und benutzerdefinierter Beitragstypen.","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\/wordpress-theme-kernkonzepte\/","og_locale":"de_DE","og_type":"article","og_title":"Grundlegende Konzepte, die du bei der Entwicklung von WordPress-Themes verstehen musst","og_description":"Entdecke die grundlegenden Konzepte der WordPress-Theme-Entwicklung, einschlie\u00dflich klassischer und Block-Themes, Vorlagenhierarchie und benutzerdefinierter Beitragstypen.","og_url":"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-08-21T07:19:11+00:00","article_modified_time":"2024-08-23T11:41:07+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Entdecke die grundlegenden Konzepte der WordPress-Theme-Entwicklung, einschlie\u00dflich klassischer und Block-Themes, Vorlagenhierarchie und benutzerdefinierter Beitragstypen.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development-1024x512.png","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"15\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Grundlegende Konzepte, die du bei der Entwicklung von WordPress-Themes verstehen musst","datePublished":"2024-08-21T07:19:11+00:00","dateModified":"2024-08-23T11:41:07+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/"},"wordCount":2818,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/","url":"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/","name":"Kernkonzepte bei der Entwicklung von WordPress-Themes - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png","datePublished":"2024-08-21T07:19:11+00:00","dateModified":"2024-08-23T11:41:07+00:00","description":"Entdecke die grundlegenden Konzepte der WordPress-Theme-Entwicklung, einschlie\u00dflich klassischer und Block-Themes, Vorlagenhierarchie und benutzerdefinierter Beitragstypen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/#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":"Grundlegende Konzepte, die du bei der Entwicklung von WordPress-Themes verstehen musst"}]},{"@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\/70938","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=70938"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/70938\/revisions"}],"predecessor-version":[{"id":70977,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/70938\/revisions\/70977"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70938\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70938\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70938\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70938\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70938\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70938\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70938\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70938\/translations\/nl"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70938\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/70939"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=70938"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=70938"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=70938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}