wp_nav_menu: jeden <li> einzeln benennen, für CSS

Frau_Braun

Hallo zusammen:

Ich möchte gern eine Navigation erstellen, wie in der Skizze oben liks gezeigt. Dazu muss ich jeden Link einzeln ansteuern können, um ihn mt CSS zu formatieren. wie mache ich das am besten? (Mit dem CSS komme ich klar.)

So so sieht's derzeit für ein waagrechtes Menü aus:

PHP

<?php
                    wp_nav_menu( array(
                        'theme_location' => 'left',
                        'container' => false,
                        'depth' => 0,
                        'items_wrap' => '<ul class="left">%3$s</ul>',
                        'fallback_cb' => '', // workaround to show a message to set up a menu
                        'walker' => new gk_walker( array(
                            'in_top_bar' => true,
                            'item_type' => 'li',
                            'menu_type' => 'main-menu'
                        ) ),
                    ) );
                ?>

Alles anzeigen

Hier die Skizze:

Dank und gute Nacht!

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

BvW

Wenn du ein WP Menü verwendest kann du in den Menüpunkten jedem einzelnen ein eigene CSS Klasse zuweisen. Dazu muss keine gesonderte Abfrage statttfinden.

Monika

Zitat von BvW

Wenn du ein WP Menü verwendest kann du in den Menüpunkten jedem einzelnen ein eigene CSS Klasse zuweisen. Dazu muss keine gesonderte Abfrage statttfinden.

Menü aufrufen,
Rechts, ganz oben bei deinem Namen => auf Optionen klicken, dann kannst du dies aktivieren...

formateins

Hier eine erweiterte Walker-Klasse:

Code

class description_walker extends Walker_Nav_Menu{
      function start_el(&$output, $item, $depth, $args)
      {
           global $wp_query;
           $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';




           $class_names = $value = '';




           $classes = empty( $item->classes ) ? array() : (array) $item->classes;




           $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
           $class_names = ' class="'. esc_attr( $class_names ) . '"';




[COLOR=#ff0000]           $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';[/COLOR]




           $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
           $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
           $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
           $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';




           $prepend = '<strong>';
           $append = '</strong>';
           $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';




           if($depth != 0)
           {
                     $description = $append = $prepend = "";
           }




            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
            $item_output .= $description.$args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;




            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
            }
}

Alles anzeigen

Der Walker ist nichts anderes, als der von WP. Unterschied ist hervorgehoben; zusätzlich werden die erweiterten Felder (XFN, Beschreibung, etc.) mit ausgegeben. So bekommt jeder Menüpunkt eine ID zugewiesen.

Code

wp_nav_menu( array( 'container' =>false,
 'menu_class' => 'nav',
 'echo' => true,
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'depth' => 0,
[COLOR=#ff0000] 'walker' => new description_walker())[/COLOR]
 );

Frau_Braun

Wahnsinn! Eines von beiden wird sicherlich klappen, und den Code-Snippet werde auf jeden Fall auch für später gebrauchen können. Großen Dank an beide. Wenn's nicht klappt, melde ich mich noch mal.

Frau_Braun

PS.: Damit müsste es auch gehen: http://www.w3schools.com/cssref/sel_nth-child.asp
Ich hab mal vor langer Zeit diese Lösung für ein einfache Menü verwendet: ul>li+li+li (um den 3. Link in einer Liste anzusteuern). Ist das überhaupt noch gängige Syntax?

Monika

Zitat von Frau_Braun

PS.: Damit müsste es auch gehen: http://www.w3schools.com/cssref/sel_nth-child.asp
Ich hab mal vor langer Zeit diese Lösung für ein einfache Menü verwendet: ul>li+li+li (um den 3. Link in einer Liste anzusteuern). Ist das überhaupt noch gängige Syntax?

ich nutze dafür seit sehr langer Zeit Pseudoklassen die zählen können

HTML

:nth-child
:nth-of-type

ich greife auch gerne auf jene zurück

HTML

:first-of-type
:last-of-type
:only-of-type

damit kann man nun herrlich spielen :-)

reinzulesen zahlt sich aus,
weil bei
li+li+li+li+li+li+li verliert mensch irgendwann den Überblick :-)
und ist auch für responsive (media queries) schwieriger zu handhaben

HTML

Frau_Braun

Zitat von Monika

bei li+li+li+li+li+li+li verliert mensch irgendwann den Überblick :-)
und ist auch für responsive (media queries) schwieriger zu handhaben

Danke für den Tip!

Frau_Braun

Ich komme noch mal auf die Walker-Funktion zurück. Ich habe eine Navigation, die aus flexiblen (sich der Textweite anpassenden) Kreisen besteht. Im HTML-Test funktioniert das alles (bis auf ein paar kleine Schönheitsfehler).

So ist der Code:

HTML:

HTML

<nav class="ballnavi" role="navigation">
    <ul>
        <li class="ball">
            <div class="in">Home</div>
        </li>
        <li class="ball">
            <div class="in">Link</div>
        </li>
        <li class="ball">
            <div class="in">Linktext</div>
        </li>
        <li class="ball">
            <div class="in">Linktext mit Umbruch</div>
        </li>
        <li class="ball">
            <div class="in">Nochnlink</div>    
        </li>
    </ul>
</nav>

Alles anzeigen

CSS:

Code

.ball{
    color: #fff;
    position:relative;
    display:inline-block;
    margin: 10px;
    max-width:180px;
    text-align: center;
    -moz-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }
    
.in{
    padding:50% 20%;
    margin-top:-0.6em;
    
}
.in:after{
    content:'';
    position:absolute;
    top:0; left:0;
    width:110%;
    padding-bottom:110%;
    background-color:#D95353;
    border-radius:50%;
    z-index:-1;
}

Alles anzeigen

Wie müsste denn dies in der Funktion aussehen, statt
[COLOR=#ff0000]"$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';" [/COLOR]?[COLOR=#ff0000]
[/COLOR]
Die ID wird eigentlich sowieso schon ausgegeben.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

wp_nav_menu: jeden <li> einzeln benennen, für CSS

Jetzt mitmachen!