Hoe maak je knoppen voor sociaal delen in GeneratePress?

In deze tutorial gaan we kijken Hoe u knoppen voor sociaal delen kunt maken in GeneratePress?

Dit zou je ongetwijfeld helpen bij het verbeteren van de cross-channel promotie van je blogpost. Dat zal op zijn beurt uw aanwezigheid op het web vergroten.

Ik ga je laten zien hoe je plakkerige knoppen voor sociaal delen kunt maken die aan de voorkant van je blogberichten zweven. Dit betekent dat ze altijd zichtbaar zullen zijn voor uw publiek.

We kunnen dit bereiken via een plug-in, maar het beste is om ze handmatig te bouwen. Op die manier weet u dat u vermijdt het toevoegen van JavaScript (dat de prestaties van uw website verslechtert) op uw site.

Voor deze les is GeneratePress premium vereist, omdat we de Elements-module gaan gebruiken.

Maak knoppen voor sociaal delen in GeneratePress zonder plug-in

Het maken van knoppen voor sociaal delen in het GeneratePress-thema zonder plug-ins vereist dat u op de hoogte bent van SVG-pictogrammen.

SVG's zijn schaalbare vectorafbeeldingen. Het zijn open standaardbeelden (voornamelijk gebruikt als iconen) ontwikkeld door W3C (World Wide Web Consortium) (World Wide Web Consortium).

Voordelen van het gebruik van SVG's

• Ze hebben een kleine bestandsgrootte die nooit de sitesnelheid beïnvloedt.
• U kunt eenvoudig hyperlinks toevoegen aan SVG-pictogrammen.
• Ze kunnen eenvoudig worden aangepast met elke vector grafische software.
• SVG-pictogrammen zijn resolutie-onafhankelijk, waardoor ze uitstekend geschikt zijn voor desktop-, tablet- en mobiele weergave.
• SVG-afbeeldingen zijn SEO-vriendelijker vergeleken met conventionele afbeeldingen.

We zullen de SVG's van Iconmonstr gebruiken. Dit betekent niet alleen het pictogram, maar ook het pictogram met zijn XML-code.

Stap 1: Voeg code voor sociale deelknoppen toe om Press Elements Hook te genereren

Om dit te bereiken, moet u eerst een nieuw element in GeneratePress maken. Ga naar uw WordPress-dashboard, onder Uiterlijk, klik op Elementen. Hierdoor wordt de Elementen-pagina geopend, klik op Nieuw element toevoegen.

Zodra u op Nieuw element toevoegen heeft geklikt, GeneratePress zal een dialoogvenster tonen. Klik op Haak. Dat klopt, je hebt een aangepaste GeneratePress-hook nodig voor deze actie.

Geef een naam aan het nieuwe Element en voeg de code toe.

Selecteer de hook als genereren na header, voer PHP uit en stel de weergaveregels in op Posts – All Posts.

Omdat we de pictogrammen voor sociaal delen nodig hebben om op onze schermviewport te zweven. Het is het beste om Genereer na headerhook te selecteren.

De reden dat we voor de weergave-instellingen Alle berichten hebben gekozen, is omdat u wilt dat uw gebruikers uw inhoud delen op hun sociale sites.

Vergeet niet op de knop Publiceren te klikken.

Kopieer de volgende code om dezelfde op uw website te implementeren.

Stap 2: Voer CSS-styling uit op pictogrammen voor sociaal delen

Ga hiervoor naar het WordPress-dashboard en klik onder Uiterlijk op Aanpassen.

Hierdoor wordt de GeneratePress-thema-aanpasser geopend. Ga hier helemaal naar beneden en klik op Extra CSS.

Plak de volgende CSS-code voor een vergelijkbare stijl. U mag CSS aanpassen aan uw vereisten.

Stap 3: Eindresultaat van knoppen voor sociaal delen in GeneratePress

Tenslotte, hier is hoe de sociaal delen pictogrammen moeten er op uw website uitzien. Vergeet niet dat we ze vanaf de bovenkant hebben laten zweven op 70% van de schermweergave.

Voordelen van knoppen voor sociaal delen in GeneratePress (zonder plug-in) (zonder plug-in)

Door het gebruik van SVG's van Iconmonstr zijn uw iconen zeer licht van gewicht
Er is geen enkele vorm van JavaScript-code bij betrokken.

Door deze strategie te gebruiken, installeert u geen plug-ins van derden
Het is responsief.

Alle knoppen werken ongelooflijk snel voor deeldoeleinden.

Conclusie: Hoe maak je knoppen voor sociaal delen in GeneratePress?

Nu heb je ontdekt hoe je knoppen voor sociaal delen in GeneratePress kunt maken met behulp van code en plug-ins.

Gebruik de optie die voor u gemakkelijk is en die aan uw wensen voldoet. Voel je vrij om de PHP- en/of CSS-code uit het artikel te bewerken.