T3-Blogart » Tutorials

Umfangreiches WordPress Language-Paket für Notepad++

Thomas — Thu, 06 Oct 2011 16:47:33 +0000

WordPress Funktionen einfach beim Schreiben auswählen

Notepad++ ist der Editor meiner Wahl, wenn es um das Erstellen und Bearbeiten von Themes und Plugins geht. Doch wer regelmäßig mit dem Editor zu tun hat, der weiß, wie mühselig es sein kann, bis alle erforderlichen WordPress-Funktionen zusammengeschrieben sind. Darum habe ich ein Language-Paket für den Notepad++ Editor geschrieben, das ich Euch hier gerne zur Verwendung anbiete. In diesem Paket sind insgesamt 1.779 WordPress-Funktionen hinterlegt. Das erspart an vielen Stellen eine Menge Tipparbeit.

Und so nutzt ihr das Paket

1. Notepad++ herunterladen und installieren. Wer dies noch nicht auf seinem Rechner hat, findet es auf der offiziellen Projektseite zum Download.

Tipp: Installiert das Programm nach Möglichkeit nicht in den Standard-Programmordner! Nutzt lieber – sofern vorhanden – die Daten-Festplatte. Grund: Windows Vista und Windows7 stellen sich bei den Schreibrechten im Programmordner etwas pingelich an, und die brauchen wir später. Wer dennoch auf “C:\Programme” zurückgreift, der findet hier ein sehr schönes Tutorial um die erforderlichen Schreibrechte zu erhalten. (Tutorial in englisch)

2. WordPress – Language-Paket herunterladen und entpacken. Das komplette Paket beinhaltet zwei Dateien.

userDefineLang.xml
wordpress.xml

Umfangreiches Language-Paket mit über 1700 WordPress Funktionen für Notepad++
Bisherige Downloads: 50

3. XML-Dateien in Notepad++ verfügbar machen

Die Datei “wordpress.xml” beinhaltet die WordPress-Funktionen als Keywords. Hiermit weiß Notepad++, dass Funktionen beim Schreiben automatisch zur Auswahl angezeigt werden.

Die “wordpress.xml” gehört in den Plugins/APIs – Notepad++ Programmordner. Je nach Installation kann dies folgender Pfad sein: D:\Notepad++\plugins\APIs

Die userDefineLang.xml kommt in den lokalen Benutzer-Ordner, in dem Programmrelevante Informationen, Einstellungen und Konfigurationen hinterlegt sind. So könnte der Pfad aussehen: C:\Users\\AppData\Roaming\Notepad++

Diesen Ordner kann man – je nach Windows-Version – auch über

Start -> Ausführen -> %APPDATA%\Notepad++

erreichen.

4. Automatische Vervollständigung einrichten und Syntax festlegen

Wenn wir jetzt den Editor öffnen, steht uns WordPress jetzt als “Sprache” zur Verfügung.

Menü -> Sprachen -> WordPress

Um die komfortable automatische Vervollständigung zu nutzen (falls noch nicht eingerichtet) geht ihr im Menü auf

Einstellungen -> Optionen -> Sicherheitskopie/Autovervollständigung

und aktiviert die entsprechende Funktion.

Autovervollständigung aktivieren

Jetzt werden uns beim Schreiben einer WordPress-Funktion die entsprechenden Vorschläge gemacht. Die Auswahl der Funktionen kann auch manuelle mit der Tastenkombination Strg + Leertaste geöffnet werden.

Wer einen eigenen Syntax (Farben) verwenden möchte, kann dies auch einstellen. Klickt auf den Button für die “Benutzerdefinierten Sprachen” und wählt dann “WordPress” aus. Hier können dann die entsprechenden Farben eingestellt werden.

Funktionsnachweis: Die in diesem Paket verwendeten Funktionen wurden von http://phpdoc.wordpress.org/tags/3.2.1/ übernommen.

Das war´s.

Hier noch ein paar hilfreiche Weblinks für weiterführende Informationen

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”

Probleme mit Fancybox nach WP-Update auf Version 3.2.x

Thomas — Fri, 05 Aug 2011 10:00:55 +0000

Wer das jQuery-Plugin “Fancybox” nutzt, oder sich vielleicht an meinem Tutorial hierzu probiert hat, wird vielleicht ziemlich frustiert auf seinen Blog schauen, wenn die Fancybox nach deWP-Versionsupdate auf 3.2.x nicht mehr funktioniert.
Grund für den plötzlichen “Ausfall” ist die neue jQuery Version 1.6, die in WordPress 3.2 enthalten ist. Diese Version wird aber derzeit nicht von der aktuellen Fancybox-Version unterstützt… Mit einem kleinen Eingriff lässt sich die Funktion aber problemlos wieder herstellen.

Im Grunde brauchen wir nichts anderes tun, als die jQuery Version 1.4 zu laden – mit dieser Version ist die Fancybox noch kompatibel. Und so geht´s:

Öffnet die functions.php Eures Themes und tragt folgende Zeilen ein;

1
2
3
4
5
6
7
8

function new_jquery(){
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js', false, '', true);
wp_enqueue_script('jquery');
}
}
add_action('init', 'new_jquery');

Diese Funktion macht jetzt folgendes:

Wenn “Nicht Adminbereich” ( !is_admin() …) – Dies ist wichtig, da sonst einige Funktionen im Admin-Bereich nicht richtig funktionieren!!
“Entferne” die aktuelle jQuery Version aus der Libary
Lade die Version 1.4 von Google und platziere die Funktion in den Theme-Footer
Registriere die Version 1.4 und nutze diese für das aktuelle Theme

Damit läuft die Fancybox wieder in der gewohnten Form auf Blogs mit WP 3.2.x

Wichtig!!
Das “Downgrade” der jQuery-Funktion kann u.U. dazu führen, dass andere Plugins nicht mehr ordnungsgemäß funktionieren, wenn für dieses jQuery 1.6 erforderlich ist! Prüft also nach der Umstellung die Funktion der Plugins und Eures Themes!

WP-Gallery mit automatischer Fancybox

Thomas — Mon, 23 May 2011 18:17:56 +0000

WordPress bringt mit der Gallery Funktion ein einfaches und nützliches Tool mit sich, um Bilder ganz einfach in einer Gelerieansicht darzustellen. Doch wer die Bilder in einer vergrößerten Ansicht anbieten möchte, der hat die Wahl einer separaten Media-Seite oder man nutzt für Bildeffekte ein entsprechendes Javascript Plugin. Wie man ganz einfach ohne Plugin einen schönen Bildeffekt mit der Fancybox “zaubert”, möchte ich Euch hier kurz erklären.

1. Voraussetzungen

Als ersten benötigen wir das jQuery-Plugin Fancybox, das wir ja später nutzen möchten. Die aktuellste Version gibt es auf der Fancybox-Projektseite zum Download. Datei herunterladen und lokal auf dem Rechner entpacken und speichern.

Fancybox nach dem Download entpacken

Als nächstes übertragen wir die Dateien auf den Web-Server. Wir entscheiden uns, einen Unterordner in unserem Theme-Ordner anzulegen. Dies ist wichtig, da wir die Fancybox später über die Functions.php unseres Themes ansprechen werden. Dazu aber später mehr.
Weiter in der Installation… In unserem Theme-Ordner habe ich mir einen Unterordner angelegt namens “js” (Javascripte) und dort den Fancybox-Ordner hochgeladen. In meinem Beispiel lautet der komplette Pfad also;

..wp-content/themes/twentyten/js/Fancybox

In diesem Ordner müssen folgende Dateien vorhanden sein:

der Ordner fancybox
jquery-1.4.3.min.js
style.css

Der Ordner “example” und die index.html brauchen wir später nicht.

Damit haben wir den Grundstein für unseren Bildereffekt gelegt. Jetzt müssen wir ihn nur noch im Theme aufrufen und für die Bilder aktivieren.

2. Einbindung der Fancybox in das WordPress Theme

Zum Aufruf der Fancybox öffnen wir uns – wie oben schon erwähnt – die Functions.php unseres Themes. Hier registrieren wir nun die Fancybox in unserem Theme. Dazu schreiben wir folgenden Code in die Functions.php:

1
2
3
4
5
6
7
8
9
10

//Load the jQuery Fancy-Plugin for dynamic images
function content_fancy(){
$path = get_bloginfo('template_directory');
if (!is_admin()) {
wp_register_script('fancy', $path.'/js/Fancybox/fancybox/jquery.fancybox-1.3.4.js', false, '', true);
wp_enqueue_script('jquery');
wp_enqueue_script('fancy');
}
}
add_action('init', 'content_fancy');

Dieses Script lädt beim Aufruf Eures Blogs das Fancybox.js (Javascript) in den Footer Eurer Seite, was ein Vorteil in puncto Ladezeit bedeutet. Beachtet aber, dass der Aufruf wp_footer() im Theme vorhanden sein muss!!
Wer das Script lieber im Kopfbereich der Seite laden möchte (Header) der ersetzt in der Zeile

1	wp_register_script('fancy', $path.'/js/Fancybox/fancybox/jquery.fancybox-1.3.4.js', false, '', true);

das letzte true gegen ein false. Mehr Informationen hierzu findet Ihr in der Doku zu dieser Funktion.

Ein Blick in den Quellcode Eures Blogs sollte nun zeigen, dass das Script geladen wurde.

3. Aufruf des Fancybox-Effekts bei Bildern

Nun haben wir das Script in unserem Theme registriert, und rufen es beim Laden der Seite auf. Jetzt müssen wir noch dafür sorgen, dass die Fancybox auch weiß, dass sie Bilder “zoomen” soll. Dazu öffnet Ihr jetzt die Footer.php Eures Themes.

Hier rufen wir nun die jQuery-Box auf;

1
2
3
4
5
6
7
8

Das bedeutet:
Wenn das HTML-Grundgerüst der Seite geladen wurde, dann suche nach Links, die auf .jpg, .png oder .gif-Dateien verweisen und erstelle – wenn möglich – eine “Blätterfunktion” mit diesen Bildern.

Wichtig:
Wenn Ihr in der Functions.php – wie oben beschrieben – das Script im Footer aufruft, dann muss das jQuery-Script darunter aufgerufen werden!! Also bindet es nach dem wp_footer() in die Footer.php ein! Ansonsten funktioniert die Fancybox später nicht…

Als letztes müssen wir noch das Aussehen der Fancybox aufrufen. Dazu öffnen wir nun die Header.php Eures Themes. Hier tragt Ihr nun folgende Zeile ein, um die style.css der Fancybox zu laden:

1	bloginfo('template_directory'); ?>/js/Fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

Alle Änderungen Eurer Theme-Dateien speichern und auf den Webserver zurück laden. Das war´s. Jetzt werden alle Bilder, die auf sich selbst verlinken, mit dem Fancybox-Effekt geladen…

Und so sieht´s dann fertig aus…

Die Bilder öffnen sich in der Fancybox und lassen sich einfach “weiter blättern”.

Viel Spaß beim Ausprobieren…

Weitere Möglichkeiten findet Ihr auf der Fancybox-Projektseite. Natürlich kann man die Fancy- style.css noch entsprechend dem Theme anpassen…

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…

Die “add_image_size” Funktion anstoßen

Thomas — Tue, 07 Sep 2010 17:34:05 +0000

WordPress hat mit Version 2.9 die Post-Thumbnail-Funktion eingeführt, die es ermöglicht, kleine Vorschaubilder zu einem Beitrag einzuführen. Zugegeben, diese Funktion ist nicht bei allen Bloggern beliebt, da sie doch sehr auf die Ressourcen des Webspace schlägt, aber sie ist durchaus nützlich und komfortabel.

Als Erweiterung zu dieser Funktion hat WordPress mit “add_image_size” auch die Möglichkeit geschaffen, eigene Bildgrößen zu definieren, und diese an unterschiedlichen Stellen im Theme auszugeben. Wer beispielsweise auf der Startseite Bilder im Format 150×150 Pixel bevorzugt, benötigt in den Archiven vielleicht nur 90×90 Pixel, oder 200×75 Pixel…

Um die eigenen Bildgrößen zu definieren, bedarf es nur wenigen Codezeilen in der functions.php

1
2
3
4
5
6
7

if ( function_exists( 'add_image_size' ) )
add_theme_support( 'post-thumbnails' );

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'category-thumb', 200, 200 );
add_image_size( 'homepage-thumb', 220, 180, true );
}

Damit haben wir dem Theme mitgeteilt, dass wir unterschiedliche Bildgrößen benötigen, und diese an unterschiedlichen Stellen im Template verwenden möchten.

Die Einbindung im Template ist ebenso einfach. Hierfür muss lediglich an die entsprechende Position folgender Code eingefügt werden;

1	< ?php if ( has_post_thumbnail() ) the_post_thumbnail('category-thumb'); ?>

Wer nun sein Theme entsprechend angepasst hat und sein Ergebnis bewundern möchte, der wird höchstwahrscheinlich enttäuscht auf den Monitor starren. Die Thumbnails haben nicht die gewünschte Größe…

Der Grund: Die Änderungen von “add_image_size” werden erst angewendet, wenn neue Bilder hochgeladen, oder als Post-Thumbnail gesetzt werden. Alle vorherigen Bilder ignorieren vorerst die neuen Maße!

Schnelle Abhilfe schafft hier das Plugin; Regenerate Thumbnails – Thumbnails erneuern und fertig. Nun sollte alles so sein, wie Ihr es vorher definiert habt.

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.

WP 2.9 Neue Funktion “the_post_thumbnail”

Thomas — Sat, 19 Dec 2009 21:42:57 +0000

Mit WordPress 2.9 kam die neue – und wie ich finde auch längst überfällige – Funktion “the_post_thumbnail”. Mit dieser Funktion ist es nun endlich möglich, jedem Beitrag ein eigenes kleines Bild anuzuhängen, ohne dies recht aufwändig über Custom-Fields oder Plugins zu lösen. Die Integration in das bestehende Theme ist denkbar einfach.

Wenn man diese Funktion richtig nutzen möchte, sollte man folgendes beachten;

Aktivierung der Funktion in der functions.php
Als erstes öffnet man die functions.php seines aktuellen Themes und ergänzt den Aufruf der Funktion in dem man folgende Zeile hinzufügt;

1	add_theme_support('post-thumbnails');

Wer keinen offenen PHP-Aufruf findet, ergänzt die Zeile um;

1	add_theme_support('post-thumbnails'); ?>

Damit weiß WordPress nun, dass es diese Funktion gibt, und diese auch aktiviert werden kann.

Die Funktion / Bildgrößen
Als nächstes geht es an das Theme – die Einbindung in das Design.
Hier sollte man zuvor wissen, dass es standardmäßig drei Größenvorgaben gibt, und eine weitere für eigene Anpassungen.

Aber zuerst zu den Standards. Von Hause aus gibt es drei feste Größenvorgaben, die da lauten;

“thumbnail” => setzt die Breite des Vorschaubildes auf einen Wert von 150px
“medium” => setzt die Breite des Vorschaubildes auf einen Wert von 300px
“large” => setzt die Breite des Vorschaubildes auf einen Wert von 1024px

Die entsprechende Höhenangabe des Bildes ergibt sich dann automatisch aus der Breite.

Ausgeschrieben sieht die Funktionen dann so aus (Größe = thumbnail);

1	the_post_thumbnail('thumbnail'); ?>

Die vierte Option ist das Festlegen von fixen Breiten- und Höhenwerten. Zu beachten ist hierbei aber, dass es bei fixen Größenvorgaben zu verzerrten Darstellungen der Bilder kommen kann, da diese unter Umständen nicht mehr proportional sind.
Für feste Breiten- und Höhenangaben sieht die Funktion dann so aus;

1	the_post_thumbnail( array(100,100) ); ?>

wobei die Angaben (100,100) für Breite und Höhe stehen, und entsprechend angepasst werden können.

Einbindung der Funktion
Wenn man sich nun für die gewünschte Bildgröße entschieden hat, und diese Funktion beispielsweise mit der Größe “thumbnail” in den Archiv-Seiten verwenden möchte, dann könnte der Aufruf wie folgt aussehen;

1
2
3
4
5
6
7

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

the_post_thumbnail('thumbnail'); ?>
the_excerpt(); ?>

....

Ausrichtung und Style in der CSS-Datei
So würde das Vorschaubild die Standard-Styles des Themes annehmen, was nicht immer die richtige Wahl ist. Daher fehlt als Letztes noch die entsprechende Anpassung in der CSS-Datei.
Im oben genannten Beispiel möchte ich die Vorschaubilder links im Text umlaufend haben. Dazu muss die Style-CSS wie folgt angepasst werden;

1
2
3
4
5
6

.attachment-thumbnail {
float: left;
margin: 3px;
padding: 3px;
border: 1px solid #ccc;
}

Das Vorschaubild wird jetzt links ausgerichtet, vom Text umschlossen und ist mit wenig Abstand und einem dünnen Rahmen vom Inhalt getrennt.
Jede Bildgröße erstellt übrigens eine eigene CSS-Klasse, die individuell angepasst werden kann. Je nach gewählter Bildgröße lauten die Klassen dann

1	.attachment-thumbnail, .attachment-medium, .attachment-large

Das war´s! Im Backend steht nun die Möglichkeit zur Verfügung, ein eigenes Bild zu jedem Beitrag hochzuladen. Viel Spaß mit dieser Funktion, auf die auch ich in Zukunft öfter zurück greifen werde.

Die Funktions-Referenz bei wordpress.org: http://codex.wordpress.org/Template_Tags/the_post_thumbnail

Weitere Beispiele und Konfigurationen sind in dem Artikel ” The ultimative Guide for the_post_thumbnail in WordPress 2.9 ” beschrieben…