Como adicionar ícones de mídia social ao menu do WordPress

Independentemente de você estar administrando um site comercial ou pessoal, você precisa garantir que os usuários possam compartilhar seu conteúdo nas mídias sociais. É por isso que neste post, mostraremos como adicionar ícones de mídia social ao seu menu do WordPress .

Por que adicionar ícones de mídia social ao menu do WordPress?

De acordo com estudos recentes, quase 50% da população global usa pelo menos uma rede social. Conectar seu site ao Facebook ou adicionar feeds do Instagram ao seu site são boas opções, mas há outra coisa que você pode fazer para aumentar sua presença na mídia social. O menu é um dos elementos mais proeminentes do seu site. Além disso, é uma das primeiras coisas que os usuários veem quando visitam seu site. Por exemplo, dê uma olhada no menu principal do nosso site.

Portanto, para personalizar seu site e aproveitar ao máximo seus canais de mídia social, você pode adicionar ícones de mídia social ao seu menu do WordPress. Além disso, você pode exibir ícones em outras áreas do seu site que suportam widgets, como rodapé, barra lateral e assim por diante.

Embora alguns temas como o Divi incluam algumas opções para adicionar ícones de mídia social ao menu, a maioria dos temas não vem com esse recurso. E o WordPress também não inclui um recurso nativo para incluir ícones no menu.

Portanto, neste post, mostraremos três métodos para adicionar ícones de mídia social facilmente ao seu menu do WordPress .

Como adicionar ícones de mídia social ao seu menu WordPress

Existem três maneiras principais de adicionar ícones de mídia social ao seu menu do WordPress:

1. Com plug-ins
   1. QuadMenu
   2. Ícones sociais do WP
2. Do personalizador de temas
3. Usando ícones FontAwesome manualmente

Neste guia, descreveremos cada método passo a passo para que você possa escolher o que mais gosta.

1) Plug-ins

Usar plugins é a maneira mais fácil de incluir ícones de mídia social em seu menu. Existem várias opções por aí, então, para facilitar sua vida, listamos dois dos melhores plugins que você pode usar.

1.1) QuadMenu

QuadMenu é a melhor ferramenta para personalizar facilmente e levar seus menus do WordPress para o próximo nível. Este é um plugin freemium. Há uma versão gratuita com recursos básicos e três planos premium que vêm com recursos mais avançados e suporte prioritário.

Para adicionar ícones de mídia social ao seu menu, você precisa da versão premium. Então, vamos ver como instalá-lo e ativar o plugin em seu site.

Instalação e ativação

Primeiro, você precisa comprar o plugin e baixar os arquivos para o seu desktop. Então, antes de instalá-lo, você precisa instalar a versão gratuita em seu site. Para fazer isso, vá para o painel do WP > Plugins > Adicionar novo . Em seguida, use a barra de pesquisa e procure QuadMenu. Depois disso, pressione Instalar e depois Ativar .

Após a ativação, use os arquivos da versão premium que você baixou anteriormente e instale-os em seu site.

Depois de ativar o plug-in, você precisará verificar sua chave de licença. No painel da sua conta QuadMenu, você verá a opção de licenças.

Copie a chave de lá e cole-a no campo de licenças com seu endereço de e-mail registrado para verificar sua chave.

O plug-in está disponível em nossa loja, Envato e mercado Elegante, portanto, use o menu suspenso para selecionar a opção apropriada para sua compra. Depois de verificar, você está pronto para ir.

Adicione ícones de mídia social ao seu menu WordPress com QuadMenu

QuadMenu funciona com qualquer tema gratuito ou premium. Para esta demonstração, usaremos o GeneratePress, mas o processo é semelhante a qualquer outro tema. Primeiro, vamos para as configurações do plugin indo em QuadMenu > Options .

Lá, você verá várias opções de personalização, como:

• Menu Principal
• Responsivo
• Tema Padrão
• Customizar
• Social
• Importar/Exportar

Configurar opções sociais

No nosso caso, precisamos adicionar ícones de mídia social ao nosso menu principal. Então, vamos selecionar a opção Social .

Você verá várias opções padrão que podem ser editadas ou excluídas, dependendo dos canais que você possui. Eles já têm ícones atribuídos com perfis de mídia social.

No entanto, você também pode personalizá-los clicando no botão + Adicionar ícone . Além disso, você pode adicionar novos canais de mídia social pressionando o botão + .

Digamos que você queira alterar o ícone do Facebook. Pressione + Adicionar ícone e você verá um pop-up com muitos ícones que você pode escolher.

Existem muitos ícones, por isso recomendamos que você use o recurso de pesquisa para filtrar os resultados.

Como você pode ver, procuramos por ícones do Facebook. Ele mostrará todos os ícones disponíveis relacionados à sua consulta de pesquisa, então selecione o que você gosta e salve-o. Você também pode alterar os títulos e URLs. Depois de fazer todas as alterações desejadas no QuadMenu, salve as configurações.

Depois disso, vá para os menus do WordPress. Você verá todos os menus disponíveis lá. Para usar as opções do QuadMenu em seu menu, você precisa marcá-lo como QuadMenu Dev nas configurações do menu . Depois disso, salve o menu.

No carregamento da próxima página, você verá as opções do QuadMenu.

Nos itens do QuadMenu, você verá a lista de ícones sociais . Selecione-os e pressione Adicionar ao menu .

Depois disso, você verá a seção Social nas opções do Menu Principal. Passe o mouse e você verá as opções de personalização do QuadMenu.

Se você precisar de personalização adicional, selecione essa opção. Caso contrário, pressione o botão Salvar Menu e pronto.

Ícones no menu (Frontend)

Agora, é hora de verificar os resultados. Então, vá para a página inicial do seu site e você verá os ícones sociais. E quando você passar o mouse sobre eles, os ícones serão renderizados.

É isso! Você adicionou com sucesso ícones de mídia social aos seus menus do WordPress com QuadMenu .

1.2) Ícones do Menu WP

Se você não puder pagar por nenhum plugin premium, não se preocupe. Temos uma solução gratuita para você. Nesta seção, mostraremos como adicionar ícones de mídia social ao seu WordPress com um plugin gratuito chamado WP Menu Icons.

Instalação e ativação

Primeiro, instale e ative os ícones do menu WP em seu site.

Esta ferramenta é muito fácil de usar e não requer nenhuma personalização adicional.

Personalizando ícones de menu

Se você não tiver um menu em seu site, poderá criar um na seção de configuração.

Atribua um local ao seu menu e você estará pronto para adicionar itens a ele. Para adicionar seus perfis de mídia social ao menu, escolha o item Links personalizados . Você precisará inserir o URL da página que deseja vincular e um rótulo. Em seguida, pressione Adicionar ao Menu .

Depois de adicionar o ícone ao menu, a página de configuração ficará assim.

Da mesma forma, você pode adicionar outros ícones de mídia social. Nesse caso, adicionamos ícones do Twitter, Pinterest e Instagram ao nosso menu.

Nos itens de menu, há um botão + . Essa é a configuração que você precisa usar para adicionar ícones aos itens de menu, então clique nela.

Então, você verá uma grande variedade de itens para escolher.

Existem dezenas de ícones, então use o recurso de pesquisa para filtrar os resultados desejados. Nesse caso, selecionamos o item de menu do Facebook, então procuraremos pelo ícone do Facebook. Depois de selecionar o que você gosta, você verá as configurações do ícone na coluna da direita. Aqui você pode exibir ou ocultar o rótulo, personalizar a posição, tamanho e alinhamento. Neste caso, vamos ocultar o rótulo. Depois de concluir a personalização, clique em Salvar .

Você pode personalizar os ícones do Pinterest, Twitter e Instagram da mesma maneira. Após adicionar os ícones necessários, salve o menu.

Agora é hora de conferir o resultado. Vá para o frontend do seu site e você verá os novos ícones.

É assim que você pode adicionar ícones de mídia social aos seus menus de cabeçalho no WordPress com WP Menu Icons . Por fim, você também pode estilizar seus ícones na página de configurações dos ícones do menu WP.

2) Adicione ícones de mídia social com o personalizador de temas

Se você não quiser instalar nenhum plug-in, poderá incluir ícones de mídia social em seus menus usando o personalizador de temas. Alguns temas premium, como Divi, Newspaper ou Avada, vêm com painéis de temas integrados que permitem personalizar o tema e adicionar ícones de mídia social.

Se você não tem certeza se o seu tema vem com a opção de adicionar ícones de mídia social, no seu painel do WordPress vá para Aparência > Personalizar > Menus > Visualizar Locais e verifique se há um menu social ou opção de ícone social.

Para nossa demonstração, usaremos o tema Divi da Elegant Themes. Primeiro, vá para o painel do WP > Aparência > Personalizar .

Em seguida, vá para a personalização do cabeçalho e os elementos do cabeçalho. Lá, você verá uma opção para habilitar ícones sociais de cabeçalho.

Ative essa opção e você a verá no cabeçalho do seu site.

Além disso, você pode personalizá-los acessando Divi > Opções de tema .

Lá, você pode habilitar os ícones desejados e inserir a URL de seus perfis nas redes sociais. Os ícones de mídia social aparecerão no cabeçalho e no rodapé do seu site por padrão.

No entanto, você pode optar por ocultá-los por meio das configurações do personalizador.

Outros temas, como Newspaper e Newsmag, têm suas próprias opções de personalização, para que você possa ativar/desativar ícones e exibi-los diretamente no painel de temas dedicado. Se você não conseguir encontrar a seção de ícones de mídia social no personalizador ou painel de temas, sinta-se à vontade para deixar um comentário abaixo e tentaremos ajudá-lo.

3) Usando FontAwesome

Por fim, você pode adicionar ícones de mídia social aos seus menus no WordPress manualmente. Mesmo que você não seja um desenvolvedor ou não tenha habilidades de codificação, você pode exibir ícones de mídia social com um pouco de codificação HTML. Para fazer isso, usaremos os ícones do FontAwesome.

Então, a primeira coisa que você precisa fazer é acessar o site FontAwesome.

Use o recurso de pesquisa para encontrar os ícones que você precisa. Para esta demonstração, vamos procurar por ícones do Twitter .

Na próxima página, o site mostrará os resultados da pesquisa. Escolha o que você mais gosta.

Na próxima página, você verá os detalhes do ícone que você selecionou, basta copiar o código HTML do ícone.

Adicionando ícones impressionantes de fonte ao WordPress

Em seguida, vá para a seção de menus em seu site WordPress. No lado esquerdo, você verá a seção de links personalizados. Você precisará inserir a URL do seu perfil do Twitter e colar o código HTML que acabou de copiar no campo Texto do link . Depois de fazer isso, pressione Adicionar ao menu .

Depois disso, salve as alterações. Em seguida, vá para o frontend do seu site e você verá o ícone.

Dessa forma, você poderá adicionar qualquer ícone de mídia social ao seu menu .

O código HTML não funciona

Se você seguiu todas as etapas deste tutorial, mas o HTML não funciona, tente isto. Se o código fab não funcionar, tente alterar o código HTML removendo o b do fab .

Assim, por exemplo, em nosso caso, o código HTML final terá esta aparência <i class=”fa fa-twitter”></i> em vez de <i class=”fab fa-twitter”></i> . Exemplo:

Adicione ícones de mídia social ao cabeçalho do WordPress

O cabeçalho é um dos lugares mais populares onde você pode adicionar ícones de mídia social, então vamos ver rapidamente como fazer isso usando o Personalizador de Temas.

Observe que você precisará de um tema que ofereça a opção de adicionar ícones de mídia social ao menu. Além disso, lembre-se de que as etapas podem ser ligeiramente diferentes dependendo do seu tema, mas você poderá seguir as etapas sem problemas na maioria dos temas.

Vamos dar uma olhada em duas opções: criar um novo menu e editar um existente.

Adicionando ícones de mídia social ao cabeçalho em um novo menu

1. No painel do WordPress, vá para Aparência > Menus
2. Pressione o link criar um novo menu ao lado do botão Selecionar e dê um nome a ele
3. Agora você pode adicionar os ícones a ele. Selecione o novo menu e insira as mídias sociais e URLs que deseja incluir (Instagram, Facebook, YouTube e assim por diante) e pressione Adicionar ao menu
4. Salve as alterações
5. Depois disso, coloque o menu que você acabou de criar na seção de cabeçalho
6. Salve as alterações e pronto! É assim que você adiciona ícones de mídia social ao cabeçalho do WordPress!

Adicionando ícones de mídia social ao cabeçalho em um menu existente

1. No painel do WordPress, vá para Aparência > Personalizar > Menus
2. Vá para a seção Cabeçalho e pressione o botão Adicionar itens
3. Em seguida, selecione o ícone da plataforma de mídia social que deseja adicionar, insira a URL e pressione Adicionar ao menu . Você precisa fazer o mesmo para cada mídia social que deseja adicionar
4. Selecione o local do menu onde deseja exibir os ícones. As opções que você tem dependerão do seu tema.
5. Salve as alterações. É isso!

Como alternativa, se você quiser adicionar os ícones ao rodapé, por exemplo, siga o mesmo processo, mas selecione o rodapé como o local dos ícones.

Bônus: Abra ícones de mídia social em uma nova guia

Adicionar ícones de mídia social ao seu menu do WordPress ajudará você a aumentar sua presença na mídia social. Porém, o problema é que quando um usuário clica no ícone do seu menu, a página da rede social carrega na mesma janela e o usuário sai do seu site. A solução é fazer com que o ícone da mídia social carregue a página em uma nova aba. Vamos ver como fazê-lo.

No painel do WordPress, vá para Aparência > Menus , abra as Opções de tela no canto superior direito e ative a opção Link Target . Em seguida, vá para cada elemento do menu e marque a caixa de seleção Abrir link em uma nova guia . Como alternativa, você pode definir cada destino como _blank.

Por fim, salve as alterações e pronto!

Como adicionar feeds sociais ao seu site

Além de adicionar ícones de mídia social ao seu menu, você também pode adicionar feeds sociais ao seu site para aumentar o envolvimento com seus usuários. Na seção, mostraremos como conectar o Instagram e o TikTok ao seu site.

Adicionar um feed do Instagram ao WordPress

A maneira mais fácil de conectar o Instagram ao seu site é usar o plugin Social Feed Gallery. É uma ferramenta freemium que permite exibir seu feed do Instagram em poucos cliques.

Primeiro, instale e ative o plugin neste link. Em seguida, vá para a Galeria de feeds sociais e faça login na sua conta do Instagram.

Depois disso, vá para Galeria de feeds sociais > Contas e você terá a opção de fazer login em sua conta pessoal ou comercial (lembre-se de que a conta comercial tem mais opções). Em seguida, adicione uma conta, faça login e dê ao aplicativo as permissões necessárias para conectar sua conta ao WordPress.

Feito isso, vá para a guia Feeds , pressione +Feed e adicione o feed que deseja exibir. Por fim, personalize seu feed e, quando terminar, você verá que o plug-in fornece um código de acesso que você pode colar em qualquer página ou postagem para exibir seu feed.

Para mais informações, confira nosso guia sobre como integrar o Instagram ao WordPress.

Adicionar um feed TikTok ao WordPress

Da mesma forma, você também pode conectar seu site ao TikTok. Para exibir os feeds do TikTok, usaremos um plug-in dedicado chamado WP TikTok Feed. Este é o plugin TikTok mais popular para WordPress e possui uma versão gratuita e alguns planos premium.

Depois de instalar e ativar o plugin, no seu painel do WordPress , você precisa vincular sua conta do TikTok e, em seguida, acessar Tiktok Feed > Feeds . Lá, pressione +Feed e adicione o feed que deseja exibir. Além disso, você verá várias opções para personalizar como exibir o feed em seu site.

Para obter mais informações sobre isso, confira nosso tutorial sobre como incorporar vídeos do TikTok no WordPress.

Conclusão

Em suma, adicionar ícones de mídia social aos menus do WordPress é uma excelente maneira de aumentar sua presença na mídia social. Neste guia, vimos 3 maneiras diferentes de fazer isso:

1. Com plug-ins
2. Do personalizador de temas
3. Manualmente

Se o seu tema permite adicionar ícones por padrão, você não precisa usar nenhum plugin extra ou código HTML. Se você preferir um plugin, recomendamos o uso do QuadMenu. Ele permitirá que você obtenha controle total de toda a personalização do menu do WordPress e também vem com muitos recursos poderosos.

No entanto, se você preferir uma solução gratuita, dê uma olhada no WP Menu Icons. É uma ferramenta simples que o ajudará a incluir ícones sociais rapidamente.

Por outro lado, se você não quiser instalar nenhum plugin, você pode adicionar ícones de mídia social usando um pouco de HTML e ícones FontAwesome. Esta opção também permite que você personalize os ícones com um pouco de CSS ou você pode evitar a parte de estilo e usar os ícones padrão.

Você achou este artigo útil? Se você gostou, deixe um comentário abaixo e compartilhe este post nas redes sociais. Para mais tutoriais relacionados, confira os seguintes guias:

• Melhores plugins para adicionar feeds de mídia social ao WordPress
• Como adicionar feeds de grupos do Facebook ao WordPress