Pular a navegação
Atualizado
junho 7, 2024

WPML Navegação CMS permite que você crie belos menus de navegação com seu próprio HTML para itens de menu.

Vamos começar com um exemplo. Suponha que você queira adicionar ícones e uma breve descrição aos menus de navegação superior, como na imagem a seguir.

Os itens nos menus suspensos têm ícones e descrição
Os itens dos menus suspensos têm ícones e descrição

O que faremos é adicionar campos personalizados a cada uma das páginas, que conterão os ícones e o texto da descrição. Em seguida, vamos nos conectar à função de menu e dizer a ela para usar esses campos nos itens de menu.

Etapa 1) Adicione os campos personalizados às páginas

Para que cada página tenha seu próprio ícone e descrição exclusivos, usaremos campos personalizados.

Campos personalizados de ícone e descrição adicionados a uma página
Campos personalizados de ícone e descrição adicionados a uma página

Etapa 2) Crie a função de tema que produzirá os itens de menu

Precisamos criar uma função que gere o HTML para os itens de menu. Por padrão, cada item do menu recebe o título da página. Essa função permitirá que você coloque HTML arbitrário dentro dos itens de menu.

WPML ainda criará o menu inteiro, incluindo o efeito suspenso, as seções e tudo o mais. Essa função nos permite controlar o conteúdo de cada item.

Aqui está minha função:

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

O que você faz:

  1. Obtenha o conteúdo dos campos personalizados chamados “icon” e “Description”: get_post_meta($page_id,’icon’,true);
  2. Verifique a qual nível de menu o item pertence. Os itens do menu superior são “0” e os itens do menu suspenso são “1”.
  3. Para os itens do menu superior, ele adiciona um ícone de 24×24 pixels, depois o título da página e, em seguida, a descrição.
  4. Para itens de menu suspenso, ele adiciona um ícone de 16×16 pixels e, em seguida, o título da página.

Etapa 3) Conecte essa função ao WPML

Por último, dizemos ao WPML para usar essa função a fim de criar os itens de menu. Para isso, você deve adicionar a seguinte linha ao arquivo functions.php :

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

O que isso faz é instruir WordPress a adicionar uma função chamada text_for_menu ao icl_nav_page_html do WPML. É um filtro padrão do WP, portanto você pode chamá-lo várias vezes e adicionar mais e mais campos.