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

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

Gravierende Sicherheitslücke erlaubt Ausführung von Schadcode

In eben diesem TimThumb Script exisitiert nun eine Sicherheitslücke, mit der man beliebige PHP Dateien in dessen Cache-Verzeichnis einschleusen und ausführen kann. Das bedeutet praktisch ungehinderten Zugriff auf alle WordPress-Dateien, die Datenbank, FTP und sogar die Kommandozeile!

Alucar Shell

TimThumb führt nur eine mässige Kontrolle der erlaubten Bild-URLs durch, weshalb das Script eine leichte Beute für Hacker darstellt. Das musste auch Mark Maunder feststellen, als plötzlich Werbung in seinem Blog auftauchte. Beim Nachforschen stiess er auf weitere Ungereimtheiten. So hat der Hacker eine Alucar Shell hochgeladen, um den Server per Mausklick zu durchforsten.

So behebt man die Lücke

Mark hat in seinem Blog eine Anleitung gepostet, wie man die Lücke vorerst schliessen kann. Am besten ist es, TimThumb iunklusive des Cache-Verzeichnisses komplett zu löschen. Wer dies nicht will, sollte etwa auf Zeile 27 des Scripts das Array $allowedSites aufspüren und ersetzen mit $allowedSites = array();.

Desweiteren sollte man nach base64_decode(...) Ausschau halten, am besten via SSH mit dem grep-Kommando. Laut Mark gibt es auch verdächtige .txt-Dateien im /tmp/-Verzeichnis des Servers.

Aller Anfang ist klein

Klar, Core Contributors wie Dominik oder Autoren zig bekannter Plugins wie Frank kann ich kaum das Wasser reichen. Doch meiner Meinung nach kann man schon mit kleinen Beiträgen etwas zu Open Source Software beitragen. Abgesehen von diesem Blog, wo ich ja immerhin viele Tipps & Tricks für Beginner, Fortgeschrittene und machmal auch Profis verfasse, bin ich beispielsweise laufend an einigen Projekten dran. Etwa ein Plugin, dass ich veröffentlichen möchte, oder auch ein Theme.
Ich bin dann jeweils ein wenig baff, wenn Ellen und Manuel ein Theme nach dem anderen veröffentlichen. «Woher bloss die Zeit nehmen?», frage ich mich. Bereits jetzt bin jetzt schon täglich mehrere Stunden vor dem Computer, um dann abends nochmals die kostbare Freizeit in diesen Blog und das PDF Magazin zu investieren. Eigentlich ist es aber gar nicht so schwer, etwas an die Community zurückzugeben. Es gibt, wie bereits erwähnt, mehrere Wege dazu.

Plugins sind vielleicht nicht jedermanns Sache, Tutorials vielleicht schon eher. Wer jedoch etwas direkter seinen Beitrag leisten möchte, kann im WordPress Trac aktiv werden oder sich für den Beginn einer etwas einfachere Aufgabe annehmen. Ein Tweet der WordPress für Windows Phone 7 Entwickler brachte mich diese Woche dann auf eine Idee:

We're looking for a few more strings in the app to be translated to German, can you help out? http://cot.ag/pYLv4L

27. July 2011 09:58 via CoTweetReplyRetweetFavorite

@WPWindowsPhone

for Windows Phone 7

Warum nicht dabei helfen, eine solche App ins Deutsche zu übersetzen? WordPress selbst wird ja bereits von einem tollen Team übersetzt. Doch bei den Apps und anderen Projekten sind es eine lose Zahl an Freiwilligen. Vieles war bei der App bereits übersetzt, ich habe also nur noch den Feinschliff gemacht dank GlotPress alles kein Problem. Nun ist die App komplett übersetzt und wird wohl demnächst so zum Download angeboten. Was ich dafür erhalten habe? Ein nettes Dankeschön.

@swissspidy thanks for translating the WP7 app, could you make sure this one is correct please? http://t.co/cdl3IVZ

27. July 2011 15:58 via webReplyRetweetFavorite

@danroundhill

Dan Roundhill

Doch damit zeigte ich mich noch nicht zufrieden. Unter translate.wordpress.org habe ich deshalb versucht, weitere Übersetzungen für die WordPress Mobile Apps zu liefern. Und wenn man schon dabei ist, warum nicht auch rasch beim neuen bbPress Plugin vorbeischauen? Da gibt es noch genügend Nachholbedarf.

Diese Übersetzungen kosten wenig Zeit und doch helfen sie der Community. WordPress kann so in vielen weiteren Sprachen und somit einer weitaus grösseren Anzahl Menschen angeboten werden. Warum gibst du also nicht auch etwas an die Community zurück?

Weitere Details zur neuen Version gibt es spätestens im kommenden WordPress Magazin. Dran bleiben ;)

Three point oh point five
Enhances security
Three point one comes soon

Die Security-Fehler erlaubten es Benutzern mit der Rolle Autor und Editor, erweiterten Zugriff zum Blog zu erhalten und beispielsweise Beiträge anzusehen, die sie eigentlich nicht dürften. Zudem gab es weitere Vorsichtsmassnahmen bei der Schadcode-Filterung von Kommentaren.

WordPress 3.1 RC4 stopft nicht nur die Sicherheitslöcher, sondern enthält auch einige Bug Fixes und sollte nun wieder vollständig PHP4-kompatibel sein. In WordPress 3.2 wird dann die Mindestvoraussetzung PHP5 sein. Der endgültige Release von WordPress 3.1 steht nun kurz bevor.

Logo des GNU-Projekts

WordPress war schon immer unter GNU GPL lizenziert. Und obwohl nie eine Version (es gibt deren drei) genannt wurde, legte man Version 2 der beliebten Open Source Lizenz dem Download bei. Die GPL sagt dabei aus, dass wenn keine genaue Versionsnummer angegeben wurde, die Software unter den Bedingungen einer beliebigen Version der GPL verbreitet werden können.

Allerdings enthält WordPress Bibliotheken, welche unter der GPL 2 oder höher lizenziert sind. In Wirklichkeit wurde Version 1 noch nie gross verwendet, da sie früher schon bald abgelöst wurde. Deshalb haben die WordPress-Entwickler nun ausdrücklich gesagt, dass WordPress unter der GPL 2 oder höher lizenziert ist.

Wir haben erneut eine Menge exklusiver Artikel für euch geschrieben und warten unter anderem mit Gastbeiträgen von Ralph Hutter (Namics) und Simon Künzler (Xeit) auf. Insgesamt wurde diese Ausgabe nicht nur um einige Seiten grösser, wir haben auch in den Farbeimer gegriffen und das Magazin komplett neu angemalt - für ein noch besseres Lese-Erlebenis!

Auch wenn wir es natürlich bedauern, dass wir das Magazin erst im November und nicht wie vorgesehen im Oktober veröffentlichen, hoffen wir, dass euch das Magazin gut gefällt.
Das Magazin könnt ihr entweder in diesem Beitrag  lesen oder auf unserer Magazin-Seite direkt herunterladen. Dadurch könnt ihr es nicht nur auf dem Computer, sondern auch auf dem iPhone oder etwa dem iPad lesen.

Falls euch diese Ausgabe gefällt, würden wir uns freuen, wenn ihr das WordPress Magazin weiterempfiehlt. Egal ob es ein Tweet, ein Blog-Kommentar oder ein „Gefällt mir“ auf Facebook ist — es hilft uns, das WordPress Magazin noch bekannter zu machen.

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!

Im Folgenden möchten wir euch BackPress kurz vorstellen und die Bibliothek ein wenig unter die Lupe nehmen.

Was kann BackPress?

BackPress

Zwar ist BackPress kein «WordPress Lite», aber wer die Bibliothek genauer anschaut, erkennt Gemeinsamkeiten in der Code-Schreibweise oder der Namensgebung diverser Funktionen. Diese trifft man, wie bereits in der Einleitung erwähnt, auch in bbPress (und GlotPress) an. Dadurch soll es z.B. auch einfacher sein, ein bbPress Plugin auf WordPress zu portieren.

BackPress besitzt ein umfassendes Benutzermanagement mit verschiedenen Benutzerrollen, bietet eine XML-RPC sowie eine Plugin-Schnittstelle und viele weitere Features.

Bei der Bibliothek hapert es leider ein wenig an der Dokumentation, weshalb es bestimmt nichts für Einsteiger ist, sondern eher für Entwickler, die eigene und vor allem grössere Web-Projekte umsetzen möchten. Die wichtigsten Informationen findet man bei BackPress.org und der BackPress Mailing List.