Nepelius - Web Manufacturing - since 1995

HTML5 Template für WordPress von Starkers

  vom 31. Mai 2012

Als ich mich entschloß, diese Seiten in HTML5 aufzubauen, stellte sich mal die Grundfrage nach einem leeren Template für WordPress, mit dem man, ohne alles neu aufzubauen einen validen HTML5 Code herausbekommt. Es gibt ja mehr in dieser Richtung, ich habe mich für das Template von Starker entschieden, welches es bei github zum herunterladen gibt.

Aufbau

Es handelt sich bei diesem Template um ein leeres Template, welches man für den Aufbau eines eigenen Site templates als Basis verwendet. Die HTML Elemente, die üblicherweise in <div> – oder <span> – Containern abgelegt sind, sind hier durch HTML5 Elemente wie <header>, <nav>, <article>, <sec­tion>, <aside> , <footer> abgebildet. Das gibt die grundlegende Struktur für eine HTML5 Seite. Die meisten Template Tags sind schon implementiert, so ist es leicht, eine HTML5 Seite mit diesem Template aufzubauen.

Das Paket kommt mit der Javascript Library Modernizr. Diese ermöglicht den Einsatz von HTML5 und CSS3 und läßt diesen auch in älteren Browsern noch „gut dastehen“. Es sind  bereits 2 Sidebar-Widgets und 4 Footer Widgets vor­be­reitet. Die individuellen Menüs, die seit WordPress 3.0 zu Verfügung stehen, sind auch eingearbeitet.

Der Code zur Erweiterung „individuellerHeader“   ist wie folgt in der functions.php zu integrieren:

// Start individuelle Headerzeile
define( 'HEADER_TEXTCOLOR', '' );
// Der Bildaufruf; % wird durch den Template-Verzeichnispfad ersetzt
define( 'HEADER_IMAGE', '%s/images/header/bild.jpg' );
// Höhe und Breite
// Wir fügen Filter für Breite und Höhe hinzu, um diese ändern zu können
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );
// post thumbnails für ind. Headerbilder bei Artikeln und Seiten.
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
// Kein Text in Header Bildern
define( 'NO_HEADER_TEXT', true );
add_custom_image_header( '', 'twentyten_admin_header_style' );
// Ende individuelle Headerzeile

 

Weiterführende infos :

http://www.html5rocks.com/de/ – Eine gut gemachte Resourcenseite für HTML5 Entwickler

http://dev.w3.org/html5/html-author/ – Die Institution legt die Standards fest, hier gibt es ausführliche Doku.