Ajouter un balisage personnalisé au menu Wordpress

Question

Je recherche depuis longtemps une solution à ce problème, mais je n'ai rien trouvé alors vous serez mon dernier espoir! J'essaie de créer un nouveau menu CSS3 sur un site Wordpress 3 sur lequel je travaille. Je devrais étendre le marquage par défaut du menu mais je ne sais pas comment.

C'est l'étiquette que je utilise dans le thème de la sortie du menu au moment:

<?php wp_nav_menu(array('container_class' => 'menu-header', 'theme_location' => 'primary')); ?> 

Au moment de mon balisage de menu par défaut ressemble à ceci:

<div class="menu-header"> 
<ul id="menu-main-menu" class="menu"> 
    <li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"><a href="#">Top Level Menu Item</a></li> 
    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="#">Top Level Menu Item</a> 
    <ul class="sub-menu"> 
    <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"><a href="#">Sub Level Menu Item</a></li> 
    </ul> 
    </li> 
    <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"><a href="#">Top Level Menu Item</a></li> 
    <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"><a href="#">Top Level Menu Item</a> 
    <ul class="sub-menu"> 
    <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"><a href="#">Sub Level Menu Item</a></li> 
    <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"><a href="#">Sub Level Menu Item</a></li> 
    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"><a href="#">Sub Level Menu Item</a></li> 
    </ul> 
    </li> 
    <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"><a href="#">Top Level Menu Item</a></li> 
</ul> 
</div> 

Je dois ajouter 2 dIV autour de chaque <ul class="sub-menu">...</ul> donc je aurais besoin la marge pour ressembler à ceci:

<div class="menu-header"> 
<ul id="menu-main-menu" class="menu"> 
    <li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"><a href="#">Top Level Menu Item</a></li> 
    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="#">Top Level Menu Item</a> 
    <div class="sub-menu-container"> 
    <div class="submenu"> 
    <ul class="sub-menu"> 
     <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"><a href="#">Sub Level Menu Item</a></li> 
    </ul> 
    </div> 
    </div> 
    </li> 
    <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"><a href="#">Top Level Menu Item</a></li> 
    <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"><a href="#">Top Level Menu Item</a> 
    <div class="sub-menu-container"> 
    <div class="submenu"> 
    <ul class="sub-menu"> 
     <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"><a href="#">Sub Level Menu Item</a></li> 
     <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"><a href="#">Sub Level Menu Item</a></li> 
     <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"><a href="#">Sub Level Menu Item</a></li> 
    </ul> 
    </div> 
    </div> 
    </li> 
    <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"><a href="#">Top Level Menu Item</a></li> 
</ul> 
</div> 

Est-ce que quelqu'un sait comment faire cela s'il vous plaît?

Answer 1

Vous ne savez pas exactement de quoi vous avez besoin, mais voici quelques références sur la création d'un menu WP personnalisé.

Dans la base de données, regardez dans la table wp_posts. Voici où se trouvent les éléments du menu de navigation.

Pour CSS personnalisé, vous pouvez utiliser l'éditeur CSS. Il peut être trouvé sous Modifier CSS dans l'onglet Présentation de votre tableau de bord. Il se compose d'une zone vide pour la frappe et de deux boutons. Vous pouvez effectuer des changements en direct et voir le résultat instantanément.

Pour utiliser un menu de navigation personnalisé à la place du menu par défaut de votre thème, la prise en charge de cette fonction doit être enregistrée dans le fichier functions.php du thème du thème.

Voir: http://codex.wordpress.org/Navigation_Menus ET http://codex.wordpress.org/Function_Reference/register_nav_menus

Answer 2

Vous pouvez simplement utiliser une fonction de jQuery, comme

$('div.submenu').wrap('<div class="sub-menu-container" />'); 

Ne pas oublier d'ajouter les .js appropriés jQuery à votre tête.

Vous devriez probablement utiliser une fonction .ready() également.

Answer 3

Le balisage de menu est généré dans wp-includes/classes.php avec Walker classe, en particulier class Walker_Page extends Walker {

Si vous regardez à travers les fonctions de la classe, vous pouvez voir où est généré le balisage réel.

http://codex.wordpress.org/Function_Reference/Walker_Class

Answer 4

Cela peut aider:

Combiner wp_nav_menu() avec une marchette classe

http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

Combine wp_get_nav_menu_items() personnalisé avec la fonction clean_custom_menus()

http://digwp.com/2011/11/html-formatting-custom-menus/

Answer 5

Selon la documentation Wordpress http://codex.wordpress.org/Function_Reference/wp_nav_menu#Example, il suffit d'ajouter un marcheur au menu:

<?php wp_nav_menu(array(
    'container_class'=>'menu-header', 
    'theme_location'=>'primary', 
    'walker'=>new my_Walker_Menu_List() //This is the trick! 
)); ?> 

Et puis dans le fichier functions.php de votre thème ajoutez le code suivant:

class my_Walker_MegaMenu extends Walker_Nav_Menu{ 
    /** 
    * @see Walker::start_lvl() 
    * @since 3.0.0 
    * 
    * @param string $output Passed by reference. Used to append additional content. 
    * @param int $depth Depth of page. Used for padding. 
    */ 
    function start_lvl(&$output, $depth = 0, $args = array()) { 
     $indent = str_repeat("\t", $depth); 
     //$output .= "\n$indent<ul class=\"sub-menu\">\n"; //this is default output; 

     //if($depth==0) //'0'==>1st-sub-level; '1'=2nd-sub-level; .... 
     $output .= "\n$indent<div class=\"sub-menu-container\"><div class=\"submenu\"><ul class=\"sub-menu\">\n"; 
    } 

    /** 
    * @see Walker::end_lvl() 
    * @since 3.0.0 
    * 
    * @param string $output Passed by reference. Used to append additional content. 
    * @param int $depth Depth of page. Used for padding. 
    */ 
    function end_lvl(&$output, $depth = 0, $args = array()) { 
     $indent = str_repeat("\t", $depth); 
     //$output .= "$indent</ul>\n"; //this is default output; 

     //if($depth==0) //'0'==>1st-sub-level; '1'=2nd-sub-level; .... 
     $output .= "$indent</ul></div></div>\n"; 
    } 
} 

conditionnellement, nous pouvons vérifier la valeur $ profondeur pour afficher un balisage personnalisé uniquement pour le (s) sous-niveau (s) souhaité (s);

Pour plus d'informations, vous pouvez voir: http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code