[Plug-in completamente não utilizado] Instalar botão de compartilhamento SNS apenas com HTML e CSS [WordPress]

2019 年 7 30 月 日

Acionar

Até agora, o botão de compartilhamento SNS era "Plug-in de botões de compartilhamento do WordPress - AddThisContei com um plug-in chamado ".

Este plugin é

  • Você pode adicionar favoritos da Hatena, bem como SNS importantes no exterior, como Facebook, Twitter, Line, pocket e Pinterest.
  • Há um design de botão de compartilhamento delgado e pequeno na lateral.

Eu gostei nesse aspecto, mas era um plug-in bastante pesado.

Se você pesquisar por "nenhum plugin, botão de compartilhamento", encontrará um método usando PHP / CSS / HTML / plug-ins de ícone social.

Desta vez, tentei instalar o botão de compartilhamento SNS apenas com CSS e HTML sem usar PHP e ícones sociais.

Recursos do botão de compartilhamento por este código

  • Criado apenas com HTML e CSS
  • Não use PHP, ícones sociais
  • Executar javascript na tag
  • Obtenha automaticamente o URL e o título da página para compartilhar
  • Mais rápido do que os plug-ins (até 10 pontos a mais do que AddThis)
  • O número de ações não pode ser contado
  • Design simples horizontal

Código do botão de compartilhamento e método de instalação

HTML

Onde escrever:
"Aparência" -> "Personalizar" -> "Widget" -> Onde você deseja colocar o botão de compartilhamento-> Adicionar widget-> "HTML personalizado"

Compartilhe este artigo     

CSS

Lugar para escrever: "Aparência" -> "Personalizar" -> "CSS adicional"

/ * --- SNS share button --- * / / * Caracteres no botão * / .fa-twitter: before, .fa-hatena: before, .fa-line: before, .fa-pocket: before {font -family: helvetica neue, helvetica, arial, sans-serif; font-weight: bold; font-size: 14px} .fa-facebook: before {content: "f"; font-family: Verdana; font-weight: bold } .fa-twitter: before {content: "twitter";} .fa-hatena: before {content: "B!"; font-family: Verdana;} .fa-line: before {content: "Line";} .fa-pocket: before {content: "pocket";} / * Ajustar posição de exibição do botão * / .button-area {text-align: center; margin-top: 15px;} / * Title display settings * /. button- area-title {text-align: center; padding: .7em;} / * Design do bloco de botões * / .button-area li a {padding: 2px; display: block; text-align: center; text-decoration: none; color: #fff; border-radius: 4px;} / * Cor de fundo para cada SNS * / .twitter a {background-color: # 55acee;} .facebook a {background-color: # 3b5998;} .hatena a {background -color: # 008fde;} .line a {background-color: # 1dcd00;} .pocket a {background-color: # ea5a6c;} / * Excluir lista "・" * / .button-area ul {margin: 0; padding: 0; list-style: none;} / * Largura do botão e configurações de margem * / .button-area li {float: left; width: 19%; margin: 0%;}. button-area ul: after {display: block; clear: both;} / * Configurações de exibição quando o cursor é colocado no botão * / .button-area li a: hover {-ms-transform: translateY (-3px); -webkit- transform: translateY (-2px); transform: translateY (-2px);}

Exemplo de exibição

Sns botão de compartilhamento sem plugin
Botão de compartilhamento SNS

O site que usei como referência
[WordPress] Personalize os botões de compartilhamento SNS sem plug-ins [Copie e cole OK! ]
Botões de compartilhamento LINE / Facebook / Twitter / Google+, método de configuração de link de aquisição automática do URL atual (e título)