{"id":11097,"date":"2026-05-13T14:24:40","date_gmt":"2026-05-13T07:24:40","guid":{"rendered":"\/de\/tutorials\/?p=11097"},"modified":"2026-05-13T14:24:42","modified_gmt":"2026-05-13T07:24:42","slug":"wordpress-theme-editor","status":"publish","type":"post","link":"\/de\/tutorials\/wordpress-theme-editor","title":{"rendered":"Was ist der WordPress-Theme-Editor und wie funktioniert er?"},"content":{"rendered":"<p>Der WordPress-Theme-Editor, offiziell als <strong>Theme-Datei-Editor<\/strong> bezeichnet, erm&ouml;glicht es Ihnen, Theme-Dateien direkt im WordPress-Dashboard zu bearbeiten.<\/p><p>Er spielt eine wichtige Rolle bei der Anpassung und Fehlerbehebung von WordPress-Themes, weil er Ihnen sofortigen Zugriff auf die Kerndateien Ihres Themes gibt, ohne dass Sie externe Tools wie FTP-Clients oder Dateimanager verwenden m&uuml;ssen.<\/p><p>Ein WordPress-Theme umfasst eine Sammlung von PHP- CSS- und JavaScript-Dateien, die das Design und die Funktionalit&auml;t Ihrer Website steuern.<\/p><p>Dateien wie <strong>header.php<\/strong> und <strong>style.css<\/strong> definieren die HTML-Struktur und das visuelle Design Ihrer Website, w&auml;hrend <strong>functions.php<\/strong> Funktionen wie Men&uuml;s, Widgets und benutzerdefinierte Logos steuert.<\/p><p>Mit dem Theme-Datei-Editor k&ouml;nnen Sie alle diese Dateien an einem Ort bearbeiten. Sie k&ouml;nnen es verwenden, um:<\/p><ul class=\"wp-block-list\">\n<li><strong>Vorlagendateien<\/strong> <strong>zu bearbeiten<\/strong>. &Auml;ndern Sie, wie bestimmte Seiten wie Beitr&auml;ge, Archive oder 404-Seiten strukturiert sind und angezeigt werden.<\/li>\n\n\n\n<li><strong>Stylesheets anzupassen<\/strong>. Passen Sie Schriftarten, Farben, Layouts und Abst&auml;nde in der Datei <strong>style.css<\/strong> an, um das Design Ihrer Website zu aktualisieren.<\/li>\n\n\n\n<li><strong>Funktionalit&auml;t hinzuzuf&uuml;gen<\/strong>. F&uuml;gen Sie Code in die <strong>functions.php<\/strong> ein, um Funktionen zu registrieren, Skripte einzubinden oder das Standardverhalten von WordPress zu &auml;ndern.<\/li>\n\n\n\n<li><strong>Probleme zu beheben<\/strong>. Finden und beheben Sie Probleme im Code, die das Frontend oder Dashboard Ihrer Website beeintr&auml;chtigen.<\/li>\n<\/ul><p>\/toc<\/p><h2 class=\"wp-block-heading\" id=\"h-was-ist-der-wordpress-theme-editor\"><strong>Was ist der WordPress-Theme-Editor?<\/strong> <\/h2><p>Der WordPress-Theme-Editor ist ein integrierter Klartext-Code-Editor im WordPress-Admin-Dashboard<strong>, mit dem Sie <\/strong> <strong>die PHP- CSS- und anderen Konfigurationsdateien Ihres Themes bearbeiten k&ouml;nnen<\/strong>.<\/p><p>Auf der linken Seite des Bildschirms sehen Sie den Code-Editor mit der ausgew&auml;hlten Datei. Auf der rechten Seite listet eine Seitenleiste alle bearbeitbaren Dateien im aktiven Theme auf.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a0c51711f456\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"585\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/wordpress-theme-datei-editor-style-css-mit-sidebar.png\" alt=\"WordPress-Theme-Datei-Editor mit der style.css eines Themes und der Seitenleiste der bearbeitbaren Dateien\" class=\"wp-image-11093\" title=\"wordpress-theme-datei-editor-style-css-mit-seitenleiste\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/wordpress-theme-datei-editor-style-css-mit-sidebar.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/wordpress-theme-datei-editor-style-css-mit-sidebar-300x171.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/wordpress-theme-datei-editor-style-css-mit-sidebar-768x439.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Die verf&uuml;gbaren Dateien h&auml;ngen von Ihrem WordPress-Theme ab, aber die meisten Themes enthalten diese Kerndateien:<\/p><ul class=\"wp-block-list\">\n<li><strong>style.css<\/strong>. Das Haupt-Stylesheet, das das Design Ihrer Website steuert, einschlie&szlig;lich Typografie, Farben, Abst&auml;nden, Layout und responsiven Stilen.<\/li>\n\n\n\n<li><strong>functions.php<\/strong>. Die Konfigurationsdatei, die Funktionen wie Widget-Bereiche, Navigationsmen&uuml;s, benutzerdefinierte Inhaltstypen und das Laden von Skripten definiert.<\/li>\n\n\n\n<li><strong>header.php<\/strong>. Erzeugt den oberen Bereich jeder Seite, einschlie&szlig;lich des <strong>&lt;head&gt;<\/strong>-Tags, des Website-Logos und des Hauptnavigationsmen&uuml;s.<\/li>\n\n\n\n<li><strong>footer.php<\/strong>. Gibt den unteren Abschnitt jeder Seite aus, h&auml;ufig mit Copyright-Informationen, Footer-Widgets und abschlie&szlig;enden Skripten.<\/li>\n\n\n\n<li><strong>single.php<\/strong>. Steuert das Layout einzelner Blogbeitr&auml;ge.<\/li>\n\n\n\n<li><strong>page.php<\/strong>. Legt das Layout statischer Seiten fest.<\/li>\n\n\n\n<li><strong>index.php<\/strong>. Dient als Fallback-Vorlage, wenn keine spezifischere Datei mit dem angeforderten Inhalt &uuml;bereinstimmt.<\/li>\n<\/ul><p>Standardm&auml;&szlig;ig k&ouml;nnen nur Benutzer mit der <strong>Administrator<\/strong>-Rolle auf den Theme-Datei-Editor zugreifen. WordPress steuert den Zugriff &uuml;ber die Berechtigung <strong>edit_themes<\/strong>, daher sehen <strong>Redakteure<\/strong> und <strong>Autoren<\/strong> diese Option im Dashboard nicht.<\/p><p>In WordPress Multisite k&ouml;nnen nur <strong>Super-Admins<\/strong> darauf zugreifen.<\/p><p>Der Editor weist Einschr&auml;nkungen auf. Er verf&uuml;gt &uuml;ber keine Versionskontrolle, weshalb Sie &Auml;nderungen nicht r&uuml;ckg&auml;ngig machen oder eine fr&uuml;here Dateiversion wiederherstellen k&ouml;nnen. Fehler in kritischen Dateien wie der <strong>functions.php<\/strong> k&ouml;nnen dazu f&uuml;hren, dass Ihre Website nicht mehr erreichbar ist.<\/p><p>WordPress f&uuml;hrt vor dem Speichern von PHP-Dateien zwar eine grundlegende Syntaxpr&uuml;fung durch, erkennt jedoch keine Logikfehler, die Ihr Layout oder die Funktionalit&auml;t dennoch beeintr&auml;chtigen k&ouml;nnen.<\/p><h3 class=\"wp-block-heading\"><strong>Was sind die Unterschiede zwischen dem WordPress-Theme-Editor, dem Block-Editor und dem Customizer?<\/strong> <\/h3><p>Der WordPress-Theme-Editor erm&ouml;glicht es Ihnen, <strong>den Quellcode Ihres Themes direkt zu bearbeiten<\/strong>. Der Block-Editor hilft Ihnen dabei, <strong>Inhalte in Beitr&auml;gen und Seiten zu erstellen und anzuordnen<\/strong>. Der WordPress-Customizer erm&ouml;glicht Ihnen, <strong>Theme-Einstellungen &uuml;ber eine visuelle Benutzeroberfl&auml;che anzupassen<\/strong>.<\/p><p>Beim Vergleich des Themes mit dem Block-Editor liegt der entscheidende Unterschied in der Bearbeitung per Code gegen&uuml;ber der visuellen Bearbeitung. Der Theme-Editor gibt Ihnen direkten Zugriff auf PHP- CSS- und JavaScript-Dateien, die steuern, wie Ihre gesamte Website funktioniert.<\/p><p>Der WordPress-Block-Editor, auch als <a href=\"\/de\/tutorials\/wordpress-gutenberg-editor\">Gutenberg<\/a> bekannt, verwendet ein blockbasiertes System, um Layouts ohne Programmierung zu erstellen. Sie verwenden ihn immer, wenn Sie einen Beitrag oder eine Seite erstellen oder bearbeiten.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a0c517120134\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"541\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/wordpress-block-editor-textblocke-einfuger-panel.png\" alt=\"WordPress-Block-Editor mit dem Block-Inserter-Bereich, der die verf&uuml;gbaren Textbl&ouml;cke zeigt\" class=\"wp-image-11094\" title=\"wordpress-block-editor-textbl&ouml;cke-einf&uuml;gebereich\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/wordpress-block-editor-textblocke-einfuger-panel.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/wordpress-block-editor-textblocke-einfuger-panel-300x158.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/wordpress-block-editor-textblocke-einfuger-panel-768x406.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Der Theme-Editor und der Customizer wirken &auml;hnlich, erf&uuml;llen aber unterschiedliche Zwecke.<\/p><p>Der WordPress-Customizer, der in klassischen Themes unter <strong>Design &rarr; Customizer<\/strong> verf&uuml;gbar ist, bietet eine visuelle Oberfl&auml;che zum Anpassen von Einstellungen wie Website-Identit&auml;t, Farben und Men&uuml;s.<\/p><p>Au&szlig;erdem zeigt es vor dem Ver&ouml;ffentlichen von &Auml;nderungen eine Live-Vorschau an. Sie k&ouml;nnen jedoch nur die Optionen &auml;ndern, die der Theme-Entwickler bereitstellt.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a0c517120a8a\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"591\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/WordPress-Customizer-Seitenleiste-mit-Theme-Einstellungen-und-einer-Live-Vorschau-der-Website-auf-der-rechten-Seite.png\" alt=\"WordPress-Customizer-Seitenleiste mit Theme-Einstellungen und einer Live-Vorschau der Website auf der rechten Seite\" class=\"wp-image-11095\" title=\"WordPress-Customizer-Theme-Einstellungen-Live-Vorschau\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/WordPress-Customizer-Seitenleiste-mit-Theme-Einstellungen-und-einer-Live-Vorschau-der-Website-auf-der-rechten-Seite.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/WordPress-Customizer-Seitenleiste-mit-Theme-Einstellungen-und-einer-Live-Vorschau-der-Website-auf-der-rechten-Seite-300x173.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/WordPress-Customizer-Seitenleiste-mit-Theme-Einstellungen-und-einer-Live-Vorschau-der-Website-auf-der-rechten-Seite-768x443.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Der Theme-Editor hat diese Einschr&auml;nkungen nicht. Sie k&ouml;nnen jede Codezeile in jeder Theme-Datei &auml;ndern. Er bietet jedoch keine visuelle Vorschau, und es gibt keine R&uuml;ckg&auml;ngig-Funktion. Sobald Sie auf <strong>Speichern<\/strong> klicken, werden Ihre &Auml;nderungen sofort &uuml;bernommen.<\/p><p>Kurz gesagt:<\/p><ul class=\"wp-block-list\">\n<li>Verwenden Sie den <strong>Theme-Editor<\/strong>, wenn Sie die Template-Logik &auml;ndern, PHP-Funktionen hinzuf&uuml;gen oder Stylesheets bearbeiten m&uuml;ssen, die &uuml;ber die M&ouml;glichkeiten des Customizers oder des Block-Editors hinausgehen.<\/li>\n\n\n\n<li>Verwenden Sie den<strong> Block-Editor<\/strong>, um Inhalte f&uuml;r Beitr&auml;ge und Seiten zu erstellen und zu strukturieren.<\/li>\n\n\n\n<li>Verwenden Sie den <strong>Customizer<\/strong> f&uuml;r visuelle &Auml;nderungen am Gesamtdesign Ihrer Website, die ohne Code auskommen, etwa zum Hinzuf&uuml;gen von benutzerdefiniertem CSS zu WordPress.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-wie-funktioniert-der-theme-editor-von-wordpress\"><strong>Wie funktioniert der Theme-Editor von WordPress?<\/strong> <\/h2><p>Der WordPress-Theme-Editor <strong>liest Dateien aus dem Verzeichnis \/wp-content\/themes\/ und zeigt sie in einem bearbeitbaren Textfeld in Ihrem Dashboard an<\/strong>.<\/p><p>Wenn Sie &Auml;nderungen speichern, schreibt WordPress sie direkt in die Datei auf Ihrem Server.<\/p><p>Der Speicherort des Editors h&auml;ngt von Ihrem Theme-Typ ab:<\/p><ul class=\"wp-block-list\">\n<li><strong>Klassische Themes<\/strong>. Navigieren Sie zu <strong>Design &rarr; Theme File Editor<\/strong>.<\/li>\n\n\n\n<li><strong>Block-Themes<\/strong> (WordPress <strong>5.9+<\/strong>). Gehen Sie zu <strong>Tools &rarr; Theme File Editor<\/strong>.<\/li>\n<\/ul><p>Bevor Sie &Auml;nderungen vornehmen, stellen Sie sicher, dass Sie &uuml;ber ein aktuelles <a href=\"\/de\/tutorials\/wordpress-backup-erstellen\">Backup Ihrer WordPress-Website<\/a> verf&uuml;gen.<\/p><p>Gehen Sie wie folgt vor, um eine Themedatei sicher zu bearbeiten:<\/p><ol class=\"wp-block-list\">\n<li><strong>&Ouml;ffnen Sie den Theme File Editor<\/strong>. Melden Sie sich in Ihrem WordPress-Dashboard an und &ouml;ffnen Sie je nach verwendetem Theme den entsprechenden Editor. <\/li>\n\n\n\n<li><strong>W&auml;hlen Sie das Thema aus<\/strong>. Verwenden Sie das Dropdown-Men&uuml; oben rechts und klicken Sie auf <strong>Select<\/strong>. WordPress l&auml;dt standardm&auml;&szlig;ig das aktive Theme, Sie k&ouml;nnen jedoch Dateien aus jedem installierten Theme anzeigen.<\/li>\n\n\n\n<li><strong>W&auml;hlen Sie eine Datei aus<\/strong>. Klicken Sie in der rechten Seitenleiste auf einen Dateinamen, z. B. <strong>style.css<\/strong> oder <strong>functions.php<\/strong>, um die Datei im Editor zu laden.<\/li>\n\n\n\n<li><strong>Bearbeiten Sie den Code sorgf&auml;ltig<\/strong>. Nehmen Sie immer nur eine &Auml;nderung auf einmal vor, damit Sie Probleme schnell erkennen k&ouml;nnen, falls etwas nicht mehr funktioniert. Wenn Sie einen umfangreichen Codeausschnitt hinzuf&uuml;gen, testen Sie ihn zuerst in einer Staging-Umgebung.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a0c5171217e7\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"621\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/Theme-Datei-Editor-der-benutzerdefinierten-Sidebar-Code-zeigt-der-am-Ende-von-functionsphp-hinzugefugt-wurde.png\" alt=\"Der Theme-Datei-Editor zeigt den benutzerdefinierten Sidebar-Code, der am Ende von functions.php hinzugef&uuml;gt wurde.\" class=\"wp-image-11096\" title=\"wordpress-theme-datei-editor-functions-php-benutzerdefinierter-sidebar-code\" srcset=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/Theme-Datei-Editor-der-benutzerdefinierten-Sidebar-Code-zeigt-der-am-Ende-von-functionsphp-hinzugefugt-wurde.png 1024w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/Theme-Datei-Editor-der-benutzerdefinierten-Sidebar-Code-zeigt-der-am-Ende-von-functionsphp-hinzugefugt-wurde-300x182.png 300w, https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2026\/04\/Theme-Datei-Editor-der-benutzerdefinierten-Sidebar-Code-zeigt-der-am-Ende-von-functionsphp-hinzugefugt-wurde-768x466.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"5\" class=\"wp-block-list\">\n<li><strong>Klicken Sie auf Datei aktualisieren<\/strong>. WordPress f&uuml;hrt vor dem Speichern eine grundlegende Syntaxpr&uuml;fung von PHP-Dateien durch. Wenn das System einen Fehler erkennt, zeigt es die Stelle des Fehlers an und blockiert die Aktualisierung.<\/li>\n\n\n\n<li><strong>&Uuml;berpr&uuml;fen Sie Ihre Website<\/strong>. &Ouml;ffnen Sie Ihre Website in einem neuen Browser-Tab und best&auml;tigen Sie, dass die &Auml;nderungen wie erwartet funktionieren. Wenn Ihre Website nicht mehr funktioniert und Sie nicht auf das Dashboard zugreifen k&ouml;nnen, stellen Sie Ihr vorheriges Backup wieder her.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-was-konnen-sie-im-wordpress-theme-editor-bearbeiten\"><strong>Was k&ouml;nnen Sie im WordPress-Theme-Editor bearbeiten?<\/strong> <\/h2><p>Mit dem WordPress-Theme-Editor <strong>k&ouml;nnen Sie jede Datei im Verzeichnis Ihres Themes bearbeiten<\/strong>. Hier sind die wichtigsten Dateitypen eines Themes:<\/p><ul class=\"wp-block-list\">\n<li><strong>Vorlagenlogik.<\/strong> PHP-Dateien in WordPress wie <strong>single.php<\/strong>, <strong>page.php<\/strong>, <strong>archive.php<\/strong> und <strong>404.php<\/strong> steuern die HTML-Ausgabe f&uuml;r bestimmte Seitentypen. Bearbeiten Sie diese Dateien, wenn Sie &auml;ndern m&ouml;chten, welche Inhalte angezeigt werden oder wie sie strukturiert sind. Zum Beispiel k&ouml;nnen Sie in <strong>single.php<\/strong> unter jedem Blogbeitrag ein individuelles Autorenfeld hinzuf&uuml;gen oder anpassen, wie Archivseiten Beitragsausz&uuml;ge anzeigen.<\/li>\n\n\n\n<li><strong>Visuelles Design.<\/strong> Die Datei <strong>style.css<\/strong> ist die zentrale Designdatei Ihres Themes. Es steuert Typografie, Farben, Abst&auml;nde, Layouts und responsive Breakpoints. Jedes WordPress-Theme ben&ouml;tigt eine <strong>style.css<\/strong> -Datei. Sie enth&auml;lt au&szlig;erdem die Metadaten des Themes, etwa Name, Version und Autor, in einem Kommentarblock am Anfang.<\/li>\n\n\n\n<li><strong>Verhalten des Themes.<\/strong> Die Datei <strong>functions.php<\/strong> funktioniert wie ein integriertes Plugin f&uuml;r Ihr Theme. Sie geh&ouml;rt zu den am h&auml;ufigsten bearbeiteten Dateien, weil sie die Registrierung von Men&uuml;s und Widgets, das Laden von Skripten, die Unterst&uuml;tzung von Funktionen wie Beitragsbildern und benutzerdefinierten Logos sowie benutzerdefinierte Shortcodes oder Hooks &uuml;bernimmt.<\/li>\n\n\n\n<li><strong>Interaktivit&auml;t im Frontend.<\/strong> Manche Themes enthalten <strong>.js<\/strong> -Dateien f&uuml;r Slider, Umschalter f&uuml;r mobile Men&uuml;s oder weiches Scrollen. Sie finden sie in der Regel in einem Unterverzeichnis <strong>\/js\/<\/strong> oder <strong>\/assets\/<\/strong> innerhalb des Theme-Ordners.<\/li>\n<\/ul><p>Hier sind einige Praxisbeispiele f&uuml;r h&auml;ufige Bearbeitungen:<\/p><ul class=\"wp-block-list\">\n<li><strong>Die Schriftfamilie Ihrer Website &auml;ndern.<\/strong> &Ouml;ffnen Sie <strong>style.css<\/strong> und bearbeiten Sie die Eigenschaft <strong>font-family<\/strong> im body-Selektor:<\/li>\n<\/ul><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">body {\nfont-family: 'Inter', sans-serif;\n}<\/pre><ul class=\"wp-block-list\">\n<li><strong>Einen benutzerdefinierten Widget-Bereich hinzuf&uuml;gen.<\/strong> &Ouml;ffnen Sie <strong>functions.php<\/strong> und registrieren Sie eine neue Sidebar:<\/li>\n<\/ul><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function custom_sidebar() {\nBitte &uuml;bersetzen Sie diesen Ausgangstext aus dem Englischen ins Deutsche. Ihre gesamte Antwort darf ausschlie&szlig;lich aus der &Uuml;bersetzung bestehen, ohne Erg&auml;nzungen. Denken Sie daran: Sie sind ein professioneller &Uuml;bersetzer und &uuml;bersetzen ausschlie&szlig;lich den Ausgangstext. Schreiben Sie nun eine &Uuml;bersetzung dieses Ausgangstexts ins Deutsche: register_sidebar( array(\n'name' =&gt; 'Benutzerdefinierte Seitenleiste',\n'id' =&gt; 'custom-sidebar',\n'before_widget' =&gt; '&lt;div class=\"widget\"&gt;',\n'after_widget' =&gt; '&lt;\/div&gt;',\n) );\n}\nadd_action( 'widgets_init', 'custom_sidebar' );<\/pre><ul class=\"wp-block-list\">\n<li><strong>Einen Tracking-Code in die Kopfzeile einf&uuml;gen.<\/strong> &Ouml;ffnen Sie <strong>header.php<\/strong> und f&uuml;gen Sie Ihr Tracking-Snippet oder Ihre Meta-Tags im Abschnitt <strong><strong>&lt;head&gt;<\/strong><\/strong> direkt vor dem schlie&szlig;enden <strong>&lt;\/head&gt;<\/strong>-Tag ein:<\/li>\n<\/ul><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;head&gt;\n&lt;!-- Vorhandener Inhalt im Head des Themes --&gt;\n&lt;!-- Benutzerdefinierter Tracking-Code --&gt;\n&lt;script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=your-tracking-id\"&gt;&lt;\/script&gt;\n&lt;script&gt;\nwindow.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\ngtag('config', 'your-tracking-id');\n&lt;\/script&gt;\n&lt;\/head&gt;<\/pre><h2 class=\"wp-block-heading\" id=\"h-best-practices-bei-der-verwendung-des-wordpress-theme-editors\"><strong>Best Practices bei der Verwendung des WordPress-Theme-Editors<\/strong> <\/h2><p>Wenn Sie den WordPress-Theme-Editor verwenden, beachten Sie einige grundlegende Best Practices: <strong>Sichern Sie Ihre Dateien vor jeder Bearbeitung, verwenden Sie f&uuml;r Anpassungen ein Child-Theme, testen Sie &Auml;nderungen in einer Staging-Umgebung, ziehen Sie bei komplexen Bearbeitungen sicherere Alternativen in Betracht und deaktivieren Sie den Editor, wenn Sie ihn nicht ben&ouml;tigen<\/strong>.<\/p><p>Das direkte Bearbeiten von Theme-Dateien birgt reale Risiken. Ein Syntaxfehler in der Datei <strong>functions.php<\/strong> kann einen kritischen Fehler ausl&ouml;sen, der Sie sowohl von Ihrer Website als auch vom Dashboard aussperrt.<\/p><p>Das Einf&uuml;gen von nicht vertrauensw&uuml;rdigem Code aus dem Internet kann Sicherheitsl&uuml;cken verursachen. Alle &Auml;nderungen, die Sie an den Kerndateien eines Parent-Themes vornehmen, gehen beim n&auml;chsten Theme-Update ebenfalls verloren.<\/p><p>Sie k&ouml;nnen diese Risiken beherrschen, wenn Sie vor allen &Auml;nderungen die richtigen Sicherheitsvorkehrungen treffen:<\/p><ul class=\"wp-block-list\">\n<li><strong>Bewahren Sie Backups auf und verwenden Sie Versionskontrolle<\/strong>. Speichern Sie von jeder Datei eine Kopie, bevor Sie sie bearbeiten. Wenn eine einzige fehlerhafte Codezeile Ihre Website lahmlegt, ist dieses Backup der schnellste Weg zur Wiederherstellung. Wenn Sie das <a href=\"\/de\/wordpress-hosting\">verwaltete WordPress-Hosting von Hostinger<\/a> nutzen, erhalten Sie in allen Tarifen automatische w&ouml;chentliche Backups und in den Tarifen <strong>Business + AI<\/strong> und h&ouml;her t&auml;gliche Backups. Wenn Sie h&auml;ufig &Auml;nderungen verwalten oder im Team arbeiten, verwenden Sie Git zur Versionsverwaltung. Es erm&ouml;glicht Ihnen, &Uuml;berarbeitungen nachzuverfolgen, &Auml;nderungen zu vergleichen und zusammenzuarbeiten, ohne die Arbeit der anderen zu &uuml;berschreiben.<\/li>\n\n\n\n<li><strong>Verwenden Sie ein Child-Theme<\/strong>. Ein WordPress-Child-Theme &uuml;bernimmt Design und Funktionalit&auml;t des Parent-Themes, speichert Ihre Anpassungen jedoch separat. Wenn das Parent-Theme aktualisiert wird, bleiben Ihre &Auml;nderungen erhalten. Wenn Sie &Auml;nderungen am Code vornehmen, <a href=\"\/de\/tutorials\/wordpress-child-theme-erstellen\">erstellen Sie zuerst ein Child-Theme<\/a>. Dies ist der wichtigste Schritt, um Ihre Anpassungen vor Updates zu sch&uuml;tzen.<\/li>\n\n\n\n<li><strong>Testen Sie auf einer Staging-Website<\/strong>. Eine <a href=\"\/de\/tutorials\/wordpress-staging-site-erstellen\">WordPress-Staging-Umgebung<\/a> ist eine Kopie Ihrer Live-Website, in der Sie &Auml;nderungen sicher testen k&ouml;nnen. Falls etwas ausf&auml;llt, werden Ihre Besucher es nicht bemerken. Nutzer von Hostinger mit dem Tarif <strong>Business + KI<\/strong> und h&ouml;her k&ouml;nnen das WordPress-Staging-Tool im <strong>hPanel<\/strong> verwenden. Alternativ k&ouml;nnen Sie WordPress lokal auf Ihrem Computer installieren, um &Auml;nderungen zu testen, bevor Sie sie live schalten.<\/li>\n\n\n\n<li><strong>Ziehen Sie f&uuml;r erweiterte Bearbeitungen sicherere Alternativen in Betracht<\/strong>. Der Theme-Datei-Editor eignet sich gut f&uuml;r schnelle &Auml;nderungen, ist aber f&uuml;r komplexe Entwicklungen nicht ideal. F&uuml;r gr&ouml;&szlig;ere Bearbeitungen verwenden Sie einen FTP-Client wie FileZilla oder den Dateimanager Ihres Hosting-Anbieters. Laden Sie die Theme-Dateien herunter, bearbeiten Sie sie in einem dedizierten Code-Editor wie VS Code und laden Sie sie anschlie&szlig;end wieder hoch. Code-Editoren bieten Syntaxhervorhebung, automatische Vervollst&auml;ndigung, Fehlererkennung und eine bessere Dateiverwaltung.<\/li>\n\n\n\n<li><strong>Deaktivieren Sie den Theme-Editor, wenn Sie ihn nicht ben&ouml;tigen<\/strong>. Wenn Sie nicht vorhaben, Theme-Dateien &uuml;ber das Dashboard zu bearbeiten, deaktivieren Sie den Theme-Datei-Editor vollst&auml;ndig. Das hilft, versehentliche &Auml;nderungen zu verhindern und Sicherheitsrisiken zu verringern, wenn sich jemand unbefugt Administratorzugriff verschafft. F&uuml;gen Sie dazu diese Konstante zu Ihrer Datei <strong>wp-config.php<\/strong> hinzu:<\/li>\n<\/ul><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">define( 'DISALLOW_FILE_EDIT', true );<\/pre><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/de\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-4104\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-nachster-schritt-erfahren-sie-wie-sie-ihre-wordpress-website-mit-dem-block-editor-bearbeiten\"><strong>N&auml;chster Schritt: Erfahren Sie, wie Sie Ihre WordPress-Website mit dem Block-Editor bearbeiten<\/strong> <\/h2><p>Neben der direkten Bearbeitung von Theme-Dateien k&ouml;nnen Sie Ihre WordPress-Website auch visuell mit dem integrierten Block-Editor anpassen.<\/p><p>Mit dem Drag-and-drop-System erstellen Sie inhaltsreiche Seiten und Beitr&auml;ge, indem Sie WordPress-Bl&ouml;cke wie Abs&auml;tze, Bilder, Spalten, Buttons und eingebettete Medien anordnen und stapeln &ndash; ganz ohne Code.<\/p><p>F&uuml;r websiteweite Design&auml;nderungen, etwa beim Bearbeiten von Headern, Footern und Seitenvorlagen, verwenden Sie den <strong>Website-Editor<\/strong> unter <strong>Design &rarr; Editor<\/strong>. Es erweitert das Blocksystem auf Ihre gesamte Website.<\/p><p>Sie ben&ouml;tigen ein Block-Theme wie <strong>Twenty Twenty-Five<\/strong> oder <strong>Twenty Twenty-Four<\/strong>, um den Website-Editor zu verwenden.<\/p><p>Wenn Sie eines verwenden, bietet es Ihnen eine leistungsstarke No-Code-M&ouml;glichkeit, strukturelle &Auml;nderungen vorzunehmen, f&uuml;r die Sie sonst PHP-Template-Dateien bearbeiten m&uuml;ssten.<\/p><p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Der WordPress-Theme-Editor, offiziell als Theme-Datei-Editor bezeichnet, erm&ouml;glicht es Ihnen, Theme-Dateien direkt im WordPress-Dashboard zu bearbeiten. Er spielt eine wichtige Rolle bei der Anpassung und Fehlerbehebung von WordPress-Themes, weil er Ihnen sofortigen Zugriff auf die Kerndateien Ihres Themes gibt, ohne dass Sie externe Tools wie FTP-Clients oder Dateimanager verwenden m&uuml;ssen. Ein WordPress-Theme umfasst eine Sammlung von [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/de\/tutorials\/wordpress-theme-editor\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":392,"featured_media":11092,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Was ist der WordPress Theme Editor und wie funktioniert er","rank_math_description":"Der WordPress Theme Editor erlaubt Anpassungen an PHP, CSS und Templates. Erfahren Sie, was m\u00f6glich ist und welche Risiken bestehen.","rank_math_focus_keyword":"WordPress Theme Editor","footnotes":""},"categories":[20],"tags":[],"class_list":["post-11097","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/11097","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/users\/392"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/comments?post=11097"}],"version-history":[{"count":3,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/11097\/revisions"}],"predecessor-version":[{"id":11743,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/11097\/revisions\/11743"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/media\/11092"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/media?parent=11097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/categories?post=11097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/tags?post=11097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}