Envato Elements - pobieraj co chcesz, ile chcesz

Skoro wczoraj opublikowałem wpis/poradnik o tym jak dodać tagi Open Graph wykorzystywane przez Facebooka do strony opartej o WordPressa (choć nie tylko, bo schemat jest uniwersalny), to chyba nie ma powodów, by nie opublikować podobnego poradnika, z tym że dla Twittera.

Twitter Cards

Wprawdzie głównym elementem wpisu (poradnika) będzie kod do wykorzystania na stronie opartej o WordPressa, to zaczniemy od ogólnego schematu, z którego możecie skorzystać na dowolnej stronie:

<head>
    [...]
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@WebInsiderPL">
    <meta name="twitter:creator" content="@WebInsiderPL">
    <meta name="twitter:title" content="Tytuł (pod)strony"/>
    <meta name="twitter:description" content="Jakiś opis strony..."/>
    <meta name="twitter:image" content="grafika-promująca.jpg" />
    [...]
</head>

Praktycznie wszystko w powyższym kodzie powinno być raczej jasne, może poza jednym miejscem:

<meta name="twitter:card" content="summary_large_image">

Powyższa linijka definiuje tym „karty” na Twitterze, a konkretnie wpis/podsumowanie z (dużą) grafiką. Możecie ew. dać podsumowanie bez grafiki:

<meta name="twitter:card" content="summary">

Ale chyba każdy z Was się ze mną zgodzi, że w większości przypadków takie podsumowanie wygląda lepiej z grafiką, a już zdecydowanie lepiej przyciąga uwagę…

Twitter Cards w WordPressie

Podstawa za nami, możemy więc przejść do WordPressa, do którego dodamy „kilka linijek kodu” do pliku functions.php:

function webinsider_wp_twitter_card_property() {
    global $post;
        
    // SEKCJA 1
    echo '<meta name="twitter:card" content="summary_large_image">'; 
    echo '<meta name="twitter:site" content="@WebInsiderPL">'; 
    echo '<meta name="twitter:creator" content="@WebInsiderPL">'; 

    // SEKCJA 2
    if( ( is_singular( 'post' ) ) || ( is_singular( 'page' )  ) ) {
            echo '<meta name="twitter:title" content="' . esc_html( get_the_title( $post->ID ) ) . '"/>'; 
        }
        else {
            echo '<meta name="twitter:title" content="' . esc_html( get_bloginfo( 'name' ) ) . '"/>';
        }
    
    // SEKCJA 3A
    if( $post->post_excerpt ) {
        $description = wp_strip_all_tags ( $post->post_excerpt );
        $description = str_replace( "\"", "'", $description );
    }
    else { // SEKCJA 3B
        $post_content = get_extended( $post->post_content );
        $post_content = wp_strip_all_tags( $post_content['main'] );
        
        if( ( is_singular( 'post' ) ) && ( mb_strlen( $post_content ) >= 5  ) ) {
            $description = str_replace( "\"", "'", $post_content );
        }
        else {    // SEKCJA 3C
            $description = esc_html( get_bloginfo( 'description' ) );
        }
    }
    echo '<meta name="twitter:description" content="' . $description . '"/>'; 

    // SEKCJA 4A
    if( ( has_post_thumbnail( $post->ID ) ) && ( is_singular( 'post' ) ) ) {
        $post_thumbnail_url = get_the_post_thumbnail_url( $post->ID, 'xlarge' );
        echo '<meta name="twitter:image" content="' . $post_thumbnail_url . '" />';
    }
    else { // SEKCJA 4B
        $default_post_thumbnail = "https://webinsider.pl/wp-content/uploads/wipl_post-thumbnail_inne_wipl.jpg";
        echo '<meta name="twitter:image" content="' . $default_post_thumbnail . '">';
    }

}
add_action( 'wp_head', 'webinsider_wp_twitter_card_property' );

Specjalnie na potrzeby tego poradnika kod podzieliłem na kilka sekcji:

  • SEKCJA 1 – Kilka podstawowych tagów, m.in. typ podsumowania oraz autora (profil na Twitterze)
  • SEKCJA 2 – W przypadku postów i stron wyświetlamy tytuł strony/wpisu, w innym przypadku podstawiamy nazwę strony/bloga
  • SEKCJA 3A/3B/3C – Jako opis zawartości strony w pierwszej kolejności jest wykorzystywana tzw. „zajawka” (3A). W przypadku gdy jej brak i mamy do czynienia z postem/wpisem wykorzystywana jest treść wpisu, aż do znacznika „czytaj dalej” (3B), lub – w przypadku braku treści (lub gdy ma mniej niż 5 znaków) lub gdy nie jest to post/wpis – wykorzystywany jest tekst z opisu/ustawień WordPressa (3C)
  • SEKCJA 4A/4B – Jeśli jest to wpis i ma ustawiony obrazek wyróżniający, to zostaje on wykorzystany (4A), w innym przypadku zostaje wykorzystana grafika domyślna (4B)
Jeśli korzystacie ze stron zabezpieczonych hasłem (jedna ze standardowych funkcji WordPressa) warto rozważyć dodanie wyjątku, gdyż w innym przypadku „zajawka” (jej długość zależy od ustawień) będzie widoczna w kodzie strony. Ewentualnie wystarczy pamiętać, by „elementy tajne” wpisywać dopiero po „zajawce”.

Na koniec zrzut z Twittera, czyli Twitter Cards w działaniu:

(!) Zgłoś błąd na stronie
Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!
Spodobał Ci się artykuł? Zapisz się do naszego Newslettera - ZERO SPAMu, same konkrety, oraz dostęp do dodatkowych materiałów przeznaczonych dla subskrybentów!
Na podany adres e-mail otrzymasz od nas wiadomość e-mail, w której znajdziesz link do potwierdzenia subskrypcji naszego Newslettera. Dzięki temu mamy pewność, że nikt nie dodał Twojego adresu przez przypadek. Jeśli wiadomość nie przyjdzie w ciągu najbliższej godziny (zazwyczaj jest to maksymalnie kilka minut) sprawdź folder SPAM.
Monika ćwiczy przed kongresem ko..., ale jej też należy się zniżka 80% na skięgowość wFirma dla oglądających WebInsider.pl
WebInsider poleca księgowość wFirma
WebInsider korzysta z VPSa w HitMe.pl
WebInsider poleca VPSy DigitalOcean
WebInsider poleca serwis Vindicat
Napisz komentarz
wipl_napisz-komentarz_01Jeśli informacje zawarte na tej stronie okazały się pomocne, możesz nam podziękować zostawiając poniżej swój komentarz.

W tej formie możesz również zadać dodatkowe pytania dotyczące wpisu, na które – w miarę możliwości – spróbujemy Ci odpowiedzieć.
Linki partnerskie
Niektóre z linków na tej stronie to tzw. „linki partnerskie”, co oznacza, że jeśli klikniesz na link i dokonasz wymaganej akcji (np. zakup/rejestracja) możemy otrzymać za to prowizję. Pamiętaj, że polecamy tylko te produkty i usługi, z których sami korzystamy, i uważamy, że są tego na prawdę warte… :-)
Znaki towarowe i nazwy marek
W niektórych wpisach (oraz innych miejscach na stronie) mogą być przedstawione/użyte znaki towarowe i/lub nazwy marek, które stanowią własność intelektualną tych podmiotów, a zostały użyte wyłącznie w celach informacyjnych.
Monika ćwiczy przed kongresem ko..., ale jej też należy się zniżka 80% na skięgowość wFirma dla oglądających WebInsider.pl