Beispielsweise wird die Datei front-page.php immer für die Startseite verwendet und index.php wird immer am Schluss geladen, falls keine andere Datei passt. Im Laufe der Versionen gab es immer wieder Anpassungen an der Hierarchie, welche (meistens) auch in der Grafik reflektiert wurden, doch so richtig nützlich ist das Ganze noch nicht.

Chip Bennet hat deshalb auf eigene Faust die Grafik nach seinen Vorstellungen erweitert, fügt Fehlendes ein und Nützliches hinzu. Bei seiner Revision, wie er das Vorhaben nennt, gibt es beispielsweise jeweils noch eine Info, welche Body-Klasse (ausgegeben durch die body_class() Funktion) bei welcher Darstellung vorkommen.

Aktuell ist Bennets Grafik bei Revision 4 angelangt, man sollte aber die Seite regelmässig besuchen, falls es neue Änderungen gibt. Wer weiss, vielleicht hält diese verbesserte Version bald im Codex Einzug?

WordPress Template Hierarchie 2.0

Jetzt gibt es ein weiteres Plugin dieser Kategorie, welches jedoch nicht als Widget oder URL-Parameter daher kommt, sondern die Admin-Bar in WordPress erweitert. Admin Bar Theme Switcher bietet ebenfalls nichts weiter als ein Dropdown, allerdings ist es, wie ich finde, endlich am richtigen Platz.

Da die Admin-Bar standardmässig nur eingeloggten Benutzern zur Verfügung steht, muss man sich auch keine Sorgen um die Berechtigungen machen. Aber natürlich kann man dieses Feature auch für Gäste zugänglich machen. Mit BuddyPress und Multisite soll das Plugin übrigens laut Autor hervorragend funktionieren.

Anzahl Facebook-Fans in der Sidebar

Hierfür erstellen wir einen eigenen Hook, der kann zum Beispiel wpm_fb_fans_count lauten. Aber kommen wir zurück zum Facebook SDK. Es besteht aus einer einzigen Datei, deshalb passt es gut in einen Unterordner eures Plugins resp. Themes. Mit einer einzelnen Zeile kann man es dann einbinden:

<?php require_once('facebook.php');>

Jetzt muss man eine neue Instanz der Klasse erstellen. Dazu benötigt man eine Facebook Applikation. Von der Applikation brauchen wir die App-ID sowie den Geheimschlüssel.

$facebook = new Facebook(array(
	'appId' => 'xxx', // Applikations-ID
	'secret' => 'xxx', // Geheimschlüssel
	'cookie' => true,
));

Die Fan-Anzahl ermitteln wir mit Hilfe der Facebook Query Language, kurz FQL. Dazu benötigen wir noch die ID der Fanseite. Diese findet man heraus, indem man beispielsweise mit der Maus über den Button Seite bearbeiten fährt.

$result = $facebook->api(array(
	'method' => 'fql.query',
	'query' => 'select fan_count from page where page_id = 123456;' // Eure Seiten-ID
));

echo intval($result[0]['fan_count']);

Wir auf Facebook

Wir sind jetzt allerdings noch nicht fertig. Erstens müssen wir unseren Hook noch benutzen, zweitens wollen wir die Zahl auch cachen, damit sie nicht bei jedem Aufruf neu geladen wird.
WordPress kommt uns beim Caching mit der Transients API entgegen, mit welcher man Werte eine bestimmte Zeit lang speichern kann. Das heisst, unsere Fan-Anzahl wird nur alle paar Stunden neu ermittelt, was sich natürlich positiv auf die Geschwindigkeit des Blogs auswirkt.

Das Resultat

Fügen wir alle Zeilen zusammen und meistern auch noch die letzten Hürden, sieht unser fertiges Script so aus:

<?php
function wpm_show_fb_fans() {

	/* Existiert Transient-Wert? Wenn nein, neu laden */
	if ( false == ( $count = get_transient( 'wpm_fb_fans_count' ) ) ) {

		/* Facebook SDK einbinden (hier in einem Plugin) */
		$plugindir = WP_PLUGIN_DIR.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__));
		require_once($plugindir . '/facebook.php');

		/* Neue Instanz des SDKs */
		$facebook = new Facebook(array(
			'appId' => 'xxx', // Applikations-ID
			'secret' => 'xxx', // Geheimschlüssel
			'cookie' => true,
		));

		/* FQL Query: Fan-Anzahl einer bestimmten Seite */
		$result = $facebook->api(array(
			'method' => 'fql.query',
			'query' => 'select fan_count from page where page_id = 123456;'
		));

		/* Result in Variable $count speichern */
		$count = intval($result[0]['fan_count']);

		/* Dauer in Sekunden (hier: 3 Stunden) */
		$expiration = 60 * 60 * 3;

		/* Transient setzten */
		set_transient(
		  'wpm_fb_fans_count',
		  $count,
		  $expiration
		);
	}

	/* Ausgabe der Fan-Anzahl */
	echo $count;
}

/* Unsere Funktion zum Hook hinzufügen */
add_action( 'wpm_fb_fans_count', 'wpm_show_fb_fans', 10 );
?>

Jetzt können wir irgendwo in unserem Theme folgende Zeile einfügen und die Anzahl Facebook-Fans wird ausgegeben. Der Vorteil: Sollte man das Plugin mal deaktivieren, dann gibt es im Blog keine Fehlermeldung, zudem ist diese Lösung ressourcenschonend.

<?php do_action( 'wpm_fb_fans_count' ); ?>

Dabei hat man nicht etwa eigene Themes erstellt, sondern greift auf die Erfahrung von WooThemes und The Theme Foundry zurück. Während das Headlines Theme mit 45 Dollar günstiger ist, als bei WooThemes, kostet Shelf ebenso viel wie für selbst gehostete WordPress Blogs, nämlich ganze 68 Dollar. Ob und wie der Verdienst durch den Themes-Verkauf verteilt wird, wurde allerdings nicht bekannt gegeben.

Gemäss Lance Willett vom WordPress.com Team will man das Angebot von Premium Themes in diesem Jahr weiter erhöhen. Interessanterweise hatte Matt Mullenweg bereits 2007 den Gedanken eines WordPress.com Marktplatzes für kostenpflichtige Themes.

Das PadPressed Theme verwandelt einen WordPress Blog automatisch in ein iPad-optimiertes Magazin, welches dank Javascript, HTML5 und CSS3 mit Touch-Gesten bedient werden kann. Es punktet unter anderem mit der Verwendung von grossen Bildern für die Beitrags-Darstellung. Doch nehmen wir das Theme resp. Plugin einmal genauer unter die Lupe!

PadPressed - das bessere Flipboard

Manchen dürfte die Flipboard iPad App ein Begriff sein, welches RSS und Twitter Feeds in einem Magazin-ähnlichen Stil aufbereitet. Flipboard war unter anderem Inspiration für dieses Plugin, doch der Entwickler Jason Baptiste wollte zeigen, dass mit HTML5 und CSS3 eine Web-App einer nativen App in nichts nachstehen muss.

Unser Leser Gerhard Schröder hat die App bereits in seinem Blog getestet. Wer seinen Blog mit dem iPad besucht, kann das Theme dort gleich testen. Allen anderen soll folgendes Video die rund 50 Dollar teure Lösung näher bringen:

Das Grundgerüst

Zuerst öffnen wir die single.php Datei unseres aktuellen Themes und suchen die Schleife (Loop), wo der jeweilige Beitrag ausgegeben wird und erstellen vor dem <?php endwhile; ?> einen Div-Container. Dies sieht dann in etwa so aus:

<?php if (have_posts()) : while (have_posts()) : the_post();?>
<div id="post-<?php the_ID(); ?>" <?php post_class() ?>>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<div id="post-author">
</div>
<?php endwhile; ?>

Für die Ausgabe der verschiedenen Informationen über den Beitrags-Autoren gibt es viele Funktionen in WordPress. Mit der Funktion get_avatar() können wir zum Beispiel das Gravatar des Autors anzeigen lassen, mit the_author() seinen öffentlichen Namen und mit the_author_meta() alle weiteren Benutzerinformationen wie E-Mail Adresse oder Website. Das sieht dann ungefähr so aus:

<div id="post-author">
<?php echo get_avatar(get_the_author_meta('user_email'), $size = 50, $default = '', $alt = 'Dies ist nur ein Gravatar'); ?>
<strong><?php the_author(); ?></strong>
<p><?php the_author_meta('description'); ?></p>
<ul>
<li>Website: <?php the_author_meta('user_url'); ?></li>
<li>AIM: <?php the_author_meta('aim'); ?></li>
</ul>
</div>

Das Grundgerüst

Gestaltung

Leider sieht es noch ganz und gar nicht nach einer Box aus, weswegen wir noch ein paar CSS-technische Handgriffe anwenden müssen. Dazu schreiben wir folgende, simple Zeilen, die unsere Autoren-Box gleich etwas verschönern, in die style.css Datei des Themes.

#post-author {
	display:block;
	background:#efefef;
	border:1px solid #ccc;
	padding:5px;
	margin-top:25px;
}

#post-author img.avatar {
	float:left;
	margin:0 10px 5px 0;
	padding:3px;
	border:1px solid #ccc;
}

#post-author ul li {
	display:inline;
	margin-right:20px;
}

Die Autoren-Box mit CSS

Twitternamen anzeigen

Wenn die Autoren eines Blogs auch auf Twitter anzutreffen sind, dann wäre es doch klasse, wenn man auch den Twitternamen anzeigen könnte. Dafür müssen wir uns durch einen eigenen Filter eine zusätzliche Kontaktmethode zu den Benutzerprofilen hinzufügen:

function wpm_add_twitter_contactmethod( $contactmethods ) {
 // Twitter hinzufügen
 $contactmethods['twitter'] = 'Twitter';
 return $contactmethods;
}
add_filter('user_contactmethods','wpm_add_twitter_contactmethod',10,1);

Dadurch können wir jetzt unseren Twitternamen in den Profileinstellungen erfassen und ihn dann in unserer Autoren-Box ausgeben.

Weitere Möglichkeiten

Die Autoren-Box könnte man noch etwas perfektionieren, indem man die Existenz der Funktionen überprüft und notfalls auf veraltete, in früheren WordPress-Versionen verwendete Funktionen zurückgreift. Ausserdem könnte man die Website oder den Twitternamen noch verlinken, aber das dürfte kein Problem sein.

Post Thumbnails

Die in WordPress 2.9 eingeführte Post Thumbnail Funktion ist für die meisten WordPress-Anwender noch relativ neu und deshalb findet man kaum gute Beispiele und Tutorials im Web. Heute möchten wir mit unseren Lesern ein nützliches Code Snippet teilen, mit welchem man bei jedem Beitrag manuell das Thumbnail Format festlegen kann.

Um die Post Thumbnails überhaupt erst nutzen zu können, müsst ihr in der functions.php eures Themes folgende Zeile hinzufügen: <?php add_theme_support( 'post-thumbnails' ); ?>.

Danach könnt ihr eure jeweiligen Bildgrössen definieren. Uns reichen für das Beispiel eine rechteckige und eine quadratische Form.

<?php
add_image_size( 'wpm_rectangular_thumbnail', 250, 75 ); // Rechteckiges Format
add_image_size( 'wpm_square_thumbnail', 75, 75 ); // Quadratisches Format
?>

Post Thumbnail Meta Box

Um dann die Post Thumbnails anzuzeigen, kann man dann innerhalb der Loop entweder <?php the_post_thumbnail('wpm_rectangular_thumbnail'); ?> oder <?php the_post_thumbnail 'wpm_square_thumbnail'); ?> verwenden.

Thumbnail Format auswählen

Da wir nicht genauer ins Detail gehen wollen, verweisen wir lieber auf die sehr ausführliche Anleitung von Mark Jaquith. Wir möchten euch ja zeigen, wie man die Bildgrössen manuell abwechseln kann. Dazu werden wir eine neue Meta-Box im Beitrags-Editor hinzufügen, wo man das gewünschte Format auswählen kann. Im Hintergrund werden diese Daten in einem versteckten Custom Field gespeichert.
Ihr müsst bloss folgenden Code in der functions.php eures Themes hinzufügen, evtl. müsst ihr auch die PHP-Tags am Anfang und am Ende entfernen.

<?php
/*
 * Fügt eine Meta Box im Beitrags-Editor hinzu,
 * mit der man wählen kann, ob das Thumbnail quadratisch oder rechteckig erscheinen soll.
 *
 * Autor: Schweizer WordPress Magazin
 *
 */

/* Hier haken wir uns in die admin_menu Action ein, um die Meta Box hinzuzufügen */
add_action('admin_menu', 'wpm_add_custom_box');

/* Hier haken wir uns in die save_post Action ein, um die eingegebenen Daten zu verarbeitena */
add_action('save_post', 'wpm_save_postdata');

/* Fügt die Meta Box im Beitrags-Editor hinzu */
function wpm_add_custom_box() {
	add_meta_box(
		'wpm_sectionid',
		__( 'Miniaturbild Format', 'wpm_textdomain' ),
		'wpm_inner_custom_box',
		'post',
		'advanced'
	);
}

/* Schreibt den Inhalt in die Meta Box */
function wpm_inner_custom_box() {

	// Nonce für die Verfikation benutzen

	echo '<input type="hidden" name="wpm_noncename" id="wpm_noncename" value="' .
    	wp_create_nonce( plugin_basename(__FILE__) ) . '" />';

	// Überprüfen, ob das Custom Field bereits existiert.

	$thumb = get_post_meta($post->ID, 'wpm_thumb_format', true);
	$square = "";
	$small = "";
	if(isset($thumb)) {
		if($thumb = 'wpm_square_thumbnail') {
			$square = 'checked="checked" ';
		}
		if($thumb = 'wpm_rectangular_thumbnail') {
	  		$small = 'checked="checked" ';
		}
	} else {
	  $small = 'checked="checked" ';
	}

	// Formular-Felder inklusive Beschreibung hinzufügen

	echo '<p>' . __("Soll das Thumbnail quadratisch oder rechteckig sein?", 'wpm_textdomain' ) . '</p>';
	echo '<p><input type="radio" name="wpm_thumb" value="wpm_square_thumbnail"
	id="wpm_square_thumbnail" size="25" ' . $square . '/>';
	echo '<label for="wpm_square_thumbnail">quadratisch</label>';
	echo '<input type="radio" name="wpm_thumb" value="wpm_rectangular_thumbnail"
	id="wpm_rectangular_thumbnail" size="25" ' . $small . '/>';
	echo '<label for="wpm_rectangular_thumbnail">rechteckig</label></p>';
}

// Wenn der Beitrag gespeichert wird, wird auch das Thumbnail Format gespeichert
function wpm_save_postdata( $post_id ) {

	// Sicherstellen, dass die Daten wirklich von unserem Beitrag stammen

	if ( !wp_verify_nonce( $_POST['wpm_noncename'], plugin_basename(__FILE__) )) {
		return $post_id;
	}

	// Überprüfen, ob dies eine automatische Sicherung des Beitrags ist.
	// Wenn ja, dann tun wir hier nichts.
	if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
		return $post_id;

	// Berechtigung des Nutzers überprüfen
	if ( 'page' == $_POST['post_type'] ) {
		if ( !current_user_can( 'edit_page', $post_id ) ) return $post_id;
	} else {
		if ( !current_user_can( 'edit_post', $post_id ) ) return $post_id;
	}

	// Wir sind authentifiziert: Jetzt können wir die Daten speichern

	$mydata = $_POST['wpm_thumb'];
	$thumb = get_post_meta($post->ID, '_wpm_thumb_format', true);
	if(isset($thumb)) {
		update_post_meta($post_id, '_wpm_thumb_format', $mydata);
	} else {
		add_post_meta($post_id, '_wpm_thumb_format', $mydata, true);
	}
}
?>

Das ist allerdings erst die halbe Miete, denn jetzt kommt noch die Ausgabe im Frontend. Dazu müsst ihr die Theme-Datei öffnen, welche für die Darstellung auf der Startseite zuständig ist (meist home.php). Dort fügt ihr dann an passender Stelle innerhalb des Loops folgende Zeilen ein:

<?php if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) {
	$thumb = get_post_meta($post->ID, "_wpm_thumb_format, true); ?>
	<div class="thumbnail">
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
			<?php if($thumb == "wpm_square_thumbnail") {
				the_post_thumbnail('wpm_square_thumbnail');
			} else {
				the_post_thumbnail('wpm_rectangular_thumbnail');
			} ?>
		</a>
	</div>
<?php }	?>

An dieser Stelle sei angemerkt, dass dieser Code vielleicht nicht zu 100% funktioniert, denn er wurde in nur wenigen Minuten geschrieben und war auch für persönliche Zwecke gedacht. Ihr könnt den Code zudem herunterladen und als Plugin installieren. Die Theme-Anpassung ist allerdings weiterhin erforderlich.

Wir freuen uns auf eure Anregungen, Fragen und Verbesserungsvorschläge!

Das ominöse Photoshop Plugin trägt den Namen „Divine“ und ist aktuell in der Betaversion 0.5 verfügbar (nur Windows). Laut Website des Projekts sollen insgesamt nur 4 Schritte nötig sein, bis man das fertige Theme benutzen kann. Das klingt natürlich viel zu einfach und auch das erstellte HTML und CSS soll sauber und das Theme widget-ready sein. Auch Photoshop Filter und Ebenen sollen problemlos funktioniern. Deshalb wollte ich das selber ausprobieren. Zum Glück gibt es zu jedem Schritt auch eine Videoanleitung.

Divine im Härtetest

Einschränkung in der Gratis-Version

Laut Anleitung soll ich also das Design im Photoshop öffnen und Divine starten. Dann muss man den einzelnen Elementen die jeweilige Funktion zuordnen (Titel, Kommentare, Artikeldatum, etc.) und es danach mit dem integrierten FTP-Uploader hochladen. Zu guter Letzt soll man das Theme im Browser betrachten können.

In meinem Fall wurde das Ganze leider nicht ganz sauber erledigt. Denn nachdem ich Divine gestartet habe, wurde mir prompt die erste Fehlermeldung angezeigt. Die Gratis-Version von Divine unterstützt nämlich nur Templates mit einer bestimmten Grösse. Nach Anpassung der Grösse konnte ich Divine zwar korrekt starten, doch mit keiner von drei PSD-Dateien, die mir gerade zur Verfügung standen,  konnte ich Divine wirklich nutzen.

Denn einzelne Elemente wie z.B. der Beitragstitel müssen auch mit "Post Title" betitelt sein, ansonsten weiss das Programm nicht, welche Funktion dazu passt. Doch der Aufwand dazu war viel zu gross und das Template für das Programm zu kompliziert aufgebaut. Nicht einmal das eine Template, welches praktisch so aufgebaut ist wie dieser Blog hier, wollte Divine annehmen.

Hier seht ihr noch ein komplizierteres Design, welches wohl eher für einen normalen Slicing-Vorgang geeignet ist als solch ein Plugin. Trotzdem war es der Versuch wert und hat gezeigt, dass Divine aktuell noch eine Baustelle ist. Hoffentlich ändert sich dies in künftigen Versionen.

Photoshop-Layout zum Testen von Divine