Wie erstelle ich Social-Sharing-Buttons in GeneratePress?

In diesem Tutorial werden wir uns das ansehen So erstellen Sie Social-Sharing-Schaltflächen in GeneratePress?

Dies würde Ihnen zweifellos dabei helfen, die kanalübergreifende Werbung für Ihren Blog-Beitrag zu verbessern. Das wiederum erhöht Ihre Webpräsenz.

Ich zeige Ihnen, wie Sie Sticky-Buttons zum Teilen in sozialen Netzwerken erstellen, die am vorderen Ende Ihrer Blogeinträge schweben. Das bedeutet, dass sie für Ihr Publikum immer sichtbar sind.

Wir können dies über ein Plugin erreichen, aber das Beste ist, sie manuell zu erstellen. Auf diese Weise wissen Sie, dass Sie das Hinzufügen von JavaScript (das die Leistung der Website beeinträchtigt) auf Ihrer Website vermeiden.

Für diese Lektion benötigen Sie GeneratePress Premium, da wir das Elements-Modul verwenden werden.

Erstellen Sie Social-Sharing-Buttons in GeneratePress ohne Plugin

Zum Erstellen von Social-Sharing-Schaltflächen im GeneratePress-Theme ohne Plugins müssen Sie sich mit SVG-Symbolen auskennen.

SVGs sind skalierbare Vektorgrafiken. Es handelt sich um offene Standardvisualisierungen (die hauptsächlich als Symbole verwendet werden), die vom W3C (World Wide Web Consortium) (World Wide Web Consortium) entwickelt wurden.

Vorteile der Verwendung von SVGs

• Sie haben eine winzige Dateigröße, die sich jedoch nie auf die Geschwindigkeit der Website auswirkt.
• Sie können problemlos Hyperlinks zu SVG-Symbolen hinzufügen.
• Sie können mit jeder Vektorgrafiksoftware leicht geändert werden.
• SVG-Symbole sind auflösungsunabhängig und eignen sich daher hervorragend für die Desktop-, Tablet- und Mobilansicht.
• SVG-Bilder sind im Vergleich zu herkömmlichen Bildern SEO-freundlicher.

Wir werden die SVGs von Iconmonstr verwenden. Das heißt, nicht nur das Icon, sondern auch das Icon mit seinem XML-Code.

Schritt 1: Fügen Sie den Code für Social-Sharing-Schaltflächen zum GeneratePress Elements-Hook hinzu

Um dies zu erreichen, müssen Sie zunächst ein neues Element in GeneratePress erstellen. Gehen Sie zu Ihrem WordPress-Dashboard, klicken Sie unter „Darstellung“ auf „Elemente“. Dadurch wird die Seite „Elemente“ geöffnet. Klicken Sie auf „Neues Element hinzufügen“.

Sobald Sie auf Neues Element hinzufügen geklickt haben, GeneratePress zeigt ein Dialogfenster an. Klicken Sie auf Haken. Das ist richtig, Sie benötigen für diese Aktion einen benutzerdefinierten GeneratePress-Hook.

Geben Sie dem neuen Element einen Namen und fügen Sie den Code hinzu.

Wählen Sie den Hook „Nach dem Header generieren“ aus, führen Sie PHP aus und stellen Sie die Anzeigeregeln auf „Beiträge – Alle Beiträge“ ein.

Da wir die Social-Sharing-Symbole benötigen, um in unserem Bildschirmansichtsfenster zu schweben. Am besten wählen Sie „Generate After Header Hook“.

Der Grund, warum wir die Anzeigeeinstellungen „Alle Beiträge“ gewählt haben, liegt darin, dass Sie möchten, dass Ihre Benutzer Ihre Inhalte auf ihren sozialen Websites teilen.

Vergessen Sie nicht, auf die Schaltfläche „Veröffentlichen“ zu klicken.

Kopieren Sie den folgenden Code, um ihn auf Ihrer Website zu implementieren.

Schritt 2: CSS-Styling für Social-Sharing-Symbole durchführen

Gehen Sie dazu zum WordPress-Dashboard und klicken Sie unter „Darstellung“ auf „Anpassen“.

Dadurch wird der GeneratePress-Theme-Customizer geöffnet. Gehen Sie hier ganz nach unten und klicken Sie auf Zusätzliches CSS.

Fügen Sie den folgenden CSS-Code für einen vergleichbaren Stil ein. Sie können CSS entsprechend Ihren Anforderungen anpassen.

Schritt 3: Endergebnis der Social-Sharing-Buttons in GeneratePress

Abschließend erfahren Sie hier, wie die Social Sharing Die Symbole sollten wie auf Ihrer Website aussehen. Denken Sie daran, dass wir sie so gestaltet haben, dass sie von oben in 70 % des Bildschirmansichtsfensters schweben.

Vorteile von Social-Sharing-Buttons in GeneratePress (ohne Plugin) (ohne Plugin)

Durch die Verwendung von SVGs von Iconmonstr werden Ihre Symbole sehr leichtgewichtig
Es ist keinerlei JavaScript-Code beteiligt.

Wenn Sie diese Strategie verwenden, installieren Sie kein Drittanbieter-Plugin
Es reagiert.

Alle Tasten funktionieren zum Teilen unglaublich schnell.

Zusammenfassung: Wie erstelle ich Social-Sharing-Buttons in GeneratePress?

Jetzt haben Sie herausgefunden, wie Sie Social-Sharing-Schaltflächen in GeneratePress mithilfe von Code und Plugins erstellen.

Nutzen Sie die Möglichkeit, die für Sie einfach ist und Ihren Anforderungen entspricht. Bitte zögern Sie nicht, den PHP- und/oder CSS-Code aus dem Artikel zu bearbeiten.