Und weiter geht’s. Mittlerweile ist ein Theme installiert, das auf dem WP Basis Theme und YAML basiert.
WP Basis Theme
Das WP Basis Theme wurde von Frank Bültge entwickelt, und „ist ein Theme, welches die Erstellung eines neuen Themes für WordPress vereinfachen soll.“
Nach dem Download und dem Entpacken, hat man eine Menge Dateien und Ordner, die in der Summe das Theme ergeben. Bevor ich jetzt alle Dateien erkläre, hier gibt es eine schöne Zusammenfassung über die Bestandteile eines WordPress-Themes, die einigermaßen auch auf das Basis Theme zutrifft. Das Basis Theme kann man so, wie es ist, installieren, und man erhält ein „nacktes“ WordPress-Blog mit minimalem HTML und ohne CSS-Styles.
YAML
Yaml ist ein CSS-Framework, das von Dirk Jesse entwickelt wurde (und wird). Damit ist es möglich, einfach flexible und responsive Weblayouts zu realisieren. Es ist mit allen aktuellen Browsern kompatibel und unterstützt auch den Internet Explorer ab Version 6. Im Grunde ist YAML ein Baukastensystem für HTML-Seiten, das darüberhinaus auch die nötigen CSS-Dateien zur Verfügung stellt, um Weblayouts zu erstellen, die heutigen Standards entsprechen.
Auf der YAML-Webseite sind einige Demos und eine ausführliche Dokumentation. Alles gibt es in einem großen Downloadpaket. Möchte man YAML verwenden, sollte man sich die Lizenzbedingungen angucken.
Für meine Zwecke ist das Flexible Grid ideal. Es handelt sich um ein responsives Full-Layout mit 2 Spalten.
WP Basis und YAML zusammenführen
Für dieses Blog habe ich WP Basis und YAML miteinander kombiniert. Man nimmt das HTML und das CSS von YAML und die Templatetags von WP Basis.
Für die header.php sieht das so aus. Das ist die header.php aus dem WP Basis Theme
<?php
/**
* The Header for our WP Basis theme
*
* @package WP Basis
* @subpackage
* @since 05/08/2012 0.0.1
* @version 01/21/2013
* @author fb
*/
?>
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html <?php language_attributes(); ?> class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html <?php language_attributes(); ?> class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html <?php language_attributes(); ?> class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html <?php language_attributes(); ?> class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html <?php language_attributes(); ?> class="no-js" manifest="cache-manifest.manifest"><!--<![endif]-->
<head profile="http://gmpg.org/xfn/11">
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title( '-' ); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php
/**
* If you want to use an element as a wrapper,
* i.e. for styling only, then <div> is still the element to use
*/
?>
<div id="wrap" class="hfeed">
<?php
/*
* The page header typically contains items such as your site heading,
* logo and possibly the main site navigation
* ARIA: the landmark role "banner" is set as it is the prime heading or internal title of the page
*/
?>
<header role="banner">
<hgroup>
<h1>
<span><a href="<?php echo home_url( '/' ); ?>" title="<?php echo get_bloginfo( 'name', 'display' ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
</h1>
<h2><?php bloginfo( 'description' ); ?></h2>
</hgroup>
</header>
<?php
/**
* The <main> element is used to enclose the main content,
* i.e. that which contains the central topic of a document
* ARIA: the landmark role "main" is added here as it contains the main content
* of the document, and it is recommended to add it to the
* <main> element until user agents implement the required role mapping.
*/
?>
<main role="main">
Mit ein bisschen Friemelei wird daraus in Kombination mit YAML:
<!DOCTYPE html>
<html lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!-- Mobile viewport optimisation> <link href="style.css" rel="stylesheet" type="text/css"/> <!-->
<?php wp_head(); ?>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<!--Skiplinks - Anfang-->
<ul class="ym-skiplinks">
<li><a class="ym-skip" href="#nav">Skip to navigation (Press Enter)</a></li>
<li><a class="ym-skip" href="#main">Skip to main content (Press Enter)</a></li>
</ul>
<!--Skiplinks - Ende-->
<body <?php body_class(); ?>>
<header role="banner">
<div class="ym-wrapper">
<div class="ym-wbox">
<hgroup>
<form class="ym-searchform">
<input class="ym-searchfield" type="search" placeholder="Search..." />
<input class="ym-searchbutton" type="submit" value="Search" />
</form>
<p class'"subtitle"><?php bloginfo( 'description' ); ?></p>
<h1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo get_bloginfo( 'name', 'display' ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</hgroup>
</div>
</div>
</header>
<!--Header - Ende-->
<div id="main">
<div class="ym-wrapper">
<div class="ym-wbox">
<section class="ym-grid linearize-level-1">
<!--Hauptspalte - Anfang-->
<div class="ym-g66 ym-gl content">
<div class="ym-gbox-left ym-clearfix">
Diese Frickelarbeit macht man für die diversen Templatedateien, und am Ende hat man ein Theme, dass auf YAML basiert.
Jetzt geht es ans Feintuning.