Comment ajouter votre propre code HTML pour wp_nav_menu?

La façon WordPress va à travers les pages de menu pour afficher les éléments, à l'aide d'un déambulateur objet. Dans ce cas, le spécifique de la classe de cet objet est appelé Walker_Nav_Menu. Vous pouvez le trouver dans wp-includes\nav-menu-template.php.

La Walker_Nav_Menu est assez simple de la classe. Vous êtes en mesure de voir, comment les liens et la structure des menus est construite. Les fonctions start_el et end_el sont utilisés pour construire les éléments de menu. Fonctions start_lvl et end_lvl sont pour la nidification des menus. Dans cette approche, nous allons être en utilisant principalement les start_el et end_el.

Dans votre functions.php créer une classe, d'étendre Walker_Nav_Menu avec assez similaires, les méthodes de la classe parent:

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    //Copy all the start_el code from source, and modify
  }

  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    //Copy all the end_el code from source, and modify
  }
}

Dans ces fonctions, le $item est votre option de menu, qui vous permet de requête de contenu supplémentaire en fonction du courant d'option de menu, si vous le souhaitez. Notez que je ne comprend pas start_lvl et end_lvl, mais qui n'a pas d'importance, puisque votre classe héritera automatiquement les classes parent méthodes, si ils ne sont pas écrasés.

Puis, dans les fichiers de votre thème, vous pouvez appeler wp_nav_menu comme ceci:

wp_nav_menu(array(
  'theme_location' => 'main',
  'container' => false,
  'menu_id' => 'nav',
  'depth' => 1,
  //This one is the important part:
  'walker' => new Custom_Walker_Nav_Menu
));

WordPress utilisera votre classe personnalisée et fonctions, de sorte que vous pouvez modifier ce code est de sortie.

OriginalL'auteur martinczerwi