Adicionando campos personalizados aos itens de menu do WordPress

Publicados: 2021-03-23

O menu de um site é muitas vezes negligenciado ao projetar um site. Isso pode ser porque tradicionalmente tem sido tecnicamente desafiador personalizar. Isso agora mudou com o WordPress 5.4, que introduziu alguns novos ganchos que permitirão adicionar campos personalizados de menu do WordPress com relativa facilidade.

Os ganchos em questão são ganchos de ação wp_nav_menu_item_custom_fields e wp_nav_menu_item_custom_fields_customize_template . Com eles, agora você pode adicionar facilmente seus próprios campos personalizados aos itens de menu na página de edição do menu Admin e no painel de opções do Personalizador.

Neste artigo, veremos algumas maneiras simples de usar o gancho wp_nav_menu_item_custom_fields para adicionar seus próprios campos personalizados aos itens de menu, bem como dar uma olhada em dois plugins que também podem ser usados ​​para adicionar campos personalizados sem ter que codificar .

Vamos indo.

O Gancho de Campo Personalizado do Menu WordPress

O gancho wp_nav_menu_item_custom_fields é específico da tela Menu e é descrito da seguinte forma:

 do_action( 'wp_nav_menu_item_custom_fields', $id, $menu_item, $depth, $args );
  • O inteiro $id é o ID do item de menu
  • O objeto $menu_item é o objeto de dados do item de menu
  • O inteiro $depth é a profundidade do item de menu
  • O $args é o objeto dos argumentos do item de menu

O gancho é acionado logo antes dos botões de movimento de um item de menu de navegação no editor de menus e é introduzido no arquivo wp-admin/includes/class-walker-nav-menu-edit.php na linha 242.

Você pode demonstrar isso na prática com um exemplo muito simples. Abra o arquivo functions.php do seu tema ativo e adicione este pedaço de código:

 function my_menu_item_field() { echo 'A menu item test field'; } add_action( 'wp_nav_menu_item_custom_fields', 'my_menu_item_field' );

Agora, se você entrar na página de administração de edição do menu, verá a string ecoada em cada item do menu, conforme mostrado na captura de tela abaixo.

Claro, isso não tem nenhuma funcionalidade, mas mostra como é possível editar o menu. Vamos agora tentar algo mais útil adicionando algumas funcionalidades simples na forma de um campo personalizado.

Adicionar um campo personalizado de item de menu do WordPress usando código

Neste exemplo, vamos criar um campo personalizado de menu do WordPress que nos permite inserir uma descrição em qualquer item de menu.

Etapa um: adicionando a saída

Para começar, o que faremos primeiro é criar a função callback que exibirá o campo de entrada onde o usuário admin poderá preencher a descrição. Aqui está o código para fazer isso:

 function menu_item_desc( $item_id, $item ) { $menu_item_desc = get_post_meta( $item_id, '_menu_item_desc', true ); ?> <div> <span class="description"><?php _e( "Item Description", 'menu-item-desc' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_desc[<?php echo $item_id ;?>]" value="<?php echo esc_attr( $menu_item_desc ); ?>" /> </div> </div> <?php } add_action( 'wp_nav_menu_item_custom_fields', 'menu_item_desc', 10, 2 );

Adicione este código ao seu arquivo functions.php e salve-o. Agora, se você fizer login novamente na área Admin do seu site WordPress e abrir a tela Menus, você verá seu campo exibido. No nosso caso, chamamos isso de 'Descrição do item'. É claro que você está livre para editar o código acima para nomear seu campo como achar melhor. Apenas tenha em mente que precisa ser um nome exclusivo.

Etapa dois: salvando sua entrada

Em seguida, inseriremos o código abaixo que atualizará o valor do campo na meta-tabela de postagem do banco de dados, o que significa que nossa entrada será salva.

 function save_menu_item_desc( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_desc'][$menu_item_db_id] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_desc'][$menu_item_db_id] ); update_post_meta( $menu_item_db_id, '_menu_item_desc', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_desc' ); } } add_action( 'wp_update_nav_menu_item', 'save_menu_item_desc', 10, 2 );

Com este código salvo em seu arquivo functions.php , você pode voltar ao seu WordPress Admin, abrir um item de menu e adicionar uma descrição ao campo. Em seguida, vá para o banco de dados phpMyAdmin e você poderá ver a entrada na tabela de meta banco de dados post.

Se você alterar o valor no Menu admin, ele deve ser refletido no banco de dados. Da mesma forma, se você excluir o valor, ele deve desaparecer completamente.

Etapa três: mostrar o valor do campo do menu

A seguir, mostraremos como podemos recuperar nossos dados de campos de menu salvos e mostrá-los no menu front-end usando a função get_post_meta e o gancho nav_menu_item_title . Adicione o seguinte código abaixo ao seu arquivo functions.php .

 function show_menu_item_desc( $title, $item ) { if( is_object( $item ) && isset( $item->ID ) ) { $menu_item_desc = get_post_meta( $item->ID, '_menu_item_desc', true ); if ( ! empty( $menu_item_desc ) ) { $title .= '<p class="menu-item-desc">' . $menu_item_desc . '</p>'; } } return $title; } add_filter( 'nav_menu_item_title', 'show_menu_item_desc', 10, 2 );

O hook nav_menu_item_title filtra o título de um item de menu e pode ser encontrado dentro do arquivo wp-includes/class-walker-nav-menu.php na linha 225.

Ele aceita 4 parâmetros, a string de título do item de menu, o item de menu atual, um objeto de argumentos wp_nav_menu() e um inteiro que é a profundidade do item de menu.

Agora você deve ver a descrição sob o título do item de menu e, usando o CSS apropriado, é claro que você pode estilizá-lo para se adequar ao seu site.

Adicionar um campo personalizado de item de menu do WordPress usando um plug-in

Se você não quer se envolver em escrever código para adicionar um campo personalizado ao seu menu WordPress, então boas notícias… existem plugins que podem fazer isso por você.

Campos personalizados avançados

O plug-in Advanced Custom Fields extremamente popular e sempre versátil demonstra mais uma vez seu poder aqui com a capacidade de adicionar campos personalizados ao menu do WordPress.

Depois de instalá-lo e ativá-lo, abra o plug-in e clique no botão 'Adicionar novo' para adicionar seus campos. Selecione 'Menu Item' nas regras de localização. Siga as instruções e atualize os campos conforme necessário.

Depois de publicar o campo, você pode acessar o menu do WordPress na área Admin para ver o novo campo que criou. Bem fácil!

Campos personalizados do menu WP

O plugin WP Menu Custom Fields é um plugin relativamente novo que, como o nome sugere, irá ajudá-lo a adicionar campos personalizados aos seus itens de menu. Você pode adicionar um texto personalizado, uma imagem, um código de acesso ou um HTML personalizado.

Em vez de criar itens de menu personalizados por meio de uma interface de plug-in dedicada (como você faz com Advanced Custom Fields), o WP Menu Custom Fields adiciona opções editáveis ​​diretamente a qualquer item de menu na área de edição do menu de administração.

É bastante autoexplicativo de usar e uma boa maneira fácil de adicionar campos personalizados e outros conteúdos aos seus itens de menu. A documentação do plug-in também fornece os ganchos do plug-in que você pode usar para personalizar ainda mais o HTML gerado para cada recurso.

Conclusão

Adicionar campos personalizados aos menus do WordPress pode ser muito útil e pode ajudá-lo a aprimorar essa área muitas vezes negligenciada do seu site. Se você é um codificador confiante, usar os novos ganchos fornecidos no WordPress 5.4 deve ser relativamente fácil, enquanto os não codificadores podem aproveitar ao máximo os plugins disponíveis para realizar essa tarefa.

Veja também

  • Adicionando campos aos itens do menu WordPress – Plugin personalizado