Hur skapar jag sociala delningsknappar i GeneratePress?

I den här handledningen kommer vi att titta på Hur man skapar sociala delningsknappar i GeneratePress?

Detta skulle utan tvekan hjälpa dig att förbättra ditt blogginläggs marknadsföring över kanaler. Det kommer i sin tur att öka din webbnärvaro.

Jag ska visa dig hur du konstruerar klibbiga sociala delningsknappar som flyter på framsidan av dina blogginlägg. Det betyder att de alltid kommer att vara synliga för din publik.

Vi kan uppnå detta via ett plugin, men det bästa är att konstruera dem manuellt. På så sätt vet du att du undviker att lägga till JavaScript (dödar webbplatsens prestanda) på din webbplats.

Den här lektionen kräver att du har GeneratePress premium, eftersom vi kommer att använda Elements-modulen.

Skapa sociala delningsknappar i GeneratePress utan plugin

Att skapa sociala delningsknappar i GeneratePress-tema utan plugins kräver att du känner till SVG-ikoner.

SVG är skalbar vektorgrafik. De är öppna standardbilder (främst som ikoner) utvecklade av W3C (World Wide Web Consortium) (World Wide Web Consortium).

Fördelar med att använda SVG

• De har en liten filstorlek som aldrig påverkar webbplatsens hastighet.
• Du kan enkelt lägga till hyperlänkar till SVG-ikoner.
• De är lätta att modifiera med alla vektorgrafikprogram.
• SVG-ikoner är upplösningsoberoende, vilket gör dem utmärkta för stationära datorer, surfplattor och mobilvyer.
• SVG-bilder är mer SEO-vänliga jämfört med konventionella bilder.

Vi kommer att använda SVG från Iconmonstr. Det betyder inte bara ikonen utan ikonen med dess XML-kod också.

Steg 1: Lägg till kod för sociala delningsknappar för att generera Press Elements Hook

För att åstadkomma detta måste du först skapa ett nytt element i GeneratePress. Gå till din WordPress Dashboard, under Utseende, klicka på Elements. Detta öppnar elementsidan, klicka på Lägg till nytt element.

Så snart du har klickat på Lägg till nytt element, GeneratePress kommer att visa ett dialogfönster. Klicka på Hook. Det är korrekt, du behöver en anpassad GeneratePress-krok för den här åtgärden.

Ge ett namn till det nya elementet och lägg till koden.

Välj kroken som generera efter rubrik, kör PHP och ställ in visningsreglerna till Inlägg – Alla inlägg.

Eftersom vi behöver de sociala delningsikonerna för att flyta på vår skärmport. Det är bäst att välja Generate After Header Hook.

Anledningen till att vi har valt visningsinställningar som Alla inlägg är för att du vill att dina användare ska dela ditt innehåll på sina sociala webbplatser.

Glöm inte att trycka på Publicera-knappen.

Kopiera följande kod för att implementera densamma på din webbplats.

Steg 2: Utför CSS-styling till sociala delningsikoner

För att göra det, gå till WordPress instrumentpanel, under Utseende, klicka på Anpassa.

Detta öppnar GeneratePress-temaanpassaren. Gå hela vägen ner och klicka på Ytterligare CSS.

Klistra in följande CSS-kod för jämförbar styling. Du har rätt att justera CSS enligt dina krav.

Steg 3: Slutresultat av sociala delningsknappar i GeneratePress

Slutligen, här är hur social delning ikoner ska se ut på din webbplats. Kom ihåg att vi har fått dem att flyta uppifrån vid 70 % av skärmens visningsport.

Fördelar med sociala delningsknappar i GeneratePress (utan plugin) (utan plugin)

Användning av SVG från Iconmonstr gör dina ikoner väldigt lätta
Det finns ingen typ av JavaScript-kod inblandad.

Genom att använda den här strategin installerar du inte något plugin från tredje part
Den är lyhörd.

Alla knappar kommer att fungera otroligt snabbt för att dela.

Slutsats: Hur man skapar sociala delningsknappar i GeneratePress?

Nu har du upptäckt hur man konstruerar sociala delningsknappar i GeneratePress med hjälp av kod och plugins.

Använd alternativet som är enkelt för dig och det som uppfyller dina krav. Vänligen redigera PHP- och/eller CSS-koden från artikeln.