Ich musste neulich mal nach Möglichkeiten recherieren, wie man mit jQuery einen Link ändern kann – und zwar dynamisch, bzw. responsiv – also je nach Bildschirmgröße. Das ist nicht wirklich das schönste, was man so machen kann – aber es kann an der einen oder anderen Stelle praktisch sein, um einem ganz speziellen Problem zu begegnen, von dem man zunächst nicht wusste, dass man es hat. Die Situation war wie folgt:  einer meiner Kunden hatte schon vor einer Weile in ein sogn. Premium WordPress-Theme investiert.

Später stellte sich heraus, dass das Problem zwar sehr schön aussah, sich aber nicht ganz so suchmaschinenfreunlich verhielt, wie zunächst gehofft. Insbesondere die Navigation bereitete SEO-Probleme. Was war das Problem? Das WordPress Theme hatte nicht nur eine Hauptnavigation, sondern zwei – bzw. wurde eine Navigation zweimal ausgeprägt: einmal für breite Bildschirme (Desktop) und einmal für schmale Bildschirme (Mobil). Der einzige Unterschied bestand in unterschiedlichen CSS Klassen. Soweit so gut. Wozu mussten wir nun die Links mit jQuery ändern?

In der Desktop-Ansicht wurden die hauptnavigationspunkte lediglich ans Anker-Links verwendet, um die untergeordnete zweite Navigationsebene bei Klick auszuklappen. Die einzigen verlinkten Navigationspunkte befanden sich also in der zweiten Ebene – die erste Ebene bestand ausschliesslich aus ‚toten‘ Anker-Links. Warum? Vermutlich wollte der Theme-Autor die Navigation vor allem Mobil-freundlich gestalten. So wurden in der mobilen Darstellung zunächst nur die Links der Hauptebene angezeigt – die zweite Ebene wurde dann bei Klick auf den jeweiligen Hauptpunkt ausgeklappt. Bei Touch-Geräten (Smartphones) gibt es ja keinen Hover-Zustand – daher ist der Klick zum Ausklappen notwendig. Wären nun die Hauptnavigationspunkte mit ‚echten‘ Links verknüpft, hätte der Nutzer keine Chance, jemals die Subnavigation zu sehen. Der Nutzer würde auf die verlinkte Seite weitergeleitet werden, bevor irgendeine Subnavigation angezeigt werden könnte.

Für mich ergaben sich aus diesem Umstand eigentlich zwei verschiedene Probleme: die hauptnavigation war aufAnker-Links reduziert und daher für Suchmaschinen uninteressant. Leider besteht die Hauptnavigation häufig aus wichtigen Keywörtern, die für SEO nun unbrauchbar wären – oder anders ausgedrückt: ungenutztes SEO-Potential. Andererseits haben die Hauptnavigationspunkte keine andere Funktion, als bei Klick die Subnavigation anzuzeigen. Es sind also jedesmal zwei Klicks notwendig – und das ist nicht besonders nutzerfreundlich – die User Experience ist nicht optimal – Bad UX. Oder anders ausgedrückt: warum soll zweimal klicken, wenn 1 Klick eigentlich reichen sollte?

Links dynamisch ändern mithilfe von jQuery

Was wir letztendlich gemacht haben: wir haben die Hauptnavigationspunkte ‚richtig‘ verlinkt – und diese Links dann mithilfe von jQuery für die mobile Darstellung so angepasst, dass dann wieder nur die Subnavigation angezeigt wird.

Auf dem Weg zur Lösung trat dann aber erstmal eine weitere Schwierigkeit auf. Eigentlich würde man Links über die ID oder die CSS-Klasse des Links oder des übergeordneten Elements beeinflussen. Leider waren in diesem Theme keine entsprechendes IDs oder CSS-Klassen zu finden, sodass eine eindeutige Zuordnung erstmal nicht so einfach möglich war. Wir mussten also die Link-Informations des eigentlichen Link-Elements (href)  selbst nutzen, um die Links ausfindig zu machen, die dynamisch geändert werden sollten. Das sieht dann so aus:

jQuery(".sf-mobile-menu a[href='/about-us/']").attr('href', '#');

Leider benötigt man für diesen Workaround eine Zeile Code pro Link. Aber immerhin. Hätte es eindeutige IDs zu jedem Link gegeben, hätte der Code-Schnippsel entsprechend anders – und vor allem kompater ausgesehen:

jQuery('.sf-mobile-menu #content_1 li:first a').attr('href', '#');

Man kann natürlich auch gleich mehrere Links in einem jQuery-Loop bearbeiten. Zum Beispiel so:

$('.content').each( function() {   
    $(this).find('li:first a').attr('href', '#'); 
});

oder so:

$('.content').each( function() {   
    $(this).find('li a').first().attr('href'); 
});

Alternativ könnten wir auch eine WordPress-Funktion nutzen, um durch die Navigation zu loopen und dann den entsprechenden jQuery-Schnippsel einzufügen – der jQuery-Loop ist aber eigentlich schon komfortabel genug.

Responsives jQuery – Links für bestimme Bildschirmgrößen anpassen

Oben haben wir nun verschiedene Optionen, Links dynamisch mithilfe von jQuery anzupassen. Wir wollen diese Links aber nur für bestimmte Bildschirmgrößen anpassen – n unserem speziellen Fall nur für das mobile Layout. Dafür können wir einen jQuery Listener verwenden – ein Code-Snippet, dass sozusagen auf bestimmte CSS-Klassen ‚hört‘ und seinen Code nur dann ausführt, wenn sich diese Klassen ändern.

Im Fourfront’s Blog ist zu dem Thema ein etwas ausführlicherer Artikel zu finden:  „Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width„. Hier beschränken wir uns jetzt mal auf die Umsetzung:

function checkSize(){
    if (jQuery("#az-header.h-classic .az-menu-trigger").css("visibility") == "visible" ){
        /* your code */ 
    }
}

Der Code unter „/* your code */“ iwrd in diesem Falle nur dann ausgeführt, wenn die Klasse „.az-menu-trigger“ im Header-Bereich zu finden ist. Der Listener „checkSize“ wird wiederum so eingebaut, dass er beim Laden der Seite ausgeführt wird.

jQuery(document).ready(function() {

Ich hoffe, ich konnte damit dem einen oder anderen weiterhelfen.