HTML personnalisé pour les éléments de menu

Amir

Mis à jour: juin 7, 2024

Le module d’extension WPML CMS Navigation vous permet de créer de magnifiques menus de navigation avec votre propre HTML pour les éléments de menu.

Commençons par un exemple. Supposons que vous souhaitiez ajouter des icônes et une brève description aux menus de navigation supérieurs, comme dans l’image suivante.

Les éléments des menus déroulants ont des icônes et une description

Nous allons ajouter des champs personnalisés à chacune des pages, qui contiendront les icônes et le texte de description. Ensuite, nous ferons appel à la fonction menu et lui demanderons d’utiliser ces champs dans les éléments du menu.

Page 1) Ajouter les champs personnalisés aux pages

Pour que chaque Page dispose d’une icône et d’une description uniques, nous utiliserons des champs personnalisés.

Nous devons créer une fonction qui générera le code HTML pour les éléments du menu. Par défaut, chaque élément du menu reçoit le titre de la page. Cette fonction nous permet de placer un code HTML arbitraire à l’intérieur des éléments de menu.

WPML construira toujours l’ensemble du menu, y compris l’effet déroulant, les sections et tout le reste. Cette fonction nous permet de contrôler le Contenu de chaque élément.

Voici ma fonction :

function text_for_menu($page_id, $menu_level){
  $ret = '';
  $icon = get_post_meta($page_id,'icon',true);
  $description = get_post_meta($page_id,'Description',true);
  if($menu_level==0){
    if ($icon) $ret .= '<img width="24" height="24" style="vertical-align: middle; margin:0 5px 0 5px;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
    $ret .= '<br /><span>'.$description.'</span>';
  } else {
    if ($icon) $ret .= '<img width="16" height="16" style="vertical-align: middle; margin:0 5px 0 0;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
  }
  return $ret;
}

Ce qu’il fait :

Obtenez le Contenu des champs personnalisés appelés « icône » et « Personnalisé » : get_post_meta($page_id, ‘icon’,true) ;
Vérifiez à quel niveau du menu l’élément appartient. Les éléments du menu supérieur sont « 0 » et les éléments du menu déroulant sont « 1 ».
Pour les éléments du menu supérieur, il ajoute une icône de 24×24 pixels, puis le titre de la page, et enfin la description.
Pour les éléments du menu déroulant, il ajoute une icône de 16×16 pixels, puis le titre de la page.

Étape 3) Accrocher cette fonction à WPML

Enfin, nous indiquons à WPML d’utiliser cette fonction pour créer les éléments du menu. Pour ce faire, nous ajoutons la ligne suivante au fichier functions.php :

add_filter('icl_nav_page_html', 'text_for_menu', 1, 2);

Cela permet à WordPress d’ajouter une fonction appelée text_for_menu à l’icl_nav_page_html de WPML. Il s’agit d’un filtre WP standard, vous pouvez donc l’appeler plusieurs fois et ajouter de plus en plus de champs.

Page 1) Ajouter les champs personnalisés aux pages

Étape 2) Construire la fonction du thème qui produira les éléments du menu

Étape 3) Accrocher cette fonction à WPML