HTML5 und Post Formats mit dem Toolbox WordPress-Theme

Auf der Suche nach einem praktischen WordPress HTML5 Blank-Theme, das auch die neuen Artikel-Formatvorlagen (Post Formats) unterstützt, habe ich mir das Theme Toolbox 1.1 einmal genauer angeschaut. Die Arbeit mit Toolbox hat mir sehr gut gefallen, und ich finde das Blank-Theme bietet eine praktische Grundlage, um ein eigenes WordPress-Theme mit HTML5 und dem neuen Post Format-Feature umzusetzen. Daher möchte ich das Free-Theme von Automattic hier noch einmal genauer vorstellen, und meine gesammelten Erfahrungen während der Arbeit mit dem Theme zusammenfassen.

Toolbox kostenlos downloaden

Toolbox ist von Automattic speziell für die Theme-Entwicklung entwickelt worden, und du kannst dir das Free-Theme im Theme Directory bei wordpress.org herunterladen. In der Version 1.1 unterstützt es auch die neuen Post Formats von WordPress 3.1 (standardmäßig „Gallery“ und „Aside“, weitere Artikel-Formate kannst du leicht selbst einfügen).

1. HTML5

Das tolle an Toolbox ist, dass es bereits mit HTML5 umgesetzt ist. Zum Beispiel werden HTML5-Elemente wie header, nav, aside, article oder footer genutzt. Da die HTML5-Elemente bereits vorbereitet sind, bietet Toolbox meiner Ansicht nach auch eine gute Möglichkeit mit den HTML5-Elementen vertrauter zu werden. Du kannst dir in den Template-Dateien anschauen, wie die HTML5-Elemente verwendet wurden.

Toolbox WordPress Theme
Im Header der Webseite werden die Elemente header, hgroup (für die Gruppierung des Webseiten Titels und Untertitels) und nav (für die Navigation) genutzt.

Möchtest du noch mehr Hintergrund-Infos zu den einzelnen HTML5-Elementen nachschlagen, kannst du dann z.B. bei W3C oder auf der Webseite HTML5 Doctor nachlesen.

Für den Internet-Explorer bis Version 8 (der die neuen Elemente noch nicht unterstützt) wird bei Toolbox ein JavaScript verwendet, das über den head-tag in der header.php Datei des Themes eingefügt wird. Siehe folgender Code:

<!--[if lt IE 9]>
<script src="<?php bloginfo( 'template_directory' ); ?>/html5.js" type="text/javascript"></script>
<![endif]-->

Um den Theme-Ordner etwas übersichtlicher zu halten, kannst du für alle JavaScript-Dateien einen eigenen Ordner (z.B. namens „js“) anlegen und auch die in Toolbox mitgelieferte html5.js-Datei in diesen Ordner verschieben. Dann darfst du allerdings nicht vergessen, den Pfad des Codes anzupassen:

<!--[if lt IE 9]>
<script src="<?php bloginfo( 'template_directory' ); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

2. WordPress 3.1 Post Formats

Ein weiterer großer Vorteil bei der Verwendung von Toolbox ist, dass das Blank-Theme bereits für die Artikel-Formatvorlagen (Post Formats) vorbereitet ist. Über die neuen Post Formats hatte ich ja bereits im Artikel „Flexibleres Bloggen durch Artikel-Formate (Post Formats) in WordPress 3.1“ berichtet.

Das neue Feature ist meiner Meinung nach bei Toolbox sehr praktisch umgesetzt. Es gibt keine loop.php Datei mehr (wie z.B. beim TwentyTen-Theme), sondern der Loop findet jeweils in der entsprechenden Template-Datei (also index.php, category.php, archive.php etc.) statt. Innerhalb des Loops wird dann die entsprechende content.php Datei aufgerufen:

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>

Neben der standardmäßigen content.php Datei für alle Artikel ist dann eine content-aside.php und eine content-gallery.php Datei vorhanden.

Toolbox WordPress Theme
Die Content.php-Dateien im Theme

So kannst du die Artikel-Ansicht für deine Gallery-Artikel in der content-gallery.php Datei individuell anpassen. Der Inhalt der content-Dateien wird jeweils in einen „article“ HTML5-tag gefasst:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
… der Template-Inhalt...
</article>

Natürlich kannst du neben den bereits vorbereiteten Dateien content-aside.php und content-gallery.php auch noch weitere Post Formate einrichten.

Dazu musst du diese aber auch noch in der functions.php Datei unter add_theme_support post-formats eintragen. Aus:

/**
 * Add support for the Aside and Gallery Post Formats
 */
add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );

wird dann also:

/**
 * Add support for the Aside and Gallery Post Formats
 */
add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat' ) );

Ein sehr guter Artikel, der die Umsetzung der Post Formats bei Toolbox genau erklärt, ist „Post Formats and Content Templates in the Toolbox Theme“ vom Theme-Entwickler Ian Stewart.

3. Individueller Background, individueller Header und Post Thumbnails

Möchtest du auch, die im TwentyTen-Theme ja bereits standardmäßig integrierten Theme-Optionen add_custom_background (individuell anpassbareres Hintergrundbild) , custom_image_header (individuell anpassbares Headerbild) und post-thumbnails (Artikel-Vorschaubilder) nutzen, kannst du die functions.php Datei in Toolbox entsprechend erweitern.

Für den individuellen Hintergrund fügst du folgenden Code-Schnipsel ein:

// This theme allows users to set a custom background
	add_custom_background();

Für den individuell anpassbaren Header fügst du folgenden Code-Schnipsel ein:

	// 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 toolbox_header_image_width and toolbox_header_image_height to change these values.
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'toolbox_header_image_width', 940 ) );
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'toolbox_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 toolbox_admin_header_style(), below.
	add_custom_image_header( '', 'toolbox_admin_header_style' );

	// ... and thus ends the changeable header business.

	// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
	register_default_headers( array(
		'berries' => array(
			'url' => '%s/images/headers/headerimage.jpg',
			'thumbnail_url' => '%s/images/headers/headerimage-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'toolboxHeaderimge', 'toolbox' )
		)
	) );
}
endif;

if ( ! function_exists( 'toolbox_admin_header_style' ) ) :
/**
 * Styles the header image displayed on the Appearance > Header admin panel.
 * Referenced via add_custom_image_header() in toolbox_setup().
 */
function toolbox_admin_header_style() {
?>
<style type="text/css">
/* 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 { }
*/
</style>
<?php
}
endif;

Und für die Unterstützung der Post Thumbnails fehlt noch folgender Code in der functions.php Datei:

	// This theme uses post thumbnails
	add_theme_support( 'post-thumbnails' );

Den Text für den Theme-Namen (hier „toolbox“) musst du natürlich noch durch dein Theme-Name ersetzen (in allen Theme-Dateien), um dein Theme später auch selbst übersetzen zu können.

Nach der Integration des Codes kannst du die Theme-Features über den Admin-Bereich in WordPress auswählen. Die Vorschaubilder (post-thumbnails) kannst du einfügen, während du einen neuen Artikel anlegst.

4. Die Theme-Übersetzung

Ein weiteres Plus von Toolbox ist, dass es auch für die Übersetzung des Themes bereits vorbereitet ist. So kannst du alle englischen Texte des Themes auch in Deutsch vorbereiten. Um mir die Übersetzung der Theme-Texte möglichst einfach zu machen, installiere ich immer das Codestyling Localization Plugin. Im Gegensatz zu anderen Themes, die nicht optimal für das Plugin vorbereitet sind, sollte es bei Toolbox keine Probleme geben.

Toolbox WordPress Theme
Toolbox-Theme mit dem Codestyling Localization Plugin ins Deutsche übersetzen.

Eine genaue Anleitung zur Verwendung von Codestyling Localization kannst du entweder auf der Plugin-Homepage (auch auf deutsch) oder im Artikel „WordPress-Theme Übersetzung mit dem Codestyling Localization Plugin“ nachlesen.

Die neuen Sprachdateien kannst du dann mit Hilfe des Plugins in den bereits im Theme eingerichteten Ordner „languages“ einsortieren.

6. Beispiel CSS-Stylesheet von Toolbox

Im Ordner „bonus“ findest du außerdem noch eine Beispiel-CSS Datei. Die Styles hier sind zwar nicht so ansprechend, aber es soll ja auch nur ein Beispiel sein und zur Orientierung dienen. Für CSS-Newbies finde ich das Stylesheet auf alle Fälle sehr hilfreich, da man sich sehr schön die Aufteilung des Stylesheets anschauen, und so jede Menge lernen kann.

Wie du siehst, bietet das Toolbox-Theme wirklich jede Menge Optionen und ist meiner Ansicht nach sehr gut für die Theme-Entwicklung mit HTML5 und Post Formats geeignet.

Hast du selbst bereits mit dem Toolbox-Theme gearbeitet oder kennst du weitere praktische Theme-Vorlagen, die für die Entwicklung einen eigenes, modernes WordPress-Themes geeignet sind? Über dein Feedback und weitere Tipps freue ich mich sehr!

17 Kommentare

  1. Für Code-Rebellen, die erstmal alles Javascript Richtung footer schieben möchten, sei vielleicht angemerkt: Die Datei html5.js muss zwingend im <head> aufgerufen werden, und nicht am Seitenende, weil sie das HTML auslesen und evtl. fehlenden HTML5-Elemente hinzufügen soll, bevor der Code ausgegeben wird.

    Ansonsten ein super Tutorial! Modernizr dazu, und man hat das perfekte HTML5-Theme!

    • Hallo Caspar,

      vielen Dank für dein Feedback und deinen wichtigen Hinweis! Ja, die html5.js Datei muss hier auf alle Fälle in den head-tag, vielleicht sollte ich das auch im Artikel noch einmal extra erwähnen zur Sicherheit :-)

      Viele Grüße,
      Ellen

  2. Werde mich die Tage wohl wieder intensiver mit den Post Formats beschäftigen. Mein derzeitiges (frisches) Layout gefällt mir doch nicht. Bin irgendwie der „alte“ Bloggertyp mit: Beiträgen nacheinander :D

    Auf jeden Fall sehr gute Information… da ich das Theme schon runtergeladen habe :)

    • Hallo Chrissy,

      vielen Dank für deinen Kommentar, freut mich, dass dir der Beitrag zum Toolbox-Theme gefällt :-) Ja, die Post Formats beschäftigen uns derzeit auch, und wir möchten sie nach und nach auf alle Fälle auch hier auf dem Blog umsetzen. Ich finde die unterschiedlichen Formate können einen Blog einfach so viel lebendiger machen :-)

      Viele Grüße,
      Ellen

      • Ich bin vor allem gespannt für die Anpassungsmöglichkeiten in den verschiedenen Untertemplates (Archiv, Kategorie)

  3. Hallo Ellen,
    ich bin vor kurzem auf eure Seite gestoßen und nutze sie zum autodidaktischen Training. Seit einigen Tagen bin ich nun dabei, ein eigenes Theme auf der Basis von toolbox zu erstellen. Dein Tutorial hat mir dabei wie immer sehr geholfen. Ab welchen Zeitpunkt kann ich eigentlich das erstellte Design labeln, sprich einen Hinweis geben, dass es mein eigenes ist? Eine Frage, sich sich mir prinzipiell beim lesen Eurer Tuts stellt.
    lg andré

  4. hallo ellen,

    ich nehme an, da schweigen mir entgegenschwappt, dass dies das falsche Blog für solcherlei Fragen ist. Hab mir zwischenzeitlich Rat von woanders hergeholt.

    lg
    andré

  5. Ich finde auch, dass das Toolbox Theme eine gute Grundlage für Eigenkreationen darstellt. Hab´s auch für meine Seite verwendet. Da ich es eh lieber sehr schlicht habe, brauchte ich auch nicht all zu viel zu ändern. Werde wohl auch künftig wieder zum Toolbox Theme greifen.

    • Hallo Michael,
      vielen Dank für deinen Kommentar und deine Erfahrungen zum Toolbox-Theme. Ich finde Toolbox auch klasse und ganz besonders die HTML5 Grundlage ist richtig hilfreich :-)

      Viele Grüße,
      Ellen

      • Hallo Ellen!

        Ein Problem habe ich trotzdem mit dem Theme (und das ist mir schon in der alten Version aufgefallen). Der IE < 9 hat Probleme mit der Darstellung von HTML 5 Elementen. Wenn ich in der aktuellen Version bspw. einen Rahmen für #content .post {
        border-bottom: 1px dashed #dfdfdf;
        margin: 0 10px 60px 0;
        padding-bottom: 60px;
        }
        definiere, so zeigt der IE8 ihn gar nicht an und der IE7 verteilt den Rahmen über den ganzen Post. Also irgendwas stimmt da scheinbar nicht. Hast Du vielleicht eine Idee womit das zu tun haben könnte?

        Hab´s nun über .entry-content gelöst, aber interessieren würde es mich schon, was da letztendlich falsch läuft.

  6. Ich bin auch gerade am „herumtoolboxen“ und wollte noch anmerken, dass bei dem Theme auf ein css-Reset verzichtet wurde, ich aber aufgrund von Browser consistency und Arbeitsersparnis empfehlen würde eines zu benutzen. Ich habe es auch nur bemerkt als ich zum zigsten male die margins vom h1 tag nullen musste.

    • dHallo Daniel,

      ja stimmt, das ist ein hilfreicher Hinweis, der einem eventuell viel Herumprobieren erspart :-) Ein CSS Reset habe ich auch eingefügt, dafür nutze ich meist das Reset von Eric Meyer als Vorlage. Mehr zum Thema CSS-Reset habe ich auch einmal im Artikel „Tipps und Tricks zum CSS-Reset“ zusammen getragen :-)

      Viele Grüße,
      Ellen

  7. Die Informationen die man hier findet sind sehr hilfreich beim entwickeln eines neuen WP Themes. Vielen Dank an die Betreiber dieses Blogs! Was ich allerdings schon seit längerem suche wäre ein deutschsprchiges Tutorial wie man Theme Optionen im Admin Bereich darstellen kan. Meist finde ich nur englichsprchige Tuts. MEin en ist leider nicht so dolle. Also wenn jemnad eine Link hätte für mich würde ich mich freuen. Gruß Peter

  8. Das ist wirklich eine sehr gute Möglichkeit sich mit der HTML5 Struktur genauer auseinanderzusetzen. Ich habe schon viel gelernt. Liebe Ellen, danke für die zahlreichen Erklärungen und Informationen.

    LG,
    Tanja

  9. Hallo Ellen,

    vielen Dank erst einmal für die sehr wertvollen Tipps!

    Ich bin selbst gerade auf der Suche nach einem Basis-Template, um mein eigenes Blog zu gestalten. Toolbox ist scheinbar nicht mehr verfügbar zu sein. (Der Link führt auf das Template-Verzeichnis, aber nicht zu dem Template) Hast du vielleicht einen weiteren Link für ein Basis-Template in HTML5?

    Vielen Dank!
    Daniel

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *