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

Przewodnik dla początkujących na temat dodawania kart Twittera w WordPressie

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ć Twitter Cards do twojej witryny WordPress? Twitter Cards to obrazki i opisy, które pojawiają się na Twitterze, gdy ktoś udostępni twoją treść.

Pomaga kontrolować wygląd twoich tweetów na Twitterze, zdobywać uznanie dzięki automatycznemu umieszczaniu twojego imienia i nazwiska w tweecie oraz zwiększać zaangażowanie użytkowników.

W tym artykule pokażemy, jak dodać Twitter Cards w WordPressie, aby twoje tweety mogły się wyróżniać.

Beginners Guide on How to Add Twitter Cards in WordPress

Dlaczego warto używać Twitter Cards w WordPress?

Twitter Cards umożliwiają dodanie tytułu, podsumowania, obrazka i filmu lub pliku audio do twojego tweeta. W ten sposób zwiększa się prawdopodobieństwo uzyskania większej liczby kliknięć i podawania dalej.

Możesz zobaczyć przykład na żywo, przechodząc na naszą stronę na Twitterze.

twitter card example

Największą zaletą posiadania Twitter Cards jest to, że zwiększają one liczbę osób śledzących twoje konta na Twitterze poprzez przypisywanie treści. Często ludzie tweetują twoje odnośniki bez odpowiedniego uznania.

Na przykład, powiedzmy, że @syedbalkhi retweetuje wpis od @wpBeginner bez przypisania, a inne osoby retweetują @syedbalkhi. Wtedy użytkownicy widzący te retweety są bardziej skłonni śledzić @syedbalkhi niż @wpbeginner.

Często kuratorzy treści robią to, aby zachować krótką długość tweetów i zapewnić podawanie dalej własnych tweetów.

Dzięki Twitter Cards ten problem jest rozwiązany, ponieważ otrzymujesz autorzy do twojej witryny internetowej WordPress z każdego tweeta, który wspomina o twoim artykule.

Teraz, gdy znasz już zalety Twitter Cards, przyjrzyjmy się, jak zaimplementować je w WordPress. Omówimy dwie metody i pokażemy, jak przetestować i zweryfikować twoje Twitter Cards:

Metoda 1: Używanie wtyczki AIOSEO do dodawania kart Twittera (zalecane)

Najprostszym sposobem na dodanie Twitter Cards do twojej witryny internetowej jest użycie wtyczki All in One SEO (AIOSEO) dla WordPress. Jest to najlepsza wtyczka WordPress SEO i jest używana przez ponad 3 miliony witryn internetowych.

Najpierw należy zainstalować i włączyć wtyczkę AIOSEO. Aby uzyskać więcej informacji, postępuj zgodnie z naszym poradnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Możesz skorzystać z darmowej wersji AIOSEO, ponieważ oferuje ona funkcję konfigurowania Twitter Cards na twojej witrynie internetowej WordPress.

Po włączeniu wtyczki przejdź do obszaru administracyjnego WordPress i przejdź do All in One SEO ” Media społecznościowe. Następnie kliknij kartę „Twitter” i upewnij się, że opcja „Włącz kartę Twitter” jest włączona.

enable twitter card option

Po włączeniu Twitter Cards można zmienić ich wygląd za pomocą różnych ustawień.

AIOSEO pozwala wybrać domyślny rodzaj karty dla twojej treści. Wtyczka ustawi „Podsumowanie” jako domyślny rodzaj karty, który pokazuje tytuł, podsumowanie i miniaturkę obrazka dla twojej treści.

Możesz jednak zmienić go na „Podsumowanie z dużym obrazkiem” z menu rozwijanego, a Twitter pokaże twój tweet z dużym obrazkiem.

default card type

Następnie należy wybrać opcję Default Post Image Source. Jest to obrazek, który chcesz wyświetlać na swoich kartach na Twitterze.

Istnieją różne opcje do wyboru za pomocą rozwijanego menu. Można na przykład przesłać lub wybrać domyślny obrazek, który pojawi się w karcie Twittera lub wybrać obrazek wyróżniający, załączony obrazek, pierwszy obrazek w treści i inne.

select default post image source

Następnie dodaj domyślny obrazek do wpisu na Twitterze, który będzie używany jako kopia zapasowa na wypadek, gdyby twoja treść nie miała obrazka.

Na przykład, jeśli źródłem obrazu twojego wpisu jest obrazek wyróżniający, ale we wpisie brakuje obrazka wyróżniającego, Twitter użyje zamiast niego domyślnego obrazka.

upload default post twitter image

Poza tym AIOSEO oferuje więcej opcji wyświetlania dodatkowych danych, takich jak autor wpisu i czas potrzebny na przeczytanie artykułu.

Istnieje również opcja ustawienia domyślnego źródła obrazków, ale do korzystania z tej funkcji wymagana jest licencja AIOSEO Pro lub wyższa.

Teraz, jeśli przewiniesz w dół, zobaczysz ustawienia strony głównej dla Twittera. Wtyczka wyświetli podgląd tego, jak twoja strona główna będzie wyglądać na karcie Twittera.

home page settings

W tej sekcji można zmienić rodzaj karty i dodać obrazek strony głównej.

Jest to podobne do kroków, które pokazaliśmy wcześniej, ale różnica polega na tym, że te ustawienia dotyczą twojej strony głównej.

home page card type and image

Następnie wpisz Tytuł i Opis strony głównej, które pojawią się na karcie Twittera.

Po zakończeniu kliknij przycisk „Zapisz zmiany”.

home page title and description

Oprócz tego, AIOSEO pozwala również na zmianę ustawień Twitter Card dla poszczególnych wpisów i stron.

Aby to zrobić, edytuj dowolny wpis na blogu lub stronę, a następnie przewiń w dół do Ustawień AIOSEO w edytorze treści. Teraz kliknij kartę „Społeczności” i wybierz „Twitter”.

aioseo settings

Wtyczka wyświetli podgląd karty Twittera twojego wpisu i da ci możliwość korzystania z danych z karty Facebooka. Pozwala również edytować tytuł i opis na Twitterze.

Możesz napisać nowy tytuł i opis lub użyć inteligentnych tagów. Na przykład, jeśli użyjesz tagu „+ Post Title” nad polem Twitter Title, AIOSEO automatycznie użyje tytułu Twojego wpisu w karcie Twitter.

twitter card settings for posts and pages

Następnie przewiń w dół i wybierz Źródło obrazka dla twojej karty na Twitterze. Skorzystaj z rozwijanego menu, aby wybrać obrazek, który chcesz wyświetlić dla twojego wpisu, np. wyróżniający się obrazek, załączony obrazek, pierwszy obrazek w treści itd.

Na koniec można wybrać rodzaj karty Twittera z menu rozwijanego. Domyślnie AIOSEO ustawi go na „Podsumowanie”, ale można go zmienić na „Podsumowanie z dużym obrazkiem”.

image source and card type

Następnie zaktualizuj lub opublikuj twój wpis na blogu. Pomyślnie dodałeś Twitter Cards do twojej witryny internetowej WordPress.

Metoda 2: Dodawanie kart Twittera w WordPress (metoda kodu)

Ta metoda wymaga dodania kodu do twojego motywu lub plików potomnych motywu. Wystarczy otworzyć plik header.php lub użyć darmowej wtyczki WPCode, aby dodać ten własny konfigurator tuż przed tagiem </head>:

<?php
#twitter cards hack
if(is_single() || is_page()) {
  $twitter_url    = get_permalink();
 $twitter_title  = get_the_title();
 $twitter_desc   = get_the_excerpt();
   $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $twitter_thumb  = $twitter_thumbs[0];
      if(!$twitter_thumb) {
      $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
    }
  $twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
<?
  if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
  }
}
?>

Możesz zmienić wartość „twitter:card” w linii 14 na „summary_large_image”, jeśli chcesz wyświetlić kartę podsumowania z dużym obrazkiem.

Jeśli nie wiesz, jak pracować z PHP lub napotykasz problemy z metodą 2, skorzystaj z metody 1.

Przetestuj i zweryfikuj swoje karty na Twitterze

Zanim odnośniki z twojej witryny WordPress zaczną wyświetlać Twitter Cards, musisz najpierw sprawdzić je w walidatorze kart Twittera.

Wystarczy udać się na stronę Card Validator w witrynie internetowej twórców Twittera. Wpisz adres URL dowolnego wpisu z twojej witryny WordPress i kliknij przycisk „Podgląd karty”.

Twitter Card Validator

Walidator kart nie wyświetla już podglądu tweeta, ale pokazuje logowanie, czy karta Twittera wczytywała się pomyślnie, czy nie.

Aktualizacja: Wcześniej trzeba było ubiegać się o udział w programie Twitter Cards. Twitter wdrożył jednak system, który automatycznie umieszcza domeny na białej liście po przetestowaniu ich za pomocą walidatora lub po prostu udostępnieniu adresu URL na Twitterze.

Przewodniki ekspertów dotyczące korzystania z Twittera z WordPressem

Teraz, gdy już wiesz, jak dodać karty Twittera do WordPressa, możesz chcieć zobaczyć kilka innych przewodników związanych z korzystaniem z Twittera z WordPressem.

Mamy nadzieję, że ten artykuł pomógł Ci dodać karty Twittera do WordPressa. Zachęcamy również do zapoznania się z naszym przewodnikiem na temat tworzenia stron docelowych za pomocą WordPress a oraz z naszą ekspercką listą wtyczek WordPress, które musisz mieć, aby rozwinąć swoją witrynę internetową.

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

88 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. Aramide says

    You’ve been so awesome in passing great information on WordPress. Your tutorials are so great and are wonderful learning materials. Thanks for always being there for us.

  3. Dee says

    Hi! I have a free wordpress.com blog, and I’m not sure how to add twitter cards to that. I don’t know if I can edit the html of my theme without a plugin (if I can, I don’t know how to find the html code) (super new to WP) is there any way to add twitter cards for free

  4. MStokely says

    Thank you! It took awhile for this to work I guess because cache needed to be cleared but this is the ONLY solution I found that worked.

  5. Pierre says

    Question about this, when I am posting a link from my site on Twitter, the preview image is only showing the WordPress W logo instead of what I set in Yoast. Is it just a matter of waiting it out or a, I doing something wrong?

    • WPBeginner Support says

      You may want to ensure you’ve cleared any caching on your site for twitter to get the correct image and after that, you would need to wait for Twitter’s cache to clear.

      Administrator

  6. MIke says

    Hey there, very late to this article but am wondering how to amend the php code to produce the large image with summary card.

    I’ve given it a shot but not managed it yet. Ideas and advice appreciated.

    cheers

  7. Mark Larson says

    I’m getting this error:

    „Notice: Use of undefined constant full – assumed 'full’ in”

    Not sure how to get rid of it.

  8. Ted Bergman says

    Thanks for this post. When I need to know how to do something on WordPress I come here first. Your easy to understand instructions are priceless!

  9. Sarah Bridge says

    I’ve done all the steps using Yoast and validated my url – but there is still no image coming up when I post my URL on Twitter? It said this:

    Sarah Bridge
    The card for your website will look a little something like this!

    and underneath on the right hand side it has the correct words but on the left hand side where an image should be there’s nothing but a grey box with what looks like a grey scroll in it. You can click on it to get to my website but I’d like a image there rather than a grey box. Any thoughts?

  10. Daniela says

    Have successfully done this in the past. However, it was always when using summary card with large image (which is set as the default in my Yoast settings). Now trying to post summary card (regular, not large image), but Yoast is overriding it to summary card large image. How do I prevent this?

    As a note, I’m doing both methods: adding info to Yoast plug in and writing metadata tags in a plug in.

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ę.