[wp_list_pages](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_pages\/)()<\/code>e arquivos [wp_list_categories](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_categories\/)()<\/code>. Todos eles estendem uma Walker<\/code>classe geral. Vamos estender o Walker_Nav_Menu<\/code>que \u00e9 usado para menus no WordPress.<\/p>\nComo estendemos outra classe, precisamos apenas adicionar as fun\u00e7\u00f5es que desejamos substituir. Se uma fun\u00e7\u00e3o n\u00e3o existir em nossa classe, o WordPress executar\u00e1 a fun\u00e7\u00e3o da classe pai’ (a classe que estendemos).<\/p>\n
Prepara\u00e7\u00e3o<\/h2>\n
Voc\u00ea pode adicionar sua classe walker em seus arquivos de plugin, temas function.php<\/code>ou qualquer arquivo PHP inclu\u00eddo por functions.php<\/code>(para um c\u00f3digo mais limpo). Voc\u00ea come\u00e7a definindo sua classe por um nome de sua escolha (certifique-se de que o nome da classe seja \u00fanico, e isso inclui poss\u00edveis nomes de classe no n\u00facleo do WordPress!) estendendo Walker_Nav_Menu<\/code>:<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n}<\/code><\/pre>\nPara dizer ao WordPress para usar nosso walker, definimos isso em nossas [wp_nav_menu](https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/)()<\/code>chamadas. Esta fun\u00e7\u00e3o \u00e9 respons\u00e1vel pela sa\u00edda de um menu e voc\u00ea provavelmente tem pelo menos um em seu tema para o menu principal.<\/p>\nNo array de argumentos para wp_nav_menu()<\/code>voc\u00ea adiciona um novo elemento com a chave ‘walker’ e cria uma nova inst\u00e2ncia de sua classe walker assim:<\/p>\nwp_nav_menu([\n 'theme_location' => 'primary',\n 'menu_class' => 'main-menu',\n 'container' => 'nav',\n 'container_class' => 'header__main-nav',\n 'walker' => new AWP_Menu_Walker()\n]);<\/code><\/pre>\nSe voc\u00ea atualizar seu site, n\u00e3o dever\u00e1 ver nenhuma altera\u00e7\u00e3o. Isso ocorre porque nossa classe n\u00e3o substitui nenhuma das fun\u00e7\u00f5es do pai e, portanto, o WordPress simplesmente executa as fun\u00e7\u00f5es normais do menu walker ao gerar o menu, assim como antes dissemos a ele para usar nosso walker.<\/p>\n
Vis\u00e3o geral das fun\u00e7\u00f5es que podemos substituir emWalker_Nav_Menu<\/code><\/h2>\nA seguir est\u00e3o as fun\u00e7\u00f5es que voc\u00ea pode adicionar \u00e0 sua classe walker personalizada para substituir as fun\u00e7\u00f5es da classe parental Walker_Nav_Menu<\/code>:<\/p>\nAs quatro primeiras s\u00e3o fun\u00e7\u00f5es que s\u00e3o simplesmente respons\u00e1veis \u200b\u200bpela sa\u00edda, e todas elas exigem que voc\u00ea anexe a uma string \u2013 a primeira vari\u00e1vel de par\u00e2metro. \u00c9 importante saber que voc\u00ea n\u00e3o faz echo<\/code>nada aqui, tudo deve ser constru\u00eddo como uma corda.<\/p>\nstart_lvl<\/h3>\n
A fun\u00e7\u00e3o start_lvl<\/code>\u00e9 respons\u00e1vel pela sa\u00edda do HTML para o in\u00edcio de um novo n\u00edvel. Em suma, deve produzir o arquivo <ul><\/code>.<\/p>\nfunction start_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nO primeiro par\u00e2metro, $output<\/code>\u2013 passado por refer\u00eancia, \u00e9 a string \u00e0 qual voc\u00ea anexar\u00e1 sua sa\u00edda. $depth<\/code>\u00e9 um n\u00famero inteiro sinalizando em que n\u00edvel voc\u00ea est\u00e1; 0 para n\u00edvel superior, 1 para filho direto do n\u00edvel superior e assim por diante. $args<\/code>\u00e9 um objeto de todos os argumentos fornecidos em wp_nav_menu()<\/code>.<\/p>\nend_lvl<\/h3>\n
A end_lvl<\/code>fun\u00e7\u00e3o \u00e9 respons\u00e1vel pela sa\u00edda do HTML para o final de um n\u00edvel. Isso geralmente \u00e9 apenas o fechamento <\/ul><\/code>.<\/p>\nfunction end_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nOs par\u00e2metros s\u00e3o exatamente os mesmos start_lvl<\/code>acima.<\/p>\nstart_el<\/h3>\n
Esta fun\u00e7\u00e3o \u00e9 respons\u00e1vel pela sa\u00edda do HTML de cada elemento. Em suma, deve gerar o in\u00edcio <li><\/code>e a <a><\/code>tag com o t\u00edtulo do link dentro.<\/p>\nfunction start_el(&$output, $item, $depth=0, $args=null, $id=0) { }<\/code><\/pre>\nO primeiro argumento, $output<\/code>, \u00e9 como de costume a string \u00e0 qual voc\u00ea anexar\u00e1 a sa\u00edda. O segundo argumento, $item<\/code>, \u00e9 o objeto de item de menu \u2013 e \u00e9 aqui que voc\u00ea buscar\u00e1 a maioria dos dados para a sa\u00edda do item de menu. Se o link do menu for um item de menu de postagem, voc\u00ea obter\u00e1 o objeto de postagem aqui. Independentemente do tipo de menu, voc\u00ea tamb\u00e9m ter\u00e1 alguns elementos \u00fateis adicionais; como classes<\/code>, url<\/code>, title<\/code>e description<\/code>.<\/p>\nO terceiro argumento, $depth<\/code>, \u00e9 um inteiro informando em que n\u00edvel estamos. O n\u00edvel 0 \u00e9 o n\u00edvel superior, 1 \u00e9 filho direto do n\u00edvel superior e assim por diante. O quarto argumento, $args<\/code>, \u00e9 um objeto de todos os argumentos fornecidos a wp_nav_menu()<\/code>. O quinto par\u00e2metro, $id<\/code>, \u00e9 o ID do item de menu atual.<\/p>\nend_el<\/h3>\n
A end_el<\/code>fun\u00e7\u00e3o \u00e9 respons\u00e1vel por emitir o fechamento de um elemento. Normalmente, seria apenas a sa\u00edda da <\/li><\/code>tag.<\/p>\nfunction end_el(&$output, $item, $depth=0, $args=null) { }<\/code><\/pre>\nOs argumentos para end_el<\/code>s\u00e3o os mesmos start_el<\/code>acima, exceto que a fun\u00e7\u00e3o n\u00e3o possui o quinto par\u00e2metro, $id<\/code>.<\/p>\ndisplay_element<\/h3>\n
A fun\u00e7\u00e3o display_element<\/code>\u00e9 uma fun\u00e7\u00e3o herdada da Walker<\/code>classe geral e \u00e9 a fun\u00e7\u00e3o respons\u00e1vel pela travessia. Esta \u00e9 a fun\u00e7\u00e3o que chama todas as fun\u00e7\u00f5es acima por sua vez.<\/p>\nEstou incluindo isso aqui porque em alguns casos, por exemplo, se voc\u00ea quiser evitar atravessar uma ramifica\u00e7\u00e3o inteira, voc\u00ea usaria essa fun\u00e7\u00e3o para isso.<\/p>\n
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }<\/code><\/pre>\nO primeiro argumento, $element<\/code>, \u00e9 o objeto de item de menu \u2013 isso \u00e9 o que \u00e9 passado como $item<\/code>nas fun\u00e7\u00f5es acima. O segundo argumento, $children_elements<\/code>\u2013 passado por refer\u00eancia, cont\u00e9m todos os elementos filho que esta fun\u00e7\u00e3o percorrer\u00e1. $max_depth<\/code>, o terceiro argumento, \u00e9 um n\u00famero inteiro que sinaliza a profundidade que devemos percorrer, e o quarto argumento, $depth<\/code>, \u00e9 a profundidade em que estamos atualmente. O quinto argumento, $args<\/code>, s\u00e3o os argumentos passados \u200b\u200bpara a fun\u00e7\u00e3o que chamou o walker (para menus seriam os argumentos fornecidos para wp_nav_menu()<\/code>), e o argumento final, $output<\/code>\u2013 passado por refer\u00eancia, \u00e9 a sa\u00edda que \u00e9 passada como primeiro argumento em todos os das fun\u00e7\u00f5es acima.<\/p>\nModificando a sa\u00edda de cada elemento<\/h2>\n
Na vis\u00e3o geral acima voc\u00ea deve ver que a fun\u00e7\u00e3o start_el()<\/code>\u00e9 a respons\u00e1vel pela sa\u00edda do HTML para um \u00fanico elemento de menu. Vamos come\u00e7ar substituindo essa fun\u00e7\u00e3o em nossa classe walker com um exemplo simples.<\/p>\nExemplo: impedindo a adi\u00e7\u00e3o de links para elementos ‘#’<\/h3>\n
Vamos nos certificar de que qualquer #<\/code>link ‘ ‘ receba um <span><\/code>elemento em vez de uma tag de link, para evitar a atualiza\u00e7\u00e3o da p\u00e1gina.<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n function start_el(&$output, $item, $depth=0, $args=[], $id=0) {\n $output .= \"<li class='\". implode(\" \", $item->classes). \"'>\";\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<a href=\"'. $item->url. '\">';\n } else {\n $output .= '<span>';\n }\n\u00a0\n $output .= $item->title;\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<\/a>';\n } else {\n $output .= '<\/span>';\n }\n }\n}<\/code><\/pre>\nIniciaremos o elemento anexando uma <li><\/code>tag a $output<\/code>. Queremos ter certeza de que as classes padr\u00e3o do WordPress (por exemplo ‘menu-item’, ‘menu-item-has-children’ etc), bem como as classes inseridas manualmente no editor de menu, sejam adicionadas ao nosso elemento de lista. N\u00f3s colamos as classes fornecidas como um array $item->classes<\/code>usando a fun\u00e7\u00e3o PHP [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>separando cada elemento com um espa\u00e7o.<\/p>\nNa linha #5-9 e #13-17 n\u00f3s tratamos a sa\u00edda condicional do elemento de encapsulamento. Emitimos uma <a><\/code>tag, a menos que a URL do elemento seja ‘ #<\/code>‘ nesse caso, fornecemos uma <span><\/code>tag. Na linha #11 n\u00f3s simplesmente produzimos o texto do link, que reside em $item->title<\/code>.<\/p>\nIsso \u00e9 tudo o que precisamos para garantir que todos os elementos de menu que tenham ‘ #<\/code>‘ como URL n\u00e3o sejam clic\u00e1veis!<\/p>\nSe voc\u00ea estiver fazendo isso em um tema estilizado, lembre-se de que poder\u00e1 perder algum estilo se o tema tiver estilizado a <a><\/code>tag diretamente. Voc\u00ea pode resolver isso alterando o estilo e possivelmente adicionando uma classe ao elemento span.<\/p>\nExemplo: exibi\u00e7\u00e3o de descri\u00e7\u00f5es de itens de menu<\/h3>\n
Como exemplo, outra coisa que voc\u00ea pode fazer aqui \u00e9 gerar a descri\u00e7\u00e3o do menu. Isso existe, mas n\u00e3o est\u00e1 ativado como padr\u00e3o. No editor de menus do WordPress, voc\u00ea precisa clicar em "Op\u00e7\u00f5es de tela" no canto superior direito e marcar para mostrar "Descri\u00e7\u00e3o":<\/p>\n
![\"Aprenda](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151802-61e4cfd7d3371.png\")
<\/a><\/p>\nIsso permite que o usu\u00e1rio insira uma descri\u00e7\u00e3o para cada elemento. Voc\u00ea pode produzir essa descri\u00e7\u00e3o em sua classe de walker. Digamos que voc\u00ea queira mostrar apenas a descri\u00e7\u00e3o dos itens de n\u00edvel superior, pois isso faz parte do design do seu tema. Voc\u00ea pode simplesmente verificar se $item<\/code>tem uma descri\u00e7\u00e3o e se $depth<\/code>\u00e9 0, assim:<\/p>\n ...\n $output .= $item->title;\n\u00a0\n if ($depth == 0 && !empty($item->description)) {\n $output .= '<span class=\"description\">'. $item->description. '<\/span>';\n }\n ...<\/code><\/pre>\nExemplo: adicionar acentos de lista suspensa<\/h3>\n
Um exemplo mais comum e \u00fatil \u00e9 adicionar um “caret", um \u00edcone que sinaliza que este item de menu possui um menu suspenso (tem elementos filhos).<\/p>\n