[Plug-in completamente inutilizzato] Installa il pulsante di condivisione SNS solo con HTML e CSS [WordPress]

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

1. Trigger
2. Caratteristiche del pulsante di condivisione di questo codice
3. Codice del pulsante di condivisione e metodo di installazione
4. HTML
5. CSS
6. Esempio di visualizzazione

Trigger

Fino ad ora, il pulsante di condivisione SNS è stato "Plugin dei pulsanti di condivisione di WordPress - AddThisMi sono affidato a un plug-in chiamato ".

Questo plugin è

Puoi aggiungere segnalibri Hatena così come i principali SNS esteri come Facebook, Twitter, Line, pocket e pinterest.
Sul lato è presente un piccolo pulsante di condivisione sottile.

Mi piaceva da questo punto di vista, ma era un plug-in abbastanza pesante.

Se cerchi "nessun plugin, pulsante di condivisione", troverai un metodo che utilizza plugin PHP / CSS / HTML / icone social.

Questa volta, ho provato a installare il pulsante di condivisione SNS solo con CSS e HTML senza utilizzare PHP e icone social.

Caratteristiche del pulsante di condivisione di questo codice

Creato solo con HTML e CSS
Non utilizzare PHP, icone social
Esegui javascript nel tag
Ottieni automaticamente l'URL e il titolo della pagina da condividere
Più veloce dei plugin (fino a 10 punti in più rispetto a AddThis)
Il numero di azioni non può essere conteggiato
Design semplice orizzontale

Codice del pulsante di condivisione e metodo di installazione

HTML

Dove scrivere:
"Aspetto" -> "Personalizza" -> "Widget" -> Dove vuoi posizionare il pulsante di condivisione-> Aggiungi widget-> "HTML personalizzato"

Condividi questo articolo

CSS

Luogo in cui scrivere: "Aspetto" -> "Personalizza" -> "CSS aggiuntivo"

/ * --- Pulsante di condivisione SNS --- * / / * Caratteri sul pulsante * / .fa-twitter: prima, .fa-hatena: prima, .fa-line: prima, .fa-pocket: prima {carattere -family: helvetica neue, helvetica, arial, sans-serif; font-weight: bold; font-size: 14px} .fa-facebook: before {content: "f"; font-family: Verdana; font-weight: grassetto } .fa-twitter: prima di {contenuto: "twitter";} .fa-hatena: prima di {contenuto: "B!"; font-family: Verdana;} .fa-line: prima di {contenuto: "Line";} .fa-pocket: before {content: "pocket";} / * Regola la posizione di visualizzazione del pulsante * / .button-area {text-align: center; margin-top: 15px;} / * Impostazioni di visualizzazione del titolo * /. 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;} / * Colore di sfondo per ogni 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;} / * Elimina elenco "・" * / .button-area ul {margin: 0; padding: 0; list-style: none;} / * Larghezza pulsante e impostazioni dei margini * / .button-area li {float: left; width: 19%; margin: 0%;}. button-area ul: after {display: block; clear: both;} / * Visualizza le impostazioni quando il cursore è posizionato sul pulsante * / .button-area li a: hover {-ms-transform: translateY (-3px); -webkit- trasformare: translateY (-2px); trasformare: translateY (-2px);}