home iconHome / wordpress / wp_nav_menu (), come cambiare la classe <li>?

wp_nav_menu (), come cambiare la classe <li>?

    • vote up icon 17 vote down icon
    • translation icon
    • view icon70949 calendar icon2011-12-26

    Sto creando unmenuperilmio sito web. La statica ha questo aspetto: 

     <nav>
  <ul id="menu">
        <li class="item_1"><a href="#">Item 1</a></li>
        <li class="item_2"><a href="#">Item 2</a></li>
        <li class="item_3"><a href="#">Item 3</a></li>
        <li class="item_4"><a href="#">Item 4</a></li>
        <li class="item_5"><a href="#">Item 5</a></li>
        <li class="item_6"><a href="#">Item 6</a></li>
        <li class="item_7"><a href="#">Item 7</a></li>
        <li class="item_8"><a href="#">Item 8</a></li>
    </ul>

    Sono riuscito a capire comepersonalizzareiltag <ul>,pereliminareiltag <div> automatico. Ma ora,vogliopersonalizzareiltag <li>perpoter assegnare diversinomi di classper controllare un comportamento specificotramite CSS. Quando uso wp_nav_menu() l'output èil seguente: 

         <ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
    </ul>

    Desideroeliminare l 'idnei tag <li>e modificare la classper riflettereilnome dellapagina Voglio collegarmi a. Fondamentalmente voglio restituire la stessa cosa delprimoframmento di codicein questopost.

    Ilmotivoper cui lofaccio è che utilizzoimmaginipersonalizzate controllate dalmio CSSinvece ditestonormale.

    Èpossibile? Quale strategia dovrei usareper superare questoproblema?

    theme-development menus navigation
    • Quipuoi aggiungere una classe diversain ul> li> a https://sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links/

4  risposta

  • voti
    • accept answer icon
    • translation icon
    • calendar icon 2011-12-26

    Utilizza un deambulatorepersonalizzato ,rimuovitutto ciò chenonti serveeaggiungi letue classi.Ecco un deambulatore che utilizzoper ottenere unelenco con unmarkuppulito: T5_Nav_Menu_Walker_Simple .

    Puoi anchefiltrare 'nav_menu_css_class' o 'wp_nav_menu_items'.Ma una classe di camminatori èpiùfacile da capiree da controllare secondome.

    • Grazie Toscho,ho scoperto chenellanuova versione di Wordpress (3.3)possiamo aggiungere una classepersonalizzataper ogni voce dimenu che risolveilmioproblema.Hoprovato lo script chemi hai suggerito (T5_Nav_Menu_Walker_Simple) che rimuovetutto da "
    • ",comepossiamo controllare qualielementi vogliamomantenere?
  • @Christian Puoi cambiareil deambulatore di cui haibisogno,è solo unesempiomolto semplice.Per vedere qualiinformazioni sono disponibili,aggiungi un `print_r ($item,TRUE)` a ogni `li`.Quindi decidi cosafarne.:)
  • Questomi haindirizzatonellagiusta direzione,ciò di cui avevobisognoerail ** wp_nav_menu **,**ma ** avevobisogno di cambiareilparametro 'container_class',per lavorareperilmio caso d'usoparticolare,in cuiin alcune condizioni ho scambiatoilmainmenuper un altro,manecessitava che le classifossero coerentiper css.
    • translation icon
    • calendar icon 2012-09-22

    vai aimenu aspetto> - selezionailmenu desiderato - vai a "opzioni schermo"in alto a destra,seleziona "classi css" - aggiungi una classe a ciascuna voce dimenu ..

    • translation icon
    • calendar icon 2019-04-22

    Impostazione della classe <li> su nav-link,come richiesto dabootstrap 4.3: 

     function add_menu_link_class($atts, $item, $args)
{
    $atts['class'] = 'nav-link';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

    Puoi anche annullare l'impostazione dell'attributo idin quell'array.

    • translation icon
    • calendar icon 2013-06-13

    Comeindicatonell'ultimoposter,puoi aggiungere letue classitramitei menu aspetto> con le classi CSS spuntatenelle opzioni dello schermo.Nel deambulatore,puoi accedere a ciò a cuientritramite: 

     $item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';

    L'hopersino usatoper aggiungereimmaginipre-nominatenelmenu: unpo 'complicato,mafunziona. 

     <img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">