Como criar botões de compartilhamento social no GeneratePress?

Neste tutorial, veremos Como criar botões de compartilhamento social no GeneratePress?

Isso sem dúvida o ajudaria a melhorar a promoção entre canais de sua postagem no blog. Isso, por sua vez, aumentará sua presença na web.

Vou mostrar como construir botões fixos de compartilhamento social que flutuam no front-end das entradas do seu blog. Ou seja, eles estarão sempre visíveis para o seu público.

Podemos conseguir isso através de um plugin, mas o melhor é construí-los manualmente. Dessa forma, você sabe que está evitando adicionar JavaScript (mata o desempenho do site) em seu site.

Esta lição requer que você tenha o GeneratePress premium, pois usaremos o módulo Elements.

Crie botões de compartilhamento social no GeneratePress sem plug-in

A criação de botões de compartilhamento social no tema GeneratePress sem plug-ins exige que você conheça os ícones SVG.

SVGs são gráficos vetoriais escaláveis. Eles são visuais de padrão aberto (usados ​​​​principalmente como ícones) desenvolvidos pelo W3C (World Wide Web Consortium).

Benefícios do uso de SVGs

• Eles têm um tamanho de arquivo minúsculo que nunca afeta a velocidade do site.
• Você pode facilmente adicionar hiperlinks a ícones SVG.
• Eles são facilmente modificáveis ​​com qualquer software de gráficos vetoriais.
• Os ícones SVG são independentes de resolução, o que os torna excelentes para visualização em desktops, tablets e dispositivos móveis.
• As imagens SVG são mais amigáveis ​​para SEO em comparação com as imagens convencionais.

Usaremos os SVGs do Iconmonstr. Ou seja, não apenas o ícone, mas também o ícone com seu código XML.

Etapa 1: adicionar código de botões de compartilhamento social ao gancho GeneratePress Elements

Para fazer isso, primeiro você precisa criar um Novo Elemento no GeneratePress. Vá para o painel do WordPress, em Aparência, clique em Elementos. Isso abrirá a página Elementos, clique em Adicionar novo elemento.

Assim que você clicar em Adicionar novo elemento, GeneratePress mostrará uma janela de diálogo. Clique em Gancho. É verdade, você precisa de um gancho personalizado do GeneratePress para esta ação.

Dê um nome ao novo elemento e adicione o código.

Selecione o gancho como gerar após o cabeçalho, execute o PHP e defina as regras de exibição para Postagens – Todas as postagens.

Já que precisamos que os ícones de compartilhamento social flutuem em nossa janela de visualização da tela. É melhor selecionar Gerar após o gancho do cabeçalho.

A razão pela qual escolhemos as configurações de exibição como Todas as postagens é porque você gostaria que seus usuários compartilhassem seu conteúdo em seus sites sociais.

Não se esqueça de clicar no botão Publicar.

Copie o código a seguir para implementá-lo em seu site.

Etapa 2: execute o estilo CSS para ícones de compartilhamento social

Para fazer isso, acesse o painel do WordPress, em Aparência, clique em Personalizar.

Isso abrirá o personalizador de tema GeneratePress. Aqui, desça até o final e clique em CSS adicional.

Cole o seguinte código CSS para obter um estilo comparável. Você tem permissão para ajustar o CSS de acordo com seus requisitos.

Etapa 3: Resultado final dos botões de compartilhamento social no GeneratePress

Finalmente, aqui está como o compartilhamento social os ícones devem ser semelhantes aos do seu site. Lembre-se de que os fizemos flutuar de cima para baixo em 70% da janela de visualização da tela.

Benefícios dos botões de compartilhamento social no GeneratePress (sem plug-in) (sem plug-in)

O uso de SVGs do Iconmonstr torna seus ícones muito leves
Não há nenhum tipo de código JavaScript envolvido.

Ao usar esta estratégia, você não instala nenhum plugin de terceiros
É responsivo.

Todos os botões funcionarão incrivelmente rápido para fins de compartilhamento.

Conclusão: Como criar botões de compartilhamento social no GeneratePress?

Agora você descobriu como construir botões de compartilhamento social no GeneratePress utilizando código e plugins.

Use a opção que for mais fácil para você e que atenda às suas necessidades. Sinta-se à vontade para editar o código PHP e/ou CSS do artigo.