Como adicionar ícones Fontawesome a itens de menu com campos personalizados avançados
Este post mostrará como você pode usar os campos personalizados avançados (ACF) para permitir a adição de ícones ao seu menu. Neste exemplo, adicionaremos um ícone Fontawesome, mas você pode modificar o código para atender às suas necessidades. Você pode adicionar um seletor de arquivos para arquivos SVG ou outra coisa.
Este guia funcionará com a versão gratuita do Advanced Custom Fields, mas certifique-se de ter a versão 5.6 ou mais recente.
Adicionando o grupo e o campo ACF
A primeira etapa é adicionar o próprio campo aos itens de menu. Este guia adicionará uma entrada de texto para digitar o nome da classe para o ícone Fontawesome, mas se você quiser outra solução (por exemplo, seletor de arquivo para arquivo SVG), modifique as entradas do campo.
Certifique-se de que a localização do grupo de campos personalizados avançados esteja definida como "Item de menu". Você pode defini-la como "Todos" ou pode especificar por locais de menu ou por menus específicos.
Se você estiver adicionando seus campos e agrupando por código, defina o parâmetro de localização como ‘ nav_menu_item‘. Consulte minha referência completa para adicionar campos ACF por código para saber mais.
Quanto ao campo em si, adicionaremos uma entrada de texto simples com o nome ‘ fontawesome_icon‘.
Ou por código, adicione o campo assim:
Para torná-lo mais fácil de usar, é uma boa ideia adicionar uma descrição com um link para a visão geral dos ícones Fontawesome disponíveis. Estou adicionando o link para mostrar apenas ícones gratuitos, não qualquer um do Pro, pois esta é a biblioteca que tenho no meu tema.
Depois de salvar o campo no admin ou no código, agora você deve obter o campo adicional ao expandir um item de menu:
Uma nota sobre as aulas do Fontawesome
Antigamente, antes do Fontawesome 5, fornecer uma classe Fontawesome poderia ser um pouco simplificado para o usuário. Para o carrinho de compras você poderia simplesmente escrever “carrinho de compras" e em nosso código poderíamos adicionar a classe ” fa fa-” e então a classe dada (resultando em ” fa fa-shopping-cart“). Mas desde Fontawesome 5 as aulas têm sido um pouco complicadas.
A classe “global” ” fa” foi substituída por categorias específicas para o tipo de ícone. Por exemplo, mídias sociais ou logotipos estão na categoria marcas e exigem a classe ” fab“, ícones sólidos exigem a classe ” fas“, enquanto os ícones regulares exigem ” far” e assim por diante. É por isso que agora temos que exigir que o usuário do tema digite ambas as classes Fontawesome. Deve ser fácil encontrar a classe certa, pois isso é claramente mostrado em todos os ícones do site do Fontawesome:
Como exemplo, você precisa inserir ” fas fa-shopping-cart” em nosso campo personalizado em um item de menu para o ícone do carrinho de compras.
A próxima e última etapa é renderizar o ícone no menu, se estiver definido. Para fazer isso, usamos o filtro do WordPress [wp_nav_menu_objects](https://developer.wordpress.org/reference/hooks/wp_nav_menu_objects/). Este filtro é aplicado para cada menu em todos os menus renderizados logo antes de gerar seu HTML, permitindo-nos modificar a saída de texto, classes e muito mais.
Como você deseja gerar o ícone, fica a seu critério. Deseja substituir o texto do link pelo ícone ou deseja mostrar o ícone antes ou depois do link de texto? Seguiremos o costume de Fontawesome produzindo uma <i>tag com a classe fornecida.
A maneira como modificamos os itens de menu é percorrendo os itens de menu usando passagem por referência (adicionando um &antes da variável). Isso significa que qualquer alteração que fizermos no item será aplicada ao objeto de itens parentais.
Para cada item usamos a get_field()função Advanced Custom Field’s para obter o valor do nosso campo, ‘ fontawesome_icon‘. Se estiver definido, estamos prontos para ir. O exemplo de código acima adicionará o ícone antes do texto. Se você quiser adicionar o ícone após o texto, substitua a linha #6por:
Ou se você quiser substituir o texto por um ícone – não mostrando nenhum texto, substitua a linha #6por:
Eu adicionei um titleatributo para que seja um pouco mais informativo para o usuário front-end. Como o texto é removido, às vezes pode ser confuso para o usuário final para que serve o item de menu. Mas o titleatributo garante que o usuário receba uma dica de ferramenta com o texto do item de menu ao passar o mouse sobre o ícone. Isso é totalmente opcional, é claro.
Se você estiver usando um campo de um tipo diferente, por exemplo, um seletor de arquivos para arquivos SVG, será necessário ajustar a saída de acordo.
E é isso! Agora você deve obter um ícone Fontawesome em todos os lugares em que o menu é renderizado. Mas você provavelmente precisa adicionar algum estilo a ele. Por exemplo, adicionar algum espaço entre o ícone e o texto.
Adicionando classes para um estilo mais fácil
Você pode adicionar classes personalizadas à <i>tag ou adicionar mais HTML, se necessário.
Se você precisar adicionar uma classe ao item de menu de encapsulamento (o lielemento), você terá acesso total às classes de itens de menu que serão aplicadas no filtro acima. Adicione uma classe de item de menu personalizado para itens de menu de ícone da seguinte forma:
O menu deve sair assim:
