WP e-Commerce UTF-8 Bug

Wenn man einen Shop in seine WordPress-Installation integrieren will, führt wohl kaum ein Weg an WP e-Commerce vorbei. Trotz zahlreicher Schwächen ist es im Vergleich zu den anderen Plugins in den schier unendlichen Weiten des Plugin Directories das kleinere Übel.

Ein Bug, der mich einiges an Zeit kostete, war die falsche Ausgabe von Adressen mit Umlauten oder “ß” im Namen, was in Deutschland recht häufig der Fall ist (“Straße”). Die Adressen wurden richtig kodiert in die Datenbank gespeichert (darauf achten, dass sie auf UTF-8 gestellt ist) aber es wurden immer komische Zeichen wie ü, ö oder � ausgegeben.

Das Problem des Russen, betrifft alle Zeichen die außerhalb des Ami-Alphabets sind..

Nach einigen Rumgooglen (tolles Wort oder?) fand ich schließlich in einem russischen Forum die Lösung. Großer Dank geht dabei an die Übersetzungkunst von Google .

Der Threadersteller hatte genau das gleiche Kodierungsproblem – die Adressen wurden von WP e-Commerce nicht in UTF-8 ausgegeben. Die dargestellte Lösung behebt das Problem, alles was man tun muss ist eine Zeile im Plugin zu verändern.

In der Datei plugins/wp-e-commerce/wpsc-includes/checkout.class.php die Zeile 348:

1

$saved_form_data = htmlentities(stripslashes($_SESSION['wpsc_checkout_saved_values'][$this->checkout_item->id]), ENT_QUOTES);

mit folgendem Code ersetzen:

1

$saved_form_data = htmlentities(stripslashes($_SESSION['wpsc_checkout_saved_values'][$this->checkout_item->id]), ENT_QUOTES, 'UTF-8');

Und siehe da, die Adressen, Namen und Städte werden ordentlich, d.h. in UTF-8 kodiert, ausgegeben. Hoffe, das hilft einigen weiter.

Social Bookmarks

Da ich kürzlich die Anfrage bekommen habe, wo ich denn meine Social Bookmarks (die kleinen Vierecke unter jedem Artikel) her habe, möchte ich kurz erklären, wie sie entstanden sind. Zuerst habe ich nach Plugins gesucht, die automatisch diese Bookmarks unter die Artikel setzt. Ich war mit keinem so richtig glücklich.. entweder waren die Icons nicht sonderlich hübsch oder der Effekt war nicht der, den ich wollte. Beim Googlen bin ich schließlich auf einen Blog gelandet, auf dem die Links zu bekannten Social Networks in WordPress-Artikel aufgelistet waren.

1
2
3
4
5
6
7
8
9
10
11

<ul id="socialbookmarks">
	<li><a id="delicious" rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Bookmark this post at Delicious">Delicious</a></li>
	<li><a id="digg" rel="nofollow" href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" title="Submit this post to Digg">Digg</a></li>
	<li><a id="facebook" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Facebook">Facebook</a></li>
	<li><a id="furl" rel="nofollow" href="http://furl.net/storeIt.jsp?t=<?php echo urlencode(get_the_title($id)); ?>&amp;u=<?php the_permalink(); ?>" title="Share this post on Furl">Furl</a></li>
	<li><a id="studivz" rel="nofollow" href="http://www.studivz.net/Link/ExternLink/Url/?u=<?php the_permalink();?>&amp;desc=<?php echo urlencode(get_the_title($id)); ?>&amp;prov=<?php bloginfo('name'); ?>" title="Share this post on StudiVZ">StudiVZ</a></li>
	<li><a id="stumbleupon" rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post at StumbleUpon">StumbleUpon</a></li>
	<li><a id="technorati" rel="nofollow" href="http://technorati.com/faves?add=<?php bloginfo('url'); ?>" title="Add <?php bloginfo('name'); ?> to your Technorati favorites">Technorati</a></li>
	<li><a id="twitter" rel="nofollow" href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Share this article with your Twitter followers">Twitter</a></li>
	<li><a id="reddit" rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Reddit">Reddit</a></li>
</ul>

Diese hab ich mir dann in die single.php meines Themes kopiert. Die Links waren jetzt da.. es fehlten noch die Icons. Nach einer kurzen Suche auf Iconfinder bin ich fündig geworden: Das Aquaticus Set hat alle wichtigen Social Networks, die ich benötigte. Nur ein einziges war nciht dabei: studiVZ, das Bookmark musste ich mir dann noch schnell selber basteln. Als Vorlage hab ich einfach eines der anderen Icons genommen.

Icons des Aquaticus Sets als CSS Sprite

Die Icons sollten auf den Seiten in schwarz-Weiß dargestellt sein und als Effekt wollte ich, dass sie farbig werden, wenn man mit der Maus drüber fährt. Dazu habe ich alle Icons samt Schwarz-Weiß-Version in eine Grafik gepackt und den Rest mit CSS erledigt (Stichwort: CSS Sprites).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

#socialbookmarks {
	clear:both;
	height:48px;
	list-style:none;
	margin:20px;
}
#socialbookmarks li {
	float:left;
	margin-left:8px;
}
#socialbookmarks a {
	background-image:url(socialbookmarks.png);
	background-repeat:no-repeat;
	display:block;
	height:0;
	outline:none;
	overflow:hidden;
	padding-top:48px;
	width:48px;
}
#delicious {background-position:0 bottom;}
#digg {background-position:-48px bottom;}
#facebook {background-position:-96px bottom;}
#furl {background-position:-144px bottom;}
#studivz {background-position:-192px bottom;}
#stumbleupon {background-position:-240px bottom;}
#technorati {background-position:-288px bottom;}
#twitter {background-position:-336px bottom;}
#reddit {background-position:-384px bottom;}
#delicious:hover {background-position:0 0;}
#digg:hover {background-position:-48px 0;}
#facebook:hover {background-position:-96px 0;}
#furl:hover {background-position:-144px 0;}
#studivz:hover {background-position:-192px 0;}
#stumbleupon:hover {background-position:-240px 0;}
#technorati:hover {background-position:-288px 0;}
#twitter:hover {background-position:-336px 0;}
#reddit:hover {background-position:-384px 0;}

Wenn euch das hier zuviel ist, könnt ihr euch auch einfach eine ZIP mit den ganzen Daten runterladen: social_bookmarks.zip

Wie es im Live-Betrieb aussieht, seht ihr ja gleich etwas weiter unten..

Matt hat soeben einen Artikel über den Release und seine Neuerungen verfasst. Mehr Infos zur neuen Version gibt’s im Laufe des Tages.

NACHTRAG: Die neuen Funktionen im Detail

So, wie versprochen jetzt noch einer kleiner Einblick in die neuen Funktionen von WordPress 2.9.

Post-Thumbnails

Beginnen wir am besten mit der auffälligsten oder zumindest nützlichsten Neuerung – Post Thumbnails. Ein Post Thumbnail ist nichts anderes als ein Bild, das genau einem Artikel (Post) zugeordnet wird. Das ist deshalb so nützlich, da man sowieso meistens ein Bild als “Aufreißer” hinzufügt. Um den Vorgang daher etwas zu vereinfachen und um einige Probleme zu beseitigen, die normalerweise mit diesen Einleitungsbildern einher gehen (Bild soll vor der Artikelüberschrift erscheinen), hat man sich entschlossen, diese Funktion einzubauen. Bevor man sie jedoch nutzen kann muss man folgenden Code in die functions.php des Themes schreiben.

1

add_theme_support('post-thumbnails');

Post Thumbnail im Backend

Danach erscheint im Backend ein neuer ‘Kasten’ mit der Bezeichnung Beitrags-Miniaturbild. Dort findet ihr auch einen Link, der euch die Möglichkeit gibt aus der Mediathek ein Bild auszuwählen (“Verwende es als Miniaturbild”). Das Bild wird dann in dem neuen Kasten angezeigt.

Das war aber noch nicht alles, denn das Thumbnail wird noch nicht im Frontend angezeigt. Dazu müssen wir noch eine dieser Template Tags in alle Seitentemplates schreiben, wo das Thumbnail ausgegeben werden soll.

1

<?php the_post_thumbnail( 'thumbnail' ); ?>

1

<?php the_post_thumbnail( 'medium' ); ?>

1

<?php the_post_thumbnail( 'large' ); ?>

Der Parameter dieser Funktion dient dazu, die Größe des Bildes anzugeben. Die entsprechenden Einstellungen macht man im Backend unter Einstellungen->Mediathek. the_post_thumbnail(); gibt uns lediglich ein Bild (img-Tag) aus, weshalb es sinnvoll ist, noch ein div oder ähnliches herum zu bauen, um es auch richtig stylen zu können.

Papierkorb

WordPress 2.9 erlaubt es uns alle Artikel und Seiten in einen Papierkorb zu stecken und bei Bedarf auch wiederherzustellen. Der Nutzen ist, dass Artikel/Seiten ohne nervige Pop-up-Nachfrage gelöscht werden können. Im Papierkorb selbst kommt die Abfrage ebenfalls nicht, löscht man hier etwas, ist es auch endgültig weg.

Verschieben eines Artikels in den Papierkorb

Bildbearbeitung

Ebenfalls enthalten ist sind ein paar Werkzeuge um Bilder in der Mediathek zu bearbeiten. Dazu zählen: Bildgröße ändern, Zuschneiden, Drehen und Spiegeln. Das ist recht nützlich und geht schneller, als nochmal Photoshop auf zumachen, es zu ändern und erneut hochladen zu müssen.

Einfache Bildbearbeitung im Backend

…und vieles mehr

Natürlich ist das bei weitem nicht alles. Es ist beispielsweise auch möglich Videos von vielen bekannten Videoportalen einzufügen. Dazu muss man nur den Link des Videos auf eine neue Zeile schreiben und WordPress ersetzt den Link mit einem Player, der das entsprechende Video dann abspielt. Des Weiteren ist es jetzt möglich mehrere Plugins auf einmal zu aktualisieren, WordPress zu sagen, dass es die Datenbank sauber halten soll und durch rel="canonical" doppelten Content zu vermeiden.

Eine Liste mit allen Änderungen findet ihr im WordPress Codex, eine Liste mit allen Bugfixes gibt’s im Trac.

Viel Spaß beim Bloggen!

Blocksatz ist eher was für die Leute im analogen Lager, Printbereich (Drucken) und dergleichen. Für Texte im Internet wird die Art des Textsatzes nicht verwendet, weil dadurch große Lücken im Text entstehen können. Hier ein Beispiel:

Lücken mit Rot hervorgehoben

Um das zu verhindern, gibt es nur einen Weg: Silbentrennung.

Nun könnte man sich hinsetzen und die Wörter selber trennen.. aber mal ehrlich, das ist ziemlich bescheuert. Das dachten sich auch die Entwickler von Hyphenator, einem Plugin für WordPress, das die Worttrennung ganz automatisch durchführt. Bisher funktioniert es reibungslos und Wörter werden fehlerfrei getrennt, der Duden wäre stolz.

Keine Lücken mehr dank Silbentrennung.

Hyphenator greift dabei aber keineswegs in den Text selbst ein. Stattdessen wird nach dem Laden der Seite ein Javascript gestartet, das die Silbentrennung durchführt. (Der Effekt tritt also nicht ein, wenn Besucher Javascript deaktiviert haben.)

Auf jeden Fall eine sehr nützliche Sache, wie ich finde.

Firefox

Firefox 3.5.4

Zum einen wäre da Firefox zu nennen, der von gestern auf heute auf die Version 3.5.4 angehoben wurde. Behoben wurden, wie sooft, Sicherheitslücken und Stabilitätsprobleme. Windows 7-Support gibt es aber noch keinen, der folgt, wie schon im letzten Artikel gesagt, erst mit der Version 3.6. Probleme mit irgendwelchen inkompatiblen Add-ons gibt es wie immer keine – man kann also bedenkenlos zugreifen.

WordPress

Dann kam letzte Woche ein WordPress-Update. Version 2.8.5 wird als Hardening Release bezeichnet, also nochmals ein letztes Polieren vorm nächsten großen Wurf: 2.9. Durch das Update wurden ebenfalls potentielle Sicherheitslücken ausgehebelt, die im Laufe der Entwicklung hin zu 2.9 entdeckt wurden.

Norman’s Blog

In dem Zusammenhang habe ich auch ein paar kleine Änderungen an meiner Seite vorgenommen. Den Support für den Englische Sprache habe ich eingestellt. Obwohl qTranslate gute funktionierte, musste man auch bei minor updates wie das auf die Version 2.8.5 immer auf eine neue qTranslate-Version warten. Außerdem bin ich eh viel zu faul und übersetzte meine Posts zu 98% nicht.

Weiterhin gab es einige Änderungen am CSS und am Template. Der “zurück-zum-Seitenanfang-Button” bringt Benutzer nun geschmeidig nach oben, in dem die Seite selbstständig hoch scrollt. Sprachumschalter und Flash-Tagcloud sind weggefallen, dadurch gibt es einen kleinen Performanceschub und Tags sind leichter lesbar.

Sollte irgendwo noch englischer Text rumschwirren oder eine Seite/ein Artikel nicht funktionieren, lasst es mich bitte wissen. Danke.

Blizzard.com Relaunch

Blizzard Entertainment, bekannt für seine guten Spiele und Webdesigns, hat seiner Homepage jetzt einen neuen Look verpasst. Die Seite wirkt im Vergleich wesentlich moderner und aufgeräumter. Viel Aufwand wird auf den einzelnen Spieleseiten betrieben, von denen jede eine eigene CSS mit besonderen Hintergrundgrafiken und kleinen Flash-Filmen bekommen hat.

Besonders witzig fand ich die 404-Fehlerseite, typischer Blizzard-Humor halt.

Bis später.

WordPress 2.8.2

Heute wurde (für mich ziemlich plötzlich) WordPress 2.8.2 released, das eine schwerwiegende (XSS) Sicherheitslücke behebt, die es Angreifern erlaubte einen Redirect vom Dashboard nach sonstwo zu erstellen . Es wird daher dringend geraten das Update zeitnah durchzuführen.

WordPress 2.8.2

Das wars auch schon

WordPress 2.8.1

Das erste Update zu WordPress 2.8 ist soeben erschienen. Es besteht hauptsächlich aus kleinen bis mittelgroßen Bugfixes die nach dem Release der 2.8 aufgetreten sind. Eine komplette Liste gibt es im offiziellen WordPress Blog. Auch ein recht kritischer Fehler, der es sogar auf heise.de geschafft hat, wurde behoben.

Aufspielen und testen würde ich mal sagen

WordPress 2.8

um diesen Eintrag zu verfassen. Wie ihr sicherlich mittlerweile wisst, ist WordPress in der Version 2.8 endlich in der Nacht vom 10. zum 11. Juni erschienen. Leider bin ich an dem späten Release nicht ganz unschuldig, ich hab nachts um 2 noch einen Bug gefunden, der als “blocker” (muss vor Release unbedingt noch gefixt werden) eingestuft wurde. Dabei handelte es sich um einen Fehler, der das Verschwinden des Kalenders in der Sidebar verursachte, wenn kein Artikel/Seite aufgerufen wird. Na jedenfalls ist es jetzt da und gut schaut’s aus

Probleme mit WordPress selbst gibt es seit dem Update eigentlich nicht, wohl aber mit den Plugins. Durch das Ändern der Plugin API scheinen einige komplizierte Plugins Probleme mit dem Backend zu verursachen, wie ich eben selbst erfahren musste. Ich bin allerdings zuversichtlich, dass alle relevanten Plugins im Laufe der Woche aktualisiert werden.

immer aktuell

Übrigens könnt ihr immer sehen auf welcher Version mein Blog läuft, wenn ihr ganz runter scrollt. Dort steht die Versionsnummer hinter dem WordPress-Link.

Neuerungen gibt es viele, allerdings sind sie alle nicht sooo groß, dass ich jetzt extra für jedes ein Bild machen würde. Am meisten hat sich was an der Widget- und Pluginübersicht getan, Themes können jetzt wie Plugins heruntergeladen und geupdated werden und das ganze System fühlt sich etwas schneller an. Eine komplette Übersicht zu allen Features gibt es natürlich auch.

Im Großen und Ganzen ein gelungenes Update für das auch sonst schon tolle WordPress! In 2.9 soll sich übrigens nochmal einiges an der Multimedia-Front tun, bis dahin frohes Bloggen mit WP2.8

Neu Neu Neu!

Ach ich liebe es, dauernd an meinem Blog zu basteln und hier und da etwas zu verbessern. Im Laufe der letzten Tage ist diesbezüglich einiges passiert und diese Neuerungen möchte ich euch natürlich nicht vorenthalten:

1. Suchen auf Norman’s Blog
2. Neue Tagcloud
3. “Song of the Day”-Widget
4. Online To-Do-Liste

Suchen auf Norman’s Blog

Als ich letztens mal so rumgesurft bin und hin und wieder etwas bei Google oder Wikipedia gesucht habe, ist mir aufgefallen, wie nützliche doch diese Suchplugins für Firefox sind und haben mich gefragt, ob ich nicht sowas auch für meinen Blog erstellen kann. Fündig geworden bin ich bei Mozilla. In deren Developerbereich steht was man machen muss. Im Grunde legt man eine kleine XML Datei an (OpenSearch), in der steht, auf welcher Seite gesucht werden soll und welches Icon die Suchmaschine nutzen soll. Dann verlinkt man die XML im Header des Blogs und schon funktioniert es.

In wenigen Schritten möchte ich nun erklären, wie man das Plugin hinzufügt und benutzt.

1. Auf meinen Blog gehen. Oben rechts leuchtet nun der Dropdown-Pfeil in der Suchleiste auf.

   

   Liste der Suchmaschinen

   Draufklicken und auf “Norman’s Blog hinzufügen” klicken – Das Plugin ist somit installiert und einsatzbereit.

2. Nochmals die Dropdown-Liste aufmachen und “Norman’s Blog” auswählen.

   

   Suchmaschine auswählen.

3. Jetzt die Suchbegriffe eingeben, nach denen ihr auf meinem Blog suchen wollt.

   

   Auf Norman's Blog suchen, egal wo ihr seid.

4. Ihr werden auf meine Seite weitergeleitet und die entsprechenden Suchergebnisse werden euch angezeigt.

   

   Ergebnisse bestaunen.

Neue Tagcloud

WP-Cumulus

Letztens bin ich auf einer Seite (weiß leider nicht mehr welche es war) über eine sehr coole Tagcloud gestolpert. Sie gefiel mir sogut, dass ich gleich in den Quelltext geschaut habe, um nachzusehen, wie das Teil heißt. WP-Cumulus ist der Name eines kleinen Plugins, welches aus eurer eher langweiligen 08/15 Tagcloud eine echte interaktive Wolke aus Links macht.

Definitiv ein Hingucker.

“Song of the Day”-Widget

Frontend Ausgabe

Oben genanntes Plugin diente übrigens meinem ersten Plugin als Vorlage. Ich habe das Grundgerüst übernommen und an mein “Song of the Day” – Plugin angepasst. Mein tägliches Lieblingslied wird ja schon länger hier angezeigt aber es ging mir ehrlich gesagt auf den Sack jedes mal das Textwidget dafür zu missbrauchen. Daher entschloss ich mich, eine geeignete Eingabemaske zu erstellen.

Einiges ist hier einstellbar, z.B. Albumcover, Verlinkung auf ein Video oder Wikiartikel, Größe des Albumcovers etc. Das Plugin lässt sich derzeit auf der Plugin-Seite meines Blogs runterladen. Ich hoffe ich kann es bis nächste Woche auch noch ins WordPress SVN hochladen. Viel Spaß damit!

Download: WP-SongoftheDay

Online To-Do-Liste

Und nun noch ein kleines aber feines Tool, das vielleicht für den einen oder anderen nützlich sein könnte: eine To-Do-Liste!

Das Teil nennt sich “myTinyTodo“, arbeitet auf einer MySQL Datenbank, ist völlig kostenlos und steht unter der GPL. Es gibt auch eine Live-Demo der aktuellen Version. Alles ist einfach und übersichtlich gehalten (bei einer To-Do-Liste ist ja auch eigentlich nichts weiter dran), die Einträge werden per AJAX ohne Neuladen der Seite eingefügt und können dann bearbeitet werden. So kann man z.B. die Priorität ändern, Notizen hinzufügen oder die Reihenfolge per Drag&Drop ändern – alles ohne die Seite neuladen zu müssen.

Ich hab das Script und das Stylesheet noch verändert, damit alles zu meinem Blog passt.

Aus der normalen Version wird kurzerhand...

... eine angepasste Version.

Puh, das war mal wieder eine ganze Menge zu schreiben. Hoffentlich war es nicht langweilig, bis später.

2.8 verschoben

Eigentlich hatte ich vor heute einen Artikel über die neue WordPress Version 2.8 zu schreiben.. aber leider musste ich eben feststellen, dass der Termin vorerst auf Mai verlegt wurde. Tja, da kann man nichts machen. Grund dafür ist sicherlich die immer noch recht hohe Anzahl an nicht bearbeiteten Tickets. Dabei wird die neue Version schon mit Spannung erwartet, da sie einige interessante Neuerungen bezüglich der Themeverwaltung und kleinere Fixes im Bereich Benutzerfreundlichkeit mit sich bringt. Mehr dazu aber, wenn ich 2.8 aufgespielt habe (hoffentlich am 1. Mai)

Update vom 04.06.: Heute wurde bekannt gegeben, dass WordPress 2.8 definitiv am 10. Juni kommen wird.

Neue Themes

Derzeit kannst du zwei Themes von mir downloaden: Flora, das Theme dieses Blogs und Wrath of the Lich King, das der offiziellen Seite der World of Warcraft – Erweiterung nachempfunden ist. In Zukunft werde ich Themes auf einer Extraseite veröffentlichen und euch bei Aktualisierungen benachrichtigen.

Viel Spaß beim Bloggen!

Vorschau	Beschreibung	Tags
Flora	Flora Dieser Blog läuft mit Flora. Es ist dunkel, es hat Blumen und Ornamente und ich mag es! Ich bastel immer zwar noch daran, aber diese Version sollte halbwegs funktionieren. Mit Custom Login! Download	dark two-columns fixed-width left-sidebar
Wrath of the Lich King	Wrath of the Lich King Wrath of the Lich King ahmt das Design der WotLK Promo-Seite von Blizzard nach. Ich dachte, es wäre cool so etwas als Theme für einen Blog zu haben. Download	dark two-columns fixed-width right-sidebar