Vimeo

Anforderung

Für eine aktuelle Aufgabe suchte ich einen Weg, um einfach Vimeo Videos auf einem Blog zu veröffentlichen. Die Umsetzung erforderte einige Details, sodass rasch Custom Post Types eingesetzt wurden. Bei diesem Post Type gibt es dann eine Meta Box, bei welchem einfach die URL zum Video angegeben werden kann. Diese wird dann verwendet, um einerseits das Video auszugeben und andererseits auch direkt das Standbild des Videos als Post Thumbnail zu speichern.

oEmbed

oEmbed ist ein Format für die eingebettete Darstellung einer URL auf anderen Websites. Mit seiner simplen API können Websites eingebettete Inhalte wie Fotos und Videos einfügen, indem ein User bloss den Link dazu einfügen muss. Dazu definiert der Anbieter ein Muster, wie seine URLs aufgebaut sind, auf welches dann WordPress die URL untersuchen kann. Wird festgestellt, dass es eine gültige URL zu einem Vimeo Video ist, wird deren API aufgerufen.

Weitere Informationen zum Einfügen von Videos in WordPress gibt es im WordPress Codex. Es gibt auch eine Dokumentation der Vimeo oEmbed API.

Umsetzung

Bei der Umsetzung war ich darüber erstaunt, wie viele Zeilen Code es schlussendlich benötigte, um das Ganze zum Laufen zu bringen. Doch fangen wir einmal von vorne an. Zu Beginn habe ich ein neues Must-Use Plugin (PHP-Datei im mu-plugins Ordner) erstellt und dort folgenden Code eingefügt:

<?php
add_action( 'publish_video', 'wpm_publish_video' ); // 'publish_post' bei normalen Posts

/**
 * Diese Funktion wird beim Publizieren eines Posts aufgerufen,
 * damit wir ein das Post Thumbnail hinzufügen können
 *
 * @param int $post_id Die ID des Posts
 */
function wpm_publish_video( $post_id ) {
	global $wpdb; // Datenbank-Objekt laden

	// Reine Vorsichtsmassnahme
	if ( 'video' !== get_post_type( $post_id ) )
		return false;

	// Nur fortfahren, wenn eine URL angegeben wurde und es noch kein Post Thumbnail gibt
	if ( '' === get_post_meta( $post_id, '_thumbnail_id', true ) || '' === $video = get_post_meta( $post_id, '_vimeo_url', true ) )
		return false;

}
?>

Mit dieser Funktion klinken wir uns erst in den Publizierungs-Vorgang des Beitrags (in diesem Fall vom Post Type video) ein und laden das WordPress Datenbank-Objekt. Mit der zweiten If-Abfrage stellen wir sicher, dass noch kein Post Thumbnail gesetzt wurde und dass eine Video URL angegeben wurde.

Als nächsten Schritt kann man dann die Informationen zum Video von Vimeo laden. Mir reicht daher eine einfache Abfrage einer einzigen URL. Möchte man aber beispielsweise automatisch auch andere Provider wie YouTube unterstützen, sollte man sich die WP_oEmbed Klasse in der Datei wp-includes/class-oembed.php etwas genauer ansehen, da dort die regulären Ausdrücke und die nötigen Methoden beschrieben sind.

$url = "http://vimeo.com/api/oembed.json?url=$video";
// Video Infos laden
if ( ! $response = wp_remote_retrieve_body( wp_remote_get( $url ) ) )
	return false;

$json = json_decode( $response );
// JSON parsen
if ( null === $json )
	return false;

Dieser Abschnitt, der direkt nach der Prüfung des Post Thumbnails eingefügt wird, holt nun also die Informationen zu einem Video, mit wp_remote_body laden wir auch nur den Body und nicht noch die HTTP Header. Falls diese Funktion einen Fehler zurückgibt, beenden wir auch unsere Funktion, denn ohne Inhalt können wir ja nichts anfangen. Danach wandeln wir nur noch den JSON String in ein PHP Objekt um und fahren nur im Erfolgsfall fort.

Die Rückgabe der API sieht übrigens wie folgt aus (bei XML). Uns interessiert dabei das Feld thumbnail_url, wenn man möchte kann man aber auch noch über thumbnail_width und thumbnail_height die Bildmasse auslesen.

Das kriegen wir von Vimeo zurück

Jetzt muss man ja eigentlich nur noch das Bild laden und als Post Thumbnail speichern. Klingt zwar einfach, aber es war doch umfangreicher als ich zuerst gedacht habe. Ich habe das deshalb in eine zweite Funktion ausgelagert.

// Standbild URL und Titel des Videos auslesen
$thumbnail_url = $json->thumbnail_url;
$title = $json->title;
// *Magic*
$wp_thumb_id = wpm_generate_post_thumbnail( $post_id, $thumbnail_url, $title );
if ( ! $wp_thumb_id )
	return false;

// Thumbnail ID setzen
update_post_meta( $post_id, '_thumbnail_id', $wp_thumb_id );

In der neuen Funktion wpm_generate_post_thumbnail müssen wir nun das Bild aufrufen und unter dem richtigen Dateinamen in WordPress hochladen, wofür es praktischerweise die Hilfsfunktion wp_upload_bits gibt. Danach muss dann das Standbild als Attachment eingetragen werden, was jedoch auch ein paar Kniffe benötigt.

/**
 * Post Thumbnail hinzufügen von einer bestimmten URL
 */
function wpm_generate_post_thumbnail( $post_id, $url, $title = '' ) {
	if ( ! $response = wp_remote_retrieve_body( wp_remote_get( $url ) ) )
		return false;

	// Dateinamen herausfiltern
	$filename = substr( $url, ( strrpos( $url, '/' ) ) +1 );

	// Datei in WordPress hochladen
	$upload = wp_upload_bits( $filename, null, $response );
	if ( false !== $upload['error'] )
		return false;

	// MIME Type überprüfen, zurückgeben
	$filetype = wp_check_filetype( $filename );

	// Informationen zum Attachment
	$attachment = array(
		'post_mime_type' => $filetype['type'],
		'guid' => $upload['url'],
		'post_title' => $title,
		'post_content' => '', // z.B. Video Beschreibung
	);
	// Attachment einfügen
	$thumb_id = wp_insert_attachment( $attachment, $upload['file'], $post_id );
	if ( is_wp_error( $thumb_id ) )
		return false;

	// Für die Verknüpfung mit dem Beitrag müssen wir diese Klasse laden
	require_once(ABSPATH . '/wp-admin/includes/image.php');
	// Attachment mit Post verknüpfen
	wp_update_attachment_metadata( $thumb_id, wp_generate_attachment_metadata( $thumb_id, $upload['file'] ) );
	return $thumb_id;
}

Mit diesen zwei Funktionen kann man nun ein Custom Field auslesen, die nötigen Informationen zum Video laden und das Standbild schliesslich als Post Thumbnail verwenden. Dies alles mit nur einem Mausklick beim Veröffentlichen des Artikels. Und das Beste daran: Funktioniert es einmal nicht oder das Standbild wurde geändert, kann man das vorhandene Thumbnail entfernen und einfach den Beitrag nochmals speichern.

Ich habe den Code einfach so aus dem Plugin kopiert, falls es also nicht funktioniert, einfach sagen. Bestimmt kann man das Ganze auch vereinfachen, bin also für jeden Ratschlag dankbar.

Nachtrag: Selbstverständlich dürft ihr auch noch sehen, wie das Ganze dann im Backend aussieht. Nichts Spezielles, ich habe zum Testen mal ein Video von Marcel Widmer genommen.

Thumbnail via oEmbed Thumbnail

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' ); ?>

Hintergrund

Doch was versteht man eigentlich unter einer Facebook Landing Page? Genau genommen meint man damit einen speziellen Reiter einer Fanseite, die neuen Besuchern angezeigt werden. Man kann aber auch spezielle Landing Pages für Aktionen oder Wettbewerbe nutzen.

Normalerweise hat eine Fanseite die Standard-Reiter Pinnwand, Fotos und  vielleicht noch Veranstaltungen. Weitere können durch Facebook Applikationen aus dem öffentlichen Verzeichnis hinzugefügt werden. Besonders beliebt ist die Anwendung Static FBML, mit der man bis anhin sehr viele Landing Pages umgesetzt hat. Mit ihr kann man gewöhnliches HTML in Kombination mit speziellen Facebook-Tags für Landing Pages verwenden. In der Nutzung ist man aber sehr eingeschränkt, beispielsweise bei Javascript.

In einigen Tagen, genauer gesagt am 11. März, wird es nicht mehr möglich sein, Static FBML auf seiner Fanpage zu nutzen. Stattdessen sollen eigene Applikationen - in IFrames - genutzt werden. Diese haben viele Vorteile: Man kann nun problemlos Javascript und somit auch Google Analytics einsetzen, ist im Design nicht mehr beschränkt und kann seine Seiten noch besser in Facebook integrieren.

Erste Schritte

Anwendung erstellen

Als Erstes muss man die Facebook Developer Applikation installieren, danach kann man seine erste Anwendung erstellen. Als Erstes gibt man den Namen ein und akzeptiert die AGB von Facebook. Der Name darf übrigens nicht an eine Facebook-eigene Anwendung wie Diskussionen oder Veranstaltungen angelehnt sein.

Da der Name öffentlich ist, sollte man etwas Sinnvolles wählen, wie z.B. WordPress Magazin oder dercooleblog.com. Danach kommt man zur eigentlichen Einstellungs-Seite der Anwendung, wo es allerhand einzustellen gibt.

Facebook Anwendungseinstellungen

Wichtig ist auf dieser ersten Einstellungsseite, dass man ein Logo (75x75px) sowie ein Icon (16x16px) hochlädt. Am besten eignen sich GIF-Bilder mit transparentem Hintergrund. Auch die Sprache schaltet man vorsichtshalber lieber auf Deutsch um, ich konnte allerdings beim Einrichten keinen Unterschied zu Englisch feststellen. Diese Einstellung dürfte wohl nur wichtig sein, wenn man seine Anwendung ins offizielle Verzeichnis stellen möchte. In unserem Fall bleibt die Anwendung jedoch privat.

Das nächste und letzte Register hat den Namen Facebook-Einbindung. Hier stellen wir ein, welche Seite im IFrame eingebunden werden soll. Zudem wird hier die Anwendungs-ID und der Anwendungs-Geheimcode angegeben, welche wir später für die Authentifizierung benötigen.

Facebook-Einbindung

Ansonsten muss man folgendes anpassen:

• Canvas-URL - Die URL zur Applikation auf dem eigenen Server, ohne jedoch eine explizite Datei anzugeben. Beispiel: http://example.com/wp-content/facebook/
• URL des Reiters - Hier kommt dann die Datei, meistens index.php
• Canvas-Typ / Reiter-Typ - IFrame
• Name des Reiters - Kurz und bündig, maximal 16 Zeichen

Jetzt kann man die Änderungen speichern, wodurch man auf die Übersichtsseite gelangt. Dort klickt man auf die Anwendungs-Profilseite und anschliessend auf Zu meiner Seite hinzufügen. Im folgenden Menü wählt man dann die gewünschte Fanseite aus.

Allerdings wird die Anwendung noch nicht standardmässig allen Nutzern angezeigt. Dazu muss man noch die entsprechende Fanseite bearbeiten und unter dem Punkt Genehmigungen verwalten den Standard-Reiter für Nicht-Fans definieren.

Der Code

Jetzt können wir uns nun der eigentlichen Applikation widmen. Dazu erstellt man im Programm seiner Wahl eine PHP Datei mit einfachem HTML-Grundgerüst - dazu reicht beispielsweise schon Dreamweaver. Als Nächstes bindet man das PHP-SDK, bestehend aus einer einzigen Datei, von Facebook ein, welches man bei GitHub herunterladen kann. Dort gibt es auch ein entsprechendes Beispiel zur Nutzung:

<?php
require './facebook.php';

$facebook = new Facebook(array(   'appId'  =-> 'YOUR APP ID',
  'secret' => 'YOUR API SECRET',
  'cookie' => true, // enable optional cookie support
));

$session = $facebook->getSession();
$me = null;
if ($session) {
	try {
		$uid = $facebook->getUser();
		$me = $facebook->api('/me');
	} catch (FacebookApiException $e) {
		error_log($e);
	}
}
?>

Damit initialisieren wir die Klasse und laden die aktuelle Session. So erhalten wir nämlich bereits einige Basics über den aktuellen Besucher, ob er eingeloggt ist oder nicht und ob er bereits Fan der Seite ist. Da wir jedoch weitere Features wie den Like-Button und die Möglichkeit, Freunde einzuladen, nutzen wollen, benötigen wir die Daten auch in Javascript. Dazu laden wir zusätzlich noch die JS-SDK direkt nach dem öffnenden <body>-Tag:

<div id="fb-root"></div>
<script>
	(function() {
		var e = document.createElement('script');
		e.src = document.location.protocol + '//connect.facebook.net/de_DE/all.js';
		e.async = true;
		document.getElementById('fb-root').appendChild(e);
	}());
</script>

Jetzt muss man - gleich im Anschluss - nur noch alle Javascript-Funktionen initialisieren, die Session-Daten haben wir dabei schon aus dem PHP-Teil.

<script>
	window.fbAsyncInit = function() {
		FB.init({
			appId   : '<?php echo $facebook->getAppId(); ?>',
			session : <?php echo json_encode($session); ?>,
			status  : true,
			cookie  : true,
			xfbml   : true
		});
	}
</script>

Danach kommt das eigentliche Layout, wo man sich nach Lust und Laune austoben kann. Zum Beispiel kann die Landing Page an Facebook angelehnt oder so kunterbunt wie die Website sein. Einzige Limitierung ist die Breite von 520 Pixel. Die Höhe sollte variabel sein, wie wir das vorhin in den Einstellungen definiert haben. Dazu bedarf es allerdings noch einer Zeile Code...

Auto-Resize

Wir haben in den Anwendungs-Einstellungen angegeben, dass die IFrame-Grösse automatisch angepasst werden soll, schliesslich will man ja keine Scrollbalken, welche das mit 520 Pixel schon schmale Layout je nach Browser nochmals um einige Pixel reduzieren würden. Zusätzlich zu dieser Einstellung muss man aber noch in der selben window.fbAsyncInit Funktion folgende Zeile einfügen:

FB.Canvas.setAutoResize();

Hat man allerdings ein jQuery-Slider oder -Accordion, so verändert sich ja immer die Grösse des IFrames. FB.Canvas.setAutoResize() ist deshalb nur für die Initialisierung des Tabs sinnvoll. Anschließende Vergrösserungen sollten besser manuell mit FB.Canvas.setSize() durchgeführt werden. Ein Beispiel:

$('#xyz').click(function () {
	$('#xyzdiv').hide();
	var newHeight = $(document).height() + 170;
	FB.Canvas.setSize({ width: 520, height: newHeight });
	$('#newtext').slideDown(500, function () {
	});
});

Events

Facebooks Javascript-SDK erlaubt es, sich in bestimmte Events einzuklinken. Auf diesem Weg kann man die Applikation bei Login/Logout oder bei einem Gefällt mir neu laden. Mit Hilfe des GET-Parameters app_data kann man beim Reload bestimmte Werte an die Applikation übergeben, z.B. um eine Nachricht für den neuen Fan anzuzeigen.

Folgende Schnipsel kommen ebenfalls in die Init-Funktion:

// Gewöhnlicher Reload nach Login, um Nutzer-Daten zu erhalten
FB.Event.subscribe('auth.login', function() {
	window.location.reload();
});

// Location anpassen, für Mitgabe von app_data Parameter
FB.Event.subscribe('edge.create', function (response) {
	setTimeout(function () {
		window.parent.location.href = 'http://www.facebook.com/meinefanpage&sk=app_123456&app_data=neuerfan';
	}, 1000);
});

Teilen

Ein weiterer Vorteil einer eigenen Anwendung gegenüber Static FBML ist die Möglichkeit, dass man dem User Dialoge anzeigen kann. So lassen sich unter anderem Nachrichten an seine Pinnwand posten, wie dieses Beispiel zeigt:

$('#share').click(function () {
	FB.ui({
		method: 'feed',
		name: 'Werde Fan von XY',
		message: 'Klicke Gefällt mir! Diese Nachricht kann man übrigens ändern!',
		caption: 'Die beste Seite',
		description: 'Werde Fan auf Facebook und unterstütze damit XY!',
		link: 'http://www.facebook.com/meinefanpage&sk=app_123456',
		picture: 'http://example.com/wp-content/facebook/images/100x100px.png' // Auch ein Bild kann angezeigt werden, 100x100 Pixel
	});
});

Hier kommt für den Element-Selektor $('#share') jQuery zum Einsatz. Dieser ganze Code-Block sollte am besten in einem $(document).ready(function () { ... }); untergebracht werden, damit sichergestellt ist, dass die Facebook-SDK vollständig geladen ist. Am Ende sieht das dann ungefähr so aus:

Der Teilen Dialog

Fazit

Schlussendlich könnte die Landing Page so aussehen wie die des WordPress Magazins, auch wenn unsere noch etwas minimalistisch daherkommt. An dieser Stelle seid ihr gefragt! Erstellt eure eigene Landing Page anhand dieses Beispiels und liest weiterführende Dokumentationen von Facebook:

• Signed Request
• Social Plugins (Gefällt mir Buttons, etc.)
• Graph API
• Javascript SDK Übersicht
• Facebook OAuth Implementierung

Das Endergebnis

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.

WordPress - Das Einsteigerseminar

"WordPress - Das Einsteigerseminar" von Vladimir Simovic und Thordis Bonfranchi-Simovic richtet sich, wie der Name schon verrät, an Neulinge, welche sich in WordPress einarbeiten wollen. Das wird einem spätestens dann klar, wenn man das Inhaltsverzeichnis aufschlägt: Das Buch wird aufgeteilt in die drei Abschnitte Lernen — Üben — Anwenden. In diesem Beitrag möchte ich das Buch kurz vorstellen und meine Meinung dazu schreiben. Zum Schluss gibt es sogar noch einen Wettbewerb!

Übrigens: Gerade als ich dabei war, diesen Artikel hier zu schreiben, las ich unter www.wordpress-buch.de, dass ihr anderes Buch "WordPress - Das Praxisbuch" bereits in der 3. Auflage erschienen ist. Herzliche Gratulation!

Lernen

Im 1. Teil lernt der Leser grundlegende Informationen zu Weblogs, wo man sie einsetzt, wie man sie erkennt und sie selbst betreibt. Damit kommen die beiden Autoren auch gleich zum nächsten Kapitel, in dem WordPress erklärt wird. Dabei geht man Schritt für Schritt die einzelnen Seiten im Adminbereich durch und lernt, welche Seite wo für was zuständig ist. Diese werden im Buch übrigens mit Modul bezeichnet, was eigentlich kein gängiger Name dafür ist.

Im Schlussteil kommt man bereits zu den für Einsteiger etwas kniffligeren Dingen, wie z.B. YouTube-Videos einbinden, Backups und Updates. Ausserdem werden interessante Dienste wie twitterfeed und Rivva kurz vorgestellt.

Üben

In diesem Teil gibt es verschiedene Übungen zu den Kapiteln im Teil Lernen, wobei jedes Übungskapitel aus rund 10 Fragen besteht, die von "Was ist das «Dashboard»" bis hin zu "Welche Vorteile bietet die Exportfunktion" reichen. Aus Sicht eines Einsteigers mag dieses Frage-Antwort-Spiel noch interessant sein, ich kann es mir aber nicht so recht vorstellen, es ist ja eigentlich alles nur Repetition...

Anwenden

vlad-design.de

Vladimir a.k.a. Perun beschreibt in diesem Teil anhand seiner eigenen Website das klassische Beispiel einer WordPress-Installation als CMS, was meiner Meinung nach für Einsteiger sehr praktisch ist! Danach fährt er fort mit weiterführenden Links zu Blogs wie bueltge.de und wpengineer.com - leider ist dieser Blog noch nicht dabei ;-). Nützlich finde ich die Tabelle, welche die Stufen der verschiedenen Benutzerrollen in WordPress darstellt. Denn wenn man diese Information braucht, hatte man dies bisher meist nicht gleich zur Hand. Zu guter Letzt folgt dann noch ein mehrseitiges Glossar sowie ein Index. Auch wenn dieser Teil etwas mager wirkt, ist er für Einsteiger, an die sich dieses Buch ja schliesslich richtet, bestimmt sehr interessant.

Fazit

Dieses Buch kann ich all jenen wärmstens empfehlen, die sich zum ersten Mal in die Welt der Blogs verirren oder von einem anderen CMS wechseln wollen und eine geeignete Starthilfe benötigen. Es bietet einen guten Einstieg und auf der Website zum Buch findet der Leser sogar noch neueste News zur Web Publishing Plattform.

Wettbewerb

Freundlicherweise stellt mir der Verleg bhv, bei welchem das Buch erschienen ist, ein kostenloses Exemplar im Wert von rund 15 Euro zur Verfügung, welches ich gerne unter den Lesern des Schweizer WordPress Magazins verlosen möchte. Um an der Verlosung teilzunehmen, müsst ihr bloss bis spätestens 7. April 2010 einen Kommentar zu diesem Beitrag schreiben. Das Buch wird unter allen teilnehmenden Leserinnen und Lesern verlost. Bitte gebt dabei eine gültige E-Mail Adresse an, da ich euch im Gewinnfall ja irgendwie kontaktieren muss :-)

Früher sah das Kommentar-Template so aus:

<?php if ($comments) : ?>
	<h2><?php comments_number('0 Kommentare', '1 Kommentare', '% Kommentare' ); ?></h2>
	<ul>
	<?php foreach ($comments as $comment) : ?>
	<li id="comment-<?php echo $commentcount ?>">

	<?php comment_author_link(); ?>
	?> am <?php comment_date('j. F Y') ?> um <?php comment_time() ?></p>
	<?php if ($comment->comment_approved == '0') : ?>
	Dein Kommentar muss noch geprüft werden.<?php endif; ?>
	<?php comment_text() ?>
	<?php edit_comment_link('Kommentar bearbeiten'); ?>
	</li>
<?php $commentcount++; endforeach; /* end for each comment */ ?>
</ul>

<?php endif; ?>

Heute ist es ganz anders. Nichts mehr mit lästigen Variablen un eher zweckmässigen Funktionen. Ab WordPress 2.7 hat das Kommentar-Template de facto den gleichen Stand wie die Beiträge, da es jetzt eine eigene Loop ist. Eine Loop für Kommentare eben. Im Vergleich zu vorher ist das neue Template auch ein wenig schlanker geworden. Der Kern ist der hervorgehobene Template Tag <?php wp_list_comments(); ?>

<?php if ( have_comments() ) : ?>
	<h3><?php comments_number('0 Kommentare', '1 Kommentar', '% Kommentare' );?></h3>
	<ul class="commentlist">
		<?php wp_list_comments('type=comment&callback=magazin_comment'); ?>
	</ul>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
 <?php else : // Falls es noch keine Kommentare zum Beitrag gibt ?>
	<?php if ('open' == $post->comment_status) : ?>
	 <?php else : // comments are closed ?>
		<p>Kommentare sind geschlossen.</p>
<?php endif; endif; ?>

Jetzt haben wir also schon eine vernünftige Basis, die aber noch einiges an Erklärungen bedarf! Die ersten Zeilen dürften klar sein, da die Funktionen doch recht aussagekräftige Namen haben. Der Container mit den zwei Template Tags <?php previous_comments_link() ?> und <?php next_comments_link() ?> sorgt übrigens für die Navigation, falls die Kommentare auf mehrere Seiten verteilt sind. Dies kann man aber in den WordPress Einstellungen deaktivieren, was dann diesen Code-Teil überflüssig macht.

Habt ihr gesehen, dass ab WordPress 2.7 die Angaben über Kommentierer und Datum nicht mehr direkt im Template stehen? Für diese hat WordPress nämlich schon eine Vorlage. Wer diese Vorlage ändern will, braucht dazu nur <?php wp_list_comments(); ?> zu erweitern! Und zwar um den Parameter 'callback=myown_comments'. Folglich sieht diese Zeile nun so aus: <?php wp_list_comments('callback=myown_comments'); ?>.

Jetzt muss man nur noch folgende Zeilen in der functions.php des Themes einfügen und schon kann man die Ausgabe nach Belieben verändern!

<?php function myown_comments($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
      <div class="comment-author vcard">
         <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>

         <?php printf(__('%s says:'), get_comment_author_link()) ?>
      </div>
		<?php if ($comment->comment_approved == '0') : ?>
	<em><?php _e('Your comment is awaiting moderation.') ?></em>
	<br />
	<?php endif; ?>

	<div class="comment-meta commentmetadata">
	<a href="<?php echo htmlspecialchars(
	get_comment_link( $comment->comment_ID ) ) ?>">
	<?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a>
	<?php edit_comment_link(__('(Edit)'),'  ','') ?></div>

		<?php comment_text() ?>

		<div class="reply">
		<?php comment_reply_link(array_merge(
		$args, array('depth' => $depth, 'max_depth' => $args['max_depth'])
		)) ?>
		</div>
	</div>
<?php } ?>

Hinweis: Am Ende fehlt ein schliessendes </li>, dieses fügt WordPress automatisch ein, wenn es Child-Kommentare gibt!

Die Lösung

Ich habe mir ein eigenes author.php File zusammengeschustert. Um aber mehrere registrierte User anzeigen zu können, reichen die normalen Tags nicht mehr aus. Dafür wird die Variable $curauth (Current Author) benötigt.

Allerdings muss vor der Abfrage aller Daten zum Member dieser Codeschnipsel eingefügt werden:

<?php
if(isset($_GET['author_name'])) :
$curauth = $get_userdatabylogin($author_name);
else :
$curauth = $get_userdata(intval($author));
endif;
?>

Danach können die ersten Tags eingefügt werden.

<h2><?php echo $curauth->first_name . ' ' . $curauth->last_name; ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/authors/
<php echo $curauth->last_name; ?>.jpg" alt="<?php echo $curauth->nickname ?>"
class="author <?php echo $curauth->nickname ?> />

Raffiniert dabei: Man erstellt sich im Template Ordner unter /images einen weiteren Ordner den man "authors" nennt. Danach lädt man dort die Userbilder benannt nach dem Nachnamen des Users hoch, in meinem Fall würde das Bild "schwarz.jpg" heissen. Mit ein bisschen CSS lässt sich dann das Ergebnis getrost anschauen:

Claudio Schwarz

Für Newsletter aller Art gibt es ja viele bekannte Dienste, doch ich habe mich dazu entschlossen, ein WordPress Plugin dafür zu verwenden. Auch wenn MailPress nicht perfekt ist und ich es manchmal am liebsten zum Teufel jagen würde, erfüllt es seinen Zweck. Dabei sei erwähnt, dass MailPress vom Aufbau her wie ein Blog-im-Blog funktioniert, da es praktisch genau gleich aufgebaut ist wie WordPress. So ist es sehr mächtig und lässt sich auch durch weitere Plugins erweitern. Das ist natürlich super, aber auch ein wenig kompliziert.

MailPress Themes

Was ich aber nicht missen möchte, ist die einfache Möglichkeit, das Aussehen des Newsletters mit Themes zu verändern. Auch hier fällt wieder die Ordnerstruktur auf: Alle Themes müssen im Ordner wp-content/plugins/mailpress/mp-content/themes/ gespeichert werden - das "mp" steht dabei für MailPress. Standardmässig sind 5 Themes vorhanden, darunter auch eines, welches die im Header die Website von WordPress.org nachahmt, allerdings stimmt die Farbgebung nicht so ganz...

Jedes Theme braucht eine Datei style.css, wo der Name des Themes hinterlegt ist. Dazu noch ein Screenshot für die Anzeige im MailPress Dashboard und eine index.php, auch wenn sie leer sein sollte.

Weitere Theme-Dateien:

• header.php - Kopfzeile des Newsletters. Wird aufgerufen mit <?php $this->get_header() ?>
• footer.php - Einbinden kann man den Footer mit <?php $this->get_footer() ?>
• sidebar.php - Sogar eine Sidebar gibt es. Nur kann man keine Widgets verwenden! Funktion: <?php $this->get_sidebar() ?>
• functions.php - Wie bei einem WordPress Theme lassen sich bestimmte Funktionen in einer seperaten Datei ausführen.

Alles in allem eine gelungene Sache. Bis hier hin wird also kaum jemand, der im Newsletter das gleiche Design wie im Blog benutzen möchte, Mühe haben, dies zu realisieren.

Mail Templates

Interessant wird es aber erst, wenn wir die verschiedenen Mail Templates genauer unter die Lupe nehmen. Wenn du irgendwo E-Mail Dienst abonnierst, wirst du immer eine Bestätigungsnachricht erhalten. Auch wenn du dich wieder abmeldest, erhältst du wieder eine automatische Abschiedsmail. Und irgendwie muss dies auch MailPress so machen.

Bislang gibt es folgende Templates:

• new_subscriber.php - Wenn jemand den Newsletter gerade abonniert hat, bekommt er die Nachricht, die hier drin steht.
• confirmed.php - Nach der Bestätigung des Abonnements.
• single.php - Immer, wenn ein neuer Beitrag erscheint, wird diese Mail gesendet. Ist natürlich optional!
• daily/weekly/monthly.php - Für Mails, die alle Beiträge des Tages, der Woche oder des Monats auflisten.
• comments.php - Falls man die neuen Kommentare zu einem Beitrag per E-Mail abonniert hat.

Falls man in den Einstellungen "MailPress version of wp_mail" aktiviert hat, kann man ebenfalls diese Templates verwenden:

• moderate.php - Informiert den Autor über neue Kommentare und Trackbacks zu seinem Beitrag.
• new_user.php - Sagt dem Admin, wenn sich jemand im Blog registriert hat.

Wie man unschwer erkennen kann, würde MailPress dabei die Funktionen von WordPress ersetzen, damit auch alles in einem schönen Corporate Design dargestellt werden kann.

MailPress API

MailPress wäre nicht MailPress, hätte es nicht eine Schnittstelle, um Plugin-Entwicklern und Designern die Arbeit zu erleichtern. Objektorientiertes Programmieren ist dabei das Stichwort. Ob man die Werte von verschiedenen Einstellungen oder die Inhalte von Benutzerprofilen darstellen möchte, man findet immer einen Weg.

Ein eigenes MailPress Theme erstellen

Falls man in der Vergangenheit schon mal mit Newslettern zu tun hatte, weiss man, dass die gängigsten E-Mail Dienste in punkte HTML, CSS und Javascript rund 10 Jahre zurückliegen. Solltest du also dein WordPress Theme in ein MailPress Theme konvertieren, musst du alles vergessen, was du je über modernes Webdesign gehört hast.

Damit ein Newsletter in Outlook, GMail, GMX und auch sonst wo immer gleich aussieht, muss man sicherheitshalber auf Tabellen-Layouts zurückgreifen. Externe Stylesheets sind sowieso ein absolutes Tabu, höchstens Inline-Styles werden noch manchmal geduldet. Javascript geht auch rein sicherheitstechnisch nicht. Und bevor man jetzt noch stutzig wird: Ein MailPress Theme braucht zwar eine style.css, aber dort darf ausser dem Namen auch gar nichts drin stehen.

Der Plugin Autor und auch ich empfehlen euch folgende Quellen, damit eure Newsletter Designs auch garantiert gut aussehen:

• Email Standards Projekt
• CSSTidy
• How to Code HTML Email Newsletters
• How to Test HTML emails
• A Guide to CSS Support in Email - 2007 Edition

Grafik: bradt.ca

Typo3 ist schon doppelt so lange auf dem Markt wie WordPress und viele Programmierer schwören darauf, so wie ich das mit WordPress mache. Doch für den Datenaustausch zwischen den zwei Content Management Systemen wurde bisher wenig getan. Zwar gibt es gleich zwei Extensions um Artikel von WordPress in das mächtige Typo3 zu importieren, umgekehrt aber nicht - bis jetzt....

In der Theorie gibt es zwei Möglichkeiten der Umsetzung:

1. WordPress importiert die Beiträge aus einem RSS Feed
2. Der Import geschieht direkt über die Datenbank

Und diese zwei Wege werden wir uns jetzt genauer anschauen. Nur gehen müsst ihr den Weg selbst. ;-)

RSS Feed Import

Praktischerweise kann WordPress nicht nur exportierte Beiträge von anderen System wieder importieren, sondern kennt sich auch mit gewöhnlichen RSS Feeds aus. Und das können wir uns zu Nutze machen, indem wir im News-Modul von Typo3 XML einstellen und somit die Artikel nach und nach von A nach B verschieben können. Leider können mit dieser Methode aber keine Kategorien, Tags oder Kommentare importiert werden.

Die Importfunktion findet ihr bei WordPress 2.7 unter der Rubrik Werkzeuge resp. Tools.

Typo3 to WordPress Migration Plugin

Ebenfalls mit diesem Problem auseinandergesetzt hat sich im letzten November Brad Touesnard, der sich zum Schluss mit einem selbstgeschriebenen Plugin zurecht fand. Zwar muss gesagt werden, dass das Plugin für WordPress MU erstellt wurde, es nicht ausreichend getestet wurde und man von Hand noch etwas ergänzen muss. Denn der Code greift direkt auf die Datenbank von Typo3 zu, holt sich die News und schreibt sie in die WP-Datenbank.

Und mit News sind leider auch nur die News gemeint. Wie beim RSS Import können deshalb keine Kategorien oder Tags importiert werden. Trotzdem ist das Plugin ein interessanter Ansatz für alle, die sich dafür interessieren. Natürlich könnte man das auch eleganter lösen, z.B. mit einer Typo3 Extension, die automatisch eine valide WordPress eXtended RSS Datei erstellt.

FeedStats

Frank Bültges FeedStats Plugin ist meiner Meinung nach das beste auf dem Markt und ziemlich genau beim Zählen. Da man als Administrator nicht viel mehr tun muss, als das Plugin zu installieren und gegebenenfalls die Einstellungen anzupassen. Bei all meinen Blogs hat geht damit alles tadellos - nur eins habe ich bisher nie angewendet: Die Möglichkeit, die Anzahl Feedleser im Blog auszugeben. Zum Glück hat Frank schon von Anfang an daran gedacht und bietet gleich zwei Funktionen an, um die Anzahl der Feedleser zu ermitteln. Die erste sorgt in etwa für die folgende Auflistung, die man wunderbar in der Sidebar benutzen kann.

• Gesamt: 8928 (Letzten 31 Tage)
• Maximum: 489 (9. November 2008)
• Durchschnitt: 288

Dazu muss man jetzt bloss folgenden Code irgendwo im Template platzieren: <?php feedstats_getfeeds(); ?>

Etwas schlanker und für uns überhaupt erst relevant ist aber eine andere Funktion, mit der man bloss den Durchschnitt der Leser anzeigen lassen kann. Das wäre beim oben genannten Beispiel die Zahl 288. Für das braucht man nur die Funktion <?php feedstats_getfeeds_button(); ?>

Möchte man dies noch als schicken Button gestalten, findet man die passenden Informationen dazu in der Readme-Datei.

FeedBurner

Seit Google den kostenlosen Statistik-Dienst FeedBurner aufgekauft hat, geht es erst so richtig vorwärts. Zwar musste man zwischenzeitlich einmal die Feed URL umstellen und bei vielen wurden die Leser nicht korrekt gezählt, aber im Endefekkt eine tolle Sache. Für die Einbettung von FeedBurner in WordPress braucht man nur das offizielle FeedSmith Plugin, dank dem man bequem aus dem Admin-Bereich die neue Feed-Adresse eintragen kann. Fertig!

Sollte dann alles nach Plan laufen, kann man sich an die nächste Hürde und unser Ziel dieses Beitrags wagen. Wir wollen also die Anzahl Feedleser ausgeben. Das können zwar schon die kitischigen Buttons, aber diese sind etwas in die Jahre gekommen. Viel lieber holen wir uns die Daten selber!

Einfach Code kopieren und an der gewünschten Stelle (Sidebar, Header, etc.) einfügen. Bei Seiten, Artikeln und Widgets braucht man dafür das Exec-PHP Plugin.

<?php

    $feeds = array('Feed1', 'Feed2', 'Feed3');
    // Nur die ID, bei feeds2.feedburner.com/autolos ist dies also "autolos"

    $feedcount = 0; // Neue Variable
    foreach ($feeds as $feed) {
    $url="http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=$feed";
    $ch = curl_init(); // Initialzündung
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_URL, $url);
    $data = curl_exec($ch);
    curl_close($ch); // cURL hat sich die Daten geholt, also weiter!
    $xml = new SimpleXMLElement($data); // SimpleXML starten
    $feedcount += $xml->feed->entry['circulation']; // zählen
    }
    echo $feedcount; // Endlich fertig!
?>

Zur Erklärung und Hilfestellung:

• Benötigt werden PHP5 mit cURL und SimpleXML.
• Wer seine Daten nicht preisgeben möchte oder falls es nicht funktioniert: Im Adminbereich die Awareness API aus- resp. einschalten