Adicionar configurações de meta personalizadas amigáveis ​​​​aos itens de menu do WordPress

Em uma atualização recente do WordPress, agora é possível e bastante simples adicionar meta campos personalizados aos itens de menu. Nesta postagem, aprenderemos como adicionar nossas configurações personalizadas aos itens de menu, atualizar suas configurações e, finalmente, como usar os metadados em uso.

Recentemente, o WordPress anunciou suporte para adicionar campos personalizados aos itens de menu na versão 5.4. Duas novas ações foram adicionadas que permitem que os desenvolvedores adicionem campos personalizados na página de administração do menu do WordPress e no editor de menus do Customizer. Neste post vamos focar em um deles, o da página de administração do menu WordPress.

Com essa alteração, não há mais necessidade de forçar os usuários do tema ou do plug-in a lembrar e digitar os nomes das classes para ativar as "configurações" do item de menu. Até agora, isso era um processo comum para coisas como fazer um item de menu parecer um botão ou alternar entre diferentes designs de menus suspensos, muitas vezes em combinação com um menu personalizado.

Tenha em mente que para que este código funcione é necessária a versão mínima do WordPress 5.4.0.

O que vamos fazer neste tutorial

Com o novo gancho para itens de menu e o suporte do WordPress para adicionar metadados a itens de menu, não há limite para o tipo de configuração que você deseja. O processo depende de qual é o seu resultado final. Na maioria dos casos, adicionar uma classe CSS personalizada ao item de menu é suficiente.

Para simplificar, neste post adicionaremos uma caixa de seleção chamada “Mostrar como botão". Em nosso tema, temos CSS que estilizará um item de menu para se parecer com um botão (call to action) se o item tiver uma determinada classe. Em vez de forçar o usuário 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ção amigável.

No final deste post você encontrará algumas ideias para outras ações e filtros para usar se quiser fazer mais do que apenas adicionar uma classe CSS.

Vamos começar!

Adicionando campos personalizados aos itens de menu

O novo gancho adicionado recentemente é [wp_nav_menu_item_custom_fields](https://developer.wordpress.org/reference/hooks/wp_nav_menu_item_custom_fields/). É um gancho que dispara logo acima dos botões de movimento de um item de menu;

O gancho vem com nada menos que cinco parâmetros. Neste post vamos fazer coisas que requerem apenas os dois primeiros.

• item_id: O ID do item de menu atual
• item: Objeto de dados do item de menu
• depth: A profundidade do item de menu dentro do menu, representada como um número inteiro
• args: Um objeto de argumentos de item de menu
• nav_id: O ID do menu de navegação

Todas as entradas adicionadas neste gancho precisam ter um nameatributo (já que o editor de menus é um formulário). O atributo name pode ser nomeado como você quiser, mas deve ser exclusivo e você deve adicionar o ID do item de menu (primeiro parâmetro) entre colchetes. Ex.: name="my-custom-field[<item ID>]“. É assim que as outras configurações de itens de menu padrão fazem isso.

Vamos começar com um exemplo de adição de uma caixa de seleção para fazer o item de menu parecer um botão quando o menu é colocado como menu principal. Vamos nos conectar wp_nav_menu_item_custom_fieldscom apenas os dois primeiros parâmetros e fazer o seguinte:

add_action('wp_nav_menu_item_custom_fields', function($item_id, $item) {
    $show_as_button = get_post_meta($item_id, '_show-as-button', true);
    ?>
    <p class="awp-show-as-button description description-wide">
        <label for="awp-menu-item-button-<?php echo $item_id; ?>" >
            <input type="checkbox" 
                id="awp-menu-item-button-<?php echo $item_id; ?>" 
                name="awp-menu-item-button[<?php echo $item_id; ?>]" 
                <?php checked($show_as_button, true); ?> 
            /><?php _e('Show as a button', 'awp'); ?>
        </label>
    </p>
    <?php
}, 10, 2);

Na linha #2buscamos o valor atual do nosso item de menu meta. Os itens do menu usam o post meta, então usamos [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()o que você provavelmente já conhece. Armazenamos os metadados do item de menu pela tecla ‘ _show-as-button‘.

Então é uma questão de ecoar um bom HTML. O código acima usa algumas das classes já usadas para itens de menu para torná-lo bonito sem adicionar um estilo personalizado (uma ptag com as classes ” description description-wide“).

As partes importantes acontecem na linha #8e #9. Seguimos a regra do atributo name, adicionando o $item_identre colchetes, e garantimos que o valor salvo atual seja refletido na caixa de seleção. Você pode adicionar qualquer tipo de entrada e até várias entradas aqui. Apenas lembre-se de fornecer o nameatributo apropriado e definir seu valor atual corretamente.

Com este código no código do seu tema functions.phpou plugin, agora você deve obter uma nova caixa de seleção para todos os itens de menu:

Atualmente não está salvando nosso campo. Esse é o próximo passo.

Atualizando os campos personalizados

Para atualizar campos personalizados em itens de menu, usamos o gancho [wp_update_nav_menu_item](https://developer.wordpress.org/reference/hooks/wp_update_nav_menu_item/). Ele vem com três argumentos, mas precisamos apenas do segundo que é o ID do item de menu.

Como você lida com o salvamento do valor de sua(s) entrada(s) depende de você. Eu escolhi simplesmente salvar ‘ _show-as-button‘ como verdadeiro ou falso. Basta usar [update_post_meta](https://developer.wordpress.org/reference/functions/update_post_meta/)()e/ou [delete_post_meta](https://developer.wordpress.org/reference/functions/delete_post_meta/)().

add_action('wp_update_nav_menu_item', function($menu_id, $menu_item_db_id) {
    $button_value = (isset($_POST['awp-menu-item-button'][$menu_item_db_id]) && $_POST['awp-menu-item-button'][$menu_item_db_id] == 'on')? true: false;
    update_post_meta($menu_item_db_id, '_show-as-button', $button_value);
}, 10, 2);

No código acima eu busco o valor do campo personalizado pelo seu nome no $_POSTarray. Como é uma caixa de seleção, ela não existirá na $_POSTmatriz (desmarcada) ou será retornada como ‘ on‘. Em seguida, atualizo a meta-chave ‘ _show-as-button‘ como verdadeira ou falsa.

Com o código acima você deverá ver que seu campo está atualizando corretamente ao salvar o menu.

O próximo passo é fazer algo sobre nossos metadados personalizados. E como você vai fazer isso depende de qual é o seu resultado final. Quanto ao nosso exemplo, tudo o que precisamos fazer é adicionar uma classe personalizada ao item de menu.

Atualizar a classe CSS do item de menu

O WordPress oferece um filtro nas classes do item de menu: [nav_menu_css_class](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/). Tudo o que precisamos fazer é adicionar uma classe personalizada ao array por esse filtro se nosso meta personalizado for true. Usamos [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()para obter o valor de ‘ _show-as-button‘ e se for verdadeiro, adicionamos a classe CSS ‘ menu-item-button‘:

add_filter('nav_menu_css_class', function($classes, $menu_item) {
    $show_as_button = get_post_meta($menu_item->ID, '_show-as-button', true);
    if ($show_as_button) {
        $classes[] = 'menu-item-button';
    }
    return $classes;
}, 10, 2);

O nav_menu_css_classfiltro vem com um total de quatro argumentos, incluindo os argumentos de menu e a profundidade do item de menu. Se necessário, você pode fazer com que os nomes das classes sejam afetados por esses valores. Por exemplo, normalmente não faria sentido transformar um item de menu em um botão, a menos que esteja no nível superior (e não dentro de um menu suspenso).

Com o código acima, você deve ver agora que qualquer item de menu que tenha marcado “Mostrar como botão” obterá a classe ‘ menu-item-button‘.

Lembre-se: você pode perceber que o nav_menu_css_classfiltro não é aplicado se o menu estiver usando um menu personalizado que, por exemplo, contém o método start_el(). O caminhante deve aplicar o nav_menu_css_classfiltro nas classes do item de menu (usando apply_filters()) para que o filtro acima funcione!

Outros usos de metacampos personalizados de itens de menu

Como mencionado, o processo de utilização dos campos personalizados depende do resultado final. É difícil fazer um post que abranja todas as possibilidades. Mas pelo menos isso deve lhe dar algumas idéias. O exemplo acima mostrou como simplesmente adicionar uma classe personalizada ao item de menu.

Em outros casos, você pode querer antecipar os metadados em um menu walker. Na maioria das funções em um menu walker, você tem acesso ao ID do item de menu e, portanto, pode buscar facilmente os metadados.

Uma alternativa ao uso de um menu personalizado, você pode usar o filtro [wp_setup_nav_menu_item](https://developer.wordpress.org/reference/functions/wp_setup_nav_menu_item/)para ter mais controle sobre o objeto de item de menu.

Ou você pode usar o filtro [wp_get_nav_menu_items](https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/)para, por exemplo, excluir itens de menu, se sua configuração for limitar a visibilidade do item de menu.