ID mit CSS klickbar machen

  • Hallo zusammen

    Ich habe schon etliche Sachen versucht und viel gegoogelt - ohne Erfolg. Nun frage ich euch:
    Meine Theme ist "Responsive"; es geht um folgende Seite: http://www.abee.ch/wp_neu

    Unten hat es auf der Home Page 3 Text-Widgets, welche ich als ganzes klickbar machen möchte, also nicht nur den Titel oder nur den Text. Ich habe mir zuerst vorgestellt, die ganze ID, welche ja für alle 3 Widgets unterschiedlich ist, klickbar zu machen, weil für alle Widgets andere Links eingefügt werden sollen. Nun habe ich eine transparente Grafik, die so gross ist wie das Widget, über das Widget gelegt mit folgendem CSS-Code:

    Code
    #widget-wrapper widget_text #text-2 {
        background-image:url(/.../bg-trans.png);
        display:block;
        height:182px;
        width:264px;
    }


    Die Grafik scheint dort zu sein, denn wenn ich sie grösser mache, verschiebt es die anderen Widgets.
    Wie kann ich nun diese Grafik klickbar machen? Und: Ist dies der Richtige / saubere Weg in Bezug auf SEO und Validität? Oder geht das ganz anders?

    Ich bin froh um eure Hilfe, vielen Dank

    • 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

  • umsetzen kannst du das mit

    PHP
    onclick="window.location.href='http://www.deinlink.de'"

    in der "sidebar-home.php" findest du diese 3 Widgets
    2 mal

    Code
    <div class="grid col-300">


    und 1 mal

    Code
    <div class="grid col-300 fit">

    hier nun den onclick event einfügen

    also Beispiel

    PHP
    <div class="grid col-300" onclick="window.location.href='http://www.deinlink.de'">

    in die style.css dann noch

    Code
    .home-widgets .col-300 {
        cursor: pointer;
    }

    SEO technisch gesehen ist das aber nicht so Toll, dann lieber einfach im Widgettext, am Ende einen Link einfügen

    Einmal editiert, zuletzt von Tutrix (21. August 2012 um 15:40)

  • Super, vielen Dank, es funktioniert. Ist es möglich, zwecks SEO-Optimierung im Widgettext am Ende einen Link hinzuzufügen, welcher aber nicht sichtbar ist? Oder mag das Google nicht?

    Danke

  • Link hinzuzufügen, welcher aber nicht sichtbar ist? Oder mag das Google nicht?


    Google ist das Wurscht :-o

    Allerdings nützt dir das auch nichts

    Zitat von Google

    Zitat

    Google ignoriert Content, der nicht für Nutzer sichtbar ist.

Jetzt mitmachen!

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