A anatomia de um menu WordPress<\/h2>\n
Para os n\u00e3o iniciados, um menu WordPress \u00e9 frequentemente uma cole\u00e7\u00e3o de links (incluindo dropdowns<\/a>). \u00c9 uma pe\u00e7a de funcionalidade simples que \u00e9 apenas uma “v\u00e9rtebra” na espinha dorsal do seu site.<\/p>\n Na pr\u00f3xima se\u00e7\u00e3o, veremos os menus em um site com mais detalhes. Por enquanto, saiba que eles podem caber em qualquer lugar que voc\u00ea gostaria de exibi-los. Voc\u00ea pode ter apenas algumas op\u00e7\u00f5es pr\u00e9-selecionadas (baseadas em \u00e1reas widget). Em um sentido t\u00e9cnico, no entanto, um menu pode ir a qualquer lugar.<\/p>\n Naturalmente, um menu WordPress \u00e9 fundamental para navegar em um site. Se voc\u00ea tiver um menu de navega\u00e7\u00e3o claro e definido, isso ajudar\u00e1 os usu\u00e1rios a contornar o seu site, e manter\u00e1 a sua taxa de retorno<\/a> baixa.<\/p>\n Eles tamb\u00e9m servem para outro prop\u00f3sito: os seus menus ajudam na Otimiza\u00e7\u00e3o para Mecanismos de Pesquisa (SEO)<\/a>. Otimizar um menu WordPress para SEO \u00e9 mais sobre o que deixar de fora do que colocar dentro. Para come\u00e7ar, voc\u00ea pode eliminar elementos – tais como tag clouds – e manter o n\u00famero de links que voc\u00ea inclui baixo.<\/p>\n Embora o Google lhe permita adicionar at\u00e9 250 links em uma p\u00e1gina, manter o seu “valor de link<\/a>” alto \u00e9 essencial. Como tal, cortar o n\u00famero de links externos ir\u00e1 servi-lo bem a longo prazo.<\/p>\n\n Como voc\u00ea j\u00e1 deve entender, dependendo das necessidades do seu aplicativo, voc\u00ea pode optar por diferentes estruturas de menu do WordPress.<\/p>\n Os menus de cabe\u00e7alho, por exemplo, s\u00e3o os mais comuns porque lidam com a navega\u00e7\u00e3o prim\u00e1ria do site<\/a>. Voc\u00ea ver\u00e1 frequentemente menus menores acima da navega\u00e7\u00e3o principal tamb\u00e9m, pois este \u00e9 um excelente lugar para \u00edcones de m\u00eddias sociais, barras de busca, e muito mais.<\/p>\n O site parceiro da Kinsta SAU\/CAL<\/a>\u00a0tem um menu “fly-in” que inclui navega\u00e7\u00e3o e links sociais:<\/p>\n Este menu mostra que h\u00e1 mais casos de uso para um menu WordPress do que navegar em um site. Usando a funcionalidade incorporada do WordPress (falaremos sobre isso mais tarde), voc\u00ea pode criar um menu para quase tudo o que voc\u00ea precisa.<\/p>\n T\u00e3o popular quanto a navega\u00e7\u00e3o de cabe\u00e7alho \u00e9 o rodap\u00e9. Voc\u00ea usar\u00e1 frequentemente esta \u00e1rea para repetir sua navega\u00e7\u00e3o prim\u00e1ria para usu\u00e1rios que se deslocam para baixo. Al\u00e9m disso, \u00e9 um excelente lugar para oferecer mais links baseados no contexto para os seus produtos e servi\u00e7os:<\/p>\n Voc\u00ea tamb\u00e9m ver\u00e1 menus dentro de uma barra lateral se o site o usar:<\/p>\n Embora voc\u00ea n\u00e3o veja a navega\u00e7\u00e3o prim\u00e1ria aqui em muitos casos, \u00e9 um lugar tradicional para links sociais<\/a>, arquivos de artigos de blogs e muito mais.<\/p>\n A cria\u00e7\u00e3o de um menu WordPress \u00e9 um processo sem absurdos, independentemente do seu n\u00edvel de especializa\u00e7\u00e3o. H\u00e1 tr\u00eas maneiras de fazer o trabalho: use a funcionalidade incorporada do WordPress; instale um plugin adequado ou suje suas m\u00e3os com c\u00f3digo.<\/p>\n A seguir, vamos mostrar-lhe como criar um menu WordPress usando as tr\u00eas abordagens.<\/p>\n O WordPress tem ferramentas embutidas para ajud\u00e1-lo a criar um menu. Uma tela dedicada dentro do administrador do WordPress ser\u00e1 familiar a todos, exceto aos usu\u00e1rios mais novos.<\/p>\n Naturalmente, usar a funcionalidade nativa para criar o seu menu WordPress tem in\u00fameros benef\u00edcios. Para come\u00e7ar, voc\u00ea tem total compatibilidade com o seu site. Al\u00e9m disso, voc\u00ea pode construir seus menus usando uma interface familiar e ferramentas nativas.<\/p>\n Para chegar l\u00e1, v\u00e1 para a p\u00e1gina Apar\u00eancia > Menus <\/strong>dentro do WordPress:<\/p>\n Esta tela se divide em algumas se\u00e7\u00f5es diferentes. No topo, voc\u00ea encontrar\u00e1 a op\u00e7\u00e3o de selecionar um menu atual ou criar um novo menu:<\/p>\n Se decidir construir um novo menu, d\u00ea-lhe um nome e consulte a se\u00e7\u00e3o Defini\u00e7\u00f5es do Menu<\/strong>:<\/p>\n H\u00e1 muitas caixas de sele\u00e7\u00e3o aqui, mas voc\u00ea tem duas decis\u00f5es principais a tomar:<\/p>\n Quando estiver pronto, clique no bot\u00e3o Criar Menu<\/strong>. A tela ir\u00e1 se atualizar e mostrar\u00e1 que voc\u00ea est\u00e1 no seu novo menu. A seguir, d\u00ea uma olhada no lado esquerdo da tela:<\/p>\n Esta tela lista todos os artigos, p\u00e1ginas, taxonomias e outros ativos vincul\u00e1veis em seu site. Voc\u00ea constr\u00f3i seu menu marcando as caixas \u00e0 esquerda, depois clique no bot\u00e3o Adicionar ao Menu<\/strong>.<\/p>\n Isso ir\u00e1 mov\u00ea-los para a se\u00e7\u00e3o central da tela Menus<\/strong>:<\/p>\n Aqui, voc\u00ea pode arrastar e soltar itens do menu para o lugar desejado. Se voc\u00ea clicar na seta de expans\u00e3o ao lado de cada item, voc\u00ea tamb\u00e9m pode definir uma etiqueta para o seu item de menu ou remov\u00ea-lo:<\/p>\n Depois de clicar em Salvar Menu<\/strong>, voc\u00ea est\u00e1 pronto para ir. Se voc\u00ea expandir o menu Op\u00e7\u00f5es de Tela na parte superior da tela, no entanto, h\u00e1 mais que voc\u00ea pode fazer com seu menu do WordPress:<\/p>\n O grupo Elementos da tela<\/strong> permite mostrar as meta box do menu na barra lateral esquerda. Em contraste, o grupo de propriedades avan\u00e7adas do menu<\/strong> exibe metas de links, descri\u00e7\u00f5es e classes CSS para os itens da lista.<\/p>\n H\u00e1 mais um aspecto da tela dos Menus <\/strong>que vale a pena notar. A meta box de Links personalizados <\/strong>permite-lhe definir um link \u00e0 sua escolha, em vez de uma p\u00e1gina pr\u00e9-definida no seu site:<\/p>\n Esta op\u00e7\u00e3o \u00e9 como voc\u00ea pode adicionar links de m\u00eddias sociais ao seu menu do WordPress. A plataforma ir\u00e1 puxar o \u00edcone correto para voc\u00ea com base no site que voc\u00ea selecionar, dando a voc\u00ea a oportunidade de exibir logotipos bem reproduzidos para os sites que voc\u00ea escolher.<\/p>\n A solu\u00e7\u00e3o imediata para adicionar funcionalidade ao WordPress \u00e9 atrav\u00e9s de plugins<\/a>. A se\u00e7\u00e3o anterior abordou o motivo pelo qual a op\u00e7\u00e3o nativa do WordPress \u00e9 quase tudo que voc\u00ea precisa, mas os plugins podem expandir essa funcionalidade.<\/p>\n H\u00e1 uma quest\u00e3o de se voc\u00ea precisa de um plugin dedicado (e adicional) para criar um menu WordPress, embora haja muitas boas raz\u00f5es para isso. Para come\u00e7ar, voc\u00ea muitas vezes far\u00e1 um menu baseado em um estilo que voc\u00ea n\u00e3o pode acessar sob a configura\u00e7\u00e3o padr\u00e3o. Projetos espec\u00edficos, “mega menus” e muito mais est\u00e3o dispon\u00edveis para voc\u00ea atrav\u00e9s de plugins.<\/p>\n Al\u00e9m disso, voc\u00ea pode construir menus usando um editor dedicado e escolher entre modelos pr\u00e9-definidos em muitos casos. Juntamente com extensas op\u00e7\u00f5es de personaliza\u00e7\u00e3o, voc\u00ea tem uma solu\u00e7\u00e3o “sem c\u00f3digo” que ir\u00e1 fornecer um menu WordPress que funciona para o seu site.<\/p>\n Por exemplo, o plugin Max MegaMenu<\/a> n\u00e3o oferece surpresas que voc\u00ea pode encontrar:<\/p>\n Uma vez instalado e ativado<\/a>, voc\u00ea encontrar\u00e1 um novo painel do Mega Menu <\/strong>dentro do WordPress:<\/p>\n Se voc\u00ea olhar para a tela Localiza\u00e7\u00f5es de Menu<\/strong>, voc\u00ea notar\u00e1 que h\u00e1 mais customiza\u00e7\u00f5es dispon\u00edveis para voc\u00ea:<\/p>\n Voc\u00ea tamb\u00e9m pode aplicar temas de menu e edit\u00e1-los com um escopo similar a alguns dos melhores construtores de p\u00e1ginas do mercado:<\/p>\n H\u00e1 muito mais em que poder\u00edamos cavar aqui, embora estar\u00edamos nos repetindo. Encorajamos voc\u00ea a conferir nosso artigo anterior nos Melhores Plugins de Menu do WordPress<\/a>. Vamos entrar em detalhes sobre como escolher o plugin certo para voc\u00ea e como us\u00e1-lo.<\/p>\n Codificar seu pr\u00f3prio menu WordPress \u00e9 uma maneira confi\u00e1vel de atingir seu objetivo para os corajosos (ou se voc\u00ea \u00e9 um desenvolvedor criando um novo tema WordPress). \u00c9 claro que voc\u00ea n\u00e3o vai abrir um editor de c\u00f3digo no dia-a-dia para adicionar um menu. Para isso, voc\u00ea vai usar as ferramentas nativas do WordPress (ou talvez um plugin).<\/p>\n Dito isto, aprender como codificar um menu WordPress \u00e9 um requisito vital se voc\u00ea quiser desenvolver temas. H\u00e1 quatro partes<\/a> para o sucesso:<\/p>\n Vamos supor que voc\u00ea \u00e9 \u00fatil com um editor de c\u00f3digo<\/a>, que tem um ambiente de teste<\/a> para trabalhar e que suas habilidades s\u00e3o afiadas<\/a>. Se voc\u00ea ainda n\u00e3o tem um tema para trabalhar, voc\u00ea pode usar as op\u00e7\u00f5es padr\u00e3o do WordPress ou escolher um de nossa lista de temas mais r\u00e1pidos de WordPress<\/a>.<\/p>\n Quando voc\u00ea estiver pronto, voc\u00ea vai querer abrir o arquivo functions.php <\/strong>do tema. <\/strong>Note que isto \u00e9 diferente do arquivo WordPress geral com o mesmo nome. Aqui, voc\u00ea precisa registrar o seu menu. Em outras palavras, voc\u00ea tem que dizer ao WordPress o que exibir na p\u00e1gina Appearance > Menus<\/strong>. Para fazer isso, voc\u00ea utiliza a fun\u00e7\u00e3o register_nav_menus()<\/a>:<\/p>\n Este c\u00f3digo diz \u00e0 aba Gerenciar locais <\/strong>dentro do WordPress para exibir dois menus: Menu de Cabe\u00e7alho <\/strong>e Outro Menu<\/strong>:<\/p>\n A seguir, voc\u00ea tem que exibir seu menu usando a fun\u00e7\u00e3o wp_nav_menu()<\/a>. Voc\u00ea adicionar\u00e1 isso no arquivo de modelo que corresponde ao local onde voc\u00ea gostaria de exibir o menu. No nosso caso, vamos com o cabe\u00e7alho, ent\u00e3o vamos adicionar o seguinte c\u00f3digo ao arquivo header.php <\/strong>do nosso tema:<\/p>\n Pode ser que este c\u00f3digo esteja embrulhado em uma declara\u00e7\u00e3o Neste ponto, voc\u00ea poderia trabalhar com o menu no WordPress como qualquer outro. No entanto, voc\u00ea tamb\u00e9m pode querer considerar adicionar conte\u00fado adicional aos itens do seu menu. Por exemplo, voc\u00ea pode expandir o array definido para incluir tags HTML que ir\u00e3o renderizar na sa\u00edda:<\/p>\n A sua \u00faltima tarefa aqui \u00e9 definir um callback. Por padr\u00e3o, o WordPress exibe um menu populado quando o especificado n\u00e3o \u00e9 encontrado. Como alternativa, o WordPress exibir\u00e1 um menu de p\u00e1ginas quando nenhum menu personalizado for selecionado. Se esta n\u00e3o for sua a\u00e7\u00e3o desejada, voc\u00ea pode definir um par\u00e2metro diferente para o argumento de Assim que voc\u00ea entender como criar um menu WordPress, voc\u00ea pode come\u00e7ar a melhorar a funcionalidade. Veremos isso em nossa se\u00e7\u00e3o final para criar uma meta box de menu personalizada para WordPress.<\/p>\n\n Como esta se\u00e7\u00e3o est\u00e1 avan\u00e7ada, vamos fazer algumas suposi\u00e7\u00f5es antes de continuarmos:<\/p>\n Est\u00e1 al\u00e9m do escopo deste artigo, mas voc\u00ea pode usar o Plugin Boilerplate Generator WordPress<\/a>\u00a0para criar um novo modelo de plugin padronizado.<\/p>\n Quando estiver pronto, crie e carregue o seu plugin para o WordPress:<\/p>\n A seguir, navegue at\u00e9 a pasta do plugin e abra o arquivo principal. Aqui, adicione o seguinte c\u00f3digo:<\/p>\n A fun\u00e7\u00e3o add_meta_box() do<\/a> WordPress ir\u00e1 registrar uma meta box dentro do administrador do WordPress. H\u00e1 alguns argumentos que voc\u00ea vai querer referir dentro da documenta\u00e7\u00e3o oficial. Tamb\u00e9m usamos o filtro nav_menu_meta_box_object()<\/a> porque n\u00e3o h\u00e1 nenhuma a\u00e7\u00e3o dentro do arquivo nav-menus.php <\/strong>para se conectar. Esta instru\u00e7\u00e3o determina se a fun\u00e7\u00e3o adiciona uma meta box de item de menu para um tipo de objeto. Quando o filtro \u00e9 executado, A seguir, podemos definir uma fun\u00e7\u00e3o de callback para produzir o conte\u00fado HTML para a meta box:<\/p>\n A vari\u00e1vel global lembra o ID do menu atual, enquanto A partir daqui, temos de determinar o separador activo na meta box personalizada. Para fazer isso, definimos o valor de Estamos usando duas abas aqui, mas voc\u00ea pode adicionar quantas voc\u00ea precisar:<\/p>\n A seguinte linha ir\u00e1 obter todos os usu\u00e1rios com privil\u00e9gios de escrita e adicionar muitas propriedades ao objeto Aqui, Al\u00e9m disso, o array Agora voc\u00ea pode imprimir a marca\u00e7\u00e3o meta box. Para fazer isso, vamos construir as etiquetas e links.<\/p>\n Lembre-se de atribuir os nomes de classe, IDs e atributos de dados corretos aos elementos da meta box; caso contr\u00e1rio, o menu n\u00e3o funcionar\u00e1 como esperado.<\/p>\n Tanto as fun\u00e7\u00f5es Neste ponto, temos uma meta box com abas definidas:<\/p>\n O nosso pr\u00f3ximo passo \u00e9 construir o conte\u00fado HTML das abas.<\/p>\n Voc\u00ea vai querer seguir o c\u00f3digo da se\u00e7\u00e3o anterior dentro da fun\u00e7\u00e3o Em resumo, cada separador cont\u00e9m uma lista de caixas de verifica\u00e7\u00e3o. A fun\u00e7\u00e3o walk_nav_menu_tree()<\/a> imprime a lista usando tr\u00eas argumentos: O array A partir daqui, podemos dar os retoques finais.<\/p>\n A maior parte da meta box personalizada est\u00e1 completa, embora ainda precisemos adicionar um bot\u00e3o Submeter<\/strong> e um \u00edcone de processamento “spinner”.<\/p>\n Aqui est\u00e1 um pequeno peda\u00e7o de c\u00f3digo que voc\u00ea pode colocar logo ap\u00f3s o bloco anterior:<\/p>\n Com este conhecimento, voc\u00ea pode adicionar quase todas as funcionalidades aos seus menus! Note que h\u00e1 tamb\u00e9m um public Gist<\/a> do plugin no GitHub que est\u00e1 dispon\u00edvel para download gratuito.<\/p>\n Um menu WordPress \u00e9 um aspecto crucial do seu site. Por causa disso, a plataforma oferece um painel nativo e poderoso que lhe permitir\u00e1 personalizar cada menu do seu site. No entanto, ele n\u00e3o ir\u00e1 fornecer tudo o que voc\u00ea precisa por padr\u00e3o.<\/p>\n![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-menu.png\")
Os diferentes tipos de estruturas de menu do WordPress<\/h2>\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/fly-in-menu.png\")
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/kinsta-footer-menu.png\")
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/sidebar-navigation.png\")
Como criar um menu WordPress personalizado (3 M\u00e9todos)<\/h2>\n
1. Use a funcionalidade incorporada do WordPress para criar seu menu<\/h3>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/The-WordPress-Menu-Screen.png\")
<\/a>![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menus-page.png\")
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/create-new-wordpress-menu.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menu-settings.png\")
\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-menu-assets.png\")
![\"Arrastar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menu-drag-and-drop.png\")
![\"Expandindo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menu-item-expand.png\")
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/screen-options.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/custom-links-box.png\")
2. Use um plugin para criar seu menu WordPress personalizado<\/h3>\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/max-mega-menu.png\")
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/mega-menu-panel.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/mega-menu-locations.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menu-themes.png\")
3. Escreva o c\u00f3digo para criar o seu menu WordPress personalizado<\/h3>\n
\n
function register_my_menus() {\n register_nav_menus(\n array(\n 'header' => __( 'Header Menu' ),\n 'other' => __( 'Other Menu' )\n )\n );\n }\n add_action( 'init', 'register_my_menus' );\n<\/code><\/pre>\n![\"Registrando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/register-menus.png\")
wp_nav_menu( array( 'theme_location' => 'header' ) );\n<\/code><\/pre>\nif<\/code>, juntamente com alguns dos seus outros menus, ent\u00e3o voc\u00ea vai querer seguir as conven\u00e7\u00f5es que voc\u00ea encontrar.<\/p>\nwp_nav_menu(\n array(\n 'menu' => 'primary',\n 'link_before' => '',\n 'link_after' => '<\/span>',\n )\n);\n<\/code><\/pre>\ntheme-location<\/code> \u00a0e tamb\u00e9m adicionar um argumento fallback_cb<\/code>:<\/p>\nwp_nav_menu(\n array(\n 'menu' => 'primary',\n \/\/ do not fall back to first non-empty menu\n 'theme_location' => '__no_such_location',\n \/\/ do not fall back to wp_page_menu()\n 'fallback_cb' => false\n )\n);\n<\/code><\/pre>\nComo melhorar o seu menu WordPress<\/h2>\n
\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/plugin-boilerplate-generator.png\")
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/install-plugin.png\")
\/**\n * Add menu meta box\n *\n * @param object $object The meta box object\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\n *\/\nfunction custom_add_menu_meta_box( $object ) {\n add_meta_box( 'custom-menu-metabox', __( 'Authors' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'default' );\n return $object;\n}\nadd_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);\n<\/code><\/pre>\nadd_meta_box<\/code> registra a meta box personalizada.<\/p>\nDefini\u00e7\u00e3o de uma fun\u00e7\u00e3o callback<\/h4>\n
\/**\n * Displays a metabox for an author menu item.\n *\n * @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu\n *\/\nfunction custom_menu_meta_box(){\n global $nav_menu_selected_id;\n $walker = new Walker_Nav_Menu_Checklist();\n ...\n}\n<\/code><\/pre>\n$walker<\/code> armazena uma nova inst\u00e2ncia do objeto Walker_Nav_Menu_Checklist<\/code>. Isso ir\u00e1 construir a lista HTML dos itens de menu.<\/p>\n$current_tab<\/code>, trabalhando dentro da elipse definida no bloco de c\u00f3digo anterior.<\/p>\n$current_tab = 'all';\nif ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) {\n $current_tab = 'admins';\n} elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] ) {\n $current_tab = 'all';\n}\n<\/code><\/pre>\n$authors<\/code>:<\/p>\n$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) );\n$admins = array();\n\n\/* set values to required item properties *\/\nforeach ( $authors as &$author ) {\n $author->classes = array();\n $author->type = 'custom';\n $author->object_id = $author->nickname;\n $author->title = $author->nickname . ' - ' . implode(', ', $author->roles);\n $author->object = 'custom';\n $author->url = get_author_posts_url( $author->ID ); \n $author->attr_title = $author->displayname;\n if( $author->has_cap( 'edit_users' ) ){\n $admins[] = $author;\n }\n}\n$removed_args = array( 'action', 'customlink-tab', 'edit-menu-item', 'menu-item', 'page-tab', '_wpnonce' );\n?>\n<\/code><\/pre>\nget_users<\/code> retorna um array de objetos $user<\/code> selecionados pelos par\u00e2metros especificados. O par\u00e2metro who<\/code> ir\u00e1 for\u00e7ar o WordPress a consultar o banco de dados para usu\u00e1rios que t\u00eam privil\u00e9gios de escrita.<\/p>\n$admins<\/code> ir\u00e1 armazenar um array de autores, enquanto $removed_args<\/code> ir\u00e1 armazenar uma lista de vari\u00e1veis de consulta a serem removidas.<\/p>\n<div id=\"authorarchive\" class=\"categorydiv\">\n\t<ul id=\"authorarchive-tabs\" class=\"authorarchive-tabs add-menu-item-tabs\">\n\t\t<li <?php echo ( 'all' == $current_tab ? ' class=\"tabs\"' : '' ); ?>>\n\t\t\t<a class=\"nav-tab-link\" data-type=\"tabs-panel-authorarchive-all\" href=\"<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'all', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-all\">\n\t\t\t\t<?php _e( 'View All' ); ?>\n\t\t\t<\/a>\n\t\t<\/li>\n\n\t\t<li <?php echo ( 'admins' == $current_tab ? ' class=\"tabs\"' : '' ); ?>>\n\t\t\t<a class=\"nav-tab-link\" data-type=\"tabs-panel-authorarchive-admins\" href=\"<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'admins', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-admins\">\n\t\t\t\t<?php _e( 'Admins' ); ?>\n\t\t\t<\/a>\n\t\t<\/li>\n\t<\/ul><\/code><\/pre>\nadd_query_arg<\/code> como remove_query_arg<\/code> definem valores espec\u00edficos de tabula\u00e7\u00e3o para a vari\u00e1vel authorarchive-tabs<\/code> e removem vari\u00e1veis desnecess\u00e1rias.<\/p>\n![\"Separadores](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/authors-empty-meta-box.png\")
Construindo o conte\u00fado HTML para as abas meta box<\/h4>\n
custom_menu_meta_box()<\/code>. Para construir o conte\u00fado, use o seguinte dentro da tag <div><\/code> que voc\u00ea escreveu na \u00faltima se\u00e7\u00e3o:<\/p>\n<div id=\"tabs-panel-authorarchive-all\" class=\"tabs-panel tabs-panel-view-all <?php echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>\">\n\t<ul id=\"authorarchive-checklist-all\" class=\"categorychecklist form-no-clear\">\n\t<?php\n\t\techo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $authors), 0, (object) array( 'walker' => $walker) );\n\t?>\n\t<\/ul>\n<\/div>\n\n<div id=\"tabs-panel-authorarchive-admins\" class=\"tabs-panel tabs-panel-view-admins <?php echo ( 'admins' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>\">\n\t<ul id=\"authorarchive-checklist-admins\" class=\"categorychecklist form-no-clear\">\n\t<?php\n\t\techo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $admins), 0, (object) array( 'walker' => $walker) );\n\t?>\n\t<\/ul>\n<\/div><\/code><\/pre>\n$items<\/code>, $depth<\/code>, e $r<\/code> – todos necess\u00e1rios.<\/p>\n$items<\/code> armazena um array de usu\u00e1rios administrativos. A fun\u00e7\u00e3o array_map()<\/code> aplica a fun\u00e7\u00e3o wp_setup_nav_menu_item()<\/a> a $admins<\/code> e adiciona propriedades de item de menu aos elementos do array.<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/authors-meta-box-populated.png\")
Adicionando um Bot\u00e3o Submeter<\/h4>\n
<p class=\"button-controls wp-clearfix\">\n\t<span class=\"list-controls\">\n\t\t<a href=\"<?php echo esc_url( add_query_arg( array( 'authorarchive-tab' => 'all', 'selectall' => 1, ), remove_query_arg( $removed_args ) )); ?>#authorarchive\" class=\"select-all\"><?php _e('Select All'); ?><\/a>\n\t<\/span>\n\t<span class=\"add-to-menu\">\n\t\t<input type=\"submit\"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?> class=\"button-secondary submit-add-to-menu right\" value=\"<?php esc_attr_e('Add to Menu'); ?>\" name=\"add-authorarchive-menu-item\" id=\"submit-authorarchive\" \/>\n\t\t<span class=\"spinner\"><\/span>\n\t<\/span>\n<\/p>\n\n<\/div>\n<?php\n}<\/code><\/pre>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/complete-meta-box.png\")
Resumo<\/h2>\n