Como adicionar ícones de mídia social aos menus do WordPress (maneira fácil)

Publicados: 2023-07-05

Você está procurando uma maneira de adicionar ícones de mídia social aos menus do WordPress?

Os logotipos de sites como Facebook e Twitter são instantaneamente reconhecidos por pessoas de todo o mundo. Ao adicionar esses ícones aos seus menus, você pode promover seus perfis de mídia social de uma forma atraente que não ocupa muito espaço.

Neste artigo, mostraremos como adicionar ícones de mídia social aos menus de navegação do WordPress.

How to add social media icons to WordPress menus (easy way)

Por que você deve adicionar ícones de mídia social aos menus?

Ao adicionar ícones de mídia social ao seu site, você pode incentivar as pessoas a visitarem seus diferentes perfis de rede social. Isso pode gerar mais seguidores e engajamento no Facebook, Twitter, Instagram e muito mais.

Uma opção é adicionar ícones de mídia social à barra lateral do WordPress ou a uma área semelhante pronta para widgets. No entanto, quando as pessoas desejam visitar uma nova página, elas normalmente olham primeiro para o menu de navegação.

Ao adicionar ícones de mídia social aos menus do WordPress, muitas vezes você pode obter mais cliques, engajamento e seguidores em todos os seus perfis de mídia social.

Ícones de mídia social também podem atrair 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.

Dito isso, vamos dar uma olhada em como adicionar facilmente ícones de mídia social aos menus do WordPress.

Vídeo tutorial

Inscreva-se no WPBeginner

Se você preferir instruções escritas, continue lendo. Basta usar os links rápidos abaixo para ir direto para o método que deseja usar:

  • Método 1: usando o plug-in de imagem de menu (recomendado)
  • Método 2: usando o editor de site completo (somente temas de bloco)
  • Bônus: como promover seus perfis de mídia social

Método 1: usando o plug-in de imagem de menu (recomendado)

A maneira mais fácil de adicionar ícones de mídia social aos menus do WordPress é usando Menu Image. Este plug-in gratuito permite adicionar ícones de imagem aos seus menus de navegação, incluindo ícones sociais.

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 mídia social 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.

A imagem do menu também se integra ao plug-in 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. Por esse motivo, recomendamos a instalação do plug-in Font Awesome.

Para obter instruções detalhadas sobre como configurar o Font Awesome, consulte nosso guia sobre como adicionar facilmente fontes de ícones em seu tema WordPress.

Não importa como você planeja fornecer os ícones de mídia social, você precisará instalar e ativar o plug-in Menu Image. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in 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 para Menu Imagem » Menu Imagem .

How to add social media icons to a WordPress menu

Ao criar seus ícones sociais, você pode usar qualquer um dos tamanhos de imagem padrão do WordPress, como miniatura, imagem ou grande. A imagem do menu também permite escolher entre três tamanhos exclusivos definidos como 24 × 24, 36 × 36 e 48 × 48 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 de imagem do menu 1º, 2º ou 3º.

Resizing social media icons in WordPress

Feito isso, clique em 'Salvar alterações' para salvar suas configurações.

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

Selecting a WordPress menu to edit

Se você quiser adicionar ícones de mídia social a um menu diferente, basta abrir o menu suspenso 'Selecionar um menu para editar'.

Você pode então escolher um menu da lista e clicar em 'Selecionar'.

Editing a WordPress navigation menu

Para obter 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 deseja usar. Por exemplo, você pode inserir a URL do seu grupo do Facebook ou canal do YouTube.

Você também precisará digitar algum 'Link Text'. Em uma etapa posterior, você terá a opção de alterar onde esse título aparece no menu ou até mesmo ocultá-lo completamente.

Adding link text to a website navigation menu

Feito isso, clique em 'Adicionar ao Menu'.

Este item aparecerá agora na coluna da direita.

Adding social links to a WordPress website

Para adicionar um ícone de mídia social, basta passar o mouse sobre o novo item de menu.

Em seguida, clique no botão 'Menu Image' quando ele aparecer.

Adding icons and images to a WordPress menu

Observação: se você não vir o botão 'Imagem do menu', clique em 'Salvar alterações'. Agora, o botão 'Menu Image' deve 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 ao lado de 'Ícone'.

Adding Twitter, Facebook, and other social icons to WordPress

Em seguida, selecione 'Fontawesome'.

Você pode então clicar em 'Marcas'.

Adding branded icons to a WordPress navigation menu

Agora você verá todos os ícones de marca, incluindo ícones para todas as principais redes sociais. Quando você 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 opção 'Imagem'. Em seguida, clique no link 'Definir imagem'.

Adding any file or image to a WordPress navigation menu

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

Não importa de onde você obtenha o ícone, a imagem do menu mostrará uma visualização à direita.

Previewing icons in a website or blog navigation menu

Agora você pode alterar se o título do link aparece acima, abaixo, antes ou depois do ícone de 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é tornar seu menu mais confuso e complicado.

Com isso dito, você pode ocultar o título selecionando o botão de opção 'Ocultar'.

Hiding the menu link title text

À medida que você faz alterações, a visualização ao vivo é atualizada automaticamente, para que você possa experimentar diferentes configurações para ver qual fica melhor.

Por fim, se você estiver usando sua própria imagem, poderá redimensionar os ícones de mídia social usando o menu suspenso 'Tamanho da imagem'.

Resizing social icons on a WordPress navigation menu

Ícones maiores chamam a atenção do visitante, mas também podem distrair. Com isso em mente, você pode tentar 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'.

Publishing social icons on a WordPress website

Basta repetir essas etapas para adicionar mais ícones ao menu do WordPress.

Você pode até adicionar ícones a outros itens importantes no menu de navegação. Por exemplo, você pode adicionar ícones ao seu formulário de contato ou à página de checkout do WooCommerce.

Quando estiver satisfeito com a configuração do menu, basta clicar em 'Salvar menu'.

Publishing a menu with social icons

Agora, você pode visitar seu site para ver os novos ícones de mídia social em ação.

É assim que parecia em nosso site de demonstração.

Adding social icons to a WordPress menu

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ídia social e exibi-los em um layout agradável.

An example of a social media navigation menu

Este bloco vem com ícones embutidos para todas as principais redes sociais, então 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 Social Icons, portanto, não é tão flexível quanto o plug-in 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 rodapé. Dessa forma, você pode mostrar um menu de mídia social em todo o site.

Para começar, vá até Aparência »Editor no painel do WordPress.

Accessing the full site editor

Por padrão, o editor de site completo mostra o modelo inicial do seu tema, mas você pode adicionar ícones sociais a qualquer modelo ou parte do modelo. Você pode até adicionar ícones de mídia social a partes do seu site que não podem ser editadas usando o editor de conteúdo padrão do WordPress.

Por exemplo, você pode adicionar um menu de mídia social ao modelo de página 404 do seu site.

Para ver todas as opções disponíveis, você precisa selecionar 'Templates' ou 'Template Parts'.

Adding social icons to a block-based template

Agora você pode clicar no modelo ou parte do modelo que deseja editar.

Como exemplo, adicionaremos ícones de mídia social ao cabeçalho do WordPress, mas as etapas serão as mesmas, independentemente do modelo selecionado.

Adding Twitter, Facebook, Instagram and other social icons to a block-enabled template

Depois de fazer sua escolha, o WordPress mostrará uma visualização do modelo ou parte do modelo.

Para continuar, clique no pequeno ícone de lápis.

Editing a block-based header template

Feito isso, clique no ícone azul '+' no canto superior esquerdo.

Na barra de pesquisa, você deve digitar 'Ícones sociais'.

Adding the Social Icons block to WordPress

Quando o bloco certo aparecer, arraste e solte-o no modelo de tema.

Para adicionar o primeiro ícone, basta clicar no ícone '+' dentro do bloco.

Adding social icons to a WordPress template

No pop-up que aparece, digite o ícone que deseja adicionar, como 'Twitter' ou 'Facebook'.

Quando o ícone certo aparecer, basta clicar para adicioná-lo ao seu blog WordPress.

Adding a Twitter icon to a WordPress navigation menu

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.

Adding URLs to a social media menu

Para adicionar mais ícones sociais ao WordPress, basta clicar no ícone '+' e repetir o mesmo processo descrito acima.

Depois de adicionar todos os ícones de mídia social, você pode personalizar o bloco. Para fazer isso, clique para selecionar o bloco Social Icons e, em seguida, clique na guia 'Block'.

Customizing a social block in WordPress

Você pode alterar a justificação, o alinhamento e a orientação do ícone usando as configurações de 'Layout'.

Por padrão, todos os links de mídia social serão abertos na mesma guia. Para manter os visitantes em seu site, você pode querer clicar para ativar a opção 'Abrir links em uma nova guia'.

Opening website links in a new browser tab

Por padrão, o WordPress mostra apenas os ícones sociais, sem nenhum texto.

Se você quiser mostrar o texto ao lado de cada ícone, clique para ativar a opção 'Mostrar rótulos'.

Adding labels to a social menu

Em seguida, clique na guia 'Estilos'.

Aqui, você pode alterar o estilo do botão clicando em 'Padrão', 'Somente logotipos' ou 'Forma de pílula'.

Adding button styles to a navigation menu

Finalmente, você pode alterar o espaço entre os ícones sociais usando as configurações em 'Block Spacing'.

Quando estiver satisfeito com a aparência do menu, clique no botão 'Salvar'.

Publishing a social icons block in WordPress

Agora, se você visitar seu site, verá os ícones de mídia social ao vivo.

Bônus: como promover seus perfis de mídia social

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 é incorporar um feed social ao vivo em seu site. Isso permite que você mostre as postagens mais recentes de várias contas, 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 o Smash Balloon. É o melhor plug-in de feed de mídia social para WordPress e permite incorporar feeds ao vivo do Twitter, Instagram, Facebook e muito mais.

The Smash Balloon social media WordPress plugin

Para obter mais informações, consulte nosso guia 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 guia sobre como incorporar um vídeo do Facebook no WordPress ou ver nossas escolhas de especialistas para os melhores plugins do Twitter para WordPress.

Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.