[Plug-in completamente inutilizzato] Installa il pulsante di condivisione SNS solo con HTML e CSS [WordPress]
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);}
Esempio di visualizzazione
Il sito che ho usato come riferimento
[WordPress] Personalizza i pulsanti di condivisione SNS senza plug-in [Copia e incolla OK! ]
Pulsanti di condivisione LINE / Facebook / Twitter / Google+, come impostare un collegamento di acquisizione automatica per l'URL corrente (e titolo)
discussione
Elenco dei commenti
Non ci sono ancora commenti