Você está procurando maneiras de tornar o menu do seu WordPress mais atraente visualmente? Para aprimorar a experiência do usuário no seu site e torná-lo mais amigável, uma das melhores abordagens pode ser adicionar ícones ao menu do WordPress.
Adicionar ícones ao menu de navegação do WordPress pode torná-lo mais atraente, acessível e facilmente reconhecível. Os ícones de menu também ajudam a comunicar sua estrutura para um público internacional.
Existem duas maneiras de adicionar ícones ao seu site WordPress: criando seu código manualmente ou usando um plugin de ícones de menu. O primeiro método oferece flexibilidade para fazer seu design ideal, mas requer conhecimento de CSS. Se você não estiver confiante em suas habilidades de codificação, recomendamos usar o segundo método.
1. Adicionar Ícones de Menu Usando um Plugin
Muitos plugins simplificam o processo de personalização do menu de navegação com ótimos ícones. Recomendamos os seguintes plugins de ícones de menu:
- Menu Icons by ThemeIsle ‒ um plugin gratuito que oferece suporte a diferentes repositórios de ícones, incluindo Font Awesome, Dashicons e SVG.
- Menu Image ‒ um plugin freemium que pode converter itens de menu em botões de chamada para ação.
- WP Menu Icons ‒ outro plugin gratuito que oferece suporte a vários tipos de ícones e oferece várias opções de personalização, incluindo a posição e a cor do ícone.
O tutorial a seguir mostrará como adicionar ícones usando usando o plugin Menu Icons by ThemeIsle:
- Instale e ative o plug-in do WordPress;
- Vá até Aparência -> Menus e expanda o item de menu que deseja personalizar. Você verá um novo item de menu chamado Ícone: Selecionar abaixo da caixa de texto Rótulo de Navegação;
- Clique em Selecionar e escolha um ícone do Dashicons no menu pop-up. Personalize a visibilidade, a posição, o alinhamento vertical e o tamanho da fonte do novo ícone por meio das configurações de ícone do menu à direita. Feito isso, pressione o botão Selecionar;
- O novo ícone escolhido deve aparecer dentro da seção Estrutura do Menu. Repita o mesmo processo para outros itens de menu e clique em Salvar menu;
- Aqui está um exemplo de um menu WordPress com um ícone padrão do Dashicons adicionado usando o plugin:
2. Adicionar ícones de menu usando CSS
Este método envolve adicionar um tipo de ícone de uma biblioteca ao seu site WordPress usando CSS personalizado. Várias tipografias de ícones estão disponíveis para uso, o que significa que você não precisa criá-las do zero. Entre elas estão Dashicons, Elusive Icons, Foundation Icons e Font Awesome.
Para este tutorial, usaremos a biblioteca de ícones Font Awesome. Veja como adicionar ícones de menu do WordPress usando CSS:
- Vá para a página inicial do Font Awesome e selecione Start for Free (Começar de graça);
- Digite seu e-mail para obter o código gratuito do Kit, que permite pegar ícones do Font Awesome a partir da biblioteca deles. O código do Kit da biblioteca deverá ser tipo assim:
- Agora que você tem o código da biblioteca, o próximo passo é obter a classe CSS dos ícones do Font Awesome que você deseja usar. Vá para a página de pesquisa do Font Awesome e salve aqueles que atendem às suas necessidades. Para este exemplo, usaremos o ícone de “casa” para nossa página inicial;
- Acesse o painel de administração do WordPress e vá para Aparência -> Editor de arquivos de tema;
- Abra o arquivo Cabeçalho do tema (header.php) e adicione o código do Kit acima da linha </head>. Clique em Atualizar arquivo;
- Navegue até Aparência -> Menus e expanda o item de menu que deseja personalizar. Adicione a classe CSS obtida na terceira etapa à caixa de texto Navigational Label na seção Menu Structure. Mantenha o texto do menu atual se quiser exibi-lo ao lado do ícone da imagem;
- Repita a terceira e a sexta etapas para adicionar mais ícones a outros itens de menu e clique no botão Salvar menu.
Dicas para fazer seu ícone se destacar!
Existem algumas dicas simples que podem ajudar a fazer com que o ícone do seu site se destaque:
1. Use um design simples e fácil de entender.
2. Use cores brilhantes e chamativas.
3. Certifique-se de que seu ícone seja facilmente reconhecível.
4. Use um ícone que seja relevante para seu site.
5. Certifique-se de que o ícone corresponda à sua marca.
Perguntas frequentes
Como adiciono um ícone de menu no WordPress?
Para adicionar um ícone ao menu, você precisará usar um plugin ou código personalizado. Ícones podem ser adicionados aos itens do menu usando diversos métodos, mas recomendamos usar o plugin Menu Icons ou a ferramenta Font Awesome Icon. Isso proporciona uma interface fácil de usar para adicionar ícones ao seu menu do WordPress.
Posso adicionar ícones no menu sem o plugin do WordPress?
Sim, você pode adicionar ícones ao seu menu sem usar um plugin do WordPress. Você pode usar um serviço como o Font Awesome para hospedar seus ícones e, em seguida, adicionar o código do ícone ao seu menu.
Qual é a melhor ferramenta para adicionar ícones ao menu do WordPress?
Existem algumas maneiras diferentes de adicionar ícones ao seu menu do WordPress. Uma delas é usar ferramentas como o Font Awesome Icons. Esta é a maneira mais simples e fácil de adicionar ícones aos itens do seu menu a partir do WordPress.
Concluindo
Concluindo, adicionar ícones ao menu do WordPress é uma ótima maneira de adicionar interesse visual ao seu site. Embora existam muitos plugins disponíveis para adicionar ícones ao menu do WordPress, o Font Awesome oferece várias vantagens em relação à concorrência. O processo de adicionar ícones ao menu do WordPress é simples. Com um pouco de criatividade e o uso da ferramenta, você pode adicionar ícones ao menu de navegação do WordPress em minutos.
