<div> vor wp_nav_menu?

bionade

Hi Community,
ich will bei einem Theme (Divi) in ein Menü zusätzliche <div>s aufnehmen. Das Theme funktioniert so, dass das Menü über wp_nav_menu aufgerufen wird. Ich habe in der Entwicklerdoku nachgesehen, da habe ich keine Möglichkeit gefunden irgendetwas vor alle Menüpunkte oder vor dem öffnenden <ul> reinzuschreiben. Die einzige Möglicheit wäre es vor die jeweiligen Listenpunkte zu schreiben. Das nützt mir aber leider nichts.

Hat jemand eine Idee, wie man das hinkriegen kann?

Ich skizziere die Sache mal mit Code:

derzeit im Quelltext

Code

<div>
   <ul>
     <li>Menüpunkt</li>
     <li>Menüpunkt</li>
     <li>Menüpunkt</li>
     <li>Menüpunkt</li>
   </ul>
</div>

gewünscht im Quelltext

Code

<div>


          <div class="irgendwas">
                 bliblablo
          </div><!--.irgendwas-->


   <ul>
     <li>Menüpunkt</li>
     <li>Menüpunkt</li>
     <li>Menüpunkt</li>
     <li>Menüpunkt</li>
   </ul>
</div>

Alles anzeigen

Danke schon mal vorab, ich stehe gerade auf der Leitung. ;)
Raphael

Werbepost

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

Edi

Machen kannst Du so etwas beispielsweise einfach mit der Content-Eigenschaft:

http://www.w3schools.com/cssref/pr_gen_content.asp

helix

Hast du ein Child-Theme?

Dann in der entsprechenden Template-Datei, also wahrscheinlich header.php, die Ausgabe deines nav-Menüs entsprechend anpassen:

PHP

<div>
    <div class="irgendwas">
        bliblablo
    </div><!--.irgendwas-->
    <?php
        wp_nav_menu( array( 'theme_location' => 'trallalla', 'container' => '' ) );
    ?>
</div>

Durch das leergelassene Feld bei „container“ wird der Container, also das umschließende div, weggelassen und kannst du dein angepasstes mit deinem Inhalt dafür einsetzen. (Die theme_location ist ziemlich sicher bei dem Theme irgendwie auch im Aufruf des nav-Menüs mit drin.) Wichtig ist, dass du in dein umschließendes div die Klassen und evtl. ids mitnimmst, die das divi-Theme vorgibt, weil da vielleicht Styles dranhängen.
Siehe: https://developer.wordpress.org/reference/functions/wp_nav_menu/

Edi: Ach, da kann ich mir schon sinnvolle Anwendungen dafür vorstellen. Ich muss ja auch nicht jedes Element fünffach verpackt haben …

Gruß
helix

Ergänzung: Wenn du damit nicht durchsteigst, vielleicht mal posten, was im divi-Theme genau in der Ausgabe fürs nav-Menü steht, also den ganzen Befehl mit dem, was da in den runden Klammern steht.

Edi

Zitat von helix

Edi: Ach, da kann ich mir schon sinnvolle Anwendungen dafür vorstellen. Ich muss ja auch nicht jedes Element fünffach verpackt haben …

Ich habe in der Zwischenzeit meine Antwort geändert. ;-)

Nein, es muss nicht alles xfach verschachtelt werden. So war auch meine Frage gemeint, wozu das gut sein solle. Denn wahrscheinlich gäbe es eine einfachere Lösung.

bionade

Hi helix, das klingt voll logisch, ich werde mal in die Richtung arbeiten.

@ Edi: hm, weiss nicht. Ich will da drei <div>s mit jeweils ziemlich viel Code for die Navi packen. Dafür scheint mir die Lösung mit a:before nicht die richtige zu sein.

bionade

Danke an die bisherigen Antworten. Ich bin aber immer noch am Überlegen.

Die Idee von helix geht leider nicht. Ich sehe in dem Theme nicht ganz die Ursache, aber aus irgendeinem Grund ist das mobile Menü, das ich ansprechen will, von einem <ul> mit der Klasse "mobile_menu" umgeben. Und ist absolut positioniert. Ich finde aber nicht, wo der <ul> Tag herkommt. Mit dem beschriebenen Vorgang, steht das, was ich schreiben will ,nicht mehr im Zusammenhang mit dem Menü, sondern durch die absolute Positionierung ganz wo anders. Die Idee habe ich also gleich wieder fallenlassen.

Aber mit add_filter kann ich zusätzliche Menüpunkte in die function.php schreiben.
Wusste ich nicht. ;)

Das geht ca. so:

Code

add_filter('wp_nav_menu_items','zusatz1');
  function zusatz1 ($nav){
  return $nav."<li class='irgendwas'>
NEUER MENÜPUNKT
</li>";
}

Das ist einfach und wenn ich den neuen Menüpunkt nur mobil anzeigen lassen will, kann ich ihn ja am desktop über CSS ausblenden {display: none;}

Willkommen! Melden Sie sich an oder registrieren Sie sich.

<div> vor wp_nav_menu?

Jetzt mitmachen!