Wie ganze Widgetfläche klickbar machen?

  • Hey,

    ich arbeite immer noch an der Gestaltung einer Seite auf WP-Basis und komme gut voran - bis jetzt!

    Mein Problem ist folgendes: ich möchte die Bereiche dreier Widgets die auf der Startseite erscheinen zu Links machen. Jedes Textwidget soll dabei auf eine andere Seite verweisen. Fläche heißt, die ganze in der CSS-Datei ausgewiesene Fläche soll ein einziger großer Link sein, unabhängig von Hintergrundbild, Überschrift oder Text.

    Via HTML kann ich natürlich keine Links setzen, weil im Quelltext nur die Widget-Area ausgewiesen wird und die Widgets erst dann eingefügt werden. die IDs hab ich natürlich.

    Ich hatte schon überlegt ein Widget selbst zu bauen, aber ich verstehe nichts von PHP und dafür allein ist das etwas zuviel Mühe.

    Ich habe etwas gesucht und auch gefunden (http://themeid.com/help/discussio…ea-as-a-link/p1), bloß leider nicht zum Laufen bringen können.

    Achso, weil ich das Superfish Dropdown Menü benutze ist eine Javascript- bzw. JQuery-Version vorhanden (jquery-1.9.0.min.js), falls das was nützen könnte.

    Danke für die Hilfe im voraus
    VideoHomeSystem

    • 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

  • Damit ein Text-Widget ein Link wird musst du in das Widget natürlich noch einen Link einbauen. Dazu erstellst du dann noch eine Klasse in deiner style.css namens foobar oder whatever gibts dem link eine Breite und Höhe setzt dazu noch ein overflow:hidden und stellst alles als display:block dar. - sollte laufen.

    Software ist wie Sex - Sex ist auch schöner, wenn es nichts kostet.

  • Ich weiß jetzt nicht, welche Widgets Du meinst. Wenn Du einfache Text-Widgets verwendest, in denen sich HTML-Code befindet, kannste das da regeln. Ansonsten musst Du ins Theme gehen und dort die sidebar bearbeiten.

    Wenn Du eine jQuery-Instanz am Start hast, umso besser. Einfach einem Wrap um das Widget (wenn nicht vorhanden, pack einen DIV drumherum) eine ID zuweisen (bspw. id="ersterLink").

    Über jQuery (externe JS-Datei) dann eine Funktion deklarieren:

    Code
    [COLOR=#000000][FONT=courier new]$("#ersterLink").click(function(){[/FONT][/COLOR]
    [COLOR=#000000][FONT=courier new]  document.location.href = 'http://www.domain.de';[/FONT][/COLOR]
    [COLOR=#000000][FONT=courier new]});[/FONT][/COLOR]

    Nur ein Ansatz, mach was draus. :)

  • Damit ein Text-Widget ein Link wird musst du in das Widget natürlich noch einen Link einbauen. Dazu erstellst du dann noch eine Klasse in deiner style.css namens foobar oder whatever gibts dem link eine Breite und Höhe setzt dazu noch ein overflow:hidden und stellst alles als display:block dar. - sollte laufen.

    Mh. Also der Link funzt natürlich, aber (schätze) weil "a" halt ein Inline-Element ist, verdrängt es in seiner Größe den nachfolgenden Text. Aus jeweils Link und Text ein "div" machen und mit "z-index" arbeiten hat auch nicht gefunzt. Any help?

    Aber eigentlich wäre es mir lieber, wenn nur irgend möglich, im Widgettext nichts reinzuschreiben... lieber vll. via Script im nachhinein aus einem "div" einen Link machen oder so...

  • Ich weiß jetzt nicht, welche Widgets Du meinst. Wenn Du einfache Text-Widgets verwendest, in denen sich HTML-Code befindet, kannste das da regeln. Ansonsten musst Du ins Theme gehen und dort die sidebar bearbeiten.

    Wenn Du eine jQuery-Instanz am Start hast, umso besser. Einfach einem Wrap um das Widget (wenn nicht vorhanden, pack einen DIV drumherum) eine ID zuweisen (bspw. id="ersterLink").

    Über jQuery (externe JS-Datei) dann eine Funktion deklarieren:

    Code
    [COLOR=#000000][FONT=courier new]$("#ersterLink").click(function(){[/FONT][/COLOR]
    [COLOR=#000000][FONT=courier new]  document.location.href = 'http://www.domain.de';[/FONT][/COLOR]
    [COLOR=#000000][FONT=courier new]});[/FONT][/COLOR]

    Nur ein Ansatz, mach was draus. :)

    yeah 8-) vielen Dank!

    Wenn Du mir jetzt nur noch sagen könntest, welchen Befehl es braucht um den Cursor auf den Link reagieren zu lassen (bei mir (win xp) von Pfeil zu Hand), dann bin ich glücklich :smile:

    edit: hab eben nämlich erst beim hilflosen Klicken überhaupt gemerkt, dass der Link funzt

Jetzt mitmachen!

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