Ein Blank-Theme ist ein leeres Theme, und bietet meiner Ansicht nach eine perfekte Ausgangsbasis bei der Entwicklung eines eigenen WordPress-Themes. Für die meisten WordPress-Seiten haben wir bisher das Starkers-Theme von Elliot Jay Stock als Theme-Vorlage für eigene Projekte verwendet. Das Starkers-Theme ist WordPress 3.0 kompatibel und auf dem aktuellen Standard-Theme TwentyTen von WordPress aufgebaut. Falls du dein neues Theme mit HTML5 umsetzen möchtest, bietet das von Nathan Staines auf HTML5 optimierte Starkers HTML5 eine tolle Grundlage.
1. Was bietet das Starkers HTML5?
Ich habe mir das Starkers HTML5 einmal genauer angeschaut, und die HTML5-optimierte Version mit dem originalen Starkers Blank-Theme verglichen.
1.1. Die HTML5 Tags
Das Starkers HTML5 ersetzt viel der bisher verwendeten div und span Tags durch HTML5-Elemente, wie <header>, <nav>, <article>, <section>, <aside> und <footer>. Am besten du schaust dir die neuen Elemente direkt im Theme an (z.B. indem du das Starkers HTML5-Theme einmal auf einer lokalen WordPress-Installation ausprobierst).
Der Source-Code des Starkers HTML5 Themes.
Mit Hilfe praktischer Online-Übersichten aller HTML5-Elemente kannst du dann mehr über die dir noch unbekannten Tags erfahren.
Eine sehr schöne Übersicht von HTML5 Tags inklusive Erklärungen findest du z.B. auf der Webseite Periodic Table of Elements.
Weitere, ausführliche Infos zu allen HTML5-Elementen kannst du auch im W3C HTML5 Editors Draft nachlesen.
1.2. WordPress-Funktionen von Starkers HTML5
Die meisten Theme-Funktionen des TwentyTen-Themes sind auch im Starkers HTML5 bereits vorhanden. Um auch eine individuelle Kopfzeile und einen eigenen Hintergrund zu nutzen, musst du allerdings noch extra Code einfügen.
Widgets und Menüs
Wie auch beim Starkers-Theme von Elliot Jay Stock, sind in der HTML5 Version bereits 2 Sidebar-Widgets, sowie 4 Footer Widgets vorbereitet. Die individuelle Menü-Funktion (seit WP 3.0) ist ebenfalls integriert.
Individuelle Kopfzeile und Hintergrund
Um die TwentyTen-Funktion Custom Header (individuelle Kopfzeile) und Custom Background (individueller Hintergrund) zu nutzen, musst du allerdings noch folgenden Code in die functions.php Datei von Starkers HTML5 einfügen.
Für die Option einer individuellen Kopfzeile benötigst du folgenden Code:
// Your changeable header business starts here
define( ‚HEADER_TEXTCOLOR‘, “ );
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( ‚HEADER_IMAGE‘, ‚%s/images/headers/path.jpg‘ );
// The height and width of your custom header. You can hook into the theme’s own filters to change these values.
// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
define( ‚HEADER_IMAGE_WIDTH‘, apply_filters( ‚twentyten_header_image_width‘, 940 ) );
define( ‚HEADER_IMAGE_HEIGHT‘, apply_filters( ‚twentyten_header_image_height‘, 198 ) );
// We’ll be using post thumbnails for custom header images on posts and pages.
// We want them to be 940 pixels wide by 198 pixels tall.
// Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php.
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
// Don’t support text inside the header image.
define( ‚NO_HEADER_TEXT‘, true );
// Add a way for the custom header to be styled in the admin panel that controls
// custom headers. See twentyten_admin_header_style(), below.
add_custom_image_header( “, ‚twentyten_admin_header_style‘ );
// … and thus ends the changeable header business.
[/php]
Für den individuellen Hintergrund kannst du folgenden Code einfügen:
// This theme allows users to set a custom background
add_custom_background();
[/php]
(Der Code ist der Original-Code des TwentyTen-Themes. Er wird auch in der originalen Starkers Theme-Version verwendet.)
Wenn du die Code-Schnipsel in der functions.php Datei eingefügt hast, kannst du die praktischen Hintergrund- und Kopfzeile Funktionen nutzen.
2. Unterstützung älterer Browser
Nathan Staines nutzt in der aktuellen Starkers HTML5 Version die JavaScript-Bibliothek Modernizr (Version 1.6), um die modernen HTML5 (und CSS3) Elemente zu unterstützen. Du findest die .js-Datei von Modernizr im Ordner js des Starkers Theme-Ordners.
Auf der Webseite kannst du dich über alle Features von Modernizr genau informieren. Praktisch ist auch, dass durch die Integration von Modernizr auch gleich CSS3 Eigenschaften, die du eventuell später in deinem Theme nutzen möchtest, Browser-kompatibel unterstützt werden.
3. Jede Menge Lesestoff zum Thema HTML5
Suchst du nach weiterem Lesestoff über HTML5? Dann schau doch einmal folgende Webseiten, Artikel und Bücher an. Hier findest du jede Menge nützliche Informationen.
- Möchtest du ein Projekt mit HTML5 umsetzen, solltest du dir auf jeden Fall HTML5 Boilerplate anschauen. Das Projekt ist eine tolle Vorlage und bietet jede Menge Tipps & Tricks für HTLM5-Projekte.
- Dive into HTML5, ist ein informativer und ausführlicher Artikel von Mark Pilgrim.
- Jede Menge Artikel zum Thema HTML5 in deutscher Sprache kannst du auch auf dem Weblog von Peter Kröner nachlesen.
- Weitere interessante Beiträge zum Thema HTML5 gibt es auch noch bei A List Apart.
- HTML5 for Web Designers, ein Buch von Jeremy Keith bei A Book Apart (auch als eBook erhältlich).
- Introducing HTML 5, Taschenbuch von Bruce Lawrence und Remy Sharp (Infos auch auf der Webseite zum Buch)
- HTML5. Webseiten innovativ und zukunftssicher, ein hilfreiches Buch von Peter Kröner (mehr Infos zum Buch auf der Webseite html5-buch.de)
Wie gefällt dir die HTML5-Variante des Starker-Themes? Hast du bereits eigene Erfahrungen mit dem Blank-Theme machen können, oder kennst du weitere Theme-Frameworks oder Blank-Themes, die bereits auf HTML5 setzen?
Über dein Feedback und weitere Tipps freue ich mich sehr!
Spitzenmässig! Vielen Dank. Somit steh mir nichts mehr im Wege, um mein eigenes WP Projekt mit diesem HTML5 Template zu starten.. ;-)
Hallo Lemi,
vielen Dank für dein Feedback. Freut mich, dass du den Starkers HTML5 Tipp nützlich findest. Mir gefällt das Blank-Theme auch wirklich gut :-)
Viele Grüße,
Ellen
vielen Dank für diesen Artikel.
Bis dato habe ich das Thema HTML5 immer ignoriert. Bin jetzt aber, durch diese tolle Übersicht, motiviert genug um mich damit auseinander zu setzen.
Und den Tipp sich das Starker-Theme zu installieren, um es sich genauer anzuschauen, wird der erste Schritt in Richtung HTML5 sein. DANKE!
Hallo Marjeta,
freut mich, dass dir der Artikel weiter hilft. Ich denke auch, dass das Starkers HTML5 eine super praktische Ausgangsbasis bietet, um mit den HTML5 Tags vertrauter zu werden :-)
Viele Grüße,
Ellen
Habe mich noch nie so recht an Blank Themes heran getraut, hatte immer Angst da könnten dann Funktionen wie threaded-comments fehlen und ich wäre zu blöd sie dann einzubauen :D
Beim nächsten Projekt werde ich dieses dann aber bestimmt mal ausprobieren.
Hallo Salim,
vielen Dank für deinen Kommentar. Keine Sorge, zumindest das Blank-Theme von Starkers bzw. Starkers HTML5 ist super vorbereitet, und du kannst alle aktuellen WordPress-Optionen nutzen.
Einige Extra-Features, z.B. den Code für Thumbnails (Vorschaubilder) kannst du dann noch selbst integrieren :-)
Viel Spaß beim Ausprobieren und viele Grüße,
Ellen
Das Starkers Theme (damals allerdings noch in der alten Variante) war der Grund dafür, dass ich mich überhaupt mit Theme Erstellung beschäftigt habe. Mich hat es zuvor immer abgeschreckt den ganzen Code von 0 an schreiben zu müssen ohne davon groß Ahnung zu haben. Mit dem Leer-Theme konnte ich mich aber ganz auf das Designen und Stylen mit CSS konzentrieren und schnell anschauliche Ergebnisse bekommen. Sowas motiviert ungemein und ich befasse mich seit dem immer intensiver damit, einfach weil es Spaß macht.
Das Starkers Theme ist mit Abstand das beste Leer-Theme was es im Netz für WordPress gibt.
Leider lässt sich der obige Code für das Kopfzeilenbild nicht einfach übernehemen. Anschließend erscheint diese Fehlermeldung in dem Menüpunkt: Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‚twentyten_admin_header_style‘ was given in /www/htdocs/xxx/xxx/wp-includes/plugin.php on line 395 :(
genau wie bei Peter bekam ich die gleiche Fehlermeldung im Admin Menu Kopfzeile:
Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‚twentyten_admin_header_style‘ not found or invalid function name in …. on line 405
Es fehlte folgendes in der functions.php
if ( ! function_exists( ‚twentyten_admin_header_style‘ ) ) :
/**
* Styles the header image displayed on the Appearance > Header admin panel.
*
* Referenced via add_custom_image_header() in twentyten_setup().
*
* @since Twenty Ten 1.0
*/
function twentyten_admin_header_style() {
?>
/* Shows the same border as on front end */
#headimg {
border-bottom: 1px solid #000;
border-top: 4px solid #000;
}
/* If NO_HEADER_TEXT is false, you would style the text with these selectors:
#headimg #name { }
#headimg #desc { }
*/
<?php
}
endif;
…dann gibts auch keine Fehlermeldungen mehr.
Bei mir steht in nächster Zeit ein privates Projekt an, welches ich gerne mit HTML5 und CSS3 umsetzen würde, deswegen kam der Beitrag genau zur rechten Zeit :-) Vor allem die JavaScript-Bibliothek hört sich echt klasse an.
Danke für deinen tollen, informativen Artikel.
Für unsere Projekte habe ich bisher immer direkt auf TwentyTen aufgesetzt. Beim nächsten Projekt werde ich das neue HTML5 Starkers Theme ausprobieren. Bin schon sehr gespannt.
Hallo Christian,
vielen Dank für dein Feedback. Ja, Starkers ist meiner Ansicht nach wirklich sehr hilfreich bei der Theme-Entwicklung. Und da beide Varianten auf dem TwentyTen Theme aufbauen, sind auch alle aktuellen Theme-Features integriert.
Viel Spaß beim Ausprobieren und viele Grüße,
Ellen
Hi Ellen
Super Artikel!
Frage: beim Twentyten Theme ist es ja so, dass man ein Child-Theme benötigt, wenn man im Design Änderungen vornehmen möchte (damit diese Änderungen beim Update von WP nicht wieder zurückgesetzt werden). Weisst du wie das beim Starkers ist, muss man auch hier den Codex einhalten?
Danke für deine Antwort.
Grüsse aus der Schweiz
Mitch
Yeah! Genau das hab ich gesucht! Dankeschön!
Hallo Ellen,
ich habe eine Frage zum Starkers-Theme. Ich habe es bei mir lokal innerhalb eines WordPress installiert und bin wirklich sehr begeistert, was man damit allerhand anstellen kann. Allerdings stosse ich beim Formatieren der Kommentare (inkl. Kommentarformular) ein wenig an meine Grenzen:
Da das Starkers-Theme ja per Standard keine Klassen, etc. mitgibt, weiss ich nicht, welche ich wie per CSS ansprechen soll. Hast du mir einen Tipp? Oder gibt es generell eine Möglichkeit diesen Bereich schön zu formatieren?
Und dann noch eine kleine Frage: Mir begegnet innerhalb des Themes oftmals der Template-Name. Kann ich den bedenkenlos ändern?
Lieber Gruss aus der Schweiz,
Abi