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!

Wenn man zum Beispiel folgende URL im Adressfeld des Browsers eingibt, erhält man ein 500px breites Abbild von wp-magazin.ch:

http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwp-magazin.ch%2F?w=500

Screenshot Dienst Beispiel

Es gilt zu beachten, dass die Schrägstriche durch %2F und der Doppelpunkt durch %A maskiert werden, da diese nicht im ASCII-Zeichensatz vorkommen.

Damit der Dienst natürlich nicht zu sehr belastet wird, werden die Bilder gecached, was allerdings für die meisten von euch kein Problem sein sollte. Und wer wirklich auf aktuelle Bilder angewiesen ist, wird sich sowieso nach einer eigenen Lösung umschauen!

BM Shots Plugin

Für die einfachere Verwendung im eigenen WordPress Blog hat Ben ein kleines Plugin geschrieben, dank dem man die Screenshots via Shortcode oder auch wahlweise mit einer PHP-Funktion einbetten kann. Hier zwei Beispiele:

[browsershot url="http://google.ch/" width="500"]
<?php bm_mshot("http://google.ch/", 250); ?>

Das BM Shots Plugin kann man direkt bei Binary Moon herunterladen - kostenlos, versteht sich.

Foto von Matt Mullenweg

Gut zwei Wochen ist es her, seit WordPress.com verlauten liess, dass die rund 7.5 Millionen Blogs nun RSS Cloud unterstützen. Im Artikel RSS in the Clouds schildert Matt Mullenweg, CEO der Firma Automattic und WordPress-Urvater, was diese Änderung genau bedeutet. Normalerweise ruft nämlich der Feed Reader (z.B. Google Reader) den Feed auf und sucht nach neuem Inhalt.
Dank Push-Benachrichtigung sagt der Feed jetzt dem Reader: "Hey, ich wurde aktualisiert!"  Wer dieses Feature auch beim eigenen Blog hinzufügen möchte, kann das RSS Cloud Plugin von Joseph Scott herunterladen. In seinem Blog hat er übrigens noch genau dokumentiert, wie der Feed denn überhaupt bei aktivem Plugin verändert wird.

Wenn nun über sieben Millionen Blogs weltweit diese Technik unterstützen, ist das natürlich ein grosser Schub für die Push-Technik. iPhone-User werden diese Benachrichtigungen bereits kennen, denn Applikationen auf dem Telefon können dem Benutzer bereits solche Meldungen anzeigen. Ein gutes Beispiel ist zum Beispiel die App des Tagesanzeigers! In Zukunft soll WordPress auch noch weitere Push-Standards wie etwa das unaussprechliche PubSubHubBub unterstützen. Christian Leu hat darüber bereits einen interessanten Beitrag veröffentlicht.

<ul>
<?php

$szSort = "user_nicename"; // Wie die User sortiert werden sollen,  z.B. nach der ID

$aUsersID = $wpdb->get_col( $wpdb->prepare(
"SELECT $wpdb->users.ID FROM $wpdb->users ORDER BY %s ASC"
, $szSort ));

foreach ( $aUsersID as $iUserID ) :

$user = get_userdata( $iUserID );

echo '<li>' . $user->first_name . ' ' . $user->last_name . '</li>';

endforeach;
?>
</ul>

Jetzt wird eine Liste mit Vorname ($user->first_name) un Nachname ($user->last_name) angezeigt. Die Angaben wie first_name und last_name sind gleichzeitig die Namen der Spalten in der Datenbank. In der Funktionsreferenz für get_userdata findet man eine Liste aller Eingabemöglichkeiten. Es lässt sich unter anderem auch anzeigen, welches Admin-Farbschema dieser Benutzer aktiviert hat.

Im Prinzip könnte man diese Funktion bereits überall einbauen, wo man möchte. Doch für mich reicht das noch nicht, denn ich möchte die Gravatare aller Benutzer ausser den Abonnenten anzeigen. Dazu sind nur ein paar wenige Anpassungen im Code nötig.

<ul>
<?php

$szSort = "user_nicename";

$aUsersID = $wpdb->get_col( $wpdb->prepare(
"SELECT $wpdb->users.ID FROM $wpdb->users ORDER BY %s ASC"
, $szSort ));

foreach ( $aUsersID as $iUserID ) :

$user = get_userdata( $iUserID );

if($user->wp_user_level >= 1) {
echo '<li><a href="/author/' . strtolower( $user->user_login ) . '/">
<img src="http://www.gravatar.com/avatar/' . md5( $user->user_email ) .
'?s=50&amp;d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca
435acc9bb6523536%3Fs%3D40&amp;r=G"></img></a></li>';
}

endforeach;
?>
</ul>

Die Gravatare

Was ist neu? Nun, zuerst habe ich einmal den Namen durch den Gravatar ersetzt, wobei die E-Mail Adresse durch MD5 verschlüsselt werden muss. Danach habe ich das Bild noch mit der Autorenseite verlinkt, wo alle Artikel dieses Autors aufgelistet werden (Beispiel: http://beispiel.de/author/admin/).

Das wäre eigentlich schon alles. Mit ein bisschen CSS kann man die Bilder auch noch aufpeppen, was dann in meinem Fall so herausgekommen ist, wie ihr es auf dem Bild seht :-)

Export Emails

Nicht nur beim Verkauf eines Blogs könnte das Plugin Export Emails sehr hilfreich sein, auch beim Einrichten eines Newsletter dürfte die Funktion ganz nützlich sein. Wie der Name nämlich verrät, kann man damit die E-Mail Adressen aller Besucher anzeigen lassen und bequem per Copy&Paste in das Programm seiner Wahl (z.B. MailChimp) einfügen.

Das umfangreiche MailPress-Plugin hat übrigens bereits eine Einstellung, bei der man an alle Kommentatoren eine kleine Nachricht schreiben kann.

Seit dem letzten Update auf Version 1.1 kann sich auch das Design von Export Emails sehen lassen. Es ist jetzt im WordPress 2.7 gehalten und über den Menüpunkt Werkezuge und dann Export Mails erreichbar.

Untertitel

Zeitungen setzen neben der eigentlichen Überschrift oft noch einen Untertitel, was sich auch problemlos ins Netz übertragen lässt. Hier zwei Beispiele, oben eine Schweizer Online-Zeitung, unten ein professioneller Medienblog. Ihr seht: Solche Untertitel informieren nicht nur, sie unterhalten auch.

Nun ist meine Frage: Wie lassen sich Untertitel in WordPress realisieren?

Lösungsansätze gibt es wahrscheinlich haufenweise. Die einfachste Möglichkeit ist zum Beispiel, einfach den Titel des Beitrags etwas umzugestalten. Schreibt man nämlich im Editor <small>Web 2.0:</small><br />Weblogs werden immer populärerer, hat man schon einen simplen Untertitel gestaltet. Gratuliere! Beim Permalink werden HTML-Tags übrigens entfernt, nur im Adminbereich sieht man, was die Autoren wieder angestellt haben.

1. Gewinnspiele

   Verlose etwas: Werbeplätze, T-Shirts, Bücher, etc. Wenn die Besucher dafür einen Kommentar schreiben müssen, tun sie es auch. Erwarte aber nicht, dass es nachher so weitergehen wird, schliesslich sind das keine Stammbesucher. Aber vielleicht hilft es dem Ego ;-)

2. DoFollow

   Du machst nicht nur den Lesern, sondern auch dir selber einen Gefallen, wenn du rel="nofollow" von allen Links entfernst. So kann man mit einem Kommentar auch auf seinen Blog aufmerksam machen und der Link ist auch wirklich sinnvoll, da er von Google erkannt wird. NoFollow ist nämlich schon lange out bzw. war noch nie in!

3. Fragen schadet nichtWarum fragt ihr nicht einfach eure Besucher, wie sie euren Blog finden und ob sie nicht einen Kommentar hinterlassen wollen? Klug kombiniert geht das mit dem Starten einer Diskussion. Ihr könnt zum Beispiel über den Airbus 380 schreiben und fragen, was die Leser davon halten. Funktioniert übrigens auch wunderbar mit Twitter!
   
4. Kommentar-WidgetsWenn ihr die letzten Kommentare oder vielleicht auch die Top-Kommentierer in der Sidebar erwähnt, ist dies sicher ein Anreiz dafür, dass andere auf diese aufmerksam werden. Probiert auch ruhig das Usercloud24 Plugin aus - es wirkt Wunder!
   
5. Kommunizieren, diskutieren, profitieren!Wenn ein Leser kommentiert, sag einfach "Danke" und geh auf seine Kritik ein. Bloss keine unerwünschten Kommentare löschen, sondern immer das Gespräch suchen. Das weiss man als Leser immer zu schätzen!

In diesem Beitrag werde ich einige unnötige Template Tags vorstellen, die man mit beinahe hundertprozentiger Sicherheit durch statische Angaben ersetzen kann, was eine Performancesteigerung des Blogs bedeutet. Und wer will nicht ein schnelles Weblog?

10+ unnötige Template Tags

In der header.php findet man meistens folgende Übeltäter:

1. <?php language_attributes(); ?> - Im HTML-Doctype gibt diese Funktion an, welche Sprache benutzt wird. Und weil dies ja sicher immer die selbe ist, könnt ihr diesen Template Tag einfach durch dir="ltr" lang="de-DE" ersetzen.
2. <?php bloginfo('html_type'); ?> - Da die Ausgabe immer HTML bleibt, könnt ihr hier auch text/html schreiben.
3. <?php bloginfo('charset'); ?> - Die Codierung sollte man eigentlich nie ändern. Standard ist UTF-8.
4. <?php bloginfo('stylesheet_url'); ?> - Euer Stylesheet wird sich immer am selben Ort befinden. Schreibt also einfach http://blog.de/wp-content/meintheme/style.css hinein.
5. <?php bloginfo('stylesheet_directory'); ?> - Manchmal wird auch auf andere Dateien aus eurem Theme (Bilder, weitere Stylesheets, usw.) verwiesen. Kann man einfach mit der entsprechenden URL ersetzen. <?php bloginfo('template_url'); ?> hat übrigens die gleiche Funktion!
6. <?php bloginfo('rss2_url'); ?> - Der RSS Feed bleibt immer gleich, deshalb könnt ihr diese unnötige Abfrage gleich durch die Adresse ersetzen. Genau so auch <?php bloginfo('rss_url'); ?>, <?php bloginfo('comments_rss2_url'); ?> und <?php bloginfo('atom_url'); ?>

Folgende unnötigen Template Tags sind eher allgemein und können in verschiedenen Template-Dateien vorkommen:

1. <?php echo get_option('home'); ?> und - Falls ihr eure Domain nicht wechselt, bleibt die Adresse zu eurem Blog gleich. Ausgegeben wird hier die Adresse à la http://blog.de/
2. <?php bloginfo('name'); ?> - Den Namen eures Blogs könnt ihr durchaus selber schreiben und müsst dazu nicht unbedingt ein Template Tag nutzen.
3. <?php bloginfo('description'); ?> - Bei der Beschreibung genau das Gleiche!
4. <?php echo get_num_queries(); ?> Queries. <?php timer_stop(1); ?> Sekunden. - Die Anzahl der Datenbankabfragen und die Ladezeit braucht man eigentlich nicht zwingend auszugeben.
5. Besonders mutige können an dieser Stelle auch die automatische Auflistung von Seiten oder sogar Kategorien durch statischen Code ersetzen. Aber damit kann man ein Theme sehr schnell zerschiessen. Auf jeden Fall müsste man nur den generierten Quellcode anstelle der Template Tags einfügen...