wie man Social-Media-Symbole in WordPress ohne Plugins hinzufügt

Möchten Sie Ihrer WordPress-Site ohne Plugin Social-Media-Symbole hinzufügen?

Es gibt eine Menge Beiträge, die zeigen, wie man Symbole mit Font Awesome hinzufügt, aber ich werde Ihnen einen viel einfacheren Weg zeigen, ohne externe Symbole hinzufügen zu müssen.

Wenn Sie die Seitengeschwindigkeit ernst nehmen, werden Sie dies lieben.

Dashicons ist die offizielle WordPress-Symbolschrift. Sie werden in der linken Seitenleiste jedes WordPress-Site-Administrator-Backends angezeigt.

wie man Social-Media-Symbole in WordPress ohne Plugins hinzufügt

Wir werden diese Symbole anstelle von externen Symbolen verwenden. Dadurch wird der Browser von der Anforderung zusätzlicher Dateien befreit.

Befolgen Sie einfach diese Schritte:

Schritt 1

Fügen Sie das benutzerdefinierte HTML-Widget in der Seitenleiste oder Fußzeile hinzu. Sie können Widgets unter Dashboard >>> Darstellung >>> Widgets verwalten.

Schritt 2

Fügen Sie diesen Code in das Inhaltsfeld ein


In diesem Code werden nur die Facebook- und Twitter-Symbole angezeigt.
Um weitere Symbole hinzuzufügen, müssen Sie drei Teile anpassen.

href ist der Link zu Ihrer sozialen Seite
aria-label ist ein Text, der den Link beschreibt

Drittens und am wichtigsten ist die Klasse = "Dashicons Dashicons-Facebook-Alt"

Jede Schriftart in den Dashicons verfügt über eine bestimmte Klasse, mit der das Symbol angezeigt wird. Wir können die Klasse eines Symbols finden, indem wir darauf klicken

wie man Social-Media-Symbole in WordPress ohne Plugins hinzufügt

Ersetzen Sie diesen Teil durch den Teil, den Sie verwenden möchten

Ersetzen Sie beispielsweise dashicons-facebook-alt durch Dashicons-Herz und das Herzsymbol wird angezeigt.

Schritt 3.

Fügen Sie dieses CSS in Ihre Style.css-Datei für untergeordnete Themen oder in die zusätzliche CSS-Option Ihres Customizers ein

.social-link-container {Anzeige: flex; } .social-link-container .social-link {padding: 3px; Rand rechts: 10px; } .dashicons {Schriftgröße: 30px; Farbe: #fff; Breite: 40px; Höhe: 40px; Randradius: 50%; Anzeige: flex; Rechtfertigungsinhalt: Mitte; Ausrichtungselemente: Mitte; }}

Dieser obige Code fügt alle Attribute der Symbole mit Ausnahme der Farbe hinzu. Verwenden Sie den folgenden Code, um den Symbolen Farbe hinzuzufügen, die erst dann sichtbar sind.

.dashicons-facebook-alt {Hintergrund: # 1877F2; } .dashicons-twitter {Hintergrund: # 1DA1F2; }}

Wenn Sie weitere Symbole hinzufügen, können Sie jedem Symbol mithilfe seiner Klasse und des obigen CSS eine andere Hintergrundfarbe hinzufügen.

Möchten Sie einen einfachen Hover-Effekt hinzufügen? Fügen Sie dies Ihrem CSS hinzu, wenn Sie einen Hover-Effekt "Einwachsen" anzeigen möchten

.dashicons: hover {-webkit-transform: scale (1.2); -ms-Transformation: Skala (1.2); transformieren: Skala (1.2); }}

Das ist es! Leeren Sie nun den Website-Cache und überprüfen Sie Ihr Widget. Es wird so angezeigt

wie man Social-Media-Symbole in WordPress ohne Plugins hinzufügt

Wenn Sie die Schritte genau befolgen, wird es funktionieren.
Wenn nicht, dann kommentieren Sie unten, und ich kann Ihnen helfen, es zu lösen.

Hinterlasse einen Kommentar