web-dev-qa-db-fra.com

Walker_Nav_Menu: place un code personnalisé entre un <li> particulier

J'essaie d'ajouter mon logo au milieu de ma barre de navigation et, en regardant la classe de navigation de nav, je ne pouvais pas imaginer quelle serait la meilleure façon de procéder.

Donc ma question est essentiellement comment je fais ça. la méthode Walker_Nav_Menu () start_el () semble ne construire qu'un seul li, alors où est-il itéré sur tous et écrit-il dans un fichier.

menuswalker
3
Pierre Smith

Vous devez créer votre propre menu de randonneur (je suppose que vous le savez déjà), et la meilleure façon, à mon avis, est de remplacer la fonction qui ends chaque élément de menu qui est end_el:

class logo_in_middle_Menu_Walker extends Walker_Nav_Menu {

    public $menu_location = 'primary';

    function __construct($menu_location_var) {
        // parent class doesnt have a constructor so no parent::__construct();
        $this->menu_location = $menu_location_var;
    }

    public function end_el(&$output, $item, $depth = 0, $args = array()) {
        $locations = get_nav_menu_locations(); //get all menu locations
        $menu = wp_get_nav_menu_object($locations[$this->menu_location]); //one menu for one location so lets get the menu of this location
        $menu_items = wp_get_nav_menu_items($menu->term_id);

        $top_lvl_menu_items_count = 0; //we need this to work with a menu with children too so we dont use simply $menu->count here
        foreach ($menu_items as $menu_item) {
            if ($menu_item->menu_item_parent == "0") {
                $top_lvl_menu_items_count++;
            }
        }

        $total_menu_items = $top_lvl_menu_items_count;

        $item_position = $item->menu_order;

        $position_to_have_the_logo = ceil($total_menu_items / 2);

        if ($item_position == $position_to_have_the_logo && $item->menu_item_parent == "0") { //make sure we output for top level only
            $output .= "</li>\n<img src='PATH_TO_YOUR_LOGO' alt='' />"; //here we add the logo
        } else {
            $output .= "</li>\n";
        }
    }
}

je suppose que si le menu est composé d'un nombre impair d'éléments 5, le logo sera placé après le troisième élément, ce qui ne concerne que les éléments supérieurs.

vous devez l'utiliser comme ceci dans l'emplacement du menu:

<?php
    wp_nav_menu(array(
            'theme_location' => 'footer',
            "walker" => new logo_in_middle_Menu_Walker('footer'),
    ));
?>

vous devez fournir le nom de l'emplacement du thème.

Ici avec 4 articles:

 enter image description here 

Ici avec 5:

 enter image description here 

1
David Lee

Le meilleur moyen d’atteindre la fonctionnalité désirée est d’ajouter un nouvel élément de menu pour le logo en accédant au Apparence > Menus , et de définir la classe de l’élément de menu surlogo.

Pour activer la classe CSS personnalisée dans le menu, cliquez sur le Options d'écran puis cochez la case CSS Classes .

Supposons que vous avez un nombre prédéterminé de li éléments de 5.

<ul>
  <li class="logo">LOGO</li>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Définissez ensuite l'attribut d'affichage css de l'élément ul principal à flex:

ul {
  display: flex
}

Et le numéro d'ordre li comme suit:

ul li { order: 4; } 
ul li:nth-of-type(2) { order: 1; } /* For Item 1 */
ul li:nth-of-type(3) { order: 2; } /* For Item 2 */

Puis pour la classe logo:

ul li.logo {
  order: 3;
}

Vous pouvez en apprendre davantage sur la propriété order de la Présentation de la boîte flexible

0
Den Isahac