Quicktip: Redaxo den active-State bei Links beibringen
Redaxo bietet zwar ein einfaches und schnell zu lernendes System, hat leider auch ein paar Eigenarten. So kann das System unter anderem keine Active-Klassen bei Links ausgeben um z. B. den aktuell gewählten Link hervorzuheben. Sinn macht dies z. B. in einer Top-Navigation. Die Idee habe ich von stackoverflow.com welches mich erst auf die quick-and-dirty-Lösung gebracht hat. Diese Lösung kann man z. B. einsetzen, wenn man mit iframes arbeitet (was z. B. in einem Portfolio-Design der Fall sein kann) und zeigen möchte, welcher Link aktiv ist.
Zurechtlegen der nötigen Werkzeuge
Damit wir unseren Redaxo-Links nun einen solchen Status beibringen können, benötigen wir ein wenig Handwerkszeug:
- jQuery
- einige Zeilen Javascript
Zunächst laden wir in unserem Template eine Version von jQuery in das Template. Es ist egal ob wir nun die Google-Variante benutzen oder die javascript-Dateien direkt bei uns hosten. Je nachdem wie Ihr Euer Redaxo-Template aufbaut, müsst Ihr die Pfade dementsprechend anpassen.
Einbauen der Skripte ins Template
Wir rufen also zunächst die beiden Javascript-Dateien auf, denn Inline-Javascript mag ich nicht sonderlich 
Wer will kann die zweite Datei erst im Footer aufrufen, was die Ladegeschwindigkeit der Seite wieder etwas anhebt. Der Einfachheit halber lasse ich aber beide Script-Dateien im <head>-Bereich laden.
<script type='text/javascript' src='template/js/jquery.js'></script> <script type='text/javascript' src='template/js/custom.js'></script>
Inhalt der custom.js - Das Herzstück der Redaxo-Modifikation
Was gehört nun in die custom.js? Wir gehen von folgender Theorie bzw. Aufgabe aus:
Wenn ein Anchor, also ein A-Tag geklickt wird, sollen mehrere Befehle aufgerufen werden. Alle Links die aktiv sind (das ist ja meistens nur einer 
) soll die Klasse "active" entzogen und "inaktive" hinzugefügt werden. Gleichzeitig soll aber der Link der geklickt ist "active" sein und somit nicht "inaktiv" als Klasse besitzen. Das klingt zwar furchtbar kompliziert,ist aber ganz schnell in jQuery realisiert.
$(document).ready(function() {
// Highlights active link
$('a').click(function() {
$('a.active').addClass('inactive');
$('a.active').removeClass('active');
$(this).removeClass('inactive');
$(this).addClass('active');
});
});
Abschließendes
Das war schon der ganze Zauber. Mehr passiert hier nicht. Der Code lässt sich lesen, wie ich eben auch die Aufgabe beschrieben habe. Ich weiß das das mit SEO nicht viel zu tun hat ist aber im Gegenzug wieder eine kleine Erweiterung unserer Usability auf einer Redaxo-Seite.
Ich hoffe Euch hilft der Tip ein wenig weiter und freue mich auf Eure Kommentare.
Alle Posts der Woche 36 / 2009 anschauen
Fandest Du den Beitrag interessant?
Fatal error: Call to undefined function the_flattr_permalink() in /var/www/html/web1028/html/seo-geek-de/wp-content/themes/seogeek/single.php on line 48