Wir fangen mit der HTML-Struktur unseres Menüs an. Es besteht ausschließlich aus zwei Div-Containern, sowie den Links, die jeweils das entsprechende Thumbnail enthalten.

<div id="container">
<div id="menu">
          <a class="menuitem"><img src="image1.png" alt="" /></a>
          <a class="menuitem"><img src="image2.png" alt="" /></a>
          <a class="menuitem"><img src="image3.png" alt="" /></a>
          <a class="menuitem"><img src="image4.png" alt="" /></a>
     </div>
</div>

Mit folgendem CSS wird das ganze in die richtige Form gebracht.

#container { position: relative; height: 130px; }
#menu { position: absolute; bottom: 0px; text-align: center; width: 500px;  }
#menu a img { border: 0px; margin: 0px; }
#menu .menuitem { position: fixed relative; bottom: 0px; display: inline-block; }
#menu img { -ms-interpolation-mode: bicubic; }

Zu beachten ist ist dabei, dass der Container die Höhe der Bilder haben sollte ( height: 130px; ), und außerdem position: relative haben sollte, um das Menü am Fuß des Containers ausrichten zu können ( bottom: 0px; ). Die letzte Zeile sorgt mit -ms-interpolation-mode: bicubic; für eine gescheite Darstellung im IE.

Nun zur jQuery Magie. Mit folgendem Code setzen wir nach der Definition der wichtigen Variablen alle Bilder auf die kleine Thumbnail-Größe, und setzen die entsprechenden Befehle für MouseOver und MouseOut.

jQuery(document).ready(function(){
 
   var imageWidth = 130; // Breite für großen Thumbail
   var thumbWidth = 80;  // Breite für kleinen Thumbail
   var speed = 150;      // Animations-Geschwindigkeit
 
   // Bilder auf Thumbnail-Größe setzen
    jQuery('#menu .menuitem img').animate({width: thumbWidth}, 0);
 
    jQuery('#menu .menuitem').mouseover(function(){
         // MouseOver - Thumbanil vergrößern
         thumbnail = jQuery(this).find('img');
         thumbnail.stop().animate({width: imageWidth}, speed);
      }).mouseout(function() {
         // MouseOver - Thumbanil verkleinern
         thumbnail.stop().animate({width: thumbWidth}, speed);
      });
});

Dabei ist der Aufruf der Methode stop() sehr wichtig, da sonst nach einem verfrühten MouseOut die Animation erst zu Ende läuft, bevor die nächste gestartet wird. Besonders bei einer langsamen Animation bewirkt dies einen schwammigen Effekt… und das will keiner

Und fertig ist unser animiertes Thumbnail-Menü. Wieder einmal ein gutes Beispiel für die Einfachheit von jQuery.

Allerdings bietet GA eine einfache Funktion mit der man explizit einen Eintrag in der Statistik vornehmen kann. Diese sieht nicht zwangsläufig einen AJAX-Aufruf vor, sondern kann überall nach Belieben verwendet werden. Implementiert man diese Funktion in jeden AJAX-Call, den man ausführt, können diese mit einer beliebigen Bezeichnung ebenfalls mit geloggt werden. Die Funktion nennt sich pageTracker._trackPageview() und sieht als einzigen Parameter die Bezeichnung vor, welche letztendlich in der Statistik angezeigt werden soll.

Folgender Code zeigt ein Beispiel für die Implementierung in einen AJAX-Aufruf mittels jQuery.

jQuery.post("article.ajax.php", {id: articleid}, function() {
    pageTracker._trackPageview("AJAX-Call: Article " + articleid);
});

Die Bezeichnung, welche als Parameter für den Funktionsaufruf angegeben wurde, wird letztendlich wie jeder andere Aufruf in der Statistik aufgeführt.

Wieso Google Analytics nicht von Grund auf die Möglichkeit bietet AJAX-Calls automatisch zu erfassen, entzieht sich meiner Logik. Allerdings bietet genannte Funktion eine einfache Möglichkeit diesen Effekt manuell zu implementieren.

http://www.sparblog.com/2009/09/das-grose-sparblog-gewinnspiel-mit-preisen-im-wert-von-1000e-1-jahr-sparblog-neues-design/comment-page-7/#comment-12495

Da ich bisher nicht zum Layouten eines eigenen Themes kam, hab ich ebenfalls ein fremdes verwendet, mit dem ich alles andere als zufrieden war. Also hab ich nun meine freie Zeit genutzt um mal ein eigenes zu basteln. Dabei hab ich mich ein wenig an dem Layout von den Tuts+ Seiten wie z.B. Nettuts+ inspirieren lassen, da sie sehr viel Übersichtlichkeit und ein klares, schlichtes Design bieten.

Eine gute Art der Herangehensweise beim Umsetzen des Layouts fand ich hier: Texto.de – Mein Wordpress Magazin – Wordpress Theme Vorlage.

Darunter findet man ein komplett leere Wordpress Layout-Vorlage, welche zwar alle Funktionalitäten von Wordpress bietet, jedoch nur die nötigsten HTML-Elemente samt CSS-Klassen und ein leeres Stylesheet enthält. Somit kann mein sein neues Layout von Grund auf selbst gestalten ohne den überflüssigen Code einer alten Layout-Vorlage mitschleifen zu müssen.

Da ich gerne über jede Zeile meines Codes bescheid weiß, war das dies der ideale Weg zur Umsetzung des neuen Themes.  Man sollte auf die Wordpress Version achten und testen inwiefern die Layout-Vorlage kompatibel ist. Ich habe mit WP Version 2.8.4. gearbeitet und hatte keinerlei Probleme.

Nun stieß ich auf der Suche nach Tutorials auf folgendes Video von Chief Web Developer Ben Nadel.  In diesem Video gibt er in Form einer Präsentation einen intensiven Einblick in jQuery und all seine Komponenten. Zwar geht er nur kurz auf die einzelnen Bestandteile ein, zeigt jedoch anhand kleiner Beispiele den Zweck und die Funktion und schafft es damit ca. 100 Minuten Videomaterial zu füllen. Sehr empfehlenswert für jQuery Begeisterte und diejenigen, die es werden wollen.

Zum Video “An Intensive Exploration Of jQuery With Ben Nadel”

In der Datei app/code/core/Mage/Core/Model/Session/Abstract/Varien.php findet ihr ungefähr in Zeile 77 folgenden Code.

// set session cookie params
session_set_cookie_params(
    $this->getCookie()->getLifetime(),
    $this->getCookie()->getPath(),
    $this->getCookie()->getDomain(),
    $this->getCookie()->isSecure(),
    $this->getCookie()->getHttponly()
);

Wenn ihr dort die letzten drei Methodenaufrufe auskommentiert, könnt ihr euch wieder mit dem lieben Firefox im Admin-Bereich einloggen.

// set session cookie params
session_set_cookie_params(
    $this->getCookie()->getLifetime(),
    $this->getCookie()->getPath()
    //$this->getCookie()->getDomain(),
    //$this->getCookie()->isSecure(),
    //$this->getCookie()->getHttponly()
);

Bei dem Versuch über Magento Connect ein Extension zu installieren bekam ich folgende Fehler-Meldung

ERROR: PEAR_Registry: invalid filemap data

Grund dafür war eine beschädigte Datei .filemap, welche unter folgender url zu finden ist.

/downloader/pearlib/php/.filemap

Diese scheint beim Upload beschädigt worden zu sein. Dies ist mir mit mehreren Dateien passiert, weswegen ich zum Uploaden einer solchen Menge von Dateien nicht mehr den eigentlich so verlässlichen FTP-Client Fielzilla benutzen werde. Ungefähr 15 Dateien musste ich erneut hochladen bevor mein System reibungslos lief. Jedenfalls war besagter Fehler nach einem erneuten Upload der .filemap-Datei behoben.

Anschließend bekam ich einen erneute Fehlermeldung, da MagentoConnect versuchte die Extension auf meinem lokalen System und nicht auf dem Server zu installieren. Grund hierfür waren die Pfadangaben in der

/downloader/pearlib/pear.ini.

Dort waren noch die Pfadangaben meiner lokalen Installation hinterlegt. Ersetzt man diese durch die Pfade der Live-Umgebung ist dieses Problem auch behoben und MagentoConnect läuft wieder einwandfreii.