WPML vi permette di creare menu di navigazione vistosi con il vostro HTML per le voci di menu.

Partiamo da un esempio. Supponete di voler aggiungere delle icone e una breve descrizione ai menu di navigazione principali come in questo esempio:

Le voci del menu a discesa hanno icone e descrizioni
Le voci del menu a discesa hanno icone e descrizioni

Ciò che faremo sarà aggiungere dei campi personalizzati a ciascuna pagina, che conterrà le icone e il testo descrittivo. Successivamente li collegheremo alla funzione menu e gli richiederemo di utilizzare questi campi nelle voci di menu.

Fase 1: aggiungere campi personalizzati alle pagine

Per far sì che ciascuna pagina disponga della sua icona e descrizione uniche, utilizzeremo i campi personalizzati.

Campi personalizzati Icona e Descrizione aggiunti a una pagina
Campi personalizzati Icona e Descrizione aggiunti a una pagina

Fase 2: creare la funzione del tema che genererà le voci di menu

Dobbiamo creare una funzione che generi il codice HTML per le voci di menu. Per impostazione predefinita, ad ogni voce di menu viene assegnato il titolo della pagina. Questa funzione ci consente di posizionare il codice HTML arbitrario all’interno delle voci di menu.

WPML creerà ancora l’intero menu, tra cui gli effetti dell’elenco a discesa, le sezioni e tutto il resto. Questa funzione ci consente di controllare i contenuti di ciascuna voce.

Ecco la mia funzione:

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;
}

Operazioni svolte:

  1. Ottiene i contenuti dei campi personalizzati chiamati “icona” e “Descrizione”: get_post_meta($page_id,’icon’,true);
  2. Verifica a quale livello di menu appartiene la voce. Le voci del menu principale sono contrassegnate dal valore “0”, mentre le voci del menu a discesa dal valore “1”.
  3. Alle voci del menu principale aggiunge un’icona di dimensioni 24×24, a cui seguirà il titolo della pagina e la descrizione.
  4. Alle voci del menu a discesa aggiunge un’icona di dimensioni 16×16, a cui seguirà il titolo della pagina.

Fase 3: collegare questa funzione a WPML

Per ultimo, indichiamo a WPML di utilizzare questa funzione per creare le voci di menu, aggiungendo questa linea a functions.php:

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

Con questa operazione si richiede a WordPress di aggiungere una funzione chiamata text_for_menu a icl_nav_page_html di WPML. È un filtro WP standard, quindi potrete chiamarlo diverse volte e aggiungere un numero sempre maggiore di campi.