T3-Blogart » Thomas

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…

Rote Karte für Akismet in Deutschland?

Thomas — Wed, 20 Apr 2011 18:21:10 +0000

Akismet – das “mitgelieferte” WordPress Anti-Spam Plugin könnte in Deutschland jetzt für Probleme bei vielen Bloggern sorgen. Wie WordPress Deutschland heute berichtet hat, ist der Einsatz von Akismet bald nur noch mit erheblichen Anpassungen rechtens.

Grund für diese eher enttäuschende Entwicklung ist der (typisch) deutsche Wahn des Datenschutzes. Nach Meinungen von Experten verstößt Akismet gegen geltendes dutsches Recht, indem Nutzerdaten der Kommentierer – aber auch Spamer – “ungefragt” an die Akismet-Zentrale in die USA übertragen werden.
Aber genau diese Sammlung von Daten, insbesondere die der Spamer, macht das Plugin so zuverlässig. Ich selbst betreue 6 WordPress Installationen, auf denen das Kommentieren möglich ist. Bei allen ist – bzw. war die längste Zeit – Akismet im Einsatz. Und ich kann aus Erfhrung sagen, dass es nie Probleme mit Spam gab. Auch “ordentliche” Kommentare wurden nicht grundlos geblockt. Äußerst zuverlässig – und das seit Jahren.

Nun muss man aber nicht gänzlich auf den Einsatz von Akismet verzichten. Mit einigen Änderungen (oder einem Plugin) kann man “datenschutzkonform” weiter machen. Die erforderlichen Änderungen sind meiner Meinung nach aber alles andere als nutzerfreundlich. Mit einem zusätzlichen Hinweis unter den Datenschutzrichtilinien (diese müssen auf dem Blog vorhanden und erreichbar sein) muss auf die Verwendung von Akismet hingewiesen werden. Dies allein wäre ja noch vertretbar, aber zusätzlich ist eine Opt-In Funktion erforderlich (also eine Checkbox), die vor dem Senden eines Kommentares geklickt werden muss und zusätzlich noch einmal auf die Verwendung von Akismet hinweist.
Das ist äußerst nutzerunfreundlich – nervig, wenn man das so sagen darf.

Wer, so wie ich auch, die obige Option nicht einbauen möchte, kann natürlich auf ein anderes Anti-Spam Plugin ausweichen. Eine Liste mit Alternativen hat WordPress Deutschland gleich mit angeführt.
Ich habe jetzt hier auf dieser Seite “Antispam Bee” im Einsatz. In der ersten Stunde nach der Installation hat es schon 8 Spam-Kommentare gefiltert. Aksimet in einem Jahr der Nutzung immerhin über 4.500 Spams geblockt.

Wie es weiter geht mit Akismet in Deutschland bleibt wohl ersteinmal abzuwarten. Ich persönlich finde auch die Aussage von WordPress.org ernüchternd, die sich trotz über einer Million deutscher WP-Nutzer dieser Problematik nicht annehmen wollen. Lediglich der Beitritt von Automattic zum “Safe-Harbor”-Abkommen ist geplant.

Bleibt also noch abzuwarten, ob Akismet “rechtlich einwandfrei” wieder in Deutschland – ohne Opt-In-Feldern – nutzbar sein wird… Aber ob man es dann noch haben möchte….

Weiterführende Links zu diesem Thema:

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…

Formelle Sprachdatei “SIE” für WordPress und TwentyTen erschienen

Thomas — Wed, 20 Oct 2010 21:12:03 +0000

Heute erschien die formelle Sprachdatei für WordPress 3.0.1 und das Standard-Theme TwentyTen. Die “Sie”-Sprachdatei ist für diejenigen interessant, die WordPress im Geschäftsleben nutzen, oder die privat ihre Besucher nicht gleich mit “Du” anreden möchten.

Die geänderte Sprachdatei für WordPress und das TwentyTen-Theme kann auf der offiziellen Downloadseite heruntergeladen werden.

Um die Sie-Version zu nutzen, muss das Archiv ebenfalls in den /wp-content/languages-Ordner entpackt werden. Die Du-Version wird dabei überschrieben.

Der offizielle Blogeintrag ist hier zu finden.

Über 10.000 Downloads des “A little Touch of Purple” – Themes bei WordPress.org

Thomas — Tue, 07 Sep 2010 19:12:02 +0000

Im April diesen Jahres startete mein “A little Touch of Purple”-Theme bei WordPress.org. Seitdem wurde es bis heute über 10.000 Mal heruntergeladen. Das ist im Vergleich zu einigen anderen Themes nicht sonderlich viel, aber es ist viel mehr, als ich mir vorgestellt habe. Und DAS macht mich schon ein wenig stolz.

Ich sage an dieser Stelle Dankeschön und hoffe, dass Ihr weiterhin Freude mit dem Theme habt!

P.S. Wenn es euch gefällt würde ich mich über einen weiteren Stern bei WordPress.org freuen!

Screenshot-index" src="http://blog.t3-artwork.info/wp-content/uploads/2010/04/Screenshot-index-1024x758.jpg" alt="" width="560" height="414" />

A little Touch of Purple

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!