Links im Artikel automatisch mit einer CSS Class versehen

    Huhu,

    habe in meinem Design die Links (<a-Tag) besonders gestylt. Das Problem: Wenn ich ein Bild innerhalb eines Artikels einfüge, wird es auch von <a-Tags umgeben. Das Bild wird also genauso gestylt wie der Text, für den die CSS-Regelung eigentl. nur gelten soll.

    Ich könnte das Problem umgehen, indem ich den (Text-) Links innerhalb eines Artikels automatisch eine CSS Class zuweisen könnte. Automatisch bedeutet, dass diese Class nicht zugewiesen wird, wenn der Link ein Bild umschließt.

    Habt ihr da eine Idee für mich?

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Wenn wir die Frage zunächst einmal nur auf das Cascading Style Sheet begrenzen, dann würde man das vermutlich so lösen, dass man einfach Links, die ein Bild umschließen, eine andere Klasse zuweist.
    In WordPress wird man beim Einfügen gefragt, ob ein, bzw. welcher Link das Bild umschließen soll. Hier könnte man natürlich manuell eine zusätzliche Klasse eintragen, die die Formatierung der Text-Links aufhebt. Allerdings ist hier grundsätzlich Vorsicht geboten: Wie schnell hat man vergessen, die zusätzliche Klasse einzutragen oder vertippt sich bei der Eingaben ...

    Als nächstes könnte man natürlich ein PlugIn konstruieren, dass beim Einfügen von Grafiken einen Link mit zusätzlicher Klasse vorschlägt. Sicher ein interessantes Projekt ...

    Solltest Du bereits einen funktionierenden Blog mit vielen, vielen Bildern haben, wäre es natürlich mühsam, nun alle Links um die Klasse zu erweitern. Hier bietet sich eine komfortable Lösung mit einer kleinen jQuery-Funktion an:

    Code
    $('a:has(img)').addClass('no');

    (Die Klasse, bei der das verlinkte Bild keine Formatierung aufweisen soll, habe ich .no genannt.)
    Um die Wirkung erst einmal zu demonstrieren, habe ich einfach mal einen kleine HTML-Datei aufgesetzt. (Bitte Endung ".txt" entfernen und Bildquelle "bild.jpg" anpassen.)

    Um die jQuery-Funktion in WordPress verwenden zu können, muss jQuery eingebunden/aktiviert werden. Dies erfolgt durch eine kleine Anpassung in der functions.php (siehe Beispiel aus dem Codex).
    Die jQuery-Funktion wird dann noch in die header.php in den <head>-Bereich gesetzt:

    HTML
    jQuery(document).ready(function($){
$('a:has(img)').addClass('no');
});

    Nicht die elegantestes Lösung (vor allem, wenn der Nutzer JavaScript deaktiviert), aber immerhin ...

    Wer schreibt jetzt noch rasch das o.g. PlugIn? :smile:

    Bego

    Einmal editiert, zuletzt von bego (10. August 2010 um 21:57)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden