Com essa altera\u00e7\u00e3o, n\u00e3o h\u00e1 mais necessidade de for\u00e7ar os usu\u00e1rios do tema ou do plug-in a lembrar e digitar os nomes das classes para ativar as "configura\u00e7\u00f5es" do item de menu. At\u00e9 agora, isso era um processo comum para coisas como fazer um item de menu parecer um bot\u00e3o ou alternar entre diferentes designs de menus suspensos, muitas vezes em combina\u00e7\u00e3o com um menu personalizado.<\/p>\n
Tenha em mente que para que este c\u00f3digo funcione \u00e9 necess\u00e1ria a vers\u00e3o m\u00ednima do WordPress 5.4.0.<\/p>\n
O que vamos fazer neste tutorial<\/h2>\n
Com o novo gancho para itens de menu e o suporte do WordPress para adicionar metadados a itens de menu, n\u00e3o h\u00e1 limite para o tipo de configura\u00e7\u00e3o que voc\u00ea deseja. O processo depende de qual \u00e9 o seu resultado final. Na maioria dos casos, adicionar uma classe CSS personalizada ao item de menu \u00e9 suficiente.<\/p>\n
Para simplificar, neste post adicionaremos uma caixa de sele\u00e7\u00e3o chamada “Mostrar como bot\u00e3o". Em nosso tema, temos CSS que estilizar\u00e1 um item de menu para se parecer com um bot\u00e3o (call to action) se o item tiver uma determinada classe. Em vez de for\u00e7ar o usu\u00e1rio do tema a digitar a classe CSS “menu-item-button” no campo de classe CSS do item de menu em admin, oferecemos a eles uma caixa de sele\u00e7\u00e3o amig\u00e1vel.<\/p>\n
No final deste post voc\u00ea encontrar\u00e1 algumas ideias para outras a\u00e7\u00f5es e filtros para usar se quiser fazer mais do que apenas adicionar uma classe CSS.<\/p>\n
Vamos come\u00e7ar!<\/p>\n
Adicionando campos personalizados aos itens de menu<\/h2>\n
O novo gancho adicionado recentemente \u00e9 O gancho vem com nada menos que cinco par\u00e2metros. Neste post vamos fazer coisas que requerem apenas os dois primeiros.<\/p>\n Todas as entradas adicionadas neste gancho precisam ter um Vamos come\u00e7ar com um exemplo de adi\u00e7\u00e3o de uma caixa de sele\u00e7\u00e3o para fazer o item de menu parecer um bot\u00e3o quando o menu \u00e9 colocado como menu principal. Vamos nos conectar Na linha Ent\u00e3o \u00e9 uma quest\u00e3o de ecoar um bom HTML. O c\u00f3digo acima usa algumas das classes j\u00e1 usadas para itens de menu para torn\u00e1-lo bonito sem adicionar um estilo personalizado (uma As partes importantes acontecem na linha [wp_nav_menu_item_custom_fields](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_item_custom_fields\/)<\/code>. \u00c9 um gancho que dispara logo acima dos bot\u00f5es de movimento de um item de menu;<\/p>\n![\"Adicionar](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e51560662d6.png\")
<\/a><\/p>\n\n
item_id<\/code>: O ID do item de menu atual<\/li>\nitem<\/code>: Objeto de dados do item de menu<\/li>\ndepth<\/code>: A profundidade do item de menu dentro do menu, representada como um n\u00famero inteiro<\/li>\nargs<\/code>: Um objeto de argumentos de item de menu<\/li>\nnav_id<\/code>: O ID do menu de navega\u00e7\u00e3o<\/li>\n<\/ul>\nname<\/code>atributo (j\u00e1 que o editor de menus \u00e9 um formul\u00e1rio). O atributo name pode ser nomeado como voc\u00ea quiser, mas deve ser exclusivo e voc\u00ea deve adicionar o ID do item de menu (primeiro par\u00e2metro) entre colchetes. Ex.: name=\"my-custom-field[<item ID>]<\/code>“. \u00c9 assim que as outras configura\u00e7\u00f5es de itens de menu padr\u00e3o fazem isso.<\/p>\nwp_nav_menu_item_custom_fields<\/code>com apenas os dois primeiros par\u00e2metros e fazer o seguinte:<\/p>\nadd_action('wp_nav_menu_item_custom_fields', function($item_id, $item) {\n $show_as_button = get_post_meta($item_id, '_show-as-button', true);\n ?>\n <p class=\"awp-show-as-button description description-wide\">\n <label for=\"awp-menu-item-button-<?php echo $item_id; ?>\" >\n <input type=\"checkbox\" \n id=\"awp-menu-item-button-<?php echo $item_id; ?>\" \n name=\"awp-menu-item-button[<?php echo $item_id; ?>]\" \n <?php checked($show_as_button, true); ?> \n \/><?php _e('Show as a button', 'awp'); ?>\n <\/label>\n <\/p>\n <?php\n}, 10, 2);<\/code><\/pre>\n#2<\/code>buscamos o valor atual do nosso item de menu meta. Os itens do menu usam o post meta, ent\u00e3o usamos [get_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/)()<\/code>o que voc\u00ea provavelmente j\u00e1 conhece. Armazenamos os metadados do item de menu pela tecla ‘ _show-as-button<\/code>‘.<\/p>\np<\/code>tag com as classes ” description description-wide<\/code>“).<\/p>\n#8<\/code>e #9<\/code>. Seguimos a regra do atributo name, adicionando o $item_id<\/code>entre colchetes, e garantimos que o valor salvo atual seja refletido na caixa de sele\u00e7\u00e3o. Voc\u00ea pode adicionar qualquer tipo de entrada e at\u00e9 v\u00e1rias entradas aqui. Apenas lembre-se de fornecer o name<\/code>atributo apropriado e definir seu valor atual corretamente.<\/p>\n
![\"Adicionar](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e5156147558.png\")
<\/a><\/p>\n![\"Adicionar](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e515621cd00.png\")
<\/a><\/p>\n