{"id":714,"date":"2016-12-28T19:33:37","date_gmt":"2016-12-28T22:33:37","guid":{"rendered":"https:\/\/felipeelia.com.br\/?p=714"},"modified":"2016-12-28T19:41:26","modified_gmt":"2016-12-28T22:41:26","slug":"como-exibir-apenas-um-submenu-no-wordpress","status":"publish","type":"post","link":"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/","title":{"rendered":"Como exibir apenas um submenu no WordPress"},"content":{"rendered":"

Em sites muito grandes, muitas vezes precisamos exibir apenas um submenu, uma parte do menu principal, igualzinho como na navega\u00e7\u00e3o, mas sem criar um novo menu, afinal quanto menos coisas para gerenciar melhor. N\u00e3o seria\u00a0ideal se\u00a0a fun\u00e7\u00e3o wp_nav_menus<\/a> do WordPress aceitasse um par\u00e2metro que restringisse todo um menu a apenas uma parte dele? Pois bem, atrav\u00e9s dos\u00a0hooks no WordPress<\/a> podemos criar este par\u00e2metro com facilidade.<\/p>\n

O c\u00f3digo abaixo \u00e9 adaptado de uma resposta no stackflow<\/a>. A fun\u00e7\u00e3o wp_nav_menus()<\/code> aplica o filtro\u00a0wp_nav_menu_objects<\/code> nos itens do menu j\u00e1 ordenados e \u00e9 exatamente a\u00ed que vamos atuar. Coloque o seguinte c\u00f3digo no functions.php<\/code> do seu tema:<\/p>\n

 function wp_nav_menu_objects_submenu_of( $sorted_menu_items, $args ) {\r\n    if( isset( $args->submenu_of ) ) {\r\n        $menu_item_parents = array(); \/\/ Array que conter\u00e1 os IDs de todos os pais dentro do submenu\r\n        foreach( $sorted_menu_items as $key => $item ) {\r\n            if( $item->object_id == (int) $args->submenu_of ) { \/\/ O ID que passamos \u00e9 o primeiro pai\r\n            \t$menu_item_parents[] = $item->ID;\r\n            }\r\n\r\n            if( in_array( $item->menu_item_parent, $menu_item_parents ) ) { \/\/ Se o pai do item sendo verificado est\u00e1 no nosso array ele fica e o id dele entra no nosso array de pais...\r\n                $menu_item_parents[] = $item->ID;\r\n            } else { \/\/ ...caso contr\u00e1rio ele \u00e9 removido\r\n                unset( $sorted_menu_items[ $key ] );\r\n            }\r\n        }\r\n    }\r\n    return $sorted_menu_items;\r\n}\r\nadd_filter( 'wp_nav_menu_objects' , 'wp_nav_menu_objects_submenu_of', 10, 2 ); <\/code><\/pre>\n
Para exibir o menu use:<\/p>\n
 wp_nav_menu( array(\r\n\t'theme_location' => 'primary',\r\n\t'submenu_of'     => get_the_ID(), \/\/ Passando o ID da p\u00e1gina atual\r\n) ); <\/code><\/pre>\n
Com a chamada para add_filter<\/code> associamos nossa fun\u00e7\u00e3o ao filtro wp_nav_menu_objects<\/code>, assim todo menu exibido atrav\u00e9s da fun\u00e7\u00e3o wp_nav_menu()<\/code> passar\u00e1 por ela. O primeiro passo \u00e9 verificar se o par\u00e2metro submenu_of<\/code> foi passado na chamada da fun\u00e7\u00e3o, caso afirmativo fazemos nossa m\u00e1gica, sen\u00e3o passamos a vari\u00e1vel como veio. O importante dos filtros \u00e9 sempre retornar alguma coisa, ok?<\/p>\n
Os itens do menu possuem dois IDs diferentes: o ID do item do menu ($item->ID<\/code>) e o ID do conte\u00fado associado a ele ($item->object_id<\/code>). Por exemplo: temos um post com ID 5 (get_the_ID()<\/code> e $item->ID<\/code> seria 5), mas o seu ID no menu principal do site \u00e9 12 ($item->object_id == 12<\/code>). Precisamos ent\u00e3o exibir todos os itens de menu que tem menu_item_parent<\/code> 12 e n\u00e3o trabalhamos em nada mais com o 5. O \u00fanico ID do conte\u00fado que temos \u00e9 o que foi passado pelo par\u00e2metro submenu_of<\/code>, mas a rela\u00e7\u00e3o dos submenus \u00e9 baseada na propriedade menu_item_parent<\/code>, que aponta para o ID do item do menu. Da\u00ed por diante vamos andando pelos itens coletando seus IDs e testando se eles s\u00e3o pais de outros elementos. Como cada novo elemento pode ser pai de outros, juntamos todos esses IDs para testar os pr\u00f3ximos elementos. Deu pra entender?<\/p>\n
Entender o que s\u00e3o hooks<\/a> \u00e9 fundamental para solu\u00e7\u00f5es limpas dentro do WordPress. Agora que voc\u00ea j\u00e1 viu como eles ajudam a exibir s\u00f3 uma parte de um menu, quer ver como eles auxiliam na customiza\u00e7\u00e3o de widgets<\/a>?<\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress e submenus: quer exibir apenas uma parte de um menu maior, sem criar outro para n\u00e3o dificultar a manuten\u00e7\u00e3o? Leia esse tutorial e saiba como.<\/p>\n","protected":false},"author":1,"featured_media":715,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[30],"tags":[],"yoast_head":"\nComo exibir apenas um submenu no WordPress | Felipe Elia<\/title>\n<meta name=\"description\" content=\"WordPress e submenus: quer exibir apenas uma parte de um menu maior, sem criar outro para n\u00e3o dificultar a manuten\u00e7\u00e3o? Leia esse tutorial e saiba como.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como exibir apenas um submenu no WordPress | Felipe Elia\" \/>\n<meta property=\"og:description\" content=\"WordPress e submenus: quer exibir apenas uma parte de um menu maior, sem criar outro para n\u00e3o dificultar a manuten\u00e7\u00e3o? Leia esse tutorial e saiba como.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Felipe Elia\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/felipe.elia\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/felipe.elia\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-28T22:33:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-12-28T22:41:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"514\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Felipe Elia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/felipe_elia\" \/>\n<meta name=\"twitter:site\" content=\"@felipe_elia\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felipe Elia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/\"},\"author\":{\"name\":\"Felipe Elia\",\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"headline\":\"Como exibir apenas um submenu no WordPress\",\"datePublished\":\"2016-12-28T22:33:37+00:00\",\"dateModified\":\"2016-12-28T22:41:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/\"},\"wordCount\":361,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"articleSection\":[\"WordPress\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/\",\"url\":\"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/\",\"name\":\"Como exibir apenas um submenu no WordPress | Felipe Elia\",\"isPartOf\":{\"@id\":\"https:\/\/felipeelia.com.br\/#website\"},\"datePublished\":\"2016-12-28T22:33:37+00:00\",\"dateModified\":\"2016-12-28T22:41:26+00:00\",\"description\":\"WordPress e submenus: quer exibir apenas uma parte de um menu maior, sem criar outro para n\u00e3o dificultar a manuten\u00e7\u00e3o? Leia esse tutorial e saiba como.\",\"breadcrumb\":{\"@id\":\"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/felipeelia.dev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como exibir apenas um submenu no WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/felipeelia.com.br\/#website\",\"url\":\"https:\/\/felipeelia.com.br\/\",\"name\":\"Felipe Elia\",\"description\":\"Programa\u00e7\u00e3o com WordPress de um jeito f\u00e1cil, do b\u00e1sico ao avan\u00e7ado\",\"publisher\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/felipeelia.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\",\"name\":\"Felipe Elia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg\",\"contentUrl\":\"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg\",\"width\":400,\"height\":400,\"caption\":\"Felipe Elia\"},\"logo\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/\"},\"description\":\"Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.\",\"sameAs\":[\"https:\/\/www.facebook.com\/felipe.elia\",\"https:\/\/www.instagram.com\/felipe.elia\/\",\"https:\/\/www.linkedin.com\/in\/felipeelia\/\",\"https:\/\/twitter.com\/https:\/\/twitter.com\/felipe_elia\",\"https:\/\/www.youtube.com\/channel\/UCD_26rOE3ClALcZreTkyIoQ\"],\"url\":\"https:\/\/felipeelia.com.br\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como exibir apenas um submenu no WordPress | Felipe Elia","description":"WordPress e submenus: quer exibir apenas uma parte de um menu maior, sem criar outro para n\u00e3o dificultar a manuten\u00e7\u00e3o? Leia esse tutorial e saiba como.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/","og_locale":"pt_BR","og_type":"article","og_title":"Como exibir apenas um submenu no WordPress | Felipe Elia","og_description":"WordPress e submenus: quer exibir apenas uma parte de um menu maior, sem criar outro para n\u00e3o dificultar a manuten\u00e7\u00e3o? Leia esse tutorial e saiba como.","og_url":"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/","og_site_name":"Felipe Elia","article_publisher":"https:\/\/www.facebook.com\/felipe.elia","article_author":"https:\/\/www.facebook.com\/felipe.elia","article_published_time":"2016-12-28T22:33:37+00:00","article_modified_time":"2016-12-28T22:41:26+00:00","og_image":[{"width":"720","height":"514","url":"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu.jpg","type":"image\/jpeg"}],"author":"Felipe Elia","twitter_card":"summary_large_image","twitter_image":"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu.jpg","twitter_creator":"@https:\/\/twitter.com\/felipe_elia","twitter_site":"@felipe_elia","twitter_misc":{"Escrito por":"Felipe Elia","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/#article","isPartOf":{"@id":"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/"},"author":{"name":"Felipe Elia","@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"headline":"Como exibir apenas um submenu no WordPress","datePublished":"2016-12-28T22:33:37+00:00","dateModified":"2016-12-28T22:41:26+00:00","mainEntityOfPage":{"@id":"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/"},"wordCount":361,"commentCount":0,"publisher":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"articleSection":["WordPress"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/","url":"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/","name":"Como exibir apenas um submenu no WordPress | Felipe Elia","isPartOf":{"@id":"https:\/\/felipeelia.com.br\/#website"},"datePublished":"2016-12-28T22:33:37+00:00","dateModified":"2016-12-28T22:41:26+00:00","description":"WordPress e submenus: quer exibir apenas uma parte de um menu maior, sem criar outro para n\u00e3o dificultar a manuten\u00e7\u00e3o? Leia esse tutorial e saiba como.","breadcrumb":{"@id":"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/felipeelia.com.br\/como-exibir-apenas-um-submenu-no-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/felipeelia.dev\/"},{"@type":"ListItem","position":2,"name":"Como exibir apenas um submenu no WordPress"}]},{"@type":"WebSite","@id":"https:\/\/felipeelia.com.br\/#website","url":"https:\/\/felipeelia.com.br\/","name":"Felipe Elia","description":"Programa\u00e7\u00e3o com WordPress de um jeito f\u00e1cil, do b\u00e1sico ao avan\u00e7ado","publisher":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/felipeelia.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":["Person","Organization"],"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292","name":"Felipe Elia","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/","url":"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg","contentUrl":"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg","width":400,"height":400,"caption":"Felipe Elia"},"logo":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/"},"description":"Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.","sameAs":["https:\/\/www.facebook.com\/felipe.elia","https:\/\/www.instagram.com\/felipe.elia\/","https:\/\/www.linkedin.com\/in\/felipeelia\/","https:\/\/twitter.com\/https:\/\/twitter.com\/felipe_elia","https:\/\/www.youtube.com\/channel\/UCD_26rOE3ClALcZreTkyIoQ"],"url":"https:\/\/felipeelia.com.br\/author\/admin\/"}]}},"uagb_featured_image_src":{"full":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu.jpg",720,514,false],"thumbnail":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu-150x150.jpg",150,150,true],"medium":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu-300x214.jpg",300,214,true],"medium_large":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu.jpg",720,514,false],"large":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu.jpg",720,514,false],"1536x1536":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu.jpg",720,514,false],"2048x2048":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu.jpg",720,514,false],"ocean-thumb-m":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu.jpg",600,428,false],"ocean-thumb-ml":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu.jpg",630,450,false],"ocean-thumb-l":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu.jpg",720,514,false],"yarpp-thumbnail":["https:\/\/felipeelia.com.br\/wp-content\/uploads\/2016\/12\/wordpress-submenu.jpg",120,86,false]},"uagb_author_info":{"display_name":"Felipe Elia","author_link":"https:\/\/felipeelia.com.br\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"WordPress e submenus: quer exibir apenas uma parte de um menu maior, sem criar outro para n\u00e3o dificultar a manuten\u00e7\u00e3o? Leia esse tutorial e saiba como.","_links":{"self":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts\/714"}],"collection":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/comments?post=714"}],"version-history":[{"count":0,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts\/714\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/media\/715"}],"wp:attachment":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/media?parent=714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/categories?post=714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/tags?post=714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}