header.php<\/code>\u3001footer.php<\/code> Die Anforderungen an Template-Dateien haben sich ver\u00e4ndert; es wird nun mehr Wert auf die Konfiguration und Verwaltung des \u201cSite-Editors\u201d sowie der \u201cTemplates\u201d gelegt.<\/p>\n\n\n\nWebsiten-Editierfunktionen und Block-Themen<\/h3>\n\n\n\n
Die Funktion \u201cSite-Wide Editing\u201d ist eine revolution\u00e4re Funktion von WordPress. In diesem Modus wird ein Theme durch eine Reihe von \u201cBlock-Vorlagen\u201d und \u201eTemplate-Teilen\u201c definiert. Die entscheidende Eingangsdatei ist\u2026 theme.json<\/code>Dieses Datei definiert mithilfe des JSON-Formats die Stilvorlagen, die Farbpaletten sowie die Layout-Elemente des gesamten Themes und erm\u00f6glicht somit eine globale Steuerung der visuellen Erscheinung der Website. Es ist nicht mehr notwendig, umfangreiche CSS-Code zu schreiben, um die visuellen Effekte der Website einheitlich zu gestalten.<\/p>\nEmpfohlene Lekt\u00fcre Vom Nullpunkt zum Erfolg: Eine ausf\u00fchrliche Erkl\u00e4rung des gesamten Prozesses der WordPress-Theme-Entwicklung sowie ein Praxisleitfaden<\/a>\u3002<\/p>\n\n\n\n\nKritische Dateien und Strukturen<\/h3>\n\n\n\n
Ein sehr grundlegendes Block-Thema ben\u00f6tigt nur zwei Dateien:style.css<\/code> und index.html<\/code>(Generiert vom Block-Editor.)style.css<\/code> Dient haupts\u00e4chlich dazu, Metadaten zu einem Thema bereitzustellen, wie z. B. Namen, Autor und Beschreibung. Die tats\u00e4chliche Steuerung der Seitenlayout erfolgt jedoch durch andere Komponenten. index.html<\/code>Die Inhalte k\u00f6nnen mithilfe des Site-Editors visuell eingef\u00fcgt und angeordnet werden, um die gew\u00fcnschten Seiten zu erstellen. Die Template-Dateien \u2013 wie zum Beispiel das Template f\u00fcr die Startseite oder das Template f\u00fcr einzelne Artikel \u2013 werden in einer speziellen Verzeichnisstruktur gespeichert. \/templates<\/code> und \/parts<\/code> Im Verzeichnis.<\/p>\n\n\r\n\r\n \r\n \r\n \r\n UltaHost \u2013 WordPress-Hosting-Anbieter <\/strong>\r\n 30-t\u00e4gige Geld-zur\u00fcck-Garantie, unbegrenztes Bandbreiten- und Datenbankvolumen, kostenlose DDoS-Schutzma\u00dfnahmen sowie ein Rabatt von 501 auf 4 Terabyte bei einer Kaufdauer von 3 Jahren.<\/div>\r\n <\/div>\r\n\r\n \r\n \r\n ![\"Das](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251227020448.webp\" "\\"\\"")
\r\n ![\"Das](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251229052118.webp\" "\\"\\"")
\r\n <\/a>\r\n \r\n \r\n Zugangsseite <\/a>\r\n <\/div>\r\n<\/div>\n\n\n\n\n\n\nVerwenden Sie den Site-Editor, um das Rahmenkonzept des Themes zu erstellen.<\/h2>\n\n\n\n
Der Site-Editor ist die zentrale Arbeitsplattform f\u00fcr das kodierte Erstellen von Themes. Sie k\u00f6nnen ihn \u00fcber \u201cErscheinungsbild\u201d -> \u201cEditor\u201d erreichen.<\/p>\n\n\n\n
Erstellen und bearbeiten von Vorlagen<\/h3>\n\n\n\n
Hier k\u00f6nnen Sie vorhandene Templates (z. B. die Startseite oder Artikelseiten) bearbeiten oder brandneue Templates erstellen. Die Benutzeroberfl\u00e4che des Editors \u00e4hnelt der Artikelbearbeitungsoberfl\u00e4che, allerdings werden dabei die Strukturen der gesamten Seiten ver\u00e4ndert. Sie k\u00f6nnen Bl\u00f6cke wie \u201cSitztitel\u201d, \u201cNavigation\u201d, \u201cArtikelliste\u201d, \u201cArtikelinhalt\u201d und \u201cFu\u00dfzeile\u201d hinzuf\u00fcgen, um den Rahmen des Templates zu erstellen. Die Eigenschaften jedes Blocks (z. B. Farbe, Abstand, Layout) k\u00f6nnen \u00fcber das Einstellungspanel auf der rechten Seite feinjustiert werden; diese Anpassungen werden automatisch in das Template \u00fcbernommen. theme.json<\/code> Die globalen Einstellungen werden synchronisiert, oder lokale Styles werden erstellt.<\/p>\n\n\n\nEntwerfen von globalen Styles sowie Wiederverwendung von Styles<\/h3>\n\n\n\n
Die \u201cStil\u201d-Seitenleiste des Site-Editors erm\u00f6glicht es Ihnen, globale Styles zu konfigurieren. Hier k\u00f6nnen Sie das Farbpaar, die Schriftarten, die Button-Designs sowie die Styles von Links f\u00fcr die gesamte Website festlegen. Sobald die Styles definiert sind, werden sie auf der gesamten Website angewendet, was eine einheitliche visuelle Gestaltung gew\u00e4hrleistet. Zum Beispiel k\u00f6nnen Sie einen blauen Farbton mit dem Namen \u201cHauptfarbe\u201d definieren; anschlie\u00dfend k\u00f6nnen Sie diesen voreingestellten Farbton an allen Stellen, an denen Farben eingestellt werden k\u00f6nnen, direkt ausw\u00e4hlen. Dies erh\u00f6ht die Designeffizienz und die Konsistenz erheblich.<\/p>\n\n\n\n
Entwicklung beschleunigen mithilfe des Thema-Builders<\/h2>\n\n\n\n
F\u00fcr komplexere Layouts oder spezifische Funktionen kannst du auf Plugins von Drittanbieter-Themenbauern zur\u00fcckgreifen. Diese bieten eine intuitive Drag-and-Drop-Oberfl\u00e4che sowie voreingestellte Module.<\/p>\n
Empfohlene Lekt\u00fcre Vom Nullpunkt zum Erfolg: Eine umfassende Einf\u00fchrung in die Kerntechnologien und den praktischen Ablauf der WordPress-Theme-Entwicklung<\/a>\u3002<\/p>\n\n\n\n\nPopular Build-Tool Options<\/h3>\n\n\n\n
Seitenbauwerke wie Elementor, Brizy und Oxygen bieten alle eine leistungsstarke \u201cTheme Builder\u201d-Funktion. Nehmen wir Elementor als Beispiel: Der \u201cTheme Builder\u201d erm\u00f6glicht es Ihnen, f\u00fcr jede einzelne Teilbereiche einer Website \u2013 den Header, den Footer, die Artikelseiten, die Archivseiten usw. \u2013 separate Templates zu erstellen. Mithilfe der umfangreichen visuellen Steuerelemente k\u00f6nnen Sie komplexe Layouts erstellen und Anzeigeeinstellungen festlegen (z. B. \u201cauf alle Artikel anwenden\u201d). Der gesamte Prozess ist vollst\u00e4ndig visuell gestaltet.<\/p>\n\n\n\n
Als eigenst\u00e4ndiges Thema exportieren<\/h3>\n\n\n\n
Viele hochentwickelte Builder-Plugins erm\u00f6glichen es, Ihre Designs als eigenst\u00e4ndige, installierbare WordPress-Themen-Dateien (in Form eines .zip-Pakets) zu exportieren. Das bedeutet, dass Sie die mit dem Builder erstellten Themen auf jeder anderen WordPress-Website verwenden k\u00f6nnen, ohne dort das entsprechende Builder-Plugin installieren zu m\u00fcssen \u2013 somit wird eine echte \u201ckodlose\u201d Verbreitung der Themen erm\u00f6glicht. Dies ist besonders n\u00fctzlich, wenn Sie ma\u00dfgeschneiderte Themen f\u00fcr Kunden erstellen oder Ihre eigenen Themenprodukte verkaufen m\u00f6chten.<\/p>\n\n\n\n
Anpassung des Themas und Erweiterung der Funktionen<\/h2>\n\n\n\n
Auch ohne Code kannst du deinem no-code-Thema auf verschiedene Weise fortgeschrittene Funktionen hinzuf\u00fcgen und es individuell anpassen.<\/p>\n\n\r\n
\r\n \r\n \r\n \r\n hosting.com Shared Hosting <\/strong>\r\n Hohe Leistung mit AMD EPYC-CPUs, NVMe-SSD-Speicher und LiteSpeed, fachkundiger Inhouse-Support rund um die Uhr, erweiterte Sicherheitsma\u00dfnahmen einschlie\u00dflich SSL, Brute-Force-, Malware- und DDoS-Schutz, Einsparungen von bis zu 73%<\/div>\r\n <\/div>\r\n\r\n \r\n \r\n ![\"Das](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/09\/20250901222940.svg\" "\\"\\"")
\r\n ![\"Das](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251228220957.webp\" "\\"\\"")
\r\n <\/a>\r\n \r\n \r\n Zugangsseite <\/a>\r\n <\/div>\r\n<\/div>\n\n\n\n\n\n\nVerwendung des Block-Modus sowie wiederverwendbarer Bl\u00f6cke<\/h3>\n\n\n\n
Das WordPress-Core sowie viele Plugins bieten eine umfangreiche Auswahl an \u201cBlock-Modi\u201d \u2013 also vorgefertigten, ansprechend gestalteten Block-Arrangements. Sie k\u00f6nnen diese Block-Module wie Baukl\u00f6tze in Ihre Templates einf\u00fcgen und so schnell professionelle Seitenbereiche erstellen. Dar\u00fcber hinaus k\u00f6nnen Sie eine sorgf\u00e4ltig gestaltete Block-Kombination (z. B. einen Bereich f\u00fcr besondere Inhalte) als \u201cwiederverwendbaren Block\u201d speichern, um diese an beliebigen Stellen auf der Website erneut zu verwenden und gleichzeitig zu aktualisieren.<\/p>\n\n\n\n
Funktionen durch Hook-Plugins hinzuf\u00fcgen<\/h3>\n\n\n\n
Falls Sie bestimmten Funktionen zu einem Thema hinzuf\u00fcgen m\u00f6chten \u2013 wie z. B. benutzerdefinierte Artikeltypen, SEO-Optimierungsoptionen oder Kontaktformulare \u2013 m\u00fcssen Sie nicht selbst programmieren. Dies k\u00f6nnen Sie durch das Installieren von Funktionen-Plugins erreichen. Zum Beispiel k\u00f6nnen Sie mit dem \u201cCustom Post Type UI\u201d-Plugin eine Portfolio-Seite erstellen, mit dem \u201cAdvanced Custom Fields\u201d-Plugin zus\u00e4tzliche Felder zu Artikeln hinzuf\u00fcgen und diese Felder anschlie\u00dfend mithilfe des Builders oder des Blockeditors zusammen mit dynamischen Daten anzeigen. Der gesamte Prozess erfolgt \u00fcber die Konfigurationsoberfl\u00e4che der Plugins, ohne dass Sie sich mit dem Code auseinandersetzen m\u00fcssen.<\/p>\n\n\n\n
Reaktives Design und Vorabansichten<\/h3>\n\n\n\n
Sowohl die eingebauten Site-Editoren als auch Drittanbieter-Buildern bieten umfassende Funktionen zur Vorschau in verschiedenen Ger\u00e4temodi. Sie k\u00f6nnen zwischen Desktop-, Tablet- und Mobilansichten wechseln und die Anordnung der Elemente, die Abst\u00e4nde sowie deren Sichtbarkeit f\u00fcr verschiedene Ger\u00e4te anpassen, um sicherzustellen, dass das erstellte Thema auf allen Bildschirmgr\u00f6\u00dfen perfekt dargestellt wird.<\/p>\n
Empfohlene Lekt\u00fcre WordPress-Themenentwicklung: Ein umfassender Leitfaden von der Grundlage bis zur Meisterschaft sowie praktische Tipps<\/a>\u3002<\/p>\n\n\n\n\nZusammenfassungen<\/h2>\n\n\n\n
Die kodenlose Erstellung von WordPress-Themen hat sich von einer Konzeption zu einem ausgereiften und effizienten Arbeitsprozess entwickelt. Mithilfe der offiziellen Block-Tools, die auf dem Site Editor basieren, oder mithilfe leistungsstarker Drittanbieter-Theme-Builder kann jeder seine eigenen Designideen in voll funktionsf\u00e4hige WordPress-Themen umsetzen. Diese Methode senkt die H\u00fcrden f\u00fcr die Themenentwicklung erheblich und erm\u00f6glicht es Ihnen, sich auf das Design und die Struktur des Inhalts zu konzentrieren, anstatt sich mit komplexen Programmierregeln auseinanderzusetzen. Egal, ob Sie ein pers\u00f6nliches Blog-Thema, eine Firmenwebseite oder ein E-Commerce-Portal erstellen m\u00f6chten \u2013 kodenlose L\u00f6sungen bieten einen schnellen, flexiblen und professionellen Ausgangspunkt.<\/p>\n\n\n\n
FAQ H\u00e4ufig gestellte Fragen<\/h2>\n\n\n\nWie ist die Leistung von Themes, die ohne Code erstellt werden?<\/h3>\n\n\n\n
Die Leistung von ohne Code erstellten Themes h\u00e4ngt von den verwendeten Tools und Methoden ab. Themes, die mit den nativen WordPress-Bl\u00f6cken sowie dem Site Editor erstellt werden, weisen in der Regel eine ausgezeichnete Leistung und schnelle Ladezeiten auf, da sie die Kernstandards von WordPress befolgen und nicht auf zus\u00e4tzliche Frontend-Frameworks angewiesen sind. Themes, die mit bestimmten Drittanbieter-Buildern erstellt werden, k\u00f6nnen aufgrund der mitgeladenen Styles und Script-Dateien des Builders etwas aufwendiger in der Ausf\u00fchrung sein; doch viele moderne Builder legen gro\u00dfen Wert auf die Optimierung des Codes.<\/p>\n\n\r\n
\r\n \r\n \r\n \r\n InterServer Shared Hosting <\/strong>\r\n Shared Hosting $2.50 USD pro Monat, erster Monat $0.1 USD Promo-Code tryinterserver, 461 Cloud-Apps Skripte, ein Klick installieren.<\/div>\r\n <\/div>\r\n\r\n \r\n \r\n ![\"Das](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251228045033.svg\" "\\"\\"")
\r\n ![\"Das](\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251229054830.webp\" "\\"\\"")
\r\n <\/a>\r\n \r\n \r\n Zugangsseite <\/a>\r\n <\/div>\r\n<\/div>\n\n\n\n\n\n\nK\u00f6nnen Themen, die mit dieser Methode erstellt wurden, verkauft werden?<\/h3>\n\n\n\n
Ja, das ist durchaus m\u00f6glich. Solange die Lizenzvereinbarung des Tools, das Sie verwenden (z. B. ein Page Builder), es Ihnen erlaubt, die erstellten Ergebnisse f\u00fcr den kommerziellen Verkauf zu nutzen, k\u00f6nnen Sie das erstellte Theme verpacken und weiterverkaufen. Es ist von entscheidender Bedeutung, sicherzustellen, dass alle in dem Theme verwendeten Ressourcen (wie Bilder, Icons, Schriftarten) \u00fcber die entsprechenden Lizenzen f\u00fcr den kommerziellen Gebrauch verf\u00fcgen. Au\u00dferdem ist es eine gute Gesch\u00e4ftspraxis, den K\u00e4ufern klar mitzuteilen, auf welche Abh\u00e4ngigkeiten das Theme angewiesen ist \u2013 beispielsweise, ob bestimmte kostenlose Plugins ben\u00f6tigt werden, um einige Funktionen zu nutzen.<\/p>\n\n\n\n
Wie kann die Wartung und Aktualisierung von Code-freien Themes erfolgen?<\/h3>\n\n\n\n
Der Kern der Wartung besteht darin, Ihre \u201cDesign-Quelldateien\u201d gut zu verwalten. Wenn Sie einen Website-Editor verwenden, werden alle \u00c4nderungen direkt in der Datenbank gespeichert und \u00fcber das Standard-Update-System von WordPress synchronisiert. Wenn Sie einen Drittanbieter-Baukasten verwenden und das Design als Theme exportieren, m\u00fcssen Sie bei einem Update in der Regel das Design im urspr\u00fcnglichen Bauumfeld \u00e4ndern, es anschlie\u00dfend erneut exportieren und die neue Version den Nutzern zur Verf\u00fcgung stellen. F\u00fcr die Nutzer ist das Update des Themes genauso einfach wie das Update eines beliebigen anderen WordPress-Themes.<\/p>\n\n\n\n
Kann es komplexere, benutzerdefinierte Layouts wie unregelm\u00e4\u00dfige Grids oder Parallax-Scrolling-Effekte umgesetzt werden?<\/h3>\n\n\n\n
Ja. Der native Blockeditor sowie die unterst\u00fctzten Drittanbieter-Block-Plugins erm\u00f6glichen bereits sehr komplexe Layouts. Beispielsweise k\u00f6nnen durch die Kombination von Container-Bl\u00f6cken wie \u201cGroup\u201d, \u201cRow\u201d, \u201cStack\u201d, \u201cColumns\u201d und \u201cCover\u201d komplexe Grid-Strukturen erstellt werden. Viele Block-Plugins bieten au\u00dferdem spezielle Funktionen wie \u201cAdvanced Gallery\u201d oder \u201cParallax Cover\u201d an; die Parallax-Effekte k\u00f6nnen \u00fcber die Konfigurationsoberfl\u00e4che eingestellt werden, ohne dass CSS- oder JavaScript-Code geschrieben werden muss.<\/p>","protected":false},"excerpt":{"rendered":"
Dieser Artikel erkl\u00e4rt, wie Sie mithilfe der Funktionen zur vollst\u00e4ndigen Bearbeitung eines WordPress-Websites professionelle Themes von Grund auf erstellen k\u00f6nnen, ohne PHP- oder CSS-Code schreiben zu m\u00fcssen. Dazu werden der Website-Editor, die Datei theme.json sowie Blockvorlagen genutzt. Zudem wird beschrieben, wie Sie Bauwerke wie Elementor einsetzen k\u00f6nnen, um die Entwicklung zu beschleunigen sowie eine responsive Gestaltung und zus\u00e4tzliche Funktionen zu realisieren.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[638,640,639,3991,3992],"knowledge_category":[280],"class_list":["post-12398544","knowledge_post","type-knowledge_post","status-publish","hentry","tag-wordpress-theme-development","tag-site-editor","tag-block-theme","tag-nocode-development","tag-3992","knowledge_category-wordpress"],"acf":{"site_seo_keywords":"\u65e0\u4ee3\u7801WordPress\u4e3b\u9898,\u5168\u7ad9\u7f16\u8f91,\u7ad9\u70b9\u7f16\u8f91\u5668,\u533a\u5757\u4e3b\u9898,\u4e3b\u9898\u6784\u5efa\u5668,theme.json,WordPress\u65e0\u4ee3\u7801\u5f00\u53d1"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/de\/wp-json\/wp\/v2\/knowledge_posts\/12398544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.likacloud.com\/de\/wp-json\/wp\/v2\/knowledge_posts"}],"about":[{"href":"https:\/\/www.likacloud.com\/de\/wp-json\/wp\/v2\/types\/knowledge_post"}],"author":[{"embeddable":true,"href":"https:\/\/www.likacloud.com\/de\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":4,"href":"https:\/\/www.likacloud.com\/de\/wp-json\/wp\/v2\/knowledge_posts\/12398544\/revisions"}],"predecessor-version":[{"id":12405361,"href":"https:\/\/www.likacloud.com\/de\/wp-json\/wp\/v2\/knowledge_posts\/12398544\/revisions\/12405361"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/de\/wp-json\/wp\/v2\/media?parent=12398544"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/de\/wp-json\/wp\/v2\/tags?post=12398544"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/de\/wp-json\/wp\/v2\/knowledge_category?post=12398544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}