Hur man lägger till Pinterest “Pin It” -knappen i WordPress (Ultimate Guide)

Vill du lägga till Pinterest “Pin It” -knappen i WordPress? Nyligen dyker upp en ny trafikkälla i vår bloggstatistik.


Det var tillräckligt betydande för oss att lägga märke till det. Den här trafikkällan var Pinterest.

Pinterest är en populär social nätverkssajt som låter dig dela visuellt innehåll och driva mycket trafik till din webbplats (följ WPBeginner på Pinterest).

I den här artikeln kommer vi att visa dig hur du lägger till Pinterest “Pin It” -knappen till din WordPress-blogg. Vi kommer också att förklara hur du lägger till knappen Pin It över bilderna på din webbplats.

Lägg till Pinterest Pin It-knappen i WordPress

Lägga till en Pinterest “Pin It” -knapp med ett plugin

Pinterest ändrade officiellt knappen “Pin It” till Spara 2016.

Även om vissa plugins fortfarande använder namnet “Pin It” istället för Save, gör de samma jobb med att fästa dina bilder på Pinterest.

Det enklaste sättet att lägga till en Pinterest-knapp till din WordPress-webbplats är genom att använda ett socialt delningsplugin.

Vi rekommenderar att du använder plug-in för delade räkningar för detta ändamål. Det är det bästa sociala mediapluginet för WordPress eftersom det är gratis och gör att du enkelt kan lägga till Pinterest-knappen tillsammans med andra populära sociala nätverk.

För att komma igång måste du installera och aktivera plug-in för delade räkningar. Du kan följa vår steg-för-steg-guide för hur du installerar ett WordPress-plugin för detaljerade instruktioner.

Vid installation, gå över till Inställningar »Delade räkningar sida för att konfigurera plugin.

Inställningssidan för delade räkningar

På inställningssidan måste du bläddra ner till Visa och klicka sedan på textrutan “Dela knappar för att visa”.

Detta öppnar en rullgardinsmeny där du kan välja de sociala medietjänster du vill lägga till. Som standard kommer Pinterest att finnas i rutan tillsammans med Facebook och Twitter.

Du kan också välja plats och posttyp där du vill visa Pinterest-knappen. Det kommer med flera knappstilar som du kan välja från alternativet “Dela knappstil”.

När du är klar, glöm inte att klicka på Spara ändringar för att lagra inställningarna.

Du kan nu besöka alla inlägg på din webbplats för att se Pinterest-knappen i aktion.

Pinterest-knapp läggs till i WordPress-inlägget

En annan snygg sak med SharedCounts är det gratis anpassade Pinterest-bildtillägget som finns tillgängligt på Github. På så sätt kan du ange en anpassad Pinterest-delningsbild och beskrivning som är optimerad för Pinterest.

Notera: Vi använder SharedCount-plugin på vår webbplats eftersom det är det bästa alternativet på marknaden. Det är väldigt välkodat och det är gratis.

Lägga manuellt till en Pinterest Pin It-knapp i WordPress

Vissa mellananvändare kanske föredrar att lägga till de sociala delningsknapparna manuellt på sin WordPress-webbplats istället för att använda ett plugin.

Låt oss titta på hur man manuellt lägger till en Pinterest-knapp i WordPress.

Det första du behöver göra är att göra en komplett WordPress-säkerhetskopia av din webbplats. Detta hjälper dig att återställa din webbplats om något bryts av misstag.

Därefter måste du ansluta till din WordPress-värd med en FTP-klient och sedan gå till / wp-content / teman / mappen.

Härifrån måste du öppna din nuvarande temamapp och sedan hitta footer.php-filen.

Ladda ner sidfot php-fil

Högerklicka sedan på den filen och välj sedan Ladda ner från menyn. Detta kommer att ladda ner footer.php-filen till din dator.

Nu måste du öppna footer.php-filen med en vanlig textredigerare som Notepad och sedan klistra in följande skript direkt före taggen.

(funktion () {
windows.PinIt = Window.PinIt || {laddat: falsk};
om (windows.PinIt.loaded) returnerar;
windows.PinIt.loaded = true;
funktion async_load () {
var s = document.createElement ("manus");
s.type = "text / javascript";
s.async = sant;
s.src = "https://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName ("manus") [0];
x.parentNode.insertBefore (s, x);
}
if (windows.attachEvent)
window.attachEvent ("onload", async_load);
annan
window.addEventListener ("ladda", async_load, falsk);
}) ();

När du har gjort det måste du spara filen och sedan ladda upp den till den aktuella temamappen.

Därefter måste du hitta och ladda ner single.php-filen från din temamapp och öppna den för redigering. Efter det måste du lägga till följande kod.

Du måste välja plats där du vill att den ska visas i ditt inlägg. Efter posttitel är den vanligaste placeringen för sociala medieknappar.

<?php $ pinterestimage = wp_get_attachment_image_src (get_post_umnnail_id ($ post)->ID), ‘full’); ?>
ID)); ?>&media =<?php echo $ pinterestimage [0]; ?>&Beskrivning =<?php the_title (); ?>" class ="pin-det-knappen" count-layout ="vertikal">Fäst den

Ovanstående kod visar Pinterest-knappen med din presenterade bild, titel, beskrivning och postadress i delad URL-parameter.

Slutligen måste du spara filen och ladda upp den till din temakatalog med FTP.

Detta lägger till en vertikal delningsknapp till inläggen på din webbplats. Om du vill visa den horisontella delningsknappen ändrar du bara räkne-layoutparametern till horisontell.

Skapa en kortkod för Pinterest-knapp

Nyligen frågade en av våra användare oss hur man skapar en kortkod för Pinterest “Pin It” -knappen.

Kortkoder i WordPress låter dig enkelt lägga till dynamiska objekt till dina WordPress-inlägg, sidor och widgets. Genom att skapa en kortkod kan du lägga till Pinterest-knapp manuellt i dina artiklar.

Först måste du lägga till följande kod i ditt temas funktioner.php-fil eller ett webbplatsspecifikt plugin:

funktion get_pin ($ atts) {
$ pinterestimage = wp_get_attachment_image_src (get_post_umnnail_id ($ post)->ID), ‘full’);
returnera ID)). ‘&media = ‘. $ pinterestimage [0]. ‘&beskrivning = ‘. get_the_title (). ‘" class ="pin-det-knappen" count-layout ="vertikal">Pin It ‘; }

add_shortcode (‘pin’, ‘get_pin’);

Efter det kan du använda [pin] -koden i dina WordPress-inlägg där du vill visa Pinterest-knappen.

Lägga till Pinterest Pin It-knappen över dina bilder

Om du driver en mode-, fotograferings- eller portföljsida vill du definitivt att dina bilder ska delas på Pinterest för att öka din webbplatstrafik.

Låt oss ta en titt på hur du lägger till knappen Pinterest Pin it över dina bilder i WordPress. Den här knappen visas endast när användaren tar musen över dina bilder, så att de enkelt kan dela bilden på sin Pinterest-profil.

Först måste du installera och aktivera Pinterest Pin-knappen för bilder-plugin.

Gå till Inställningar »Pinterest Pin It sida för att konfigurera plugin.

Pinterest Pin It-knapp för sidan med inställningar för bilder

På inställningssidan kan du välja var du vill visa “Pin It” -knappen på din WordPress-webbplats. Du kan bara visa det på enstaka inlägg, sidor, kategorisidor eller överallt på din webbplats.

Nästa alternativ är att välja standardbeskrivning från rullgardinsmenyn. Detta kommer att användas som bildbeskrivning för den fästade bilden.

När du är klar måste du klicka på Spara för att lagra inställningarna. Nu kan du besöka din webbplats och sedan föra muspekaren över valfri bild för att se Pinterest “Pin It” -knappen.

Pinterest Pin It-knappen över bilder

Om du vill utesluta några bilder från att visa knappen Pin It kan du lägga till nopin CSS klass till de bilder du vill utesluta.

För att göra det måste du välja bildblock i postredigeraren och sedan klicka på ikonen för tre vertikala punkter från blockverktygsfältet. Detta öppnar en meny där du behöver klicka på Redigera som HTML alternativ.

Redigera bild som HTML-alternativ för att lägga till CSS-klass

Nu ser du HTML-koden för din bild. Gå vidare för att lägga till nopin till klass attribut för img-taggen:

bildnamn

På liknande sätt kan du också använda plugin-programmet för att inaktivera automatisk visning av “Pin It” -knappen och använda CSS-klassen “pinthis” för att selektivt visa knappen på specifika bilder.

För att göra det måste du besöka inställningssidan för insticksprogrammet och sedan hitta Avancerad på höger sida av sidan.

Pinterest Pin It plugin avancerade inställningar

Nu måste du kontrollera alternativet som säger “Visa” Pin it “-knappen endast på bilder med klass =” pinthis “”, och klicka sedan på Spara knapp.

Nästa gång du lägger till en bild i ett inlägg eller en sida måste du välja bildblock och sedan använda Redigera som HTML alternativet att lägga till pinthis CSS-klass till bildkoden. Här är ett exempel:

bildnamn

Detta visar Pinterest-knappen på den specifika bilden, även om du har inaktiverat alternativet att automatiskt visa knappen Pin It på din webbplats.

Det är allt!

Vi hoppas att den här artikeln hjälpte dig att förstå hur du lägger till en “Pin It” -knapp på Pinterest till din WordPress-blogg. Du kanske också vill se vår guide om hur du skapar ett nyhetsbrev via e-post och får fler prenumeranter.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me