Como Adicionar Ícones de Imagem aos Menus de Navegação do WordPress

Ao longo dos anos, ajudamos milhares de leitores a personalizar seus sites WordPress para melhorar tanto a experiência do usuário quanto o apelo visual. Com nossa experiência prática em web design, aprendemos que adicionar ícones de imagem aos menus de navegação do WordPress pode melhorar drasticamente a usabilidade do seu site.

Isso ocorre porque os ícones de imagem podem fornecer pistas visuais intuitivas aos seus visitantes, facilitando a navegação no seu site. Dessa forma, a interface do seu site fica mais interativa e envolvente, o que ajuda a reduzir a taxa de rejeição.

Neste artigo, mostraremos como adicionar facilmente ícones de imagem aos menus de navegação no WordPress. 

Por que adicionar ícones de imagem aos menus de navegação no WordPress?

Geralmente, os menus de navegação do WordPress são links de texto simples. Esses links funcionam bem para a maioria dos sites, mas nem sempre parecem interessantes ou envolventes. 

Ao adicionar ícones de imagem ao menu de navegação, você pode incentivar os visitantes a prestar atenção ao menu e explorar mais o seu site.

Se o seu menu tiver muitas opções diferentes, os ícones de imagem podem facilitar a varredura do conteúdo pelos visitantes e a localização do que eles procuram. Esta pode ser uma maneira fácil de aumentar as visualizações de página e reduzir a taxa de rejeição no WordPress. 

Você pode até usar um ícone de imagem para destacar o item de menu mais importante, como o link de Finalizar Compra em seu marketplace online. 

Ao destacar uma chamada para ação no menu, você pode obter mais cadastros, vendas, membros e outras conversões.

Dito isso, vamos ver como você pode adicionar ícones de imagem ao seu menu de navegação do WordPress. Simplesmente use os links rápidos abaixo para pular diretamente para o método que você deseja usar:

• Método 1: Adicionar Ícones de Imagem a Menus de Navegação Usando um Plugin (Rápido e Fácil)
• Método 2: Adicionar Ícones a Menus do WordPress Usando Código (Mais Personalizável)
• Bônus: Adicionar Ícones de Mídias Sociais a Menus do WordPress

Método 1: Adicionar Ícones de Imagem a Menus de Navegação Usando um Plugin (Rápido e Fácil)

A maneira mais fácil de adicionar ícones aos seus menus do WordPress é usando o Menu Image. Este plugin vem com ícones dashIcon que você pode adicionar com apenas alguns cliques.

Se você configurou o Font Awesome em seu site, poderá adicionar facilmente esses ícones ao seu menu de navegação usando o Menu Image. Para mais informações sobre como instalar o Font Awesome, consulte nosso guia sobre como adicionar facilmente fontes de ícones ao seu tema do WordPress.

Outra opção é usar imagens ou ícones da biblioteca de mídia do WordPress.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Menu Image. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, clique em Menu Image no painel do WordPress. Nesta tela, você pode escolher se deseja receber notificações de segurança e de recursos ou clicar no botão ‘Pular’.

Isso o levará a uma tela onde você pode configurar as definições do plugin. Para começar, você verá todos os diferentes tamanhos que pode usar para os ícones de imagem.

Se você planeja usar ícones do Font Awesome ou dashicons, o Menu Image os redimensionará automaticamente. No entanto, se você usar imagens da biblioteca de mídia, precisará selecionar o tamanho manualmente.

O plugin suporta os tamanhos de imagem padrão do WordPress, como miniaturas, imagens e grandes. Ele também adiciona três tamanhos exclusivos que são definidos como 24×24, 36×36 e 48×48 pixels por padrão.

Estas configurações devem funcionar bem para a maioria dos sites, mas você pode tornar os ícones maiores ou menores digitando números diferentes para o tamanho da 1ª, 2ª ou 3ª Imagem do Menu.

Ao adicionar ícones ao seu menu, você verá um campo 'imagem ao passar o mouse' por padrão. Isso permite que você mostre um ícone diferente quando o visitante passar o mouse sobre esse item do menu.

Apenas esteja ciente de que esta configuração só está disponível quando você está usando suas próprias imagens. Você não precisa se preocupar com o recurso 'imagem ao passar o mouse' se planeja usar dashIcons ou ícones Font Awesome.

Mostrar um ícone diferente pode ajudar os visitantes a ver onde eles estão no menu de navegação. Isso é particularmente útil se o seu menu tiver muitos itens diferentes. Por exemplo, você pode usar cores ou tamanhos de ícones diferentes para destacar o item selecionado no momento.

Se você quiser criar efeitos de passagem de mouse diferentes, certifique-se de marcar 'Habilitar o campo de imagem ao passar o mouse'.

Com isso feito, clique em ‘Salvar Alterações’ para armazenar suas configurações.

Para adicionar ícones ao menu de navegação, vá para a página Aparência » Menus. Por padrão, o WordPress mostrará o menu principal do seu site.

Se você quiser editar um menu diferente, basta abrir o menu suspenso 'Selecionar um menu para editar' e escolher um menu na lista. Depois disso, clique em 'Selecionar'.

Agora, passe o mouse sobre o primeiro item do menu onde você deseja adicionar um ícone. Quando 'Imagem do Menu' aparecer, clique nele.

Agora você pode decidir se deseja usar sua própria imagem ou escolher um ícone pronto, como um ícone Font Awesome.

Para usar um ícone pronto, clique no botão de rádio ao lado de 'Ícones'.

Você pode então clicar para selecionar qualquer ícone dashicon ou Font Awesome.

Se você quiser usar sua própria imagem, selecione o botão de rádio ao lado de 'Imagem' e clique no link 'Definir Imagem'.

Agora você pode escolher uma imagem da biblioteca de mídia do WordPress ou fazer o upload de um novo arquivo do seu computador.

Se você marcou 'Habilitar o campo de imagem ao passar o mouse' nas configurações do plugin, você também precisará clicar em 'Definir imagem ao passar o mouse'.

Agora, escolha uma imagem para mostrar quando o usuário passar o mouse sobre este item do menu.

Às vezes, você pode querer ignorar essa configuração e mostrar o mesmo ícone, não importa o quê. Para fazer isso, clique em ‘Definir imagem ao passar o mouse’ e, em seguida, escolha o mesmo ícone exato.

Se você não selecionar uma imagem, o ícone desaparecerá completamente quando o visitante passar o mouse sobre ele.

Depois disso, abra o menu suspenso Tamanho da imagem e escolha um tamanho na lista.

Usar o mesmo tamanho para todos os ícones tende a deixar o menu mais organizado. No entanto, às vezes é uma boa ideia usar um ícone maior para o item mais importante.

Por exemplo, se você criou uma loja online usando um plugin como WooCommerce, você pode usar um ícone maior para ‘Finalizar Compra’ para que ele se destaque.

Quando você estiver satisfeito com o ícone, é hora de olhar para o rótulo do item do menu. Por padrão, o plugin mostra o rótulo do título após o ícone.

Para alterar isso, selecione qualquer um dos botões de rádio na seção ‘Posição do título’.

Outra opção é remover completamente o rótulo de navegação e criar um menu apenas com ícones. Se o seu menu tiver muitos itens, isso pode torná-lo menos confuso.

No entanto, você só deve ocultar os rótulos se for óbvio o que cada ícone significa. Se for incerto, os visitantes terão dificuldade em navegar em seu blog ou site WordPress.

Para prosseguir e ocultar o rótulo, selecione o botão de rádio ao lado de ‘Nenhum’.

Quando você estiver satisfeito com a configuração do item do menu, clique em ‘Salvar alterações’.

Para adicionar um ícone a outros itens do menu, basta seguir o mesmo processo descrito acima.

Quando terminar, não se esqueça de clicar no botão ‘Salvar menu’. Agora, se você visitar seu site WordPress, verá o menu de navegação atualizado ao vivo.

Método 2: Adicionar Ícones a Menus do WordPress Usando Código (Mais Personalizável)

Você também pode adicionar ícones de imagem aos seus menus de navegação usando CSS.

Dessa forma, você pode controlar exatamente onde os ícones aparecem em seus menus. Você também pode usar qualquer imagem como ícone, então é uma ótima maneira de adicionar sua própria marca.

Antes de começar, faça o upload de todos os arquivos de imagem que você deseja usar como seus ícones. Estas podem ser fotos de banco de imagens, imagens gratuitas que você encontrou online ou gráficos personalizados criados usando um aplicativo como o Canva.

Após adicionar cada imagem à biblioteca de mídia do WordPress, certifique-se de copiar seu URL e colá-lo em um editor de texto como o Bloco de Notas. Você precisará de todos esses links na próxima etapa.

Para encontrar o URL de uma imagem, basta selecioná-la na biblioteca de mídia do WordPress e, em seguida, olhar o campo 'URL do arquivo'.

Para instruções mais detalhadas, consulte nosso guia sobre como obter o URL das imagens que você carrega no WordPress.

Depois disso, você precisa visitar a página Aparência » Menus no painel do WordPress.

Em seguida, abra o menu suspenso 'Selecionar um menu para editar' e escolha o menu onde você deseja adicionar os ícones de imagem.

Depois disso, prossiga e clique em 'Selecionar'.

Em seguida, você precisa habilitar classes CSS personalizadas clicando em 'Opções de tela'.

No painel que aparece, marque a caixa ao lado de 'Classes CSS'.

Com isso feito, você pode adicionar classes CSS personalizadas a qualquer item no menu de navegação. É assim que você vinculará cada item do menu a uma imagem na biblioteca de mídia do WordPress.

Você pode chamar essas classes como quiser, mas é uma boa ideia usar algo que ajude você a identificar o item do menu.

Para começar, basta clicar no primeiro item ao qual você deseja adicionar um ícone de imagem. No campo 'Classes CSS (opcional)', digite o nome da classe que você deseja usar.

Você usará essas classes CSS personalizadas na próxima etapa, portanto, anote-as em seu Bloco de Notas ou aplicativo semelhante.

Simplesmente siga o mesmo processo para adicionar uma classe separada a todos os seus itens de menu. Depois disso, clique em 'Salvar menu' para armazenar suas configurações.

Agora você está pronto para adicionar ícones de imagem aos seus menus de navegação do WordPress usando CSS.

Frequentemente, tutoriais do WordPress dirão para você adicionar trechos de código aos arquivos do seu tema WordPress. No entanto, fazer isso pode causar erros comuns do WordPress e não é muito amigável para iniciantes.

É por isso que recomendamos o WPCode.

É o melhor plugin de trechos de código para WordPress, usado por mais de 1 milhão de sites, e permite adicionar código personalizado sem editar o arquivo functions.php do seu tema.

A primeira coisa que você precisa fazer é instalar e ativar o plugin WPCode gratuito. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, vá para Snippets de Código » Adicionar Snippet.

Isso o levará à página ‘Adicionar Snippet’, onde você poderá ver a biblioteca de snippets prontos do WPCode. Eles incluem snippets que permitem melhorar a segurança do seu WordPress desativando o XML-RPC, carregar tipos de arquivo que o WordPress não suporta por padrão, e muito mais. 

Simplesmente passe o mouse sobre ‘Adicionar Seu Código Personalizado’ e clique em ‘Usar snippet’ quando ele aparecer.

Para começar, digite um título para o snippet de código personalizado. Pode ser qualquer coisa que ajude você a identificar o snippet no painel do WordPress.

Com isso feito, abra o menu suspenso ‘Tipo de Código’ e selecione ‘Snippet CSS’.

No editor de código, você precisará adicionar um código para cada ícone que deseja exibir.

Para ajudar, criamos um snippet de exemplo abaixo. Você pode prosseguir e alterar ‘.carticon’ para a classe CSS personalizada que você criou na etapa anterior. Você também precisará substituir o URL por um link para a imagem em sua biblioteca de mídia do WordPress:

.carticon { background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png'); background-repeat: no-repeat; background-position: left; padding-left: 5px; } 

Você precisará ajustar o snippet acima para cada item de menu individual que você criou anteriormente.

Quando estiver satisfeito com seu código, role até a seção ‘Inserção’. O WPCode pode adicionar código a diferentes locais, como após cada postagem, apenas no frontend ou apenas no admin.

Para usar o código CSS personalizado em todo o seu blog ou site WordPress, clique em ‘Inserção Automática’ se ainda não estiver selecionado.

Em seguida, abra o menu suspenso ‘Localização’ e escolha ‘Cabeçalho do Site Inteiro’.

Depois disso, você está pronto para rolar até o topo da tela e clicar no alternador ‘Inativo’ para que ele mude para ‘Ativo’.

Finalmente, clique em ‘Salvar Snippet’ para tornar o CSS personalizado ativo.

Agora, se você visitar seu site, verá todos os ícones de imagem no seu menu de navegação.

Dependendo do seu tema do WordPress, você pode precisar ajustar o CSS para que ele mostre os ícones de imagem exatamente no lugar certo. Se for esse o caso, vá para Snippets de Código » Snippets de Código no painel do WordPress.

Em seguida, basta passar o mouse sobre o snippet e clicar no link ‘Editar’ quando ele aparecer.

Isso abre o editor de código, que está pronto para você fazer algumas alterações.

Bônus: Adicionar Ícones de Mídias Sociais a Menus do WordPress

Além dos ícones de menu, você também pode adicionar ícones de mídia social ao seu menu de navegação do WordPress. Fazer isso ajudará a promover seus perfis de mídia social de forma visualmente atraente, sem ocupar muito espaço no seu site.

Para fazer isso, você pode usar o plugin Menu Image. Após a ativação, basta visitar a página Aparência » Menus no painel do WordPress e expandir a aba ‘Links Personalizados’ na coluna da esquerda.

Em seguida, adicione o URL do seu ID de mídia social e digite o nome da plataforma. Em seguida, clique no botão ‘Adicionar ao Menu’.

Uma vez que o perfil de mídia social tenha sido adicionado como um item de menu, ele será exibido no lado direito da tela.

Aqui, você deve expandir a aba dos itens novamente e clicar no botão ‘Imagem do Menu’.

Isso abrirá um novo prompt na tela onde você pode clicar no link ‘Definir Imagem’ para fazer o upload de um ícone de mídia social da sua biblioteca de mídia.

Se você quiser adicionar um ícone pré-fabricado, pode selecionar a opção ‘Ícone’ e adicionar seu ícone de mídia social do FontAwesome.

Finalmente, clique no botão ‘Salvar Alterações’ para armazenar suas configurações.

Você agora adicionou com sucesso um ícone de mídia social ao seu menu de navegação. Para mais informações, veja nosso tutorial sobre como adicionar ícones de mídia social em menus do WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar ícones de imagem ao seu menu de navegação do WordPress. Você também pode conferir nosso guia sobre como adicionar lógica condicional a menus no WordPress e como criar um menu de navegação flutuante fixo no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.