Otimização de velocidade do WordPress com ícones personalizados de compartilhamento social

Pode parecer uma tarefa fácil, mas adicionar botões de compartilhamento social bem comportados a um site WordPress pode ser um incômodo. Quando digo bem-comportado quero dizer simples, leve, fácil de usar recursos, rápido - mais social de compartilhamento plugins lá fora, não são assim. Eles tendem a consumir recursos como loucos e por que alguém iria querer aumentar o tempo de carregamento do plugin em 25-35% apenas para exibir alguns ícones em seu site?

A boa notícia é que você não precisa necessariamente de um plugin para realizar essa tarefa. Neste tutorial, vou mostrar como você pode facilmente adicionar botões de compartilhamento social personalizados até o final das postagens em seu site WordPress com apenas algumas linhas de código.

Etapa 1: gerar os botões de compartilhamento social

Vamos usar o Simple Sharing Buttons Generator, uma ferramenta da Web prática e fácil de usar para gerar os ícones de compartilhamento. A principal vantagem deste aplicativo é que os botões que ele gera são executados no frontend, portanto eles não vão sobrecarregar o seu servidor e você também pode manter as atividades de seus usuários privadas.

Para gerar seus botões personalizados, clique aqui e pressione Início. Escolha 1 dos 6 estilos de botões diferentes. Clique Próximo e marque o redes sociais você deseja adicionar ao seu site. Quando tiver terminado, você terá que preencher as informações do seu site.

Nesta tela (abaixo), você encontrará duas opções: 'Sem JavaScript' e 'JavaScript'. Carraça JavaScript, como ele permitirá que o navegador detecte a URL dinamicamente, portanto, seus visitantes poderão compartilhar cada postagem individualmente e não apenas o URL da página inicial.

Finalmente, dê uma olhada na visualização ao vivo, faça o download do conjunto de ícones escolhido e pegue o código que você gerou.

Etapa 2: criar um tema infantil

Agora você terá que adicionar os ícones e códigos gerados ao seu site. Primeiro de tudo você precisará criar um tema filho.

Você pode facilmente criar um tema filho do WP com a ajuda do nosso tutorial, ou você pode seguir os passos deste artigo do WP Codex. Se você já tem um, pode pular para o Passo 3.

O tema da criança se relaciona com o tema que você usa atualmente - de uma maneira um pouco semelhante à que uma criança se relaciona com seus pais. isto herda tudo (estilo e funcionalidade) do tema pai mas você pode adicionar funcionalidade extra para isso.

No nosso caso, a funcionalidade extra será os botões de compartilhamento social personalizados.

Etapa 3: criar uma função personalizada que exibe os ícones

Vamos adicionar uma função personalizada ao arquivo functions.php do tema filho.

Com a ajuda desta função, você poderá adicionar os ícones sociais onde quiser em seu site usando um gancho de ação personalizado. Se o tema filho ainda não tiver um arquivo functions.php, crie um arquivo de texto em branco na pasta raiz do tema filho com as funções de nome e altere sua extensão para .php.

Insira a seguinte linha de código neste arquivo em branco:

Quando seu funções.php arquivo está configurado, adicione o seguinte trecho de código a ele:

/ * * Adiciona os ícones personalizados de compartilhamento social * / function add_social_sharing () ?>

Compartilhe esta postagem

Finalmente exclua a linha do comentário HTML do snippet de código acima e substitua-o pelo código HTML você gerou na etapa 1 com o gerador de botões de compartilhamento social.

Etapa 4: Copie o arquivo de modelo apropriado para a pasta de tema filho

Por padrão, as mensagens únicas são regidas por um arquivo de modelo chamado single.php. Às vezes - especialmente em temas mais modernos - a estrutura de single.php é mais complicado, pois também carrega arquivos de modelo adicionais. Nesta etapa, precisamos encontrar o arquivo de modelo apropriado, onde podemos adicionar os ícones mais tarde.

Para localizar o local certo para os botões sociais, precisamos encontrar o arquivo de modelo que contém a função que carrega o conteúdo dos posts únicos.

Vamos abrir o editor de temas no painel de administração do WordPress em Aparência> Editor. No canto superior direito, você encontra uma lista suspensa onde você pode selecionar seu tema pai. Abaixo do menu suspenso, você pode ver todos os arquivos de modelo que seu tema pai contém. Role para baixo até encontrar o Modelo de postagem única (chamado single.php) e abra-o.

Se o tema pai usar o get_template_part () Função WP no single.php arquivo que significa que ele usa um arquivo de modelo adicional para carregar o conteúdo do post único.

Primeiro você tem que descobrir qual é esse. O nome do arquivo de modelo adicional é o primeiro parâmetro do get_template_part () função.

Em Vinte e quinze Se parece com isso:

get_template_part ('content', get_post_format ());

O primeiro parâmetro é 'conteúdo' o que significa que procuramos o arquivo de modelo chamado content.php. Você precisa copiar esse arquivo da pasta raiz do tema pai para a pasta raiz do tema filho para modificá-lo.

Etapa 5: adicione o gancho de ação ao arquivo de modelo correto

Criamos uma função chamada add_social_sharing () na Etapa 3, e nós o anexamos a um gancho de ação personalizado chamado custom_social_share. Agora vamos ter que adicionar este gancho ao local onde queremos que a função seja executada.

Aqui está o trecho de código que você precisará inserir no lugar certo:

Em seguida, vamos encontrar o lugar certo.

Abra o arquivo de modelo que você adicionou ao tema filho na Etapa 4 em um editor de código ou dentro do editor de temas do painel de controle do WordPress e procure o o conteúdo() função.

Verifique se existe um wp_link_pages () função logo após o o conteúdo() função. Se houver, o snippet de código acima vem depois disso; caso contrário, segue a o conteúdo() função.

Etapa 6: adicione o código CSS ao tema filho

Abra o style.css arquivo do tema filho no editor de código ou no editor de temas do painel de administração do WordPress, copie o código CSS gerado na Etapa 1, cole-o no final do arquivo e salve-o.

Nós adicionaremos duas linhas extras ao arquivo CSS para fazer com que os ícones de compartilhamento social sejam exibidos corretamente em cada tema. Copie e cole o seguinte snippet de código no final do style.css Arquivo:

 ul.share-buttons li a fronteira: 0;  botões ul.share li img display: inline;

Etapa 7: carregar o conjunto de ícones de mídia social no servidor

Carregue o conjunto de ícones de mídia social escolhido que você baixou na Etapa 1 para a pasta do tema filho. Conecte seu servidor via FTP, crie uma nova pasta chamada imagens dentro da raiz da pasta do tema filho (/ wp-content / themes / your-child-theme / images) e carregue o conjunto de ícones aqui.

Nós nomeamos a pasta imagens porque este é o nome padrão da pasta de imagens que o Simple Sharing Buttons Generator usa.

Etapa 8: Verifique o caminho dos arquivos de ícones

Depois de carregar os ícones de mídia social em seu servidor na Etapa 7, é importante verificar o caminho dos arquivos de ícones para garantir que eles sejam carregados.

O caminho de um arquivo de imagem dá uma dica para o navegador sobre sua localização no servidor. Vamos verificar os caminhos da imagem dentro do funções.php arquivo do tema filho. Abra o arquivo em seu editor de código e navegue até o add_social_sharing () função onde você precisa verificar o código HTML que você gerou com o Simple Sharing Buttons Generator.

No código HTML você encontrará um tag com um src atributo para cada ícone. Verifique se cada src os atributos apontam para o local exato onde seu conjunto de ícones foi enviado na Etapa 7.

O Simple Sharing Buttons Generator adiciona caminhos relativos ao arquivos. As vezes navegadores não podem renderizar as imagens se você usar um caminho relativo, então é uma boa ideia use caminhos absolutos. Dessa forma, cada navegador potencialmente usado por seus visitantes pode ter certeza sobre a localização dos arquivos de ícone necessários.

O caminho da imagem relativa adicionado pelo gerador é algo como isto:

Vamos mudar o src atributo de cada ícone para um caminho absoluto, o que significa que incluirá o URL completo do arquivo.

O caminho da URL acima será parecido com isto:

Etapa 9: Faça o upload dos arquivos modificados e ative o tema filho

Conecte seu servidor via FTP e faça o upload de todos os arquivos que criamos neste tutorial que você ainda não enviou: funções.php, a style.css, eo arquivo de modelo apropriado (neste tutorial, o single.php ou o content.php).

Finalmente, ative o tema filho no painel de administração do WP sob o Aparência> Temas cardápio.

Agora você está pronto com seus ícones de compartilhamento social super leves, que economizam recursos e são personalizados. Você pode se conectar e acessá-lo ao vivo em seu site.

Conclusão

Neste tutorial, mostrei como adicionar os botões de compartilhamento social personalizados ao final de postagens únicas. Você pode adicionar os ícones de compartilhamento a outros locais em seu site com a ajuda do gancho de ação que criamos.

Basta adicionar o código que usamos na etapa 5 ao ponto em que você deseja que os botões sejam exibidos:

Você também terá que encontrar o arquivo de modelo correto se quiser colocar os ícones em outro lugar. Páginas únicas são regidas por um arquivo de modelo chamado page.php, enquanto anexos de mídia como imagens são carregados por attachment.php.

Se você deseja exibir os botões de compartilhamento social em um ponto diferente em seu site, use a Hierarquia de modelos do WordPress para encontrá-lo.

Fonte de download