Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać przycisk Pinterest „Pin It” w WordPress (4 sposoby)

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Czy chcesz dodać przycisk Pinterest „Pin It” w WordPress?

Pinterest to popularna witryna społecznościowa, która pozwala udostępniać treści wizualne i przyciągać więcej odwiedzających do twojej witryny internetowej. Dodając przycisk „Pin It” do twojej witryny, możesz zachęcić więcej osób do udostępniania treści na Pinterest.

W tym artykule pokażemy, jak dodać przycisk Pinterest „Pin It” do WordPress.

Add Pinterest Pin It button in WordPress

Dlaczego warto dodać przycisk Pinterest „Pin It” w WordPress?

Pinterest to popularna witryna internetowa umożliwiająca użytkownikom gromadzenie odnośników do stron internetowych i innych treści wizualnych poprzez tworzenie tablic.

Gdy użytkownicy dodają twoje treści do swojej tablicy na Pintereście, pomaga to innym osobom odkryć twoją witrynę internetową. Pinterest jest szczególnie ważnym źródłem ruchu, jeśli prowadzisz witrynę internetową poświęconą fotografii, blog modowy lub inny rodzaj bloga, który zawiera wiele obrazków i filmów.

Dodając przycisk „Pin It” do Twojej witryny internetowej, możesz zachęcić odwiedzających do udostępniania Twoich treści na Pinterest.

An example of a 'Pin It' Pinterest sharing button

Uwaga: Pinterest oficjalnie zmienił nazwę przycisku „Pin It” na „Save” w 2016 roku. Jednak wiele przewodników i wtyczek WordPress nadal używa „Pin It”, dlatego w tym przewodniku używamy oryginalnej nazwy.

Mając to na uwadze, zobaczmy, jak dodać przycisk Pinterest „Pin It” w WordPress. Wystarczy skorzystać z poniższych odnośników, aby przejść bezpośrednio do wybranej metody:

Metoda 1: Korzystanie ze wspólnych zliczeń (szybkie i łatwe)

Najprostszym sposobem na dodanie przycisku Pinterest do twojej witryny WordPress jest użycie Shared Counts.

Jest to jedna z najlepszych wtyczek mediów społecznościowych dla WordPressa, która pozwala łatwo dodać przycisk Pinterest do twojej witryny, wraz z przyciskami dla wszystkich innych głównych sieci społecznościowych.

Aby rozpocząć, należy zainstalować i włączyć wtyczkę Shared Counts. Możesz skorzystać z naszego przewodnika krok po kroku, jak zainstalować wtyczkę WordPress, aby uzyskać szczegółowe instrukcje.

Po instalacji należy przejść do Ustawienia ” Współdzielone liczniki, aby skonfigurować wtyczkę.

Shared Counts settings page

Tutaj przewiń do sekcji Wyświetlanie, a następnie kliknij pole tekstowe „Przyciski udostępniania do wyświetlenia”.

Spowoduje to otwarcie menu rozwijanego, w którym możesz wybrać usługi mediów społecznościowych, które chcesz dodać. Na przykład, możesz użyć Shared Counts, aby dodać przycisk Lubię to na Facebooku, dodać przycisk udostępniania i podawania dalej na Twitterze i nie tylko.

Aby utworzyć przycisk „Przypnij”, wybierz „Pinterest” z listy rozwijanej.

Adding a Pinterest sharing button to WordPress

Następnie możesz otworzyć menu rozwijane „Styl przycisku udostępniania” i wybrać styl przycisku Pinterest.

Możesz także wybrać lokalizację i typ treści, w których chcesz wyświetlać przycisk Pinterest.

Adding a Pinterest 'Pin It' button to a WordPress website or blog

Gdy jesteś zadowolony z konfiguracji przycisku, po prostu kliknij przycisk „Zapisz zmiany”.

Możesz teraz przejść na dowolny wpis na twoim blogu WordPress, aby zobaczyć przycisk Pinterest w działaniu.

Pinterest button added to WordPress post

Metoda 2: Korzystanie z własnego krótkiego kodu (zalecane)

Czasami możesz chcieć kontrolować, gdzie dokładnie przycisk „Pin It” pojawia się na twojej witrynie. Na przykład, możesz chcieć wyświetlać przycisk Pinterest na określonych stronach docelowych lub w treści wpisu.

Jedną z opcji jest utworzenie przycisku za pomocą kodu, a następnie umieszczenie go na każdej stronie lub wpisie za pomocą własnego krótkiego kodu. Daje to swobodę wyświetlania przycisku „Przypnij” w różnych lokalizacjach, ale trzeba go ręcznie dodać do każdej strony lub wpisu.

Najprostszym sposobem na dodanie własnego kodu do WordPressa jest użycie WPCode. Jest to najlepsza wtyczka do fragmentów kodu, która pozwala na dodawanie własnego kodu PHP, CSS, JavaScript i innych do twojej witryny internetowej. Możesz także tworzyć własne krótkie kody, więc jest to idealne rozwiązanie do dodania przycisku „Pin It” do twojej witryny internetowej.

Najpierw należy zainstalować i włączać darmową wtyczkę WPCode. Więcej informacji na ten temat można znaleźć w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu wtyczki, przejdź do Code Snippets ” Add Snippet.

How to add a code snippet using WPCode

Tutaj zobaczysz wszystkie gotowe fragmenty kodu, które WPCode może dodać do twojej witryny. Obejmują one fragment kodu, który pozwala całkowicie wyłączyć komentarze, przesyłać rodzaje plików, których WordPress zwykle nie pomaga technicznie, wyłączać strony załączników i wiele więcej.

W tym miejscu należy najechać kursorem myszy na opcję „Add Your Custom Code (New Snippet)” i kliknąć przycisk „Use snippet”, gdy się pojawi.

Adding custom code to your WordPress website using WPCode

Na następnym ekranie wpisz tytuł fragmentu kodu. To jest tylko dla twojego odniesienia, więc możesz użyć czegokolwiek chcesz.

Zamierzasz dodać PHP do WordPressa, więc po prostu otwórz menu rozwijane „Rodzaj kodu” i wybierz „Kod PHP”.

Adding code to WordPress using WPCode

Po wykonaniu tej czynności wystarczy wkleić poniższy tekst do edytora kodu:

function get_pin($atts) {
$pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
return '<a href="http://pinterest.com/pin/create/button/?url=' . urlencode(get_permalink($post->ID)) . '&media=' . $pinterestimage[0] . '&description=' . get_the_title() .'" class="pin-it-button" count-layout="vertical">Pin It</a>'; }
  
add_shortcode('pin', 'get_pin');

Następnie przewiń stronę w dół do sekcji „Wstaw”. Tutaj możesz zachować domyślną metodę „Auto wstawić”, aby upewnić się, że kod działa wszędzie.

Jeśli nie została jeszcze wybrana, wybierz opcję „Uruchom wszędzie”.

Running custom PHP across your WordPress website

Na koniec przewiń ekran do góry i kliknij suwak „Nieaktywne”, aby wyświetlić „Aktywne”.

Następnie wystarczy kliknąć przycisk „Zapisz fragment kodu” lub „Aktualizuj”, aby fragment kodu stał się aktywny.

Activate and save your custom code snippet

Teraz możesz dodać przycisk „Przypnij” do dowolnej strony WordPress, wpisu lub obszaru gotowego na widżet za pomocą krótkiego kodu [pin].

Aby uzyskać instrukcje krok po kroku, jak umieścić krótki kod, zapoznaj się z naszym przewodnikiem na temat dodawania krótkiego kodu w WordPress.

use the [pin] shortcode in your WordPress posts

Jak dodać przycisk „Pin It” na Pintereście za pomocą edytora całej witryny?

Jeśli korzystasz z jednego z nowszych motywów z włączonym blokiem, możesz dodać przycisk „Przypnij” w dowolnym miejscu twojego motywu WordPress za pomocą krótkiego kodu.

Jest to łatwy sposób na dodanie przycisku do każdej strony i wpisu. Możesz również dodać przycisk „Przypnij” do obszarów, których nie możesz edytować za pomocą standardowego edytora treści WordPress, takich jak szablon strony 404 Twojej witryny.

Aby rozpocząć, wystarczy przejść do zakładki Motywy Edytor w kokpicie WordPress.

Opening the WordPress full-site editor (FSE)

Domyślnie w pełnym edytorze witryny wyświetlany jest szablon główny twojego motywu.

Aby dodać przycisk „Przypnij” do innej strony, wystarczy wybrać „Szablon” lub „Fragmenty szablonu” z menu po lewej stronie.

Choosing a WordPress template or template part in the full-site editor

Możesz teraz wybrać szablon, który chcesz edytować.

W tym przykładzie pokażemy, jak dodać przycisk „Przypnij” do szablonu pojedynczej strony twojej witryny. Jednak kroki będą podobne bez względu na wybrany szablon.

Choosing a block-enabled single template

WordPress wyświetli teraz podgląd szablonu lub fragmentu szablonu.

Aby edytować ten szablon, kliknij małą ikonkę ołówka.

How to edit a single WordPress template using the block-based editor

Po wykonaniu tej czynności kliknij niebieską ikonkę „+” w lewym górnym rogu.

W wyświetlonym pasku wyszukiwania wpisz „krótki kod”.

How to add a Pin It button using shortcode

Gdy pojawi się odpowiedni blok, przeciągnij go i upuść na układ szablonu.

Możesz teraz wpisać krótki kod Pin do bloku.

Adding a Pinterest pin button to your website using the full-site editor (FSE)

Następnie wystarczy kliknąć „Zapisz”, aby nowy krótki kod stał się aktywny.

Teraz, jeśli przejdziesz na swoją witrynę internetową WordPress, zobaczysz przycisk „Przypnij” w działaniu.

Metoda 3: Korzystanie z kodu i FTP (nie jest wymagana wtyczka WordPress)

Jeśli nie chcesz korzystać z wtyczki, możesz dodać przycisk Pinterest do swojej witryny internetowej, dodając kod do plików motywu.

Bezpośrednia edycja plików motywu może powodować wiele typowych błędów WordPress, a po aktualizacji motywu WordPress utracisz cały własny kod. Mając to na uwadze, zawsze zalecamy korzystanie z WPCode.

Jeśli jednak korzystasz z tej metody, musisz zacząć od wykonania pełnej kopii zapas owej witryny WordPress. Pomoże to przywrócić twoją witrynę w przypadku przypadkowego uszkodzenia.

Po wykonaniu tej czynności, połącz się ze swoim hostingiem WordPress za pomocą klienta FTP, a następnie przejdź do katalogu /wp-content/themes/.

Z tego miejsca musisz otworzyć obecny, aktualny katalog motywu, a następnie zlokalizować plik footer.php.

Downloading the footer.php file in WordPress

Następnie kliknij ten plik prawym przyciskiem myszy i wybierz z menu opcję „Pobierz”. Spowoduje to pobranie pliku footer.php na twój komputer.

Teraz należy otworzyć plik footer.php za pomocą zwykłego edytora tekstu, takiego jak Notatnik, i wkleić poniższy skrypt tuż przed tagiem </body>.

<script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
</script>

Po wykonaniu tej czynności należy zapisać plik, a następnie przesłać go z powrotem do obecnego, aktualnego katalogu motywu.

Następnie zlokalizuj plik szablonu w twoim motywie, w którym chcesz dodać przycisk. Zwykle będzie to plik single.php, ale może się on różnić w zależności od twojego motywu WordPress. Jeśli nie jesteś pewien, możesz zapoznać się z naszym przewodnikiem dla początkujących po hierarchii szablonów WordPress.

Aby edytować plik szablonu, wystarczy pobrać go z katalogu twojego motywu i otworzyć do edycji.

Będziesz musiał wybrać lokalizację, w której chcesz wyświetlić przycisk „Przypnij”. Wiele witryn internetowych pokazuje przyciski udostępniania społecznościowego bezpośrednio pod tytułem wpisu, ale możesz użyć dowolnej lokalizacji.

Po wybraniu lokalizacji wystarczy dodać następujący kod:

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>

Powyższy fragment kodu dodaje wyróżniający obrazek, tytuł, opis i adres URL wpisu w parametrze share URL.

Powyższy fragment kodu doda pionowy przycisk udostępniania do wszystkich twoich wpisów. Jeśli zamiast tego chcesz wyświetlić poziomy przycisk udostępniania, po prostu zmień sekcję count-layout=" vertical"> na count-layout="horizontal">.

Gdy będziesz gotowy, zapisz plik i prześlij go z powrotem do twojego motywu bezpośrednio za pomocą FTP.

Metoda 4: Dodaj przycisk Pinterest Pin It nad twoimi obrazkami

Jeśli prowadzisz bloga o modzie, fotografii, jedzeniu lub innego rodzaju, który wykorzystuje wiele obrazków, możesz dodać przycisk Pinterest nad tymi obrazkami. Dzięki temu odwiedzający będą mogli udostępniać twoje treści, po prostu najeżdżając kursorem na obrazek, który chcą przypiąć.

Najprostszym sposobem na dodanie przycisku Pinterest nad twoimi obrazkami jest użycie Weblizar Pin It Button On Image Hover And Wpis.

Najpierw należy zainstalować i włączyć wtyczkę. Więcej szczegółów można znaleźć w naszym przewodniku na temat instalacji wtyczki WordPress. Po włączaniu, wybierz PinIt Button z menu po lewej stronie, aby skonfigurować ustawienia wtyczki.

Adding social media sharing buttons to your website

Tutaj możesz wybrać, czy chcesz dodać przycisk „Pin It” do twoich wpisów lub stron.

Następnie znajdź sekcję „Show Pin It Button On Image Hover” i upewnij się, że jest ustawiona na „Yes”.

Adding a pin button on hover in WordPress

Poza tym, wtyczka pozwala wyświetlać przycisk Pin It na urządzeniach mobilnych i zmieniać jego rozmiar.

Kiedy będziesz zadowolony z konfiguracji wtyczki, nie zapomnij kliknąć „Zapisz”, aby zapisać twoje zmiany. Teraz wystarczy przejść na twoją witrynę internetową i najechać kursorem na dowolny obrazek, aby zobaczyć przycisk Pinterest w działaniu.

View your pin it button

Czy chcesz usuwać przycisk „Pin It” z określonego obrazka? Aby to zrobić, musisz uzyskać adres URL obrazka w WordPress.

Następnie wystarczy przejść do strony przycisku PinIt, ale tym razem wybrać kartę „Wyklucz obrazki”. Możesz teraz dodać adres URL obrazka do pola, które domyślnie pokazuje „Wpisz adres URL SRC obrazka”.

Removing the Pinterest pin button from specific images

Po zakończeniu kliknij przycisk „Dodaj”.

Możesz również usuwać przycisk Pinterest z określonej strony, wybierając kartę „Wyklucz strony”. Tutaj wystarczy wpisać rodzaj strony, którą chcesz wykluczyć, a następnie kliknąć przycisk „Dodaj”.

Exclude pages from pin it button

Alternatywa: Jeśli szukasz bardziej rozbudowanej wtyczki do dodawania przycisków Pinterest Pin It na twoich obrazkach, to polecamy Tasty Pins.

Tasty Pins umożliwia łatwe dodawanie przycisków „Pin It” do wszystkich twoich obrazków. Możesz nawet dodać w pełni konfigurowalne banery „Pin It” do pierwszego obrazka w twoich wpisach na blogu.

Tasty Pins Pin It button banners

Możesz także użyć Tasty Pins, aby dodać pole śledzenia Pinterest, ustawić opisy Pinterest, wyłączyć przypinanie niektórych obrazków, ukryć obrazki specyficzne dla Pinterest na twojej stronie i nie tylko.

Mamy nadzieję, że ten artykuł pomógł ci zrozumieć, jak dodać przycisk Pinterest „Pin It” do twojego bloga WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia newslettera e-mail lub naszym porównaniem najlepszych programów do projektowania stron internetowych.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

65 komentarzyZostaw odpowiedź

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    Thanks for the php snippet. I tried it on one of the sites and it works like a charm. You have saved me some space between plugins. Good job.

  3. Alison says

    Hi. I just added shared counts and the Pinterest add-on plugins recently. They seem to work fine, but I notice they haven’t been updated in several years nor have they been tested with my version of WordPress. Should I be looking for a new plugin or are they still ok to use?

  4. Julie says

    I’m looking to add an individual graphic pin that I’ve custom designed to the travel blog post it belongs to (like the best things to do in Jaipur). Is that what this article is covering or is it just the literal Pinterst “Button” that looks like the Pinterst logo? Sorry to be co fixed with this technicality, but an image or two would make this much clearer what specifically the “button” you are referring to is….thank you in advance…

    • WPBeginner Support says

      This is for the Pinterest pin it button, the second screenshot in the article should be what you are looking for as an example.

      Administrator

  5. laira says

    hi wpbeginner, I follow your codes, may i know if i will still pin the images on my pinterest boards? or it will automatically pin there? Im still a beginner in this platform. thank you

  6. Lorraine Reguly says

    Thanks for the code. I just added it to my author site. (I have no idea how the Pinterest button shows up on my images on my business site, but it does.)

    Now my author site is all set up!
    Thanks, Syed.

    P.S. I just followed you on Pinterest. :)

  7. Thales says

    I did the last option, adding the short code to my theme’s functions.php file. It worked, but I couldn’t save my posts as draft anymore. Then I removed the code and it is not working. My site is still online, but I cannot log in into my site anymore. The following message appear:

    Warning: Cannot modify header information – headers already sent by (output started at /home/peque107/public_html/wp-content/themes/himmelen/functions.php:2) in /home/peque107/public_html/wp-includes/pluggable.php on line 1224

    Please help!

  8. Carissa says

    Does this only apply for wordpress.org blogs? I have a wordpress.com blog and I am not sure if I can add this plugin to it?

    Thank you!

  9. Ruth says

    I have a problem. I followed the instructions and came up with this error:

    Parse error: syntax error, unexpected '<' in /home/cmomb/butfirstwehavecoffee.com/wp-content/themes/notepad/functions.php on line 18

    Now I cannot get rid of it. Could someone advise. My site is now down.

  10. Ian Harris says

    Thanks for this firstly

    I am struggling to position the element. It is seeming to always sit in the top left of the div.

    Is it possible to position it and also change the bg image to own custom one.

    Thanks

  11. mark taylor says

    Good tutorial, i have put it on my site without any problems, i then tested it and it worked, but it still says 0 after i pinned.
    Mark

  12. vrinda says

    I tried so many plugins… they don’t work with infinite scroll and nextgen gallery…. but with some changes this script solved my issue.. thanks

  13. Michael says

    Hello,

    I just want to ask if I could change the size of the „pin it” button? Because it seems that it was a little bit small.

    Regards,

    Michael

  14. Jenny says

    This code just recently stopped working. I had it on my site and it was working great and recently images appear to be working but then when you go view the pinboard there is no image set. Other times when trying to pin it 502 error that comes from the Pinterest site. Any ideas?

  15. Ido Schacham says

    There’s a bug in the code. The generated href for the pin it button should include 'url=’, currently it’s missing the equals sign.

  16. jess says

    For wordpress users..adding the pin it or any other social media is easy! Under dashboard, go to setting, click on sharing and they all appear- click on what you want to add!

    • Jen M says

      THANK YOU! I have been searching for how to do this for 2 days & downloaded something & that didn’t work, I was about to give up & then THANKFULLY read your comment. I appreciate someone making it as EASY as it really is, how come wordpress can’t do that?

  17. FuturePocket says

    I tried adding this… it worked but when you click on „Pin it” and it opens the window in a new browser and you actually submit the pin, it just reloads the newly opened window and the pin isn’t submitted. Decided not to implement it until they’ve fixed their bugs.

  18. Jean Oram says

    I used the 'follow me’ code on the Pinterest Goodies page and pasted it into the 'text’ widget on my WordPress blog. The button now appears right after my mini bio. It works quite well. :)

  19. Editorial Staff says

    For any advanced theme framework like Thesis, Genesis, Headway etc, you have to add these codes via functions.php file using the framework appropriate hooks. We cannot possibly cover all the theme frameworks out there. Most theme framework blogs have instructions on how to do customize the themes.

    Administrator

    • Ruby says

      @wpbeginner It’s not ideal, but it’s really not much more than you have to do to post the image anyway. I’m still looking for a great option (plugin ideally) that a) works on my theme and b) is easy. Luckily, due to the popularity of Pinterest, I’m confident someone will have one up and running soon!

  20. Gretchen says

    It works, but it shows the text „array” before the Pin It button. I’m calling it via my functions.php, like so „echo $pinterestimag…..<?php;" Could that be why?

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.