[Complemento completamente sin usar] Instale el botón para compartir SNS solo con HTML y CSS [WordPress]

2019/7/302019/8/3

1. Desencadenar
2. Características del botón compartir por este código
3. Compartir código de botón y método de instalación
4. HTML
5. CO
6. Ejemplo de pantalla

Desencadenar

Hasta ahora, el botón para compartir SNS ha sido "Complemento de botones para compartir de WordPress - AddThisConfié en un complemento llamado ".

Este complemento es

Puede agregar marcadores de Hatena, así como los principales SNS en el extranjero, como Facebook, Twitter, Line, Pocket y Pinterest.
Hay un diseño de botón para compartir pequeño y delgado en el lateral.

Me gustó en ese sentido, pero era un complemento bastante pesado.

Si busca "sin complemento, botón para compartir", encontrará un método que utiliza complementos de íconos sociales / PHP / CSS / HTML.

Esta vez, traté de instalar el botón para compartir SNS solo con CSS y HTML sin usar PHP e íconos sociales.

Características del botón compartir por este código

Creado solo con HTML y CSS
No uses PHP, íconos sociales
Ejecutar javascript en la etiqueta
Obtenga automáticamente la URL y el título de la página para compartir
Más rápido que los complementos (hasta 10 puntos más que AddThis)
No se puede contar el número de acciones
Diseño simple horizontal

Compartir código de botón y método de instalación

HTML

Dónde escribir:
"Apariencia" -> "Personalizar" -> "Widget" -> Dónde desea colocar el botón para compartir-> Agregar widget-> "HTML personalizado"

Comparte este artículo

CO

Lugar para escribir: "Apariencia" -> "Personalizar" -> "CSS adicional"

/ * --- Botón para compartir SNS --- * / / * Caracteres en el botón * / .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: antes de {contenido: "twitter";} .fa-hatena: antes de {contenido: "B!"; familia de fuentes: Verdana;} .fa-line: antes de {contenido: "Línea";} .fa-pocket: before {content: "pocket";} / * Ajustar la posición de visualización del botón * / .button-area {text-align: center; margin-top: 15px;} / * Configuración de visualización del título * /. button- area-title {text-align: center; padding: .7em;} / * Diseño de bloque de botones * / .button-area li a {padding: 2px; display: block; text-align: center; text-decoration: none; color: #fff; border-radius: 4px;} / * Color de fondo 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;} / * Eliminar la lista "・" * / .button-area ul {margin: 0; padding: 0; list-style: none;} / * Configuración de ancho y margen del botón * / .button-area li {float: left; width: 19%; margin: 0%;}. button-area ul: after {display: block; clear: both;} / * Mostrar configuraciones cuando el cursor se coloca en el botón * / .button-area li a: hover {-ms-transform: translateY (-3px); -webkit- transformar: translateY (-2px); transform: translateY (-2px);}