XAJ-Theme für WordPress

Gestern hab ich mich mal hingesetzt und zu Test-/ Demonstrationszwecken, wie auch aus sportlichem Ehrgeiz ein Theme gebastelt, welches komplett ohne:

  • DIVs,
  • Klassen und
  • IDs

auskommt. 😮

Dass einerseits Divs, Klassen und IDs kein Teufelswerk sind und andererseits man mit dem Theme draussen in der richtigen echten Welt keine Knöpfe gewinnen kann, da eine Änderung in der HTML-Struktur zwingend 10+ Änderungen in einem unübersichtlichen Stylesheet nach sich ziehen, hatte ich dabei auf dem Schirm.

Realisierung:

DIVs habe ich manuell aus den Templates entfernt, die IDs und Klassen zwangsweise über ein Script in der functions.php eliminiert, da WordPress richtig damit rumschweinst. Über das Template wäre da kein Weg.

Da ich designtechnisch eine absolute Null bin, habe ich mich stark an dem hier als Standard aktiven Fallseason-theme orientiert, damit am Ende nicht allzu 08/15-Kram dabei herauskommt.

das Design habe ich grossteils über verschachtelte Selektoren realisiert, im Speziellen Folgende:

  • foo+bar (bar ist das nächste Element nach foo)
  • foo~bar (alle bar nach foo)
  • foo>bar (das erste bar innerhalb foo)
  • :first-child/ :last-child (erstes/letztes Element)

Beispiel:

script + ul > li:first-child + li li /* Kommentare kleiner*/ {
font-size:.85em;
}

Probleme:

Bestimmte Sachen sind mit der Vorgehensweise nicht zu lösen, das label oben für die Suche musste rausfliegen, ein installiertes Plugin patscht mir noch ein paar (leere) Divs in den Code, ein klein wenig geschummelt habe ich auch, indem ich zum besseren/schöneren Anfassen der Sidebar ein vorhandenes Script davorgeschoben habe.

Ich habe leider keine Möglichkeit gefunden, die Teaser (wenn grösser als standardmässig) zu clearen.

Leider ist mir keine Möglichkeit eingefallen, die Liste unterhalb der Artikel (Kategorie, Kommentare etc.) unabhängig von Listen in Artikeln zu stylen. Für sachdienliche Hinweise wäre ich dankbar, bin aber eher verhalten pessimistisch.

Anschauen kann man sich den Spass, indem man in der Sidebar bei den Themes auf „xill all junks“ klickt. Zurück geht’s dann dort auch wieder.

Spass haben!

5 Kommentare to “XAJ-Theme für WordPress”

  1.  Gerald – hyperkontext schrieb am 09. Jul 2009 um 15:31

    Wow, echt spannend. Und funktioniert eigentlich auch im Großen und Ganzen.

    Was ich persönlich schon feststellen musste: Je mehr du verschachtelte Selektoren verwendest, umso komplizierter wird die Wartung einer CSS-Datei.

    Versuch mal nach vielen Monaten, in so einer Datei schnell ein paar Änderungen vorzunehmen. Da musst du erst mal das ganze Konstrukt wieder verstehen lernen.

    Die Dokumentation wird da länger als die CSS-Datei. Ich denke daran, die Dokumentation so einer CSS-Datei vielleicht in einer gesonderten Datei (ähnlich einem Flussdiagramm) aufzubereiten.

    Aber das ist in der Praxis bei größeren Projekten echt ein Problem. Empfinde ich zumindest so.

  2.  Mike® schrieb am 10. Jul 2009 um 2:56

    Hi Gerald, full ack,
    Deinen Einwand zur Wartung habe ich ja auch schon ansatzweise im Artikel angeschnitten, ich bin mit (css-)200 Zeilen ausgekommen, das ist a: weniger, als das „klassische“ Theme+Behelfs-container, und b: sieht man beim „developieren“ ziemlich gut, was man bei normalem „programmieren“ so rumschweinst. Dass das nach einem halben Jahr derb bös aussieht, mal ernsthaft, das macht ein klassisches CSS auch ganz „gut“ ;).
    Das war eigentlich mein eigentliches Anliegen. Mal zu schauen, wie man vorwärtskommt, ohne für jeden Furz (HTML)Container zu basteln.
    Meine Erfahrung dabei:
    ich kann nur jedem/r empfehlen, vor dem Erstellen einer Webseite DIESES „Spiel“ zu spielen.
    Es macht Spass, bringt Routine rein und die Barrierefreiheit gewinnt quasi nebenbei.

  3.  Gerald – hyperkontext schrieb am 10. Jul 2009 um 12:33

    ich kann nur jedem/r empfehlen, vor dem Erstellen einer Webseite DIESES „Spiel“ zu spielen.

    Das würde ich auch so sehen. Genaugenommen wäre so ein CSS-Layout eine Pflichtübung für jeden ernsthaften CSS-Lehrgang. Damit lässt sich der grundlegende Sinn dahinter verstehen lernen.

    Wär doch eine tolle Prüfungsaufgabe:
    Erstellen Sie aus der vorliegenden HTML-Seite ein visuelles Layout. Sie dürfen nur 2 DIV-Container und 2 ID oder Klassennamen verwenden 🙂

  4.  Felix de Ruiter schrieb am 09. Aug 2009 um 17:50

    Das habe ich neulich auch schon einmal ausprobiert, jedoch ohne parallel in allen Browsern zu testen, und letzten Endes ging es nur Firefox 3.5. Ich habe jetzt wieder viel Zeit, da werde ich mich demnächst wieder ransetzen, wenn ich eine anständige Tastatur zur Verfügung habe. Ein Netbook-Keyboard ist sehr unkonfortabel fürs Coden, da man für eckige Klammern eine Spezialtaste zusätzlich drücken muss.

    Aber tolle Idee und Umsetzung. Werde es mir nun noch etwas genauer anschauen. 🙂

    Lieben Gruß
    Felix

  5. […] … wahrscheinlich werde ich es über kurz oder lang mal nachbauen oder vielleicht doch „XAJ“ überarbeiten. Das funzt nämlich noch ohne grosse Mucken […]

Trackback-Adresse | RSS-Feed für die Kommentare abonnieren

Hinterlasse einen Kommentar:


(Wir behalten uns vor Kommentare von dummen Menschen entweder zu löschen oder exemplarisch für die Nachwelt zu konservieren. Dumme Kommentare mit Werbelinks müssen leider auf zweiteres Privileg verzichten.)

XHTML: Du kannst diese Tags verwenden:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>