Wer diese Seite schon l\u00e4nger kennt, wei\u00df: Jungsi’s Corner l\u00e4uft seit 2013 auf WordPress. In dieser Zeit habe ich eine ganze Reihe von Themes ausprobiert \u2013 von fertigen L\u00f6sungen aus dem WordPress-Verzeichnis bis hin zu kommerziellen Premium-Themes. Das Ergebnis war meistens dasselbe: Optisch passabel, aber sobald ich etwas anpassen wollte, begann die eigentliche Arbeit.<\/p>\n\n\n\n
Nicht weil WordPress das nicht erlauben w\u00fcrde \u2013 sondern weil jedes Theme seine eigene, oft undokumentierte CSS-Struktur mitbringt. Wer kennt das nicht: Man m\u00f6chte den Abstand zwischen Header und Inhalt um ein paar Pixel verringern, sucht in den Browser-Entwicklertools nach dem zust\u00e4ndigen Selektor, findet Fertige WordPress-Themes sind Kompromisse. Sie m\u00fcssen f\u00fcr m\u00f6glichst viele Anwendungsf\u00e4lle funktionieren, weshalb sie oft mit einem Ballast aus CSS-Regeln, JavaScript-Bibliotheken und Einstellungsseiten daherkommen, die man zu 80% nie anfasst. Dazu kommt: Wer tiefer in den Code eingreifen m\u00f6chte, muss erst verstehen, wie der Theme-Entwickler gedacht hat. Welche Klassen verwendet er? Wo \u00fcberschreibt er WordPress-Standardstyles? Welche Variablen steuern Farben und Abst\u00e4nde?<\/p>\n\n\n\n\n\n\n\n Bei meinem letzten Theme-Wechsel hatte ich exakt dieses Problem. Das Theme sah gut aus, aber:<\/p>\n\n\n\n An dieser Stelle kam mir die Idee: Was w\u00e4re, wenn ich das Theme von Grund auf neu entwickle \u2013 diesmal mit Unterst\u00fctzung einer KI, die den Code selbst schreibt und dabei von Anfang an wei\u00df, wie er strukturiert ist?<\/p>\n\n\n\n Die Grund\u00fcberlegung ist simpel, aber effektiv. Ein KI-Modell wie Claude kann PHP, CSS und JavaScript schreiben. Es kennt die WordPress-Konventionen, versteht Template-Hierarchien und wei\u00df, wie Wenn ich also sage \u201eDas Logo ist zu klein“, muss sie nicht erst in fremdem Code nachschlagen \u2013 sie wei\u00df, dass das Logo per Dieses Wissen ist bei einem fremden Theme m\u00fchsam zu erarbeiten. Bei einem selbst generierten Theme ist es einfach vorhanden.<\/p>\n\n\n\n Die Entwicklung des \u201eRetro Minimal Blog“-Themes lief als iterativer Dialog. Ich beschrieb meine Anforderungen, die KI generierte den Code, ich testete das Ergebnis live auf jungsi.de und gab Feedback. Das ist kein grundlegend anderer Prozess als bei einem menschlichen Entwickler \u2013 aber er ist deutlich schneller und ohne Kommunikationsverluste.<\/p>\n\n\n\n Ein paar technische Entscheidungen, die dabei entstanden:<\/p>\n\n\n\n Ich habe mich bewusst f\u00fcr ein klassisches PHP-Theme entschieden. Block-Themes (Full Site Editing) sind die Zukunft von WordPress, aber f\u00fcr eine bestehende Seite mit viel historischem Content und spezifischen Anforderungen ist ein klassisches Theme einfacher zu kontrollieren. Die Template-Hierarchie ist \u00fcberschaubar: Das gesamte Design basiert auf CSS-Variablen in Das war die technisch interessanteste Herausforderung. Das Mega-Men\u00fc-Plugin schreibt Hintergrundfarben als Inline-Styles direkt in die DOM-Elemente \u2013 also Die finale L\u00f6sung: kein dauerhafter Observer, sondern gezieltes Nacheinf\u00e4rben beim WordPress‘ Ein bekanntes Problem bei Dark-Mode-Implementierungen: Wenn das Theme-Attribut erst nach Drei Zeilen, die sicherstellen dass der Besucher niemals einen wei\u00dfen Aufblitz sieht.<\/p>\n\n\n\n Ein MutationObserver der das gesamte DOM beobachtet ist auf Desktop unproblematisch \u2013 auf einem iPad mit dem gro\u00dfen Mega-Men\u00fc aber ein echtes Performance-Problem. Der Observer feuerte hunderte Callbacks pro Sekunde und blockierte den Browser sp\u00fcrbar. Die L\u00f6sung war ein kompletter Umbau der JavaScript-Architektur: kein permanenter Observer mehr, stattdessen Das Theme war nach der initialen Entwicklung funktionsf\u00e4hig \u2013 aber noch lange nicht fertig. Der eigentliche Feinschliff begann danach. Eine Auswahl der interessanteren Probleme:<\/p>\n\n\n\n TablePress schreibt seine Farben direkt als Inline-Styles in jede Tabellenzelle \u2013 und zus\u00e4tzlich tabellenspezifische CSS-Klassen wie Das normale Logo von Jungsi’s Corner hat dunkle Schrift auf hellem Hintergrund \u2013 im Dark Mode kaum zu erkennen. WordPress bietet von Haus aus keine Option f\u00fcr ein alternatives Dark-Mode-Logo. Die L\u00f6sung: ein eigenes Customizer-Feld unter \u201eDesign \u2192 Anpassen \u2192 Dark Mode“, das eine separate Bilddatei hinterlegt. Im Template werden beide Logos ausgegeben, aber jeweils das andere per CSS ausgeblendet:<\/p>\n\n\n\n Ein unerwartetes Problem: \u00dcberschriften im Artikeltext (H2\u2013H6) m\u00fcssen auf der Einzelseite in voller Gr\u00f6\u00dfe erscheinen \u2013 in der Beitragsvorschau auf der Startseite aber nicht. Wer H3 mit 1.75rem definiert und den Artikeltext bis zum Der Gutenberg-Editor l\u00e4dt seine eigene CSS-Datei ( Nach der gesamten Entwicklung hat das \u201eRetro Minimal Blog“-Theme folgende Funktionen:<\/p>\n\n\n\n Was ich an diesem Prozess besonders sch\u00e4tze: Die KI kennt ihren eigenen Code. Das klingt selbstverst\u00e4ndlich, ist es aber nicht. Bei einem fremden Theme, das ich von GitHub geklont oder aus dem WordPress-Verzeichnis installiert h\u00e4tte, w\u00e4re jeder Anpassungswunsch mit Recherche verbunden. Bei diesem Theme sage ich \u201eDas Logo ist zu klein“ und bekomme eine \u00c4nderung in genau der richtigen Zeile, mit der richtigen Spezifit\u00e4t.<\/p>\n\n\n\n Das bedeutet nicht, dass der Prozess reibungslos war. Der Was mich dabei am meisten \u00fcberrascht hat: Es waren nicht die gro\u00dfen Features die aufwendig waren, sondern die kleinen Eigenheiten. Dass WordPress Logo-Dimensionen als Inline-Attribute schreibt. Dass der Gutenberg-Editor eine eigene CSS-Datei braucht. Dass Plugin-Inline-Styles CSS- F\u00fcr jemanden, der wie ich nicht t\u00e4glich PHP und CSS schreibt, aber wei\u00df was er will, ist das ein erheblicher Gewinn. Das Theme ist kein Kompromiss mehr \u2013 es tut genau das, was ich von ihm verlange. Und wenn ich morgen etwas \u00e4ndern m\u00f6chte, wei\u00df ich (und die KI), wo der Code steht.<\/p>\n\n\n\n Das Theme steht nicht zur \u00f6ffentlichen Verf\u00fcgung, da es spezifisch auf die Anforderungen von Jungsi’s Corner zugeschnitten ist. Fragen zur Entwicklung gerne in den Kommentaren.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" Wer diese Seite schon l\u00e4nger kennt, wei\u00df: Jungsi’s Corner l\u00e4uft seit 2013 auf WordPress. In dieser Zeit habe ich eine ganze Reihe von Themes ausprobiert \u2026<\/p>","protected":false},"author":2,"featured_media":40558,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","ngg_post_thumbnail":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Jungsi's Corner hat ein neues Theme \u2013 komplett neu entwickelt mit KI-Unterst\u00fctzung. Dark Mode, Mega-Men\u00fc-Kompatibilit\u00e4t, iPad-Optimierung und vieles mehr, alles ma\u00dfgeschneidert.\n\nWie das technisch funktioniert hat und wo WordPress uns das Leben schwer gemacht hat, steht im aktuellen Beitrag.\n\n#WordPress #ThemeDevelopment #KI #DarkMode #WebDev #PHP #CSS #Retro #BloggingDE","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_links_to":"","_links_to_target":""},"categories":[36],"tags":[4757,4756,671],"class_list":["post-40437","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-ki","tag-theme-editor","tag-wordpress"],"modified_by":"Jungsi","jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.jungsi.de\/blog\/wp-content\/uploads\/Themeerstellung-mit-KI.webp","jetpack_shortlink":"https:\/\/wp.me\/p4eXvk-awd","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":2457,"url":"https:\/\/www.jungsi.de\/en\/blog-update\/","url_meta":{"origin":40437,"position":0},"title":"Blog-Update","author":"Jungsi","date":"28. December 2012","format":false,"excerpt":"Heute war ein Update-Tag. Endlich war wieder mal Zeit, den Blog auf den aktuellen Stand zu bringen. Folgendes stand an: WordPress-Update auf 3.5 Plugins Updates Atahualpa Theme Update auf 3.7.10 Das WordPress-Update und die Aktualisierung der Plugins waren wie immer kein Thema. Lediglich bei Atahualpa muss man etwas vorsichtig sein\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/www.jungsi.de\/en\/category\/software\/"},"img":{"alt_text":"Logo","src":"https:\/\/i0.wp.com\/www.jungsi.de\/blog\/wp-content\/uploads\/2012\/12\/Logo.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1317,"url":"https:\/\/www.jungsi.de\/en\/theme-update\/","url_meta":{"origin":40437,"position":1},"title":"Theme-Update","author":"Jungsi","date":"2. August 2012","format":false,"excerpt":"Ich hoffe dass sich nun in der n\u00e4chsten Zeit nichts mehr am Theme \u00e4ndern wird ;-) Gestern bin ich bei der Lekt\u00fcre einer Zeitschrift aber auf einen kurzen Artikel zu Wordpress gesto\u00dfen in dem ein Theme namens \"Atahualpa\" erw\u00e4hnt wird. Kurz entschlossen dem Theme eine Chance zu geben, war ich\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/www.jungsi.de\/en\/category\/software\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1188,"url":"https:\/\/www.jungsi.de\/en\/theme-geandert\/","url_meta":{"origin":40437,"position":2},"title":"Theme ge\u00e4ndert","author":"Jungsi","date":"10. July 2012","format":false,"excerpt":"Nachdem ich versucht hatte mein bisheriges Wordpress-Theme auf die neueste Version zu\u00a0aktualisieren, musste ich leider feststellen dass damit die Men\u00fcstruktur nicht mehr funktioniert und die Page komplett falsch dargestellt wird. Nun bin ich bei einem etwas dunkleren Theme gelandet - in der Zwischenzeit geht die Suche nach \"meinem\" optimalen Theme\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/www.jungsi.de\/en\/category\/software\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1905,"url":"https:\/\/www.jungsi.de\/en\/blog-styling-part-3-header\/","url_meta":{"origin":40437,"position":3},"title":"Blog Styling – Part 3 (Header)","author":"Jungsi","date":"3. October 2012","format":false,"excerpt":"Wie man unschwer erkennen kann hat sich der Header meines Blogs etwas ge\u00e4ndert und ist nur sehr individuell :-) Daf\u00fcr ein dickes Dankesch\u00f6n an meinen Kumpel Alex - einen sehr talentierten K\u00fcnstler ;-) Wie tauscht man den Header aus? Einfach das Bild auf die passenden Gr\u00f6\u00dfe skalieren - hier sind\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/www.jungsi.de\/en\/category\/software\/"},"img":{"alt_text":"Jungsis Corner Header","src":"https:\/\/i0.wp.com\/www.jungsi.de\/blog\/wp-content\/uploads\/2012\/10\/Jungsis-Corner-kl.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1899,"url":"https:\/\/www.jungsi.de\/en\/buchkritik-warrior-cats-teil-2\/","url_meta":{"origin":40437,"position":4},"title":"Buchkritik – Warrior Cats – Teil 2","author":"Jungsi","date":"1. October 2012","format":false,"excerpt":"Heute nehme ich das Erscheinen des ersten Bandes der 3. Staffel (in Deutsch) zum Anlass um meine im vergangenen Jahr begonnen Beschreibung\/Kritik zu Warrior Cats zu vervollst\u00e4ndigen. Die Buchreihe wird ab 10 Jahren empfohlen. Auf Grund der vielen Parallelen zu Wirklichkeit kann das Alter aber nach oben sicher nicht beschr\u00e4nkt\u2026","rel":"","context":"In "Literatur"","block_context":{"text":"Literatur","link":"https:\/\/www.jungsi.de\/en\/category\/literatur\/"},"img":{"alt_text":"Warrior Cats - Die Macht der drei - Der geheime Blick","src":"https:\/\/i0.wp.com\/www.jungsi.de\/blog\/wp-content\/uploads\/2012\/10\/Warrior-Cats-Die-Macht-der-drei.-Der-geheime-Blick-kl.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":39446,"url":"https:\/\/www.jungsi.de\/en\/mechwars-arena-sinclair-zx-spectrum\/","url_meta":{"origin":40437,"position":5},"title":"Mechwars: Arena","author":"Jungsi","date":"16. February 2026","format":false,"excerpt":"Mechwars: ArenaAutor: ZXBitlesJahr: 2021Genre: Shoot'em'upRechner: Sinclair ZX SpectrumDownload Mechwars: Arena \u2013 Mech-Action auf dem Sinclair ZX Spectrum Wenn man \u201eArena-Shooter\u201c h\u00f6rt, denkt man selten zuerst an den ZX Spectrum \u2013 und genau deshalb hat mich Mechwars: Arena so positiv \u00fcberrascht. ZXBITLES liefern hier ein schnelles, taktisches Ballerspiel mit isometrischer Perspektive,\u2026","rel":"","context":"In "Sinclair ZX Spectrum"","block_context":{"text":"Sinclair ZX Spectrum","link":"https:\/\/www.jungsi.de\/en\/category\/retro\/sinclair\/zx-spectrum\/"},"img":{"alt_text":"Mechwars Arena - Ladescreen","src":"https:\/\/i0.wp.com\/www.jungsi.de\/blog\/wp-content\/uploads\/Mechwars-Arena-Ladescreen.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jungsi.de\/blog\/wp-content\/uploads\/Mechwars-Arena-Ladescreen.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jungsi.de\/blog\/wp-content\/uploads\/Mechwars-Arena-Ladescreen.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jungsi.de\/blog\/wp-content\/uploads\/Mechwars-Arena-Ladescreen.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.jungsi.de\/en\/wp-json\/wp\/v2\/posts\/40437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jungsi.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jungsi.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jungsi.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jungsi.de\/en\/wp-json\/wp\/v2\/comments?post=40437"}],"version-history":[{"count":5,"href":"https:\/\/www.jungsi.de\/en\/wp-json\/wp\/v2\/posts\/40437\/revisions"}],"predecessor-version":[{"id":40706,"href":"https:\/\/www.jungsi.de\/en\/wp-json\/wp\/v2\/posts\/40437\/revisions\/40706"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jungsi.de\/en\/wp-json\/wp\/v2\/media\/40558"}],"wp:attachment":[{"href":"https:\/\/www.jungsi.de\/en\/wp-json\/wp\/v2\/media?parent=40437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jungsi.de\/en\/wp-json\/wp\/v2\/categories?post=40437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jungsi.de\/en\/wp-json\/wp\/v2\/tags?post=40437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}.wp-block-post-title__inner-container .has-large-font-size:not(.has-text-color)<\/code> und fragt sich, ob das wirklich sein muss.<\/p>\n\n\n\n
\n\n\n\nDas Problem mit fertigen Themes<\/h5>\n\n\n\n
\n
<!--more--><\/code>-Tag<\/li>\n\n\n\nwidth<\/code>– und height<\/code>-Attribute direkt ins <img><\/code>-Tag schreibt<\/li>\n\n\n\n
\n\n\n\nDie Idee: KI als Theme-Entwickler<\/h5>\n\n\n\n
functions.php<\/code>, wp_enqueue_scripts()<\/code> und der Customizer zusammenspielen. Der entscheidende Vorteil gegen\u00fcber einem fertigen Theme: Die KI hat den gesamten Code selbst geschrieben und kennt daher jeden Selektor, jede Variable und jede Funktion beim Namen.<\/p>\n\n\n\nget_custom_logo()<\/code> ausgegeben wird, dass WordPress dabei feste width<\/code>– und height<\/code>-Attribute setzt, und dass der einzige zuverl\u00e4ssige Weg zur L\u00f6sung ein PHP-Filter auf get_custom_logo<\/code> plus ein <style><\/code>-Block mit !important<\/code>-Deklaration im wp_head<\/code>-Hook ist, der als letzter l\u00e4dt.<\/p>\n\n\n\n
\n\n\n\nDer Entwicklungsprozess<\/h5>\n\n\n\n
Klassisches PHP-Theme statt Block-Theme<\/h5>\n\n\n\n
index.php<\/code>, single.php<\/code>, archive.php<\/code>, search.php<\/code>, page.php<\/code>, sidebar.php<\/code>, header.php<\/code>, footer.php<\/code>.<\/p>\n\n\n\nCSS Custom Properties als Design-System<\/h5>\n\n\n\n
:root<\/code>. Farben, Abst\u00e4nde, Schriftgr\u00f6\u00dfen, Schatten \u2013 alles zentral definiert. Das hat einen entscheidenden Vorteil: Der Dark Mode l\u00e4sst sich durch eine einzige Attribut\u00e4nderung am <html><\/code>-Element aktivieren (data-theme=\"dark\"<\/code>), die alle Variablen auf dunkle Werte umschaltet. Kein JavaScript muss einzelne Elemente einf\u00e4rben \u2013 au\u00dfer bei Drittanbieter-Plugins, die eigene Inline-Styles setzen.<\/p>\n\n\n\n:root {\n --color-bg: #edeae4;\n --color-card: #ffffff;\n --color-text: #1a1a1a;\n --color-accent: #c8502a;\n}\n\n[data-theme=\"dark\"] {\n --color-bg: #18181b;\n --color-card: #27272a;\n --color-text: #e8e8e4;\n --color-accent: #e8734a;\n}\n<\/code><\/pre>\n\n\n\nDas Mega-Men\u00fc-Problem<\/h5>\n\n\n\n
style=\"background-color: #ffffff\"<\/code>. CSS-Regeln, selbst mit !important<\/code>, k\u00f6nnen Inline-Styles nicht \u00fcberschreiben. Die L\u00f6sung war JavaScript: Ein MutationObserver<\/code> beobachtete urspr\u00fcnglich alle DOM-\u00c4nderungen und f\u00e4rbte Elemente nach \u2013 was auf dem iPad zu erheblichen Performance-Problemen f\u00fchrte, weil das Men\u00fc bei jeder Interaktion hunderte Callbacks ausl\u00f6ste.<\/p>\n\n\n\nmouseenter<\/code>-Event auf Men\u00fcpunkten, kombiniert mit element.style.setProperty('background-color', '#27272a', 'important')<\/code> \u2013 dem JavaScript-\u00c4quivalent zu !important<\/code>.<\/p>\n\n\n\n<!--more--><\/code>-Tag und WordPress-Eigenheiten<\/h5>\n\n\n\nthe_content()<\/code>-Funktion ignoriert auf der Blog-\u00dcbersichtsseite den als Parameter \u00fcbergebenen \u201eWeiterlesen“-Link und generiert stattdessen einen eigenen more-link<\/code> mit eigenen CSS-Klassen. Die L\u00f6sung: the_content()<\/code> komplett umgehen und stattdessen $post->post_content<\/code> direkt lesen, manuell am <!--more--><\/code>-Tag splitten und das Ergebnis durch apply_filters('the_content', ...)<\/code> jagen. So bleibt Gutenberg-Formatierung erhalten, aber der Button kommt vollst\u00e4ndig aus eigenem Code.<\/p>\n\n\n\n$raw = $post->post_content;\n$has_more = strpos( $raw, '<!--more-->' ) !== false;\nif ( $has_more ) {\n $before = explode( '<!--more-->', $raw )[0];\n} else {\n $before = $raw;\n}\necho apply_filters( 'the_content', $before );\n<\/code><\/pre>\n\n\n\nDark Mode ohne Flash<\/h5>\n\n\n\n
DOMContentLoaded<\/code> gesetzt wird, sieht der Besucher kurz den hellen Modus bevor der dunkle greift \u2013 einen sogenannten FOUC (Flash of Unstyled Content). Die L\u00f6sung ist ein winziges Inline-Script direkt im <head><\/code>, das synchron ausgef\u00fchrt wird, bevor der Browser irgendetwas rendert:<\/p>\n\n\n\n<script>\n(function(){\n var t = localStorage.getItem('minimal-blog-theme');\n if (!t) t = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n document.documentElement.setAttribute('data-theme', t);\n})();\n<\/script>\n<\/code><\/pre>\n\n\n\nPerformance auf Mobile und iPad<\/h5>\n\n\n\n
requestAnimationFrame<\/code> f\u00fcr alle Scroll-Events und gezieltes Event-Handling nur dort wo es wirklich gebraucht wird.<\/p>\n\n\n\n
\n\n\n\nIterative Verfeinerung: Was nach dem ersten Launch kam<\/h2>\n\n\n\n
Plugin-Kompatibilit\u00e4t: TablePress im Dark Mode<\/h5>\n\n\n\n
.tablepress-id-37 tbody td { color: #000000; }<\/code>. Das macht normales CSS-\u00dcberschreiben unm\u00f6glich, weil tabellenspezifische Klassen spezifischer sind als generische. Die L\u00f6sung: ein Attributselektor [class*=\"tablepress-id-\"]<\/code> der alle Tabellen-IDs auf einmal trifft, kombiniert mit !important<\/code> und dem [data-theme=\"dark\"]<\/code>-Prefix.<\/p>\n\n\n\nAlternatives Logo f\u00fcr den Dark Mode<\/h5>\n\n\n\n
.logo-dark { display: none !important; }\n.logo-light { display: block; }\n\n[data-theme=\"dark\"] .logo-light { display: none !important; }\n[data-theme=\"dark\"] .logo-dark { display: block !important; }\n<\/code><\/pre>\n\n\n\n\u00dcberschriften-Hierarchie: zwei Kontexte, eine Wahrheit<\/h5>\n\n\n\n
<!--more--><\/code>-Tag auf der Startseite anzeigt, bekommt dort Zwischen\u00fcberschriften die fast so gro\u00df sind wie der Beitragstitel selbst. Die L\u00f6sung: getrennte CSS-Regeln f\u00fcr .entry-content<\/code> (Einzelseite) und .post-card__content<\/code> (Startseite).<\/p>\n\n\n\n\/* Einzelseite: volle Gr\u00f6\u00dfe *\/\n.entry-content h3 { font-size: 1.75rem; }\n\n\/* Startseite: kompakt *\/\n.post-card__content h3 { font-size: 1.15rem; }\n<\/code><\/pre>\n\n\n\nEditor-Styles: der vergessene Kontext<\/h5>\n\n\n\n
editor-style.css<\/code>) \u2013 v\u00f6llig unabh\u00e4ngig vom Frontend. Wer nur style.css<\/code> anpasst, sieht im Editor weiterhin die alten Stile. Das betrifft nicht nur \u00dcberschriften, sondern auch den Beitragstitel selbst, der eine eigene Klasse .editor-post-title__input<\/code> hat und nicht von normalen h1<\/code>-Regeln erfasst wird.<\/p>\n\n\n\n
\n\n\n\nWas das Theme letztlich kann<\/h2>\n\n\n\n
\n
<!--more--><\/code>-Tag<\/strong> auf der Startseite mit eigenem Weiterlesen-Link<\/li>\n\n\n\nrequestAnimationFrame<\/code> f\u00fcr Scroll-Events<\/li>\n\n\n\n
\n\n\n\nFazit: KI als Entwicklungspartner<\/h2>\n\n\n\n
more-link<\/code> hat uns drei Anl\u00e4ufe gekostet. Der Mega-Men\u00fc-Hintergrund sechs. Der Dark Mode auf dem iPad erst recht. Manche WordPress-Eigenheiten sind einfach sperrig \u2013 unabh\u00e4ngig davon, wer den Code schreibt. Aber die Iteration ist schnell. Feedback geben, korrigierte Version hochladen, n\u00e4chsten Punkt angehen.<\/p>\n\n\n\n!important<\/code> schlagen. Dass ein MutationObserver auf einem iPad den Browser in die Knie zwingt. All das sind Dinge, die man bei einem fremden Theme m\u00fchsam dokumentiert findet \u2013 oder eben nicht. Bei einem selbst entwickelten Theme lernt man sie im Dialog.<\/p>\n\n\n\n
\n\n\n\n