[Plug-in complètement inutilisé] Installer le bouton de partage SNS uniquement avec HTML et CSS [WordPress]

2019er mars 72019er mars 8

1. Déclencheur
2. Caractéristiques du bouton de partage par ce code
3. Partager le code du bouton et la méthode d'installation
4. HTML
5. CSS
6. Exemple d'affichage

Déclencheur

Jusqu'à présent, le bouton de partage SNS était "Plugin de boutons de partage WordPress - AddThisJe me suis appuyé sur un plug-in appelé ".

Ce plugin est

Vous pouvez ajouter des signets Hatena ainsi que les principaux SNS à l'étranger tels que Facebook, Twitter, Line, pocket et pinterest.
Il y a un design mince et petit bouton de partage sur le côté.

Je l'ai aimé à cet égard, mais c'était un plug-in assez lourd.

Si vous recherchez "pas de plugin, bouton de partage", vous trouverez une méthode utilisant des plugins d'icônes PHP / CSS / HTML / social.

Cette fois, j'ai essayé d'installer le bouton de partage SNS uniquement avec CSS et HTML sans utiliser PHP et les icônes sociales.

Caractéristiques du bouton de partage par ce code

Créé avec HTML et CSS uniquement
N'utilisez pas PHP, les icônes sociales
Exécuter javascript dans la balise
Obtenez automatiquement l'URL et le titre de la page à partager
Plus rapide que les plugins (jusqu'à 10 points de plus que AddThis)
Le nombre d'actions ne peut pas être compté
Conception simple horizontale

Partager le code du bouton et la méthode d'installation

HTML

Où écrire:
"Apparence" -> "Personnaliser" -> "Widget" -> Où vous voulez placer le bouton de partage-> Ajouter un widget-> "HTML personnalisé"

Partagez cet article

CSS

Lieu d'écriture: "Apparence" -> "Personnaliser" -> "CSS supplémentaire"

/ * --- Bouton de partage SNS --- * / / * Caractères sur le bouton * / .fa-twitter: avant, .fa-hatena: avant, .fa-line: avant, .fa-pocket: avant {police -famille: 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: avant {contenu: "twitter";} .fa-hatena: avant {contenu: "B!"; font-family: Verdana;} .fa-line: avant {contenu: "Line";} .fa-pocket: before {content: "pocket";} / * Ajuster la position d'affichage du bouton * / .button-area {text-align: center; margin-top: 15px;} / * Paramètres d'affichage du titre * /. button- area-title {text-align: center; padding: .7em;} / * Button block design * / .button-area li a {padding: 2px; display: block; text-align: center; text-decoration: none; color: #fff; border-radius: 4px;} / * Couleur de fond pour chaque 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;} / * Supprimer la liste "・" * / .button-area ul {margin: 0; padding: 0; list-style: none;} / * Paramètres de largeur et de marge du bouton * / .button-area li {float: left; width: 19%; margin: 0%;}. button-area ul: after {display: block; clear: both;} / * Afficher les paramètres lorsque le curseur est placé sur le bouton * / .button-area li a: hover {-ms-transform: translateY (-3px); -webkit- transform: translateY (-2px); transform: translateY (-2px);}