Adăugare meniu Dropdown folosind "add_filter => wp_nav_menu_items" în WordPress

23 mai 2017, 20:53:47
Vizualizări: 3.98K
Voturi: 1

Proiectul meu: WordPress, WooCommerce, Bootstrap 4, bs4navwalker

Problema mea: Item dropdown personalizat adăugat prin filtrul WP. Am o navbar, 3 meniuri diferite în interior (folosind bs4navwalker), un badge pentru coș și un formular de căutare. Vezi codul.

Folosesc un filtru (add_filter('wp_nav_menu_items',) pentru a adăuga login, logout și detalii cont în navbar, totul funcționează, dar aș dori să adaug aceste itemuri într-un dropdown. Filtrul adaugă doar unul sau două itemuri în plus la meniul 'user'.

Înțeleg că acest lucru se întâmplă pentru că adaug un <li>, dar nu am reușit să înțeleg cum să adaug tot codul necesar Bootstrap pentru gestionarea dropdown-ului.

Este posibil?

COD front-page.php

<div class="nav-custom">
  <div class="container">
    

      <nav class="navbar-nav navbar-toggleable-sm navbar-inverse">

        

        <a class="navbar-brand" href="<?php echo get_home_url(); ?>">
              <img src="<?php bloginfo('template_url'); ?>/img/logo.png" class="d-inline-block align-top" alt="Logo site" title="Logo principal">
        </a>

           <?php
           wp_nav_menu([
             'menu'            => 'top',
             'theme_location'  => 'top',
             'container'       => false,
             'container_id'    => 'bs4navbar',
             'container_class' => 'collapse navbar-collapse',
             'menu_id'         => false,
             'menu_class'      => 'navbar-nav mr-auto no-md-view',
             'depth'           => 2,
             'fallback_cb'     => 'bs4navwalker::fallback',
             'walker'          => new bs4navwalker()
           ]);

          ?>
        
        <!-- Formular căutare -->
        <?php get_product_search_form(); ?>

        <!-- Meniu User -->
        <?php 
          wp_nav_menu([
           'menu'            => 'user',
           'theme_location'  => 'user',
           'container'       => false,
           //'container_id'    => 'bs4navbar',
           //'container_class' => 'collapse navbar-collapse',
           'menu_id'         => false,
           'menu_class'      => 'navbar-nav mr-auto no-md-view',
           'depth'           => 2,
           'fallback_cb'     => 'bs4navwalker::fallback',
           'walker'          => new bs4navwalker()
         ]);
        ?>

        <!-- Meniu Coș -->
        <?php 
          wp_nav_menu([
           'menu'            => 'Cart',
           'theme_location'  => 'Cart',
           'container'       => false,
           //'container_id'    => 'bs4navbar',
           //'container_class' => 'collapse navbar-collapse',
           'menu_id'         => false,
           'menu_class'      => 'navbar-nav mr-auto',
           'depth'           => 2,
           'fallback_cb'     => 'bs4navwalker::fallback',
           'walker'          => new bs4navwalker()
         ]);
        ?>
                <!-- cod pentru badge START-->
        <?php
        if ( WC()->cart->get_cart_contents_count() !== 0 ) {
        // Facem ceva interesant
          ?>  
          <span class="badge badge-pill badge-warning no-md-view">
            <a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'Vezi coșul tău de cumpărături' ); ?>"><?php echo sprintf ( _n( '%d produs', '%d produse', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?></a>
          <?php 
        }
        ?>

        </span>
    </nav>

  </div>
</div>

COD functions.php

<?php

add_filter( 'wp_nav_menu_items', 'my_account_loginout_link', 10, 2 );
/**
 * Adaugă linkuri Login/Logout WooCommerce în Meniu
 * 
 * @see https://support.woothemes.com/hc/en-us/articles/203106357-Add-Login-Logout-Links-To-The-Custom-Primary-Menu-Area
 */
function my_account_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'user') { //schimbă locația meniului pentru a se potrivi

        
        $items .= '                 
                    <li><a class="nav-link" href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Datele Mele</a></li>
                    <li><a class="nav-link" href="'. wp_logout_url( get_home_url() ) .'">Ieșire</a></li>
                    '; //schimbă linkul de logout, aici duce la 'shop', poate dorești să-l direcționezi la 'myaccount'
    }
    elseif (!is_user_logged_in()  && $args->theme_location == 'user') {//schimbă locația meniului pentru a se potrivi
        
     

        $items .= '<li><a class="nav-link" href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Autentificare</a></li>';
    }
    return $items;
}

Rezultat

După cum poți vedea, itemul a fost adăugat în meniul meu user (icon user + Autentificare), dar nu ca Dropdown.

Captură de ecran meniu WordPress

1
Comentarii

Poate doriți să verificați o strategie care implică adăugarea elementelor ca obiecte în loc de HTML: https://teleogistic.net/2013/02/11/dynamically-add-items-to-a-wp_nav_menu-list/

brianjohnhanna brianjohnhanna
23 mai 2017 21:50:20
Toate răspunsurile la întrebare 1
3

Cred că aceasta va face ceea ce dorești să realizezi. În esență, astfel poți interveni înainte ca HTML-ul să fie generat pentru a adăuga elementele tale de meniu. Nu am avut ocazia să testez acest lucru, dar ar trebui să funcționeze.

EDIT: Deoarece dorești să le ai sub un meniu derulant, trebuie să setezi menu_item_parent. Dacă elementul de meniu al utilizatorului va rămâne static, poți obține ID-ul elementului de meniu de navigare uitându-te la codul sursă pentru acel element de meniu și luând numărul care urmează după menu-item- în ID.

Exemplu de ID pentru elementul de meniu

De exemplu, în acest caz 103191 este ID-ul elementului de meniu de navigare (reține că acesta nu este același cu obiectul/post/pagina/CPT/etc la care indică un element de meniu).

function my_account_loginout_link( $items, $menu, $args ) {
    if ( $args->theme_location !== 'user' ) {
        return $items;
    }

    if ( is_user_logged_in() ) {
        $added_menu_items = array(
            array(
                'title' => 'Datele Mele', // Meus Dados
                'url' => get_permalink( wc_get_page_id( 'myaccount' ) )
            ),
            array(
                'title' => 'Ieșire', // Sair
                'url' => wp_logout_url( get_home_url() )
            )
        );
    } else {
        $added_menu_items = array(
            array(
                'title' => 'Autentificare', // Entrar
                'url' => get_permalink( wc_get_page_id( 'myaccount' ) )
            )
        );
    }

    $parent_menu_id = 103191;
    $menu_order = count( $items ) + 1;
    foreach ( $added_menu_items as $added_item ) {
        $nav_menu_item = new stdClass;
        $nav_menu_item->menu_item_parent = $parent_menu_id;
        $nav_menu_item->url = $added_item['url'];
        $nav_menu_item->title = $added_item['title'];
        $nav_menu_item->menu_order = $menu_order;
        $items[] = $nav_menu_item;
        $menu_order++;
    }
    return $items;
}
add_filter( 'wp_get_nav_menu_items', 'my_account_loginout_link', 10, 3 );

Adaptat din:

23 mai 2017 22:09:14
Comentarii

Salut omule, mersi pentru răspuns. Apreciez asta foarte mult. Dar nu a funcționat corect. Elementele au fost adăugate, dar nu în locul potrivit. Am făcut ceva greșit. După aceea, am decis să explic puțin mai mult despre proiectul meu. Poate mă poți ajuta să-l repar. Vezi modificarea. Mersi @brianjohnhanna

Állan Fidelis Toledo Állan Fidelis Toledo
24 mai 2017 14:35:11

Am adăugat o modificare, spune-mi dacă asta te ajută să rezolvi problema ta

brianjohnhanna brianjohnhanna
24 mai 2017 22:03:23

Mersi din nou, dar nu a funcționat. Prima dată, nu s-a întâmplat nimic. Comparând cu celălalt meniu cu o structură similară, deoarece nu are un Dropdown, clasa nu era acolo. Am adăugat un element doar pentru a schimba statusul, dar nu a apărut nimic. Apropo, menu_id este 106.

Állan Fidelis Toledo Állan Fidelis Toledo
25 mai 2017 05:44:53