Avatar billede jdjensen Juniormester
14. februar 2012 - 19:33 Der er 1 kommentar

Wordpress Menu med "wp_nav_menu" tagget

Hej,

Vil gerne lave en menu jeg kan styre inde fra Wordpress administrationen hvilket skulle kunne gøres med wp_nav_menu tagget.

Som udgangspunkt laver tagget en kodeblok der er fuld af classes og div'er som jeg ikke skal bruge. Eksempel:

<ul id="menu-top-nav" class="menu">
<li id="menu-item-72" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-58 current_page_item menu-item-72"><a href="about-us">About</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-59 current_page_item menu-item-73"><a href="contact-us">Contact</a></li>
<li id="menu-item-74" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-60 current_page_item menu-item-74"><a href="services">Other</a></li>
</ul>

Er der en der kan hjælpe med et par filters i min function.php fil der gør følgende:
- Fjerner alle de standard DIV'er og ID'er som wp_nav_menu opretter fra start
- Tilføjer class="m0" på alle de <li>'er som ikke er aktive

Klassen m1 skal vises på det aktive <li> hvilket jeg allerede har løst med følgende filter:

add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 );
function additional_active_item_classes($classes = array(), $menu_item = false){

    if(in_array('current-menu-item', $menu_item->classes)){
        $classes[] = 'm1';
    }
    return $classes;
}

-----------------------------------------

Det jeg vil opnå er en ren blok der ser således ud (hvor m1 er den aktive class):

<div id="menu">
<ul>
<li class="m1"><a href="./link1/">Link1</a></li>
<li class="m0"><a href="./link2/">Side2</a></li>
<li class="m0"><a href="./link3/">Side3</a></li>
<li class="m0"><a href="./link4/">Side4</a></li>
<li class="m0"><a href="./link5/">Side5</a></li>
</ul>
</div>

Er der en der kan hjælpe med de 2 filtre jeg har problemer med?
- Fjerner alle de standard DIV'er og ID'er som wp_nav_menu opretter fra start
- Tilføjer class="m0" på alle de <li>'er som ikke er aktive

:-)
Avatar billede DeeDawg Nybegynder
15. februar 2012 - 03:16 #1
Dette er ikke noget der kan løses med et eller flere WordPress filtre.

Hvorfor har du i det hele taget i sinde at fjerne det hele? Du burde egentlig bare lave dit stylesheet efter denne opbygning. Så det har en standard styling for alle elementer udover dem der har current-menu-item, som klasse.

Men hvis du er opsat på at have dine egne klasser med, kan du jo evt. tilføje noget til din funktion

<?php
    add_filter(
        "nav_menu_css_class",
        function($classes = array(), $menu_item = false){
            $classes[] = (in_array("current-menu-item", $menu_item->classes) ? "m1" : "m0");
            return $classes;
        }, 10, 2
    );
?>

Men kan du ikke godt se, at det er lidt ostemad med ost på? Du benytter allerede current-menu-item, men det er kun for at kunne tilføje endnu en klasse, der har samme formål.

Det du vil, er dog ikke umuligt. Dog er det lidt avanceret, så du bør seriøst overveje, hvorfor du vil det her, da det egentlig er fuldkommen ligemeget.

Da vi er så heldige at WordPress er objekt orienteret, kan vi uden for meget besvær overskrive dets funktionalitet. WordPress har en såkaldt walker, til at opbygge menuerne der bliver kaldt igennem wp_nav_menu(). Den kan du finde under /wp-includes/nav-menu-template.php. Det er denne walker du skal have erstattet med din egen.

Det kan du finde en guide til her. :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester