Adicionar ícones de redes sociais ao seu menu do WordPress é uma maneira inteligente de promover seus perfis sem sobrecarregar seu site. Esses logotipos pequenos e reconhecíveis podem incentivar os visitantes a segui-lo em várias plataformas, aumentando potencialmente sua presença online e engajamento.
Descobrimos que, com o WordPress, a forma de adicionar ícones de redes sociais ao seu menu depende se você está usando um tema clássico ou de blocos. Mas encontramos maneiras eficazes de fazer isso para ambos os tipos de temas.
Neste artigo, mostraremos como adicionar ícones de redes sociais aos menus do WordPress, usando métodos que funcionam tanto para temas clássicos quanto para temas de blocos.
Por que adicionar ícones de redes sociais aos menus no WordPress?
Ao adicionar ícones de redes sociais aos seus menus do WordPress, você pode frequentemente obter mais cliques, engajamento e seguidores em todos os seus perfis de redes sociais.
Ícones de redes sociais também podem chamar a atenção do visitante sem adicionar texto extra aos seus menus. Isso permite que você promova muitos perfis diferentes em um pequeno espaço.
O processo para adicionar ícones de redes sociais é diferente de inserir ícones de imagem ao seu menu do WordPress. Isso ocorre porque essas imagens precisam ser vinculadas aos seus perfis sociais e, muitas vezes, exigem estilização especial para manter sua aparência em diferentes dispositivos e tamanhos de tela.
Além disso, você vai querer garantir que esses ícones sejam reconhecíveis e tenham um tamanho consistente, o que pode ser um desafio ao usar arquivos de imagem comuns.
Dito isso, vamos dar uma olhada em 2 maneiras fáceis para iniciantes de adicionar ícones de redes sociais aos menus do WordPress.
Tutorial em Vídeo
Se você prefere instruções escritas, continue lendo. Simplesmente use os links rápidos abaixo para pular diretamente para o método que deseja usar:
- Método 1: Usando o Plugin Menu Image (Apenas Temas Clássicos)
- Method 2: Using the Full Site Editor (Block Themes Only)
Método 1: Usando o Plugin Menu Image (Apenas Temas Clássicos)
A maneira mais fácil de adicionar ícones de redes sociais aos menus do WordPress é usando o Menu Image.
Ao criar seus ícones sociais, você pode usar qualquer imagem que tenha carregado na biblioteca de mídia do WordPress.
Por exemplo, muitas das principais empresas de redes sociais fornecem logotipos que você pode usar em seu site, como o kit de ferramentas de marca do Twitter. Você também pode baixar ícones de bibliotecas online como o site Font Awesome.
O Menu Image também se integra ao plugin Font Awesome. Isso permite que você navegue e importe todos os ícones do Font Awesome diretamente do painel do WordPress, incluindo ícones para todas as principais redes sociais.
Recomendamos instalar o plugin Font Awesome primeiro antes de continuar com o tutorial. Para instruções detalhadas sobre como configurar o Font Awesome, consulte nosso guia sobre como adicionar facilmente fontes de ícones ao seu tema WordPress.
Independentemente de como você planeja fornecer os ícones de redes sociais, você precisará instalar e ativar o plugin Menu Image. Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você pode querer dar uma olhada nos tamanhos dos ícones e alterá-los, se necessário. Para fazer isso, você precisa ir em Menu Image » Menu Image.
Ao criar seus ícones sociais, você pode usar qualquer um dos tamanhos de imagem do WordPress padrão, como miniatura, imagem ou grande. O Menu Image também permite que você escolha entre três tamanhos exclusivos que são definidos como 24x24, 36x36 e 48x48 pixels por padrão.
Esses tamanhos devem funcionar bem para a maioria dos sites WordPress, mas você pode alterá-los digitando números diferentes nos campos 1º, 2º ou 3º do Menu Image.
Com isso feito, clique em ‘Salvar Alterações’ para armazenar suas configurações.
Para adicionar ícones a um menu de navegação, vá para Aparência » Menus. Por padrão, o WordPress mostrará o menu principal do seu site.
Se você quiser adicionar ícones de mídia social a um local de menu diferente, como um menu flutuante fixo, basta abrir o menu suspenso ‘Selecionar um menu para editar’.
Você pode então escolher um menu na lista e clicar em ‘Selecionar’.
Para instruções passo a passo sobre como criar um novo menu, consulte nosso guia sobre como adicionar um menu de navegação no WordPress.
Para começar, você precisará adicionar cada perfil social ao seu menu como um novo link.
Quando estiver pronto, clique para expandir a seção ‘Links Personalizados’ e digite o endereço da página de mídia social que você deseja usar. Por exemplo, você pode inserir o URL do seu grupo do Facebook ou canal do YouTube.
Você também precisará digitar um ‘Texto do Link’. Em uma etapa posterior, você terá a opção de alterar onde este título aparece no menu ou até mesmo ocultá-lo completamente.
Com isso feito, clique em ‘Adicionar ao Menu’.
Este item agora aparecerá na coluna da direita.
Para adicionar um ícone de mídia social, basta passar o mouse sobre o novo item do menu.
Em seguida, clique no botão ‘Imagem do Menu’ quando ele aparecer.
Observação: Se você não vir um botão ‘Imagem do Menu’, clique em ‘Salvar Alterações’. Agora, o botão ‘Imagem do Menu’ deverá aparecer quando você passar o mouse sobre qualquer item do menu.
Agora você pode decidir se deseja usar uma imagem da sua biblioteca de mídia do WordPress ou um ícone fornecido pelo Font Awesome.
Para usar um ícone Font Awesome pronto, clique no botão de rádio ao lado de ‘Ícone’.
Em seguida, selecione ‘Fontawesome’.
Você pode então clicar em ‘Marcas’.
Agora você verá todos os ícones de marca, incluindo ícones de todas as principais redes sociais, do Facebook ao LinkedIn. Quando vir a imagem que deseja usar, basta clicar nela.
Outra opção é usar seu próprio ícone da biblioteca de mídia do WordPress selecionando o botão de rádio ‘Imagem’. Em seguida, 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.
Não importa de onde você obtém o ícone, o Menu Image mostrará uma prévia à direita.
Agora você pode alterar se o título do link aparece acima, abaixo, antes ou depois do ícone da mídia social usando as configurações de ‘Posição do título’.
Muitos ícones de mídia social são instantaneamente reconhecíveis, então o título do link pode ser desnecessário. Se você estiver adicionando muitos ícones sociais a um menu de navegação, os títulos podem até deixar seu menu mais confuso e complicado.
Dito isso, você pode querer ocultar o título selecionando o botão de rádio ‘Ocultar’.
À medida que você faz alterações, a pré-visualização ao vivo será atualizada automaticamente, para que você possa experimentar diferentes configurações para ver o que fica melhor.
Finalmente, se você estiver usando sua própria imagem, poderá redimensionar os ícones de mídia social usando o menu suspenso ‘Tamanho da imagem’.
Ícones maiores chamarão a atenção do visitante, mas também podem ser distrativos. Com isso em mente, você pode querer experimentar tamanhos diferentes para ver o que funciona melhor em seu blog WordPress.
Quando estiver satisfeito com a configuração do ícone de mídia social, basta clicar em ‘Salvar alterações’.
Simplesmente repita essas etapas para adicionar mais ícones ao seu menu do WordPress.
Você pode até adicionar ícones a outros itens importantes no menu de navegação e destacar esses itens do menu para chamar a atenção dos seus usuários.
Quando estiver satisfeito com a configuração do menu, basta clicar em ‘Salvar menu’.
Agora, você pode visitar seu site para ver os novos ícones de mídia social em ação.
Foi assim que ficou em nosso site de demonstração.
Método 2: Usando o Editor de Site Completo (Somente Temas de Bloco)
O WordPress possui um bloco de Ícones Sociais integrado que permite criar um menu contendo ícones de mídias sociais e exibi-los em um layout agradável.
Este bloco vem com ícones integrados para todas as principais redes sociais, portanto, você não precisa instalar um plugin como o Font Awesome ou fazer upload de ícones para sua biblioteca de mídia.
No entanto, você só pode adicionar ícones e links de mídia social ao bloco Ícones Sociais, portanto, ele não é tão flexível quanto o plugin Menu Image.
Se você estiver usando um tema de bloco, poderá adicionar um bloco de Ícones Sociais a qualquer parte do seu site, como o cabeçalho ou o rodapé. Dessa forma, você pode exibir um menu de mídia social em todo o seu site.
Para começar, acesse Aparência » Editor no painel do WordPress.
A partir daqui, você verá alguns menus para personalizar o design do seu tema de bloco.
Para adicionar ícones de mídia social ao seu menu, clique em 'Navegação'.
O próximo passo é clicar no ícone de lápis 'Editar'.
Isso abrirá o Editor Completo do Site do WordPress.
Com isso feito, você poderá editar e estilizar seu menu de navegação, que faz parte do seu modelo de cabeçalho do WordPress.
Para começar, clique no ícone azul '+' no canto superior esquerdo. Na barra de pesquisa, você deve digitar 'Ícones Sociais'.
Quando o bloco correto aparecer, arraste e solte-o no modelo do tema.
Para adicionar o primeiro ícone, basta clicar no ícone '+' dentro do bloco.
No pop-up que aparece, digite o ícone que você deseja adicionar, como 'Twitter' ou 'Facebook'.
Quando o ícone correto aparecer, simplesmente clique para adicioná-lo ao seu blog WordPress.
Agora, clique no novo ícone de mídia social.
Isso abre uma pequena barra onde você pode digitar o URL para o qual deseja vincular, como sua página do Facebook.
Para adicionar mais ícones sociais ao WordPress, basta clicar no ícone '+' e repetir o mesmo processo descrito acima.
Após adicionar todas as plataformas de mídia social, você pode querer personalizar o bloco. Para fazer isso, clique para selecionar o bloco Ícones Sociais e, em seguida, clique na aba ‘Bloco’.
Você pode alterar a justificação, o alinhamento e a orientação do ícone usando as configurações ‘Layout’.
Por padrão, todos os links de mídia social abrirão na mesma aba. Para manter os visitantes em seu site, você pode clicar para ativar a opção ‘Abrir links em nova aba’.
Por padrão, o WordPress exibe apenas os ícones sociais, sem nenhum texto.
Se você quiser mostrar texto ao lado de cada ícone, clique para ativar a opção ‘Mostrar rótulos’.
Em seguida, clique na aba ‘Estilos’.
Aqui, você pode alterar o estilo do botão clicando em ‘Padrão’, ‘Somente Logos’ ou ‘Formato de Pílula’.
Finalmente, você pode alterar o espaço entre os ícones sociais usando as configurações em ‘Espaçamento do Bloco’.
Quando estiver satisfeito com a aparência do menu, clique no botão ‘Salvar’.
Agora, se você visitar seu site, verá os ícones de mídia social ao vivo.
Dica Bônus: Incorpore Feeds Sociais em Seu Site WordPress
Adicionar ícones de mídia social aos menus do WordPress é uma ótima maneira de obter mais seguidores e engajamento em suas diferentes contas. No entanto, existem muitas outras maneiras de promover seu Twitter, Facebook e outros perfis sociais.
A melhor maneira de obter mais seguidores e engajamento é incorporando um feed social ao vivo em seu site. Isso permite que você mostre as postagens mais recentes de seus sites de mídia social, juntamente com botões que os visitantes podem usar para interagir com suas postagens ou segui-lo nas mídias sociais.
A melhor maneira de adicionar feeds de mídia social ao seu site é usando Smash Balloon. É o melhor plugin de feed de mídia social para WordPress e permite incorporar feeds ao vivo do Twitter, Instagram, Facebook e muito mais.
Para mais informações, consulte nosso tutorial do WordPress sobre como adicionar feeds de mídia social ao WordPress.
Esperamos que este artigo tenha ajudado você a aprender como adicionar ícones de mídia social aos menus do WordPress. Você também pode querer ver nosso artigo sobre como criar um menu suspenso no WordPress e nosso guia definitivo sobre adicionar uma barra de pesquisa ao seu menu de navegação.
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.
Mrteesurez
Na verdade, os usuários acham mais fácil quando veem um ícone social para compartilhar facilmente o post que consideram benéfico para seus amigos. Além disso, também se pode usar o plugin Sassy Social Share, ele também é rico em recursos, obrigado.
Jiří Vaněk
O plugin Menu Image é fantástico. Na verdade, escrevi um artigo sobre ele quando estava lidando com exatamente o mesmo problema. Criar uma pasta principal 'Contato' no menu e adicionar um submenu com links para redes sociais junto com ícones — funciona como mágica. Anteriormente, eu usava o Font Awesome, e era bastante impraticável. Esta é uma solução muito mais elegante.
Mrteesurez
Bem feito, Jirí. Obrigado pela sua recomendação e por compartilhar o que funciona para você. Eu não pratiquei a criação de uma pasta principal 'Contato' no menu com submenus vinculados a redes sociais. Tentarei implementar isso. Obrigado.
Jiří Vaněk
Oi Mrteesurez,
Sim, este plugin é realmente útil. Basicamente, me ajudou a melhorar o design gráfico do menu. Você definitivamente deveria experimentá-lo. Apenas tome cuidado, porque a maneira como configurei o menu e descrevi em meu artigo anterior acabou não sendo a melhor solução de acordo com o Google. Eu tinha um item principal "Contato" com um submenu, mas no meu caso, o próprio item "Contato" não era clicável. Ele continha apenas um # em vez de um link. Recomendo que, se você quiser usar a mesma abordagem que eu, torne todos os itens clicáveis e que levem a uma página. Dessa forma, você pode evitar o mesmo erro que cometi e a crítica do Page Speed Insight de que o item "Contato" não é um link que leva a algum lugar.
Mrteesurez
Obrigado pela preocupação! Agradeço por compartilhar sua experiência com o plugin e a recomendação do Google. Com certeza levarei seu conselho em consideração para tornar todos os itens do menu clicáveis e evitar quaisquer problemas. Sua visão é muito útil e a terei em mente ao configurar meus menus.
Ralph
Como adoro seus tutoriais em artigos, desta vez assisti apenas ao vídeo e foi ótimo! Curto, sem enrolação e direto ao ponto. Vocês deveriam incluir mais tutoriais em vídeo. Vocês são ótimos nisso e agora tenho novos ícones no meu menu (não apenas para minhas redes sociais). Muito obrigado!
Jonas
Obrigado por este artigo, me ajudou muito!
WPBeginner Support
Ficamos felizes que nosso artigo tenha sido útil!
Admin
Farhad
Existe uma maneira de ter posts de blog enviados para sites de mídias sociais automaticamente?
Obrigado.
WPBeginner Support
Existem algumas opções diferentes para isso, você deve começar dando uma olhada em nosso artigo abaixo:
https://014.leahstevensyj.workers.dev/beginners-guide/how-to-automatically-post-to-facebook-from-wordpress/
Admin
Jimmy Ekisa
Artigo brilhante!!! Você me poupou tempo para criar menus sociais e adicioná-los ao cabeçalho do tema NewsPack, muito obrigado.
Shyam
Como mostrar ícones de perfis sociais no rodapé?
WPBeginner Support
Se o seu site tiver uma área de widget para o rodapé, você pode usar um dos plugins da nossa lista abaixo:
https://014.leahstevensyj.workers.dev/plugins/best-social-media-plugins-for-wordpress/
Admin
Kerry
Tenho os ícones de redes sociais no meu site. Como faço para vincular esses ícones aos meus perfis de redes sociais?
WPBeginner Support
Você teria os itens do menu como URLs personalizadas
Admin
Vicki
Obrigado por isso, consegui adicionar o logotipo do Goodreads ao meu Menu Social e escolhi a localização do Menu Social também. No entanto, quando visualizo a página, ele mostra a lupa ao lado do novo logotipo do Goodreads, em vez de apenas o logotipo sozinho – por que isso acontece e como posso removê-lo?
WPBeginner Support
Você deve verificar com o suporte do seu tema para ver se isso se deve ao design do próprio tema.
Admin
Danielle
Adicionei o menu de redes sociais, mas ele não está aparecendo no meu site. O que posso fazer?
WPBeginner Support
Recomendamos primeiro entrar em contato com o suporte do plugin para que eles possam dar uma olhada e garantir que não seja um problema com o plugin.
Admin
Lisa Jackson
Adorei isso, mas os ícones são exibidos em coluna em vez de um ao lado do outro. Como posso corrigir isso?
WPBeginner Support
Dependeria do seu tema específico, você primeiro gostaria de verificar com o suporte do seu tema para garantir que não seja um problema com a forma como o menu deles é estilizado que possa estar causando isso.
Admin
andi moss
O quê? Sem ícones? Encontrar os nossos?
WPBeginner Support
No momento, não temos um conjunto específico que recomendaríamos, mas existem muitas opções diferentes disponíveis, dependendo do estilo que você procura.
Admin
Bob Wright
Configurar um link social no meu site não corresponde às imagens neste artigo (talvez os blocos de personalização da organização mãe o façam).
WPBeginner Support
Você deve garantir que é um usuário administrador e que o site está no WordPress.org pelos motivos mais prováveis. Você pode ver nossa comparação em nosso guia abaixo:
https://014.leahstevensyj.workers.dev/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
Ankit
Olá,
Mais uma vez, um ótimo e útil tutorial. Estou apenas enfrentando um problema, no entanto. Para a última etapa, quando tento selecionar a opção de local do menu, só consigo ver a opção de menu principal lá. Como faço para ter a opção de menu social também?
WPBeginner Support
Seu tema específico pode não ter um local de menu específico para redes sociais. Se você entrar em contato com o suporte do seu tema, eles poderão esclarecer e ajudar.
Admin
Jonathan
Estou tentando entender como adicionar contas de mídia social ao meu blog no WordPress. Qualquer ajuda é bem-vinda. Se eu pulei alguma etapa anterior na configuração do site, peço desculpas antecipadamente por um comentário estúpido!
WPBeginner Support
Sem problemas, depende do que você está procurando. Como ponto de partida, recomendamos dar uma olhada em nossos plugins recomendados abaixo:
https://014.leahstevensyj.workers.dev/plugins/best-social-media-plugins-for-wordpress/
Admin
Elder Designer
tutorial incrível, continue assim
WPBeginner Support
Glad you found our guide helpful
Admin
Stephanie Strand
Obrigado! Instruções muito claras. Ajudou enormemente este novato.
WPBeginner Support
Glad our guide was helpful
Admin
Rupali Tripathi
Muito obrigado por este vídeo.
WPBeginner Support
You’re welcome
Admin
Debbie Serjeant
Os ícones estão aparecendo sem cor… será que fiz algo errado?
WPBeginner Support
Você pode querer verificar com o suporte do seu tema específico para garantir que não haja CSS específico do tema alterando suas cores.
Admin
Isaac
Olá, existe alguma maneira de espaçar mais os ícones uns dos outros? Os meus parecem estar muito próximos…. Obrigado
WPBeginner Support
Isso normalmente exigiria a alteração do CSS, como ponto de partida, você pode querer dar uma olhada em nosso artigo aqui:
https://014.leahstevensyj.workers.dev/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Sam Simson
Tentei ocultar o título para que ele não fosse exibido no menu. Parece que essa função não funcionou. o título ainda está visível.
WPBeginner Support
Você deve verificar com o suporte do seu tema específico para ver se isso estaria substituindo suas personalizações
Admin
Tracy
Olá! Tentei usar este método, mas não consegui a parte de “selecionar imagem”. Só consigo introduzir o URL e o Rótulo de Navegação… alguma ideia?
WPBeginner Support
Você pode querer garantir que o plugin foi totalmente instalado e ativado para que a imagem selecionada apareça
Admin
Lea
Obrigado! Parece ser uma solução que funciona melhor do que com o Font Awesome! É permitido usar uma imagem de ícone, por exemplo, do Facebook, do Google Imagens para a imagem que eu carrego?
WPBeginner Support
Você deve ter certeza de verificar os direitos de uso da imagem se pegar uma imagem do Google, mas se puder usá-la, poderá carregá-la em seu site.
Admin
Larry Hilton
Segui as instruções para adicionar imagens sociais à minha área de rodapé e as imagens do Google & Yelp não estão visíveis. Fiz da mesma forma que as exibidas. Isso não parece ser relacionado ao navegador. Alguma sugestão?
WPBeginner Support
Comece entrando em contato com o suporte do plugin para garantir que não haja problemas conhecidos com esses ícones ou com a forma como o menu está sendo adicionado.
Admin
Michele A
Obrigado por este maravilhoso tutorial!! Ele me ajudou imensamente. Obrigado!
WPBeginner Support
Glad our guide could help
Admin
Muneeb
Os ícones estão atualmente no site, mas não funcionam, mesmo com o link adicionado. Qual é o motivo?
WPBeginner Support
Se os URLs estiverem estruturados corretamente, você deve informar o suporte do plugin sobre seu erro para que eles possam verificar se o erro é do próprio plugin.
Admin
Mr. Debtsmith
Oi pessoal,
Instalei o plugin. Adicionei 3 contas sociais e cliquei na caixa de localização "Main Nav". O widget substituiu o menu principal existente em vez de ser adicionado a ele, e em vez de os ícones aparecerem, os títulos das contas sociais aparecem. Estou ansioso pelos benefícios deste plugin. Espero que vocês possam ajudar.
Obrigado!
WPBeginner Support
Você deve informar o suporte do plugin: https://wordpress.org/support/plugin/menu-image e eles devem ser capazes de ver se isso é um erro do próprio plugin.
Admin
ARPIT
Muito obrigado pelas informações essenciais que eu estava procurando na internet.
Altamente apreciado.
WPBeginner Support
Ficamos felizes que nosso artigo pôde ser útil para você.
Admin
Dan
Meu tema atual tem ícones de mídia social no cabeçalho principal superior na versão desktop, mas quando alternado para a versão mobile os ícones sociais desaparecem. como posso fazê-los permanecer e possivelmente meus links do cabeçalho também?
WPBeginner Support
Olá Dan,
Parece que seu tema os oculta na versão mobile. Por favor, entre em contato com o autor do seu tema e ele poderá ajudá-lo com isso.
Admin
David Cornish
Obrigado pelo conselho, agora uso o Simple Social Icons e gosto muito deles. Algum conselho sobre qual plugin usar para exibir um botão de “compartilhar no Twitter” ou “compartilhar no Facebook” acima e/ou abaixo de uma postagem, semelhante ao que você tem sob o título deste artigo?
WPBeginner Support
Olá David,
Por favor, veja nossa lista dos melhores plugins de mídia social para WordPress.
Admin
Rob Lilley
Existe alguma maneira de adicionar um atributo target, para que a página social abra em uma nova aba/janela?
Equipe Editorial
Sim, você pode facilmente abrir os links em uma nova janela. Se você não estiver vendo a opção em seus Links Personalizados por padrão, então você terá que clicar na aba “Opções de Tela” no canto superior direito da tela e garantir que a opção “Link Target” esteja marcada.
Admin
Umarbhatti
Oi,
Este plugin parece incrível. Obrigado!
Aman Singh
Olá,
Posso obter o código personalizado para o widget para que ele se pareça com o do WPbeginner?
Eu gosto da aparência do widget para ícones de mídia social no WPBeginner, então posso obter o código.
Obrigado.
WPBeginner Support
Olá Aman,
Você pode simplesmente usar a ferramenta Inspecionar do seu navegador para copiar o código HTML e CSS.
Admin