T3-Blogart » Tutorial

Post-Thumbnail Spielereien: Bilder-Zoom mit jQuery Tooltip

Thomas — Tue, 23 Aug 2011 19:05:34 +0000

Using jQuery Tooltip as Image-Zoom

Vor kurzem habe ich unseren Familienblog mit einem neuen Theme ausgestattet, in dem ich auch die “Post_Thumbnail”-Funktion nutze – für mich eine der besten Funktion der jüngeren WordPress-Entwicklung. Allerdings gab das Theme nur eine begrenzte Größe der Vorschaubilder her, so dass ich eine Möglichkeit suchte, die Vorschaubilder bei dem Überfahren mit der Maus zu vergrößern…

Da ich jQuery schon für andere Effekte in diesem Theme nutzte, entschied ich mich für den jQuery Tooltip. Ein äußerst schlankes jQuery-Plugin mit einem schönen Effekt.
Um anstelle des klassichen Tooltips mit dem Title-Tag einen Zoom-Effekt für Vorschaubilder zu ereichen, muss man nur eine kleine Änderung im Loop vornehmen… Und so geht´s.

1. jQuery-Tooltip im Theme installieren und verfügbar machen

Zum Einbinden des Tooltip-Scripts stehen zwei Varianten zur Verfügung. Entweder, ihr installiert das Script in eurem Theme-Ordner, oder ihr bindet es direkt von der Projekt-Seite in euer Theme ein. Egal welche Methode ihr bevorzugt, der Aufruf ist nahezu identisch.

Öffnet die functions.php eures Themes und tragt dort folgende Funktion ein;

1
2
3
4
5
6
7
8
9

// load jQuery-Tooltip
function my_tooltip(){
if (!is_admin()) {
wp_register_script( 'tooltip', get_bloginfo('template_directory').'/js/jquery.tools.min.js', false, '', true);
wp_enqueue_script('jquery');
wp_enqueue_script('tooltip');
}
}
add_action('init', 'my_tooltip');

In dieser Funktion laden wir das Tooltip-Script aus unserem Theme Ordner direkt in den Footer unseres Themes. In meinem Beispiel gibt es einen Unterordner /js in dem sich das Script befindet. Herunterladen könnt ihr es euch auf der Projekt-Seite.

Die zweite Möglichkeit ist das Laden des Scripts direkt von der Projekt-Seite. Hierfür ersetzt ihr einfach die Zeile

wp_register_script( 'tooltip', get_bloginfo('template_directory').'/js/jquery.tools.min.js', false, '', true);

mit

wp_register_script( 'tooltip', 'http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js', false, '', true);

Damit haben wir das Tooltip-Script unserem Theme zur Verfügung gestellt.
Weiter geht es mit dem Javascript-Code zum Aufruf des Tooltips. Dafür öffnet ihr nun die footer.php eures Themes und tragt folgende Zeilen hinzu:

1
2
3
4
5
6
7
8
9
10
11
12
13

Damit lösen wir den Tooltip mit einem Fade-Effekt beim Überfahren aller Elemente mit der Klasse “Zoomer” aus (dazu später mehr). Das Attribut “relative” ist nicht zwingend erforderlich für die Funktion des Scripts, aber es wird bei Dartellungsproblemen des Effekts benötigt. Hier gilt es zu auszuprobieren…

Wichtig: Diese Zeilen müssen nach dem wp_footer(); – Tag notiert werden, da dort der Aufruf des Tooltip-Scripts erfolgt (wie oben beschrieben), und das muss vor dem eigentlichen Javascript geschehen!

Kommen wir nun zum “Füllen” des Tooltips für unseren Zoom-Effekt.

2. the_post_thumbnail anpassen und mit dem Tooltip verknüpfen

Zuerst sollten wir noch wissen, dass der jQuery-Tooltip auch jegliche Art von Inhalt darstellt, und nicht nur den klassischen “Title-Tag” eines Elements. Ein gutes Beispiel hierfür liefert uns die Dokumentation des Scripts. Nur wollen wir anstelle der dort beschriebenen Tabelle unser vergrößertes Bild wiedergeben.
Ein Blick auf den Demo-Code lohnt sich aber auf jeden Fall, da hier sehr einfach die Funktionsweise beschrieben wird.

Jetzt benötigen wir die Vorschaubilder (Post-Thumbnails). Wenn wir beispielsweise den Effekt auf der Startseite nutzen möchten, öffnen wir die index.php unseres Themes und suchen nach dem Aufruf der Vorschaubilder innerhalb unseres Loops und ersetzen diesen mit folgendem Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
...

if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
$thumb = preg_replace('|title="[^"]*"|U', '', get_the_post_thumbnail($post->ID, 'thumbnail'));

echo '

';
echo $thumb;
echo '

';

} ?>
...
the_content(); ?>
...

Was tut dieser Code? Im Grunde folgendes… Zuerst prüfe, ob es überhaupt ein Vorschaubild gibt. Wenn ja, dann lade es und entferne den Titel-Tag des Bildes. Dieser Schritt ist nicht zwingend erforderlich, aber er verhindert ein Fehlverhalten des Tooltips.

In der Box mit der Klasse “tooltip” laden wir nun das selbe Vorschaubild noch einmal in der “Medium-Größe”. Da das kleine Vorschaubild im DIV mit der Klasse “zoomer” (wie oben beschrieben) geladen wird, zeigt uns der Mouseover jetzt den div “tooltip” mit dem größeren Bild.

Natürlich kann man mit den Dimensionen der Bilder viel experemtieren. Hierfür gibt uns die WordPress-Doku genug Spielraum, oder ihr schaut mal auf diesen Artikel… Hier habe ich mal die “add_image_size” – Funktion beschrieben.

Zu guter Letzt noch die notwendigen CSS – Anweisungen.
Damit wir nur die vergrößerten Bilder beim Mouseover zeigen, müssen wir der CSS-Klasse .tooltip display: none; zuweisen. Die Standard-CSS sieht so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.tooltip {
display:none;
height:auto;
width:auto;
padding:40px 30px 10px 30px;
}
/* mouseover state */
.zoomer:hover {
background-position: 0px -80px ;
}

/* clicked state */
.zoomer:focus {
background-position: 10px -80px;
}

Natürlich sind der Gestaltung hier keine Grenzen gesetzt.

Und das war´s im Grunde auch schon. Das Script ist fertig und sollte euch einen schönen Zoom-Effekt für Vorschaubilder liefern.

Ein Live-Demo könnt ihr euch hier auf meinem Familienblog ansehen. Ich nutze den Tooltip auf der Startseite und den Archiven und habe es noch mit dem Beitrags-Titel und den Link zum Artikel ergänzt. Auch hier sind eurer Kreativität kaum Grenzen gesetzt.

Viel Spaß beim “Zoomen”

Integration: bbPress 1.0.3 mit WordPress 3.1.1 verbinden

Thomas — Tue, 19 Apr 2011 19:06:28 +0000

bbPress… Die Foren-Software aus dem Hause Automattic – also den “Machern” von WordPress – ist hierzulande leider nicht so verbreitet. Auch die Community hängt weit hinter der von WordPress hinterher. Schade, wie ich finde, denn bbPress ist eine einfache, schnelle und schlanke Foren-Software, die ohne viel Schnick Schnack auf den Punkt kommt – die Diskussion steht hier im Fokus.

Da bbPress und WordPress aus einem “Hause” stammen, kann man beides hervorragend miteinder kombinieren und gemeinsam nutzen. So die Theorie, doch wie so oft steckt der Teufel im Detail. Beides in Einklang zu bekommen ist nicht schwer, wenn man einige grundlegende Punkte beachtet. Welche das sind, möchte ich kurz zusammen tragen…

1. Download bbPress

Die aktuellste stabile Version von bbPress (derzeit 1.0.3) gibt es auf der offiziellen bbPress Seite zum Download.
Einfach herunterladen, entpacken und via FTP in einen separaten Ordner auf den Webserver übertragen. Ich habe mich für dieses Tutorial für eine lokale Installation unter XAMPP im Ordner “bbPress” entschieden (wie auf den Screenshots zu sehen sein wird).

2. Installation von bbPress

Nach dem Hochladen kann es auch gleich mit der Installation weiter gehen. Ähnlich wie bei WordPress ruft man die install.php über den Browser auf. In meinem Beispiel: http://localhost/bbPress/bb-admin/install.php

Und hier erwartet einen schon die erste Überraschung: Fehlermeldungen wohin das Auge blickt. Grund für die Fehler ist das s.g. Fehlerreporting unter PHP 5.3. Aber kein Grund zur Sorge, mit einer einfachen Änderung in der bb-load.php kann man dies umgehen. Zudem entstehen keine Nachteile beim weiteren Umgang mit bbPress.

Zum Ändern einfach die bb-load.php (im Root-Verzeichnis der bbPress-Installation) öffnen und folgende Zeile ergänzen:

1	error_reporting( E_ALL ^ E_NOTICE );

ersetzen mit

1	error_reporting( E_ALL ^ E_DEPRECATED ^ E_NOTICE);

…speichern und zurück auf den Webserver laden.

Auch nachzulesen unter: http://bbpress.org/forums/topic/tons-of-depreciated-errors#post-70000

Ein erneuter Blick auf den Installationsbildschirm zeigt, dass wir nun eine “saubere” Seite haben.

Weiter geht´s auf der nächsten Seite mit der Einrichtung der Datenbank und der Integration mit WordPress…

the_excerpt – Wenige Worte mit großer Wirkung

Thomas — Mon, 06 Sep 2010 18:23:19 +0000

Es ist kein neues Thema – keine neue Funktion, aber sie verdient trotzdem etwas mehr Aufmerksamkeit.
Vor einiger Zeit habe ich ein Design mit WordPress umgesetzt, das mir relativ wenig Spielraum für Texte ließ. WordPress bietet von Hause aus die Funktion the_excerpt, die einen Textauszug der Beiträge wiedergibt. Somit war es eine gute Gelegenheit sich etwas genauer mit dieser Funktion zu beschäftigen.
Zugegeben, ich war erstaunt zu sehen, welche Möglichkeiten sich mit diesem “Textauszug” ergeben, und wie flexibel man diesen nutzen kann.

Was ist eigentlich the_excerpt?
Mit the_excerpt gibt WordPress eine Art Anlesetext – oder Auszug – eines Artikels wieder. Hierfür gibt es bei der Erstellung eines Artikels die Möglichkeit, einen optionalen “Auszug” zu erstellen. Tut man dies nicht und lässt das Feld leer, erstellt WordPress automatisch einen Auszug des Artikels – den so genannten Auto-Excerpt.

Wie man den Anlesetext nach persönlichen Bedürfnissen anpassen und sinnvoll nutzen kann, möchte ich mit diesem Beitrag kurz erläutern. Schließlichh bietet er mehr Möglichkeiten, als nur in den Archiven zu verstauben…

1. Textlänge von the_excerpt anpassen

the_excerpt wird von WordPress standardmäßig auf 55 Wörter beschränkt. Wem dies zu viel oder zu wenig ist, der kann mit einer einfachen Funktion die Länge problemlos anpassen. Dafür einfach folgende Zeilen in die functions.php Eures Themes einfügen:

1
2
3
4

function new_excerpt_length($length) {
return 20;
}
add_filter('excerpt_length', 'new_excerpt_length');

Der Wert 20 gibt nun die “neue” Länge von the_excerpt an.

2. Die [...] entfernen / ersetzen

Greift WordPress auf den automatischen Auszug zurück, wird am Ende die berühmte eckige Klammer mit den 3 Punkten [...] als Hinweis für mehr Inhalt gesetzt. Wer nun 5 Punkte haben möchte, oder eben gar nichts, der kann auch hier mit einer kleinen Funktion für Abhilfe sorgen. Wiederum in der functions.php Eures Themes ergänzt Ihr folgende Zeilen:

1
2
3
4

function new_excerpt_more($excerpt) {
return str_replace('[...]', ' => ', $excerpt);
}
add_filter('wp_trim_excerpt', 'new_excerpt_more');

Zur veranschaulichung habe ich die regulären [...] mit dem => ersetzt. Was Ihr hier hinein schreibt, ist natürlich Euch selbst überlassen.

3. Die [...] mit dem Artikel verlinken

Mit dieser Option kann man den “weiter lesen” Link zum Artikel erstellen, der so eigentlich nur verfügbar ist, wenn the_content genutzt wird. Eine tolle Möglichkeit, wenn man nicht zwingend die Titel / Überschriften verlinken möchte. Und so geht´s. Auch hier wieder den Code in die functions.php einfügen:

1
2
3
4
5

function new_excerpt_more($more) {
global $post;
return '. get_permalink($post->ID) . '">' . ' [...] ' . '';
}
add_filter('excerpt_more', 'new_excerpt_more');

Wie im Beispiel 2 beschrieben, kann man natürlich die [...] mit eigenem Text wie weiter lesen… ersetzen.

Mit diesen 3 Basics kann man das Aussehen des Auszugs schon prima anpassen. Aber das ist noch nicht alles.

the_excerpt hat einen großen Vorteil gegenüber the_content : Der Text ist unformatiert. Alle HTML-Tags werden von WordPress entfernt, was ihn sehr universell einsetzbar macht. Ein Beispiel: Ich habe in einem Theme das verstaubte META-Tag “description” benutzt, und lasse diesen mit dem Excerpt füllen. Eine simple Funktion, die so aussieht:

1
2
3
4
5
6
7
8
9
10
11

//Beitragsauszug als META-Beschreibung
function meta_description () {
$HeadExcerpt = get_the_excerpt();

if (!empty($HeadExcerpt)) {
$auszug = htmlspecialchars($HeadExcerpt, ENT_QUOTES);
echo ('');
}

}
add_action ('wp_head', 'meta_description');

Zur Veranschaulichung; Diese Funktion prüft, ob der Auszug gefüllt ist. Wenn ja, nimmt sie den Inhalt und schreibt ihn das META-Tag. Um sicherzustellen, das ” (Anführungszeichen) entfert werden (diese würden das Tag vorzeitig schließen) ersetzt die Funktion mit htmlspecialchars unerwartete Sonderzeichen.
Nachteil: Ist das optionale Auszugsfeld nicht gefüllt – der Excerpt also leer – dann wird auch kein Tag in den Kopf der Seite geschrieben.

All diese Beispiele sind getestet und funktionieren.
In Verbindung mit Vorschaubildern (Thumbnails) bietet the_excerpt viele Möglichkeiten der Gestaltung, auch wenn natürlich nicht der volle Umfang von the_content gegeben ist. Die Frage “Excerpt vs. Content” muss sich also jeder selbst stellen.

Nachweise:
Die hier gezeigten Beispiele (1-3) basieren auf dem WordPress Codex the_excerpt.

Viel Spaß beim “Ausprobieren”. Bei Fragen… Fragt!

Quicky: Eigenes Facebook-Konto richtig verlinken

Thomas — Tue, 11 May 2010 18:31:33 +0000

Mit der Version 1.4 meines Altop-Themes kam eine neue Funktion hinzu – Der direkte Link zum eigenen Facebook-Konto. Der Link ist hier schon komplett eingerichtet, und muss nur durch die eigene ID ergänzt werden. Das eigene Konto zu verlinken ist im Grunde denkbar einfach und bedarf keinem Plugin. Wie das in wenigen Schritten funktioniert, möchte ich kurz erläutern.

1. Um das Konto direkt anzusprechen, wird die eigene Account-ID benötigt. Diese findet Ihr, wenn Ihr euch bei Facebook einloggt, und auf Eurer “Profilseite” seid.

Mit dieser ID habt Ihr schon den wichtigsten Schritt für die Kontenverwaltung geschaffen.

2. Der “richtige” Link zum Konto
Der Standard-Link sieht bei Facebook so aus;
http://www.facebook.com/profile.php?id=100000999999999&ref=profile
Um einen “schöneren” Link zu Eurem Konto zu erstellen, brauchen wir nur die richtige URL. Und diese sieht wie folgt aus;

http://www.facebook.com/people/@/100000999999999

Die Zahl am Ende wird jetzt einfach nur durch Eure ID ersetzt. Das @ wird beim Seitenaufruf durch Euren Facebook-Namen ersetzt. Fertig.

Wenn Ihr die Funktion im Altop-Theme benutzen möchtet, tragt Ihr bitte nur die ID in das entsprechende Feld in das Facebook-Feld ein.

Tutorial: Ein WordPress-Theme mit PoEdit lokalisieren

Thomas — Tue, 20 Apr 2010 20:49:21 +0000

Ein WordPress-Theme lokalisieren – was bedeutet das eigentlich? Im Grunde nichts anderes, als das man seinen Blog in verschiedenen Sprachen anbietet. Das bedeutet nicht, dass die Inhalte mehrsprachig zur Verfügung gestellt werden, sondern die “statischen” Texte, auf die man sonst keinen Einfluss hat.
Ein Beispiel; In vielen Themen ist die Zeile zu finden: “posted by Admin”. Daraus wollen wir gerne “geschrieben von Admin” machen… Wie das geht ohne die Texte “starr” im Theme zu ändern, möchte ich in diesem Tutorial erklären.

Warum ein Theme lokalisieren und nicht “starr” übersetzen?

Die Vorteile eines lokalisiertem Themes liegen in der Flexibilität, die diese Option mit sich bringt. Mein aktuelles Theme habe ich beispielsweise zur Übersetzung vorbereitet, und wurde kurz nach Veröffentlichung in französisch übersetzt. Somit wurde es für den französisch sprechenden Teil dieser Welt etwas interessanter.
Auch wenn dies natürlich mit etwas Aufwand verbunden ist, hätte sich wahrscheinlich niemand die Arbeit gemacht, die Texte im Quellcode des Themes zu übersetzen.

Vorbereitung

Nach welchen Kriterien wird ein Text übersetzt?
Um dem Theme zu sagen, dass hier ein Text steht, der später flexibel übersetzt werden soll / kann, muss dieser entsprechend gekennzeichnet werden. Dazu wird der Text in eine einfache PHP-Anweisung geschrieben und für die Übersetzung “freigegeben”. Zur Verfügung stehen uns hierfür zwei einfache Parameter.

1 2	_e() //für einen einfachen String - also in unserem Fall einfacher Text und __() //für ein Verkettung von Strings und die Übersetzung innerhalb von Funktionen.

Das _e() steht übrigens nicht für “englisch” oder “einfach”, sondern sagt WordPress, dass hier eine Gettext-Datei angesprochen – also übersetzt – werden soll.

Den Quellcode im Theme für die Übersetzung vorbereiten
Nachdem wir nun wissen, wie die zu übersetzenden Texte gekennzeichnet werden sollen, müssen wir nun die entsprechenden Passagen im Quellcode des Themes finden und ergänzen.

So wird aus

1	<h2>Sorry, no posts found...</h2>

diese Zeile

1	echo _e('Sorry, no posts found...', 'ThemeName'); ?>

Wichtig! Im obigen Beispiel ist zu sehen, dass in der PHP-Zeile der Parameter ‘ThemeName’ mit aufgerufen wird. Dieser muss auch dort stehen, da die Übersetzung sonst nicht einwandfrei funktionieren wird. Dazu aber später mehr…

Für die Übersetzung einer Funktion sieht das Ganze dann so aus:
Beispiel einer Archiv-Überschrift

1	printf(__('Archive for the ‘ %s ’ Category', 'ThemeName'), single_cat_title('', false)); ?>

Auch hier muss der Parameter ‘ThemeName’ mit angegeben werden.

Diese Prozedur muss in allen Theme-Dateien fortgesetzt werden, um auch keine Passage zu vergessen. Bei einem vorhandenen Theme ist dies wahrscheinlich etwas mühseliger als bei einem, das gerade erstellt wird.