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


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()
                ]);
            ?>

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

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 :)

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

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 :) )...

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