Wordpress depuis une maquette HTML - Le menu

Par Tom Delorme, il y a 11 ans

PHP Wordpress

Bonjour à toutes et tous,
Je suis la formation "Créer un site Wordpress depuis une maquette HTML" dsipo ici http://www.grafikart.fr/tutoriels/wordpress/wordpress-creer-theme-156 et je rencontre un problème à l'étape de la création du menu.
Je m'explique :
pour intégrer le menu dans son template, on place se bout de code ...

<?php wp_nav_menu(array( 'theme_location' => 'nav' )); ?>

... qui, d'après ce que l'on voit sur le tuto, récupère les class du template pour avoire le bon affichage.
PAS CHEZ MOI :/
En gros, en html, ma structure de menu est la suivante :

<ul class="nav navbar-nav"> <?php wp_nav_menu(array( 'theme_location' => 'nav' )); ?> <li class="dropdown"><a href="index.html" class="dropdown-toggle js-activated">Home</a> <ul class="dropdown-menu"> <li><a href="index.html">Home Layout 1</a></li> <li><a href="index2.html">Home Layout 2</a></li> <li><a href="index3.html">Home Layout 3</a></li> <li><a href="index4.html">Home Layout 4</a></li> <li><a href="index5.html">Home Layout 5</a></li> </ul> </li> etc etc ....

l'inclusion du menu wordpress renvoi ce code html :

<div class="menu-navigation-container"> <ul id="menu-navigation" class="menu"> <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://www.tomdelorme.photography/wp/?page_id=2">Page exemple</a></li> <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-31"><a href="http://www.tomdelorme.photography/wp/?p=9">WebDevLOL</a></li> <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-32"><a href="http://www.tomdelorme.photography/wp/?p=4">photo</a></li> </ul> </div>

Franchement je vous avoue que je bloque vraiment et comprend pas le pourquoi du comment ...
Vous idées et suggestions sont vraiment les bien venues ...
Voir exemple en production ici : http://www.tomdelorme.photography/wp/

6 réponses

amethyste, il y a 11 ans

Tu vas devoir modifier la manière(Walker_Nav_Menu) dont wordpress retourne le menu :

dans le fichier tontheme/functions.php

require_once('inc/MenuWalker.php');

dans tontheme/inc/MenuWalker.php :

<?php class MenuWalker extends Walker_Nav_Menu{ public function start_el(&$output, $item, $depth = 0, $args = [], $id = 0) { global $wp_query; $queried_object_id = (int) $wp_query->queried_object_id; $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 ) .'"' : ''; if($queried_object_id == $item->object_id) { $attributes .= 'class="active"'; } $item_output = '<a'. $attributes .'>'; $item_output .= apply_filters( 'the_title', $item->title, $item->ID ); $item_output .= '</a>'; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } public function end_el(&$output, $item, $depth=0, $args=[]) { $output .= ""; } }

et dans tontheme/header.php

<?php wp_nav_menu([ 'menu_class' => 'nav-menu', 'theme_location' => 'nav', 'container' => false, 'items_wrap' => '%3$s', 'walker' => new MenuWalker() ]); ?>
Tom Delorme, il y a 11 ans

Merci amethyste pour ta réactivité, je test de suite et te fait un retour :)

Tom Delorme, il y a 11 ans

Bon je sais pas si c'est normal mais j'ai du modifier ton code comme ceci pour que ca fonctionne :

<?php class MenuWalker extends Walker_Nav_Menu{ public function start_el(&$output, $item, $depth = 0, $args = [], $id = 0) { global $wp_query; $queried_object_id = (int) $wp_query->queried_object_id; $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 ) .'"' : ''; if($queried_object_id == $item->object_id) { $attributes .= 'class="dropdown-toggle js-activated"'; // passer de class "active" a "dropdown-toggle js-activated" } $item_output = '<li class="dropdown"><a'. $attributes .'>'; // Rajouter les balises <li class="dropdown"> avec class LOL $item_output .= apply_filters( 'the_title', $item->title, $item->ID ); $item_output .= '</a></li>'; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } public function end_el(&$output, $item, $depth=0, $args=[]) { $output .= ""; } }

Mon code du header.php :

<nav class="collapse navbar-collapse pull-right"> <ul class="nav navbar-nav"> <?php wp_nav_menu([ 'menu_class' => 'nav-menu', 'theme_location' => 'nav', 'container' => false, 'items_wrap' => '%3$s', 'walker' => new MenuWalker() ]); ?></a> </ul> <ul class="social pull-right"> <li><a href="#"><i class="icon-s-instagram"></i></a></li> <li><a href="#"><i class="icon-s-flickr"></i></a></li> <li><a href="#"><i class="icon-s-twitter"></i></a></li> <li><a href="#"><i class="icon-s-facebook"></i></a></li> </ul> </nav>

Le résultat à l'air de fonctionner maintenant, si tu as le temps de me faire un retour sur mes modif pour me dire si c'est " codifiquement" correct et viable pour un futur site en prod, je t'en remercie :)

amethyste, il y a 11 ans

Oui tu as adapté à la structure de ton menu, c'est impec :)

Tom Delorme, il y a 11 ans

Cool merci beaucoup, la route va être longue pour adapter mon template, je ne serais pas contre un coup de main en puissance avec en contre partie un énorme remerciment et de la pub pour mon sauveur sur mes sites qui seront mis en place ... le temps me tarde d'avoir mon outil pour faire , finir ma com et me lancer correctement ... bref, à bon entendeur ;) contactez-moi si intéressez (dsl à GrafikArt, c'est pas que je veux pas, je ferais les tuto quoi qu'il en soit mais le temps me presse, en esperant que tu m'en voudra pas :) )...

Tom Delorme, il y a 11 ans

En fait, je suis novice dans wordpress, je voudrais juste avoir les bonnes clés ou la bonne méthodologie pour mettre en place mon site ... le plus rapidement possible car j'ai perdu beaucoup de temps à essayer de faire des tuto (qui date un peu ...) , j'ai l'impression de faire du sur place lol