[Plug-in komplett unbenutzt] Installieren Sie die SNS-Freigabeschaltfläche nur mit HTML und CSS [WordPress]

2019/7/30

Auslösen

Bisher war der SNS-Share-Button "WordPress Share Buttons Plugin - AddThisIch habe mich auf ein Plug-In namens "verlassen.

Dieses Plugin ist

  • Sie können Hatena-Lesezeichen sowie wichtige SNS in Übersee wie Facebook, Twitter, Line, Pocket und Pinterest hinzufügen.
  • An der Seite befindet sich ein schlankes Design mit kleinen Teilen.

Mir hat es in dieser Hinsicht gefallen, aber es war ein ziemlich schweres Plug-In.

Wenn Sie nach "kein Plugin, Freigabeschaltfläche" suchen, finden Sie eine Methode, die Plugins für PHP / CSS / HTML / soziale Symbole verwendet.

Dieses Mal habe ich versucht, die SNS-Freigabeschaltfläche nur mit CSS und HTML zu installieren, ohne PHP und soziale Symbole zu verwenden.

Funktionen der Share-Schaltfläche durch diesen Code

  • Nur mit HTML und CSS erstellt
  • Verwenden Sie kein PHP, keine sozialen Symbole
  • Führen Sie Javascript im Tag aus
  • Ruft automatisch die URL und den Seitentitel der Seite ab, die freigegeben werden soll
  • Schneller als Plugins (bis zu 10 Punkte höher als AddThis)
  • Die Anzahl der Aktien kann nicht gezählt werden
  • Horizontales einfaches Design

Teilen Sie den Schaltflächencode und die Installationsmethode

HTML

Wo zu schreiben:
"Darstellung" -> "Anpassen" -> "Widget" -> Wo Sie die Freigabeschaltfläche platzieren möchten-> Widget hinzufügen-> "Benutzerdefiniertes HTML"

Teile diesen Artikel     

CSS

Schreibort: "Darstellung" -> "Anpassen" -> "Zusätzliches CSS"

/ * --- SNS-Freigabeknopf --- * / / * Zeichen auf dem Knopf * / .fa-twitter: vorher, .fa-hatena: vorher, .fa-Zeile: vorher, .fa-Tasche: vor {Schriftart -Familie: helvetica neue, helvetica, arial, serifenlos; Schriftgröße: fett; Schriftgröße: 14px} .fa-facebook: vor {Inhalt: "f"; Schriftfamilie: Verdana; Schriftgröße: fett } .fa-twitter: vor {content: "twitter";} .fa-hatena: vor {content: "B!"; Schriftfamilie: Verdana;} .fa-line: vor {content: "Line";} .fa-Tasche: vor {Inhalt: "Tasche";} / * Anzeigeposition der Schaltfläche anpassen * / .Button-Bereich {Textausrichtung: Mitte; Rand oben: 15px;} / * Einstellungen für die Titelanzeige * /. Schaltfläche- bereichstitel {text-align: center; padding: .7em;} / * Button block design * / .button-area li a {padding: 2px; display: block; text-align: center; text-decoration: none; Farbe: #fff; Randradius: 4px;} / * Hintergrundfarbe für jeden SNS * / .twitter a {Hintergrundfarbe: # 55acee;} .facebook a {Hintergrundfarbe: # 3b5998;} .hatena a {Hintergrund -color: # 008fde;} .line a {Hintergrundfarbe: # 1dcd00;} .pocket a {Hintergrundfarbe: # ea5a6c;} / * Liste "・" löschen * / .button-area ul {margin: 0; padding: 0; list-style: none;} / * Einstellungen für Tastenbreite und Rand * / .button-area li {float: left; width: 19%; margin: 0%;}. button-area ul: after {display: block; clear: both;} / * Anzeigeeinstellungen, wenn der Cursor auf die Schaltfläche gesetzt wird * / .button-area li a: hover {-ms-transform: translateY (-3px); -webkit- transform: translateY (-2px); transform: translateY (-2px);}

Beispiel anzeigen

Sns Share Button ohne Plugin
SNS-Freigabetaste

Die Seite, die ich als Referenz verwendet habe
[WordPress] Anpassen der SNS-Freigabeschaltflächen ohne Plugins [Kopieren und Einfügen OK! ]]
LINE / Facebook / Twitter / Google+ Share-Schaltflächen, wie Sie einen automatischen Erfassungslink für die aktuelle URL (& Titel) einrichten