[Plug-in volledig ongebruikt] Installeer de SNS-deelknop alleen met HTML en CSS [WordPress]

2019 年 7 月 30 日2019 年 8 月 3 日

1. Op gang brengen
2. Kenmerken van de deelknop door deze code
3. Deel knopcode en installatiemethode
4. HTML
5. CSS
6. Voorbeeld weergeven

Op gang brengen

Tot nu toe was de SNS-deelknop "Plug-in voor WordPress Share-knoppen - AddThisIk vertrouwde op een plug-in genaamd ".

Deze plug-in is

U kunt zowel Hatena-bladwijzers als grote buitenlandse SNS toevoegen, zoals Facebook, Twitter, Line, pocket en Pinterest.
Aan de zijkant bevindt zich een slank ontwerp met een kleine knop.

Ik vond het wat dat betreft leuk, maar het was een vrij zware plug-in.

Als u zoekt naar "geen plug-in, deelknop", vindt u een methode die PHP / CSS / HTML / social icon plug-ins gebruikt.

Deze keer probeerde ik de SNS-deelknop alleen met CSS en HTML te installeren zonder PHP en sociale pictogrammen te gebruiken.

Kenmerken van de deelknop door deze code

Alleen gemaakt met HTML en CSS
Gebruik geen PHP, sociale pictogrammen
Voer javascript uit in de tag
Haal automatisch de URL en paginatitel van de pagina op om te delen
Sneller dan plug-ins (tot 10 punten hoger dan AddThis)
Het aantal aandelen kan niet worden geteld
Horizontaal eenvoudig ontwerp

Deel knopcode en installatiemethode

HTML

Waar te schrijven:
"Uiterlijk" -> "Aanpassen" -> "Widget" -> Waar u de deelknop wilt plaatsen-> Widget toevoegen-> "Aangepaste HTML"

deel dit artikel

CSS

Plaats om te schrijven: "Uiterlijk" -> "Aanpassen" -> "Aanvullende CSS"

/ * --- SNS-deelknop --- * / / * Tekens op de knop * / .fa-twitter: voor, .fa-hatena: voor, .fa-regel: voor, .fa-pocket: voor {font -family: helvetica neue, helvetica, arial, sans-serif; font-weight: bold; font-size: 14px} .fa-facebook: voor {content: "f"; font-family: Verdana; font-weight: bold } .fa-twitter: voor {content: "twitter";} .fa-hatena: voor {content: "B!"; font-family: Verdana;} .fa-line: voor {content: "Line";} .fa-pocket: before {content: "pocket";} / * Pas de weergavepositie van de knop * / .button-area {text-align: center; margin-top: 15px;} / * Titelweergave-instellingen * /. 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;} / * Achtergrondkleur voor elke 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;} / * Verwijder lijst "・" * / .button-area ul {margin: 0; padding: 0; list-style: none;} / * Instellingen voor knopbreedte en -marge * / .button-area li {float: left; width: 19%; margin: 0%;}. button-area ul: after {display: block; clear: both;} / * Weergave-instellingen wanneer de cursor op de knop * / .button-area li a: hover {-ms-transform: translateY (-3px); -webkit- transform: translateY (-2px); transform: translateY (-2px);}