Sidebar
ein-/ausblenden

WP Basis Theme in (x)HTML5

Plugin für WordPress SEO

Anzeige

Logo WP Basis Theme
Das WP Basis Theme erfreut sich großer Beliebtheit und die Arbeit daran wird von diversen Leuten unterstützt, sei es mit Übersetzungsarbeit, Fehlerkorrekturen, Verbesserungsvorschlägen oder Tests. Daher auch hier nochmal Danke an alle Helfer!

Da sich HTML5 aber schon geraume Zeit auf meiner ToDo-Liste befindet und ich ein Thema benötige um zu starten, habe ich begonnen das Basis Theme in HTML5 zu bauen, so dass WordPress direkt damit arbeiten kann. Dabei habe ich auch gleich ein Beispiel-Stylesheet beigelegt, so dass es ein Design gibt.

Zusätzlich gibt es eine kleines Stylesheet, welches die neuen Bereiche und ihre Tags darstellt, so dass man bei einem Einstieg in HTML5 ein wenig visueller arbeiten kann. Das Stylesheet ist nicht im Code verdrahtet und kann zum Beispiel einfach und unkompliziert mit Hilfe des WebDeveloper-Toolbar hinzugefügt werden. Zu finden ist das Stylesheet in der Struktur unter layout/html5areas/html5areas.css. Ein Beitrag ist damit wie folgt ersichtlich.

HTML5 visuell dargestellt

Diverse Punkte sind aktuell nur im Opera > 9.5 sichtbar. Dazu zählen alle Inhalte des Kommentar-Formulars. Dort wurde unter anderem Pflichtfelder übergeben, wenn sie durch WordPress gesetzt werden und die type-Attribute haben der Aufgabe bezogen ihren Wert erhalten, daher die Image-Zuordnung im Opera.

Kommentarformular in Opera 9.6

Arbeit mit...

Als Nachschlagewerk dient mit die Übersicht des w3c und das Blog zum Thema HTML5. Leider ist die Arbeit beim Validieren aktuell nicht so einfach, da mir kein Validator bekannt ist, der lokal validieren kann. Über Tipps würde ich mich daher freuen. Für den IE liefere ich ein Script mit, welches ihm den Umgang mit diversen Elementen beibringt.

Warum das alles?

Ich würde mir wünschen, dass der eine oder andere mal drüber schaut, vielleicht Leute, die schon mehr mit HTML5 gearbeitet haben und tief in der Materie stecken. Rückmeldungen wären toll und vielleicht erweitert der eine oder andere das Theme um bestimmte Tags oder Elemente.

Wie komme ich daran?

Es gibt hier keinen Download und die Arbeit daran wird in der freien Zeit weiter gehen und daher wird es immer wieder Veränderungen geben. Aktuell stehen nur wenige Grundzüge und es soll den gleichen Stand wie das WP Basis Theme bekommen. Um sich in das Theme einzuarbeiten oder einfach mal drüber zu schauen steht ein Repository bereit. Dort kann auch Kommentiert und diskutiert werden.

Der Ordner mit allen Inhalten findet sich im Bereich trunk/basis-html5 des SVN.

Artikel #984, 28. Juli 2009 · Code, CSS, xHTML, JS, Themes, WordPress · 8 Kommentare · Kommentar schreiben
Tags: , , , , , , , ,
Kommentar-Feed zum Artikel · TrackBack URL · Kurzlink

«
»

8 Kommentare zu „WP Basis Theme in (x)HTML5“

  1. 1
    Kommentar von Fabian
    29. Juli 2009 um 02:11

    Wow, hätte nicht gedacht, dass du so schnell das WP Basis Theme anpasst. Momentan arbeite ich gerade damit und versuche dabei meine HTML5 Vorlage einzubauen.
    Schwer wird es sicherlich beim IE. Mir persönlich hat die JS-Version nicht ausgereicht. Ich habe einerseits diese JS-Datei eingefügt und zusätzlich ein IE-Stylesheet geschrieben. Das ist leider sehr viel Aufwand und funktioniert nicht reibungslos, da man das Problem hat keine Box hinzubekommen, wenn man nicht wieder auf div setzt. Habe einen mehr oder weniger schönen Mittelweg gefunden.

    Da ich jetzt das erste mal mit dem WP Basis Theme arbeite, kann ich dir sagen, dass es wirklich viel Spaß macht! Gerade der "Dazu-Lern-Effekt" ist groß=)

  2. 2
    Kommentar von Matt
    29. Juli 2009 um 18:00

    Ich hab die Kommentarfunktion im SVN irgendwie nicht gefunden. Was mir beim ersten drüberschauen so aufgefallen ist:
    Das oberste Element ist <article>, wäre <section> nicht passender?
    Einzelne Blogartikel lassen <header> und <footer>-Bereiche vermissen, obwohl diese ja da sind (Überschrift, Meta-Kram)
    Inline-CSS und Javascript (z.B. beim Blog-Header) sind böse.

    Ansonsten guter Ansatz für den neuen Spielplatz HTML5

  3. 3
    Kommentar von dieter
    10. August 2009 um 12:01

    Welchen Sinn macht die blog.php im Rahmen des wpbasis-Themes?

  4. 4
    Kommentar von Frank Bültge
    10. August 2009 um 13:57

    Die blog.php kann als Template für eine Seite dienen, die dann die Startseite des Blog wird und immer die aktuellen Post ausgibt, aber eben komplett anderes Markup möglich.

  5. 5
    Kommentar von Michael
    13. Januar 2011 um 11:54

    Hi!

    Kann es sein, dass sich in der aktuellen Downloadversion des Basisthemes (HTML5) ein Fehler eingeschlichen hat? the_content und the_excerpt geben keine Inhalte aus. Es werden lediglich die Überschriften und die Metadaten der Artikel angezeigt.

    Gruß

  6. 6
    Kommentar von Frank Bültge
    13. Januar 2011 um 16:35

    @Michael: kann ich adhoc nicht sagen, sollte eigentlich klappen. Es wäre aber eh besser, das SVN zu nutzen, da dies immer aktueller ist: http://code.google.com/p/wp-basis-theme/source/checkout

  7. 7
    Kommentar von Michael
    13. Januar 2011 um 23:59

    @Frank: Danke, nun scheint´s zu funktionieren.

    Gruß
    Michael

  8. 8
    Kommentar von Alexia Cremer
    9. Januar 2012 um 18:14

    Herzlichen Dank für deine Mühe, das Template funktioniert klasse, und hat mir den Einstieg in html5 und WordPress-Theme entwicklung doch sehr erleichtert :)

Kommentar schreiben

Kommentarregeln: Bleib cool, kritisch ist in Ordnung, aber wenn du unhöflich bist, dann lösche ich deinen Kommentar. Bitte benutze deinen persönlichen Namen oder Initialen und nicht den Namen eines Unternehmens, dies würde als Spam gewertet und wird gelöscht. Der Zusammenhang zwischen Namen und URL sollte nicht offensichtlich auf Spam hindeuten! ♥ Ansonsten, vielen Dank für den Kommentar und viel Spaß mit meinem Blog.

E-Mail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.

Kommentar-Hilfe

händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.

Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.

xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>

Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als &lt; und > als &gt; einfügt.

E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.

Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.

Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.

Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.