{"id":29232,"date":"2022-09-20T12:23:04","date_gmt":"2022-09-20T15:23:04","guid":{"rendered":"\/tutoriais\/?p=29232"},"modified":"2024-12-17T14:31:40","modified_gmt":"2024-12-17T17:31:40","slug":"wp_nav_menu","status":"publish","type":"post","link":"\/pt\/tutoriais\/wp_nav_menu","title":{"rendered":"Como criar um menu personalizado usando a fun\u00e7\u00e3o wp_nav_menu do WordPress"},"content":{"rendered":"<p>Menus s&atilde;o um dos elementos mais comuns em sites da internet. Com o <strong>WordPress<\/strong>, voc&ecirc; consegue facilmente personalizar menus e escolher entre diversos modelos de exibi&ccedil;&atilde;o, caso seu tema suporte essa funcionalidade. Ainda assim, se voc&ecirc; deseja utilizar menus em um local espec&iacute;fico em seu site, precisar&aacute; editar os arquivos do seu tema e adicionar a fun&ccedil;&atilde;o <strong>wp_nav_menu<\/strong>.&nbsp;<\/p><p>Ao combinar esta fun&ccedil;&atilde;o com o <strong>register_nav_menu<\/strong>, voc&ecirc; ser&aacute; capaz de criar e posicionar menus personalizados em qualquer lugar do seu site. Adicionar e configurar essas funcionalidades &eacute; relativamente f&aacute;cil, mesmo que voc&ecirc; n&atilde;o seja um desenvolvedor de sites. Al&eacute;m disso, voc&ecirc; pode editar os menus a partir do seu pr&oacute;prio painel do WordPress.<\/p><p>Neste artigo vamos falar sobre como o recurso wp_nav_menu do WordPress funciona. Tamb&eacute;m vamos te mostrar com quais par&acirc;metros e classes o wp_nav_menu opera e como utilizar essa fun&ccedil;&atilde;o com seu tema. Vamos l&aacute;!<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/WordPress-Security-Checklist(pt-br).pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR-1024x283.png\" alt=\"\" class=\"wp-image-30402\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR-300x83.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR-150x41.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR-768x212.png 768w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR-1536x425.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-e-a-funcao-wp_nav_menu-do-wordpress\"><strong>O Que &Eacute; a Fun&ccedil;&atilde;o wp_nav_menu do WordPress?<\/strong><\/h2><p>wp_nav_menu &eacute; uma fun&ccedil;&atilde;o que permite exibir menus personalizados no WordPress. Diferente da fun&ccedil;&atilde;o <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_page_menu\/\" target=\"_blank\" rel=\"noopener\"><strong>wp_page_menu<\/strong><\/a>, que mostra uma lista das p&aacute;ginas existentes, a wp_nav_menu s&oacute; funciona com menus personalizados.&nbsp;<\/p><p>Voc&ecirc; pode adicionar a fun&ccedil;&atilde;o em qualquer arquivo de template do seu tema para controlar em que lugar da p&aacute;gina deseja que o menu seja exibido. Abaixo indicamos um exemplo b&aacute;sico de como essa fun&ccedil;&atilde;o se parece, sem qualquer par&acirc;metro espec&iacute;fico:<\/p><pre class=\"wp-block-preformatted\">wp_nav_menu( array $args = array() )<\/pre><p>Para que o c&oacute;digo funcione, voc&ecirc; precisar&aacute; especificar qual menu deseja exibir. Na pr&aacute;tica, um exemplo da fun&ccedil;&atilde;o wp_page_menu em uma p&aacute;gina de template se parece com o c&oacute;digo abaixo:&nbsp;<\/p><pre class=\"wp-block-preformatted\">wp_nav_menu( array( \n    'theme_location' =&gt; 'custom-menu') );<\/pre><p>Uma fun&ccedil;&atilde;o wp_nav_menu pode incluir m&uacute;ltiplos par&acirc;metros. Nesse exemplo utilizamos o par&acirc;metro theme_location para especificar o nome do menu personalizado que queremos exibir (a ser inserido no campo &lsquo;custom-menu&rsquo;).&nbsp;<\/p><p>Se voc&ecirc; n&atilde;o se sente confort&aacute;vel ou seguro o suficiente para adicionar uma linha de c&oacute;digo em seu site, &eacute; poss&iacute;vel optar pela utiliza&ccedil;&atilde;o de <a href=\"\/tutoriais\/plugin-menu-wordpress\"><strong>plugins de menu do WordPress<\/strong><\/a>. Algumas ferramentas permitem que voc&ecirc; crie e posicione menus personalizados no seu site, como se estivesse utilizando a fun&ccedil;&atilde;o wp_nav_menu apresentada neste guia.<\/p><p>Alternativamente, voc&ecirc; tamb&eacute;m pode utilizar alguns <a href=\"\/tutoriais\/construtor-de-paginas-wordpress\/\"><strong>construtores de p&aacute;ginas do WordPress<\/strong><\/a>. Caso j&aacute; esteja usando uma dessas ferramentas, verifique suas configura&ccedil;&otilde;es para saber se ela oferece o recurso de menu personalizado.<\/p><h2 class=\"wp-block-heading\" id=\"h-parametros-e-classes-css-do-wp-nav-menu-do-wordpress-nbsp\"><strong>Par&acirc;metros e Classes CSS do wp_nav_menu do WordPress&nbsp;<\/strong><\/h2><p>A maioria das fun&ccedil;&otilde;es do WordPress oferece v&aacute;rios par&acirc;metros predeterminados para modificar seus efeitos. No caso do wp_nav_menu, voc&ecirc; possui ambos par&acirc;metros e classes CSS para utilizar. Vamos come&ccedil;ar pelo primeiro recurso!<\/p><h3 class=\"wp-block-heading\" id=\"h-parametros-do-wp-nav-menu-nbsp\"><strong>Par&acirc;metros do wp_nav_menu&nbsp;<\/strong><\/h3><p>Voc&ecirc; pode personalizar a fun&ccedil;&atilde;o wp_nav_menu utilizando um ou mais par&acirc;metros. Aqui est&atilde;o indicadas as op&ccedil;&otilde;es dispon&iacute;veis:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lsquo;menu&rsquo;<\/strong> &ndash; indica qual menu voc&ecirc; est&aacute; utilizando. &Eacute; poss&iacute;vel especificar um menu utilizando uma ID, slug, nome ou objeto.<\/li>\n\n\n\n<li><strong>&lsquo;menu_class&rsquo;<\/strong> &ndash; configura a classe CSS para o seu menu. Por padr&atilde;o, a fun&ccedil;&atilde;o ir&aacute; utilizar a classe <strong>menu<\/strong>.<\/li>\n\n\n\n<li><strong>&lsquo;menu_id&rsquo;<\/strong> &ndash; especifica o ID para o menu. O valor ou ID padr&atilde;o &eacute; a slug do menu com um n&uacute;mero adicional.<\/li>\n\n\n\n<li><strong>&lsquo;container&rsquo;<\/strong> &ndash; esse par&acirc;metro permite que voc&ecirc; escolha qual tipo de container deseja utilizar para o menu. Por padr&atilde;o, a fun&ccedil;&atilde;o wp_nav_menu utiliza containers <strong>div<\/strong>.<\/li>\n\n\n\n<li><strong>&lsquo;container_class&rsquo;<\/strong> &ndash; configura uma classe CSS que ser&aacute; aplicada diretamente no container do menu. Por padr&atilde;o, a classe do menu ser&aacute; <strong>menu-{menu slug}-container<\/strong>.<\/li>\n\n\n\n<li><strong>&lsquo;container_id&rsquo;<\/strong> &ndash; determina uma ID para o container do menu. Tal como com a ID do menu, o seu container utilizar&aacute; uma slug adicionada por padr&atilde;o.<\/li>\n\n\n\n<li><strong>&lsquo;fallback_cb&rsquo;<\/strong> &ndash; se o WordPress n&atilde;o consegue encontrar o menu que voc&ecirc; deseja exibir, este par&acirc;metro informa ao sistema qual outro elemento deve ser exibido.<\/li>\n\n\n\n<li><strong>&lsquo;theme_location&rsquo;<\/strong> &ndash; se voc&ecirc; configurar um menu personalizado utilizando a fun&ccedil;&atilde;o <strong>register_nav_menu<\/strong>, este par&acirc;metro ir&aacute; exibi-lo.&nbsp;<\/li>\n\n\n\n<li><strong>&lsquo;items_wrap&rsquo;<\/strong> &ndash; por padr&atilde;o, seu menu ir&aacute; exibir os itens no formato de lista desordenada: <strong>unordered list (ul)<\/strong>. Este par&acirc;metro permite que voc&ecirc; configure a ordem atrav&eacute;s da qual os itens do menu ser&atilde;o organizados.<\/li>\n\n\n\n<li><strong>&lsquo;item_spacing&rsquo;<\/strong> &ndash; a maioria dos menus utiliza espa&ccedil;os em branco para separar os itens. Se voc&ecirc; deseja desabilitar esse recurso de <em>whitespace<\/em>, pode configurar o par&acirc;metro em quest&atilde;o para o estado <strong>discard<\/strong>.&nbsp;<\/li>\n<\/ul><p>H&aacute; alguns par&acirc;metros adicionais do <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/\" target=\"_blank\" rel=\"noopener\"><strong>wp_nav_menu<\/strong><\/a> que n&atilde;o foram mencionados neste artigo, incluindo op&ccedil;&otilde;es para adicionar extratos de texto no menu. De todo modo, os par&acirc;metros listados acima s&atilde;o os elementos b&aacute;sicos que voc&ecirc; ir&aacute; utilizar quando estiver adicionando menus personalizados no tema do seu site.<\/p><p>Abaixo indicamos um exemplo da fun&ccedil;&atilde;o wp_nav_menu utilizando m&uacute;ltiplos par&acirc;metros:<\/p><pre class=\"wp-block-preformatted\">&lt;?php\nwp_nav_menu( array( \n    'theme_location' =&gt; 'custom-menu', \n    'container_class' =&gt; 'menu-class'\n    'fallback_cb' =&gt; &lsquo;wp_page_menu&rsquo; ) ); \n?&gt;<\/pre><p>Se a enorme quantidade de par&acirc;metros dispon&iacute;veis parece assustadora, n&atilde;o se preocupe. Na maioria dos casos, voc&ecirc; s&oacute; precisar&aacute; utilizar os par&acirc;metros <strong>theme_location<\/strong> e <strong>container_class<\/strong>. Isso significa que a configura&ccedil;&atilde;o da fun&ccedil;&atilde;o se torna relativamente simples.<\/p><h3 class=\"wp-block-heading\" id=\"h-classes-css-do-wp-nav-menu-nbsp\"><strong>Classes CSS do wp_nav_menu&nbsp;<\/strong><\/h3><p>Quando voc&ecirc; utiliza a fun&ccedil;&atilde;o wp_nav_menu, ela automaticamente aplica uma gama de classes CSS em cada um dos itens exibidos no menu.&nbsp;<\/p><p>Abaixo listamos algumas das mais importantes <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/\" target=\"_blank\" rel=\"noopener\"><strong>classes CSS do wp_nav_menu<\/strong><\/a>:<\/p><ul class=\"wp-block-list\">\n<li><strong>.menu-item<\/strong> &ndash; esta classe &eacute; automaticamente aplicada em todos os itens do menu.<\/li>\n\n\n\n<li><strong>.menu-item-has-children<\/strong> &ndash; aplicada apenas aos elementos do menu que possuem sub-itens.&nbsp;<\/li>\n\n\n\n<li><strong>.menu-item-object-{object}<\/strong> &ndash; &eacute; aplicada em todos os itens do menu. O <em>placeholder<\/em> <strong>object<\/strong> pode ser uma taxonomia ou um post_type.&nbsp;<\/li>\n\n\n\n<li><strong>.menu-item-object-category<\/strong> &ndash; classe aplicada em itens do menu que correspondem a uma categoria espec&iacute;fica do WordPress.<\/li>\n\n\n\n<li><strong>.menu-item-object-tag<\/strong> &ndash; refere-se aos itens do menu que correspondem a uma etiqueta, ou <em>tag<\/em>, do WordPress.<\/li>\n\n\n\n<li><strong>.menu-item-object-page<\/strong> &ndash; classe CSS aplicada em itens do menu de p&aacute;ginas est&aacute;ticas.<\/li>\n\n\n\n<li><strong>.menu-item-object-{custom}<\/strong> &ndash; itens que correspondem a tipos personalizados de publica&ccedil;&atilde;o.&nbsp;<\/li>\n\n\n\n<li><strong>.menu-item-type-{type}<\/strong> &ndash; &eacute; aplicada em todos os itens do menu. O <em>placeholder<\/em> <strong>type<\/strong> pode ser uma taxonomia ou um post_type.<\/li>\n\n\n\n<li><strong>.menu-item-type-post_type<\/strong> &ndash; classe referente aos itens que correspondem a qualquer tipo de publica&ccedil;&atilde;o (post_type).<\/li>\n\n\n\n<li><strong>.menu-item-type-taxonomy<\/strong> &ndash; itens que correspondem a qualquer taxonomy (taxonomia).<\/li>\n<\/ul><p>Como &eacute; poss&iacute;vel perceber, h&aacute; muitas sobreposi&ccedil;&otilde;es de classes CSS com a fun&ccedil;&atilde;o wp_nav_menu. A ampla gama de op&ccedil;&otilde;es dispon&iacute;veis significa que voc&ecirc; pode ser bastante espec&iacute;fico quando for utilizar o CSS para estilizar seus menus personalizados.&nbsp;<\/p><p>Lembre-se que voc&ecirc; tamb&eacute;m pode utilizar classes CSS personalizadas com os par&acirc;metros do wp_nav_menu. Essa abordagem pode ser uma excelente op&ccedil;&atilde;o caso nenhuma das classes predeterminadas englobe o menu exato ou os itens espec&iacute;ficos que voc&ecirc; deseja customizar.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-como-criar-e-personalizar-um-menu-utilizando-a-funcao-wp-nav-menu-do-wordpress-nbsp\"><strong>Como Criar e Personalizar um Menu Utilizando a Fun&ccedil;&atilde;o wp_nav_menu do WordPress&nbsp;<\/strong><\/h2><p>Agora que voc&ecirc; j&aacute; sabe como o recurso wp_nav_menu funciona, &eacute; hora de aprender a utilizar essa fun&ccedil;&atilde;o dentro do seu tema WordPress. Vamos come&ccedil;ar abordando o wp_nav_register.<\/p><h3 class=\"wp-block-heading\" id=\"h-passo-1-crie-um-menu-personalizado-usando-a-funcao-wp-nav-register-nbsp\"><strong>Passo 1: Crie um Menu Personalizado Usando a Fun&ccedil;&atilde;o wp_nav_register&nbsp;<\/strong><\/h3><p>Como mencionamos anteriormente, a fun&ccedil;&atilde;o wp_nav_menu n&atilde;o permite que voc&ecirc; crie menus personalizados, mas permite que voc&ecirc; os posicione onde quiser na p&aacute;gina. Isso significa que voc&ecirc; precisa criar os menus manualmente antes de utilizar a fun&ccedil;&atilde;o de posicionamento.&nbsp;<\/p><p>A fun&ccedil;&atilde;o de registro wp_nav_register permite que voc&ecirc; crie menus para um tema espec&iacute;fico. Para isso, ser&aacute; necess&aacute;rio editar o arquivo <strong>functions.php<\/strong> do tema do site para poder utilizar a fun&ccedil;&atilde;o de cria&ccedil;&atilde;o de menu.<\/p><p>Antes de colocar a m&atilde;o na massa, recomendamos que voc&ecirc; configure um tema filho, ou <a href=\"\/tutoriais\/como-criar-o-tema-filho-wordpress\"><strong><em>child theme<\/em><\/strong><\/a>, caso ainda n&atilde;o esteja utilizando um. Trabalhar com um <em>child theme<\/em> evita que qualquer mudan&ccedil;a feita no c&oacute;digo do tema seja perdida e desapare&ccedil;a quando ele for atualizado. Tamb&eacute;m &eacute; importante fazer um <a href=\"\/tutoriais\/como-fazer-download-de-um-backup\"><strong>backup<\/strong><\/a> completo do seu site antes de come&ccedil;ar a editar os arquivos essenciais dele.<\/p><p>Uma vez que essas quest&otilde;es estiverem resolvidas, voc&ecirc; precisar&aacute; acessar o arquivo functions.php do seu tema. A forma mais simples de fazer isso &eacute; navegar pelo painel WordPress, acessando o menu <strong>Apar&ecirc;ncia<\/strong> <strong>&rarr; Editor de Arquivos do Tema<\/strong>.<\/p><p>O editor do tema ser&aacute; aberto, exibindo seu tema ativo atual. Ali, voc&ecirc; pode selecionar o arquivo functions.php utilizando o menu lateral direito.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"675\" height=\"357\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-11.png\" alt=\"Captura de tela do arquivo functions.php do tema Twenty Twenty-One no WordPress\" class=\"wp-image-47684\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-11.png 675w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-11-300x159.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-11-150x79.png 150w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure><\/div><p>Alternativamente, voc&ecirc; pode acessar o arquivo functions.php atrav&eacute;s de um <a href=\"\/tutoriais\/como-configurar-o-cliente-filezilla\"><strong>cliente FTP<\/strong><\/a> (<strong>File Transfer Protocol<\/strong>). Ou, caso seja um usu&aacute;rio da Hostinger, pelo pr&oacute;prio <a href=\"\/tutoriais\/como-utilizar-o-gerenciador-de-arquivos-hostinger\"><strong>gerenciador de arquivos do hPanel<\/strong><\/a>.<\/p><p>Recomendamos um desses m&eacute;todos caso sua prefer&ecirc;ncia seja utilizar um editor de texto mais completo. Mas como voc&ecirc; s&oacute; ir&aacute; adicionar um &uacute;nico fragmento de c&oacute;digo, o editor integrado do pr&oacute;prio WordPress j&aacute; &eacute; suficiente.&nbsp;<\/p><p>Navegue at&eacute; o final do arquivo e adicione o seguinte c&oacute;digo nele:<\/p><pre class=\"wp-block-preformatted\">function wpb_custom_new_menu() {\n  register_nav_menu('custom-menu',__( 'Custom Menu' ));\n}\nadd_action( 'init', 'wpb_custom_new_menu' );<\/pre><p>Ser&aacute; necess&aacute;rio modificar a slug do <strong>custom-menu<\/strong> e o nome do menu, que deve ser inserido no campo <strong>&lsquo;Custom Menu&rsquo;<\/strong> do c&oacute;digo. Voc&ecirc; pode configurar qualquer nome como nome do menu.<\/p><p>Salve as altera&ccedil;&otilde;es feitas no arquivo functions.php. Agora &eacute; hora de editar esse novo menu para definir quais itens ser&atilde;o inclu&iacute;dos nele.<\/p><h3 class=\"wp-block-heading\" id=\"h-passo-2-edite-seu-menu-wordpress-personalizado-nbsp\"><strong>Passo 2: Edite seu Menu WordPress Personalizado&nbsp;<\/strong><\/h3><p>Para editar o menu personalizado que voc&ecirc; acabou de configurar, basta acessar a aba <strong>Apar&ecirc;ncia &rarr; Menu<\/strong> no seu painel WordPress. Localize a se&ccedil;&atilde;o <strong>Configura&ccedil;&otilde;es de Menu<\/strong> no canto inferior direito da sua tela.<\/p><p>Esta se&ccedil;&atilde;o vai incluir a localiza&ccedil;&atilde;o do novo menu que voc&ecirc; registrou no passo 1 deste guia.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"659\" height=\"177\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-12.png\" alt=\"Configura&ccedil;&otilde;es do menu personalizado no WordPress\" class=\"wp-image-47685\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-12.png 659w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-12-300x81.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-12-150x40.png 150w\" sizes=\"(max-width: 659px) 100vw, 659px\" \/><\/figure><\/div><p>Para editar e definir quais itens ser&atilde;o exibidos naquela localiza&ccedil;&atilde;o, escolha um menu utilizando a op&ccedil;&atilde;o de selecionar um menu para editar (<strong>Select a menu to edit)<\/strong> ou crie um novo.<\/p><p>Depois disso, escolha quais elementos voc&ecirc; quer que este menu inclua. Essa etapa pode ser feita atrav&eacute;s da lista exibida na lateral esquerda da p&aacute;gina, arrastando os itens e rearranjando-os no espa&ccedil;o localizado abaixo da se&ccedil;&atilde;o <strong>Estrutura do menu <\/strong>ou <strong>Menu structure<\/strong>.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"675\" height=\"477\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-13.png\" alt=\"Edi&ccedil;&atilde;o e personaliza&ccedil;&atilde;o do menu no WordPress - captura de tela para inser&ccedil;&atilde;o de elementos da estrutura do menu\" class=\"wp-image-47686\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-13.png 675w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-13-300x212.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-13-150x106.png 150w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure><\/div><p>Cada item do menu inclui um nome de exibi&ccedil;&atilde;o e um link. Quando voc&ecirc; estiver satisfeito com suas escolhas, lembre-se de verificar se o seu novo menu personalizado est&aacute; ativo &mdash; isso pode ser feito pelas configura&ccedil;&otilde;es do menu (<em>settings<\/em>). Depois de garantir que o menu est&aacute; ativo, salve as altera&ccedil;&otilde;es que acabaram de ser feitas.<\/p><h3 class=\"wp-block-heading\" id=\"h-passo-3-use-a-funcao-wp-nav-menu-para-exibir-o-novo-menu\"><strong>Passo 3: Use a Fun&ccedil;&atilde;o wp_nav_menu para Exibir o Novo Menu<\/strong><\/h3><p>Nesta etapa, voc&ecirc; j&aacute; dever&aacute; ter criado um menu que est&aacute; registrado no tema do seu site. De todo modo, apesar do menu existir, ele n&atilde;o ser&aacute; exibido em nenhum lugar do site at&eacute; que voc&ecirc; utilize a fun&ccedil;&atilde;o wp_nav_menu para especificar a localiza&ccedil;&atilde;o dele na p&aacute;gina.<\/p><p>Voc&ecirc; precisa adicionar a fun&ccedil;&atilde;o wp_nav_menu dentro de um template de uma p&aacute;gina para poder posicionar o menu personalizado. Os arquivos de template das p&aacute;ginas aos quais voc&ecirc; tem acesso dependem do tema que estiver utilizando.&nbsp;<\/p><p>A partir do seu painel WordPress, navegue at&eacute; o menu de <strong>Apar&ecirc;ncia &rarr; Editor de Arquivos do Tema<\/strong> para acessar esses arquivos. A se&ccedil;&atilde;o de <strong>Arquivos do Tema<\/strong>, exibida na lateral direita da p&aacute;gina, cont&eacute;m uma lista de todos os arquivos que voc&ecirc; pode editar a partir dessa janela do painel.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"660\" height=\"578\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-14.png\" alt=\"Captura de tela do arquivo page.php  do tema Twenty Twenty-One no WordPress\" class=\"wp-image-47687\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-14.png 660w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-14-300x263.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/09\/image-14-150x131.png 150w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/figure><\/div><p>No nosso exemplo, selecionamos o template de p&aacute;gina &uacute;nica do nosso tema (<em>single page<\/em>). O c&oacute;digo que precisa ser adicionar ao template deve se parecer com este indicado abaixo:<\/p><pre class=\"wp-block-preformatted\">&lt;?php\nwp_nav_menu( array( \n    'theme_location' =&gt; 'custom-menu', \n    'container_class' =&gt; 'menu-class'\n    'fallback_cb' =&gt; &lsquo;wp_page_menu&rsquo; ) ); \n?&gt;<\/pre><p>Antes de salvar as altera&ccedil;&otilde;es feitas no arquivo de template, lembre-se de atualizar os <em>placeholders<\/em>, substituindo-os pela slug personalizada do seu tema e adicionando os par&acirc;metros que deseja utilizar. Nesse nosso exemplo, inclu&iacute;mos os par&acirc;metros <em>container_class <\/em>e <em>fallback_cb.<\/em><\/p><p>De todo modo, o c&oacute;digo que voc&ecirc; for utilizar pode ser bastante simples, sem muitos elementos, como este indicado abaixo:<\/p><pre class=\"wp-block-preformatted\">&lt;?php\nwp_nav_menu( array( \n    'theme_location' =&gt; 'custom-menu' ) ); \n?&gt;<\/pre><p>A posi&ccedil;&atilde;o do c&oacute;digo vai determinar a localiza&ccedil;&atilde;o do menu na p&aacute;gina em quest&atilde;o. Se voc&ecirc; n&atilde;o tiver certeza de como esse posicionamento (<em>placement<\/em>) funciona, pode experimentar coloc&aacute;-lo em locais diferentes dentro do arquivo de template escolhido.&nbsp;<\/p><p>N&atilde;o recomendamos que voc&ecirc; altere outras partes do c&oacute;digo quando estiver editando arquivos de template &mdash; a n&atilde;o ser que voc&ecirc; tenha muita certeza do que estiver fazendo. Lembrando que, j&aacute; que o processo em si inclui a simples adi&ccedil;&atilde;o de algumas linhas de c&oacute;digo, voc&ecirc; pode remov&ecirc;-las caso aconte&ccedil;a algum erro.&nbsp;<\/p><p>Depois de editar, verifique seu site para ver se o menu est&aacute; carregando. Basta visitar uma das p&aacute;ginas que utiliza o template cujo arquivo voc&ecirc; estava editando at&eacute; agora.<\/p><p>Se o menu n&atilde;o estiver sendo exibido, pode ser que algum erro ocorreu com a slug do par&acirc;metro theme_location. Ent&atilde;o retorne ao arquivo e verifique se inseriu todas as informa&ccedil;&otilde;es corretamente nos campos indicados pelos <em>placeholders<\/em>.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/pt\/alojamento-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\" alt=\"\" class=\"wp-image-44638\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-768x225.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>Apesar do WordPress permitir que voc&ecirc; crie menus personalizados facilmente, ele n&atilde;o permite que voc&ecirc; adicione <strong>locais<\/strong> personalizados para os menus. &Eacute; nesse momento que entra em cena a fun&ccedil;&atilde;o <strong>wp_nav_menu<\/strong>. Com esta fun&ccedil;&atilde;o, voc&ecirc; pode exibir um menu personalizado, criado pelo <strong>register_nav_menu<\/strong>, em qualquer parte do seu site.&nbsp;<\/p><p>Abaixo indicamos um resumo de como utilizar a fun&ccedil;&atilde;o wp_nav_menu do WordPress:<\/p><ul class=\"wp-block-list\">\n<li>Crie um menu personalizado com a fun&ccedil;&atilde;o register_nav_menu.<\/li>\n\n\n\n<li>Edite seu menu personalizado no WordPress.<\/li>\n\n\n\n<li>Use a fun&ccedil;&atilde;o wp_nav_menu para exibir o novo menu personalizado em qualquer local das suas p&aacute;ginas.&nbsp;<\/li>\n<\/ul><p>Ainda possui alguma d&uacute;vida quanto a utiliza&ccedil;&atilde;o da fun&ccedil;&atilde;o wp_nav_menu no WordPress? Vamos discuti-las abaixo na se&ccedil;&atilde;o de coment&aacute;rios!<\/p><p>\n\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Aprenda Mais T&eacute;cnicas do WordPress<\/h4>\n                    <p><a href=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/tutorial-wordpress\" target=\"_blank\" rel=\"noopener\">Tutorial WordPress Completo<\/a><br><a href=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/criar-site-wordpress\" target=\"_blank\" rel=\"noopener\">Como Criar Um Site no WordPress<\/a><br><a href=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/como-usar-do-shortcode-wordpress\" target=\"_blank\" rel=\"noopener\">Como usar do_shortcode WordPress<\/a><br><a href=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/como-ativar-multisite-wordpress\" target=\"_blank\" rel=\"noopener\">Tudo que Voc&ecirc; Precisa Saber para Ativar um Multisite WordPress<\/a><br><a href=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/criar-arquivo-htaccess-wordpress\" target=\"_blank\" rel=\"noopener\">Como Localizar e Criar o Arquivo .htaccess do WordPress: Um Guia F&aacute;cil e R&aacute;pido<\/a><\/p>\n                <\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Menus s&atilde;o um dos elementos mais comuns em sites da internet. Com o WordPress, voc&ecirc; consegue facilmente personalizar menus e escolher entre diversos modelos de exibi&ccedil;&atilde;o, caso seu tema suporte essa funcionalidade. Ainda assim, se voc&ecirc; deseja utilizar menus em um local espec&iacute;fico em seu site, precisar&aacute; editar os arquivos do seu tema e adicionar [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/wp_nav_menu\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":305,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Menu \u00e9 um elemento essencial para qualquer site na internet. Descubra como criar um menu personalizado e posicion\u00e1-lo onde desejar na p\u00e1gina.","rank_math_focus_keyword":"","footnotes":""},"categories":[4911],"tags":[7431],"class_list":["post-29232","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-menu-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-use-wp-nav-menu-in-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp_nav_menu","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/creer-menu-personnalise-avec-wp_nav_menu-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/wp_nav_menu","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp_nav_menu","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-create-a-custom-menu-using-wordpress-wp_nav_menu-function","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-a-custom-menu-using-wordpress-wp_nav_menu-function","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp_nav_menu","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wp_nav_menu","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-use-wp-nav-menu-in-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-use-wp-nav-menu-in-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-use-wp-nav-menu-in-wordpress","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/29232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/305"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=29232"}],"version-history":[{"count":6,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/29232\/revisions"}],"predecessor-version":[{"id":47688,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/29232\/revisions\/47688"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=29232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=29232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=29232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}