Dynamisches Menü - Sidebar - unterschiedliche Icons vor <h2> title

  • [COLOR=#000000][FONT=Verdana]Hallöchen,[/FONT][/COLOR]
    [COLOR=#000000][FONT=Verdana]ich arbeite mich aktuell in WP ein und erstelle auch ein eigenes Theme. Dieses Theme hat natürlich die Funktion Widgets zu verwenden.[/FONT][/COLOR]

    [COLOR=#000000]

    PHP
    <?php if( !function_exists('dynamic_sidebar') || !dynamic_sidebar('seitenleiste') ) >
    <?php endif; ?>


    [COLOR=#000000][FONT=Verdana]functions.php[/FONT][/COLOR]
    [COLOR=#000000][FONT=Verdana]

    PHP
    <?php
    
    
     if ( function_exists('register_sidebar') )register_sidebar(array('name'=>'seitenleiste',
    'before_widget' => '<div class="widget-navi">',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
    ));
    ?>


    [/FONT][/COLOR][FONT=Verdana]
    [/FONT][/COLOR]
    [COLOR=#000000][FONT=Verdana]Nun das klappt ja auch ganz prima. Nun möchte ich allerdings dass z.B. bei zwei Menüs jeweils links neben dem Title (<h2>) eine Font-Awesome Grafik steht oder generell eine Grafik. Dabei sollte sich aber die Grafik vom ersten Menü zu der im zweiten Menü unterscheiden. Das heißt es würde mir nichts bringen oben den 'before_title' mit ner Grafik zu versehen.[/FONT][/COLOR]

    [COLOR=#000000][FONT=Verdana]Hat jemand eine Ahnung wie ich das realisieren könnte? Oder sollte ich hierbei gänzlich auf dynamische Widgets verzichten?[/FONT][/COLOR]

    [COLOR=#000000][FONT=Verdana]Siehe auch die angehängte Grafik. Rotes X ist ein anderes Icon als Blaues X[/FONT][/COLOR][COLOR=#000000][FONT=Verdana]. - im Fontawesome-Optimum natürlich mit <i> Tag. Doch dieser müsste pro widget dynamisch sein.
    [/FONT][/COLOR]

    • 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

  • sollte, mal so blind geraten, in css mit dem before:: gehen.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • Warum willst du unbedingt ein i-Tag unterbringen? Welchen Hintergrund hat das? Werden besondere Begriffe erklärt?

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Du könntest ein eigenes Widget erstellen, in dem man aus einem Listenelement ein Icon auswählen kann. In der Datenbank wird dann der Unicode gespeichert und entsprechend über PHP ausgegeben.

    Alternativ kannst Du dem jeweiligen Widget eine ID mitgeben, damit es eindeutig identifizierbar ist. Über jQuery ist es dann ein leichtes, den Überschriften per prepend() Dein gewünschtes <i> voranzustellen. Das kann man auch geschickter lösen, in dem das Icon selbst auf den Title als data-Attribut hinterlegt wird. Dann brauchst Du auch keine HTML-Tags im "content:" und kein JavaScript. ;)

    Beispiel:

    Code
    .widget-navi h3::before {
      content: attr(data-icon);
    }
  • Warum willst du unbedingt ein i-Tag unterbringen? Welchen Hintergrund hat das? Werden besondere Begriffe erklärt?


    Es geht mir nur darum, dass ich das ganze recht flexibel und dynamisch gestalten möchte.
    Genauso wie ich ab und an auch überlege, statt dem title ein img tag auszugeben. Aber eben pro Widget ein anderes Image.

Jetzt mitmachen!

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