Kurs "WordPress: Pierwsze kroki" (na dobry początek)

Ostatnio pisałem o pewnej sztuczce, którą czasem stosuje by zmusić mechanizmy Facebooka do wyświetlenia informacji o linkowanej stronie dokładnie tak jak ja chcę, a nie tak jak akurat bawią się „chłopcy z Facebooka” (bo mam wrażenie, że – zwłaszcza ostatnio – co chwilę coś mieszają w tym temacie). Tam też pokazałem jak możemy – dla pewności – dodać na stronie taki „Open Graph”, tak by mechanizmy Facebooka odpowiedzialne za pobieranie i przetwarzanie danych nie miały wątpliwości jak interpretować treści na stronie.

W przypadku strony internetowej o relatywnie statycznej zawartości/konstrukcji sprawa jest dość prosta – na każdej (pod)stronie ustawiamy odpowiednie nagłówki i temat mamy z głowy. Sprawa trochę się komplikuje w przypadku bardziej dynamicznej (zawartości) strony.

Facebook Open Graph w WordPressie

Przykładem takiej bardziej dynamicznej strony będzie np. blog na WordPressie, gdzie oprócz kilku statycznych stron generujemy regularnie nowe wpisy, i często nie ma możliwości (lub jest to niepraktyczne) ręcznego ustalania tagów dla każdego wpisu (każdej strony) oddzielnie.

Odpowiednie tagi możemy dodać np. za pomocą często polecanej – nie tylko w tym kontekście – wtyczki Yoast SEO, ale moim zdaniem jest to niczym strzelanie do wróbla z okrętowej armaty – można, ale sensu w tym niewiele. Choć od razu przyznam, że podchodzę dość sceptycznie do tego typu wtyczek, które często są instalowane z automatu, bez żadnej refleksji „czy potrzeba”, „czy ktoś będzie w ogóle ją obsługiwał”. Zazwyczaj odbywa się to jakby wedle zasady „ktoś gdzieś napisał, że…”.

Dlatego my skorzystamy z kodu PHP, który dodamy do naszego WordPressa. Czy będzie to w ramach pliku functions.php, czy też zrobicie z tego własną wtyczkę – wybór zostawiam Wam. Przykładowy kod może wyglądać tak:

function webinsider_wp_facebook_open_graph_meta_property() {
    global $post;
    
    // SEKCJA 1A
    if( ( is_singular( 'post' ) ) || ( is_singular( 'page' )  ) ) {
        echo '<meta property="og:title" content="' . get_the_title( $post->ID ) . '"/>';
        echo '<meta property="og:url" content="' . get_permalink( $post->ID ) . '"/>';
        echo '<meta property="og:site_name" content="' . get_bloginfo( 'name' ) . '"/>'; 
    }
    else { // SEKCJA 1B
        echo '<meta property="og:title" content="' . get_bloginfo( 'name' ) . '"/>';
        echo '<meta property="og:url" content="' . get_option( 'siteurl' ) . '"/>';
        echo '<meta property="og:site_name" content="' . get_bloginfo( 'name' ) . '"/>'; 
    } 
    
    // SEKCJA 2
    if( is_singular( 'post' ) ) {
        echo '<meta property="og:type" content="article" />';
    }
    
    // SEKCJA 3A
    if( ( has_post_thumbnail( $post->ID ) ) && ( is_singular( 'post' ) ) ) {
        $post_thumbnail_url = get_the_post_thumbnail_url( $post->ID, 'xlarge' );
        echo '<meta property="og:image" content="' . $post_thumbnail_url . '" />';
    }
    else { // SEKCJA 3B
        $default_post_thumbnail = "https://webinsider.pl/wp-content/uploads/wipl_post-thumbnail_inne_wipl.jpg";
        echo '<meta property="og:image" content="' . $default_post_thumbnail . '" />';
    }
    
    // SEKCJA 4A
    if( $post->post_excerpt ) {
        $description = wp_strip_all_tags ( $post->post_excerpt );
        $description = str_replace( "\"", "'", $description );
    }
    else { // SEKCJA 4B
        $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 4C
            $description = get_bloginfo( 'description' );
        }
    }
    echo '<meta property="og:description" content="' . $description . '"/>'; 

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

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

  • SEKCJA 1 – Kilka podstawowych tagów (tytuł, adres strony, nazwa strony), których zawartość jest pobierana zależnie od tego czy jest to wpis/strona (1A) czy inna strona, np. strona główna (1B)
  • SEKCJA 2 – W przypadku postów dodatkowo określamy typ strony/zawartości jako „artykuł”
  • SEKCJA 3A/3B – Jeśli jest to wpis i ma ustawiony obrazek wyróżniający, to zostaje on wykorzystany (3A), w innym przypadku zostaje wykorzystana grafika domyślna (3B)
  • SEKCJA 4A/4B/4C – Jako opis zawartości strony w pierwszej kolejności jest wykorzystywana tzw. „zajawka” (4A). W przypadku gdy jej brak i mamy do czynienia z postem/wpisem wykorzystywana jest treść wpisu, aż do znacznika „czytaj dalej” (4B), 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 (4C)
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”.

Oczywiście nic nie stoi na przeszkodzie byście kod dopasowali do własnych potrzeb, czy to modyfikując treści (a już na pewno adres domyślnej grafiki ;-)), czy też dodając kolejne – mniej standardowe – tagi (np. fb:app_id).

Zweryfikować poprawność działania kodu możecie m.in. za pomocą narzędzi Open Graph Object Debugger i Sharing Debugger, o których pisałem niedawno, przy okazji wspomnianego już poradnika dotyczącego pewnej sztuczki, dzięki której czasem muszę zmuszać mechanizmy Facebooka do wyświetlenia informacji o linkowanej stronie dokładnie tak jak ja chcę.

(!) Zgłoś błąd na stronie
Pomogłem? To może postawisz mi wirtualną kawę?
LUTy dla D-Cinelike (DJI Mini 3 Pro, DJI Avata, OSMO Pocket) od MiniFly
Wdrożenie Omnibusa w sklepie na WooCommerce
Jak (legalnie) latać dronem w Kategorii Otwartej
Kurs "WordPress: Pierwsze kroki" (na dobry początek)
Patryk
Kurs "WordPress: Pierwsze kroki" (na dobry początek)