Jak umieścić Open Graph w WordPressie? [Kod]

Dodawanie kodu Open Graph w Wordpressie

Sama znajomość Open Graph nie wystarczy do poprawnego wyświetlania treści w portalach typu Facebook. W artykule przedstawiam jak dodać metatagi do kodu szablonu.

Czym są metatagi OG?

W jednym z poprzednich wpisów o Open Graph zostało omówione czym są metatagi OG i w jaki sposób może pomóc m.in. w zwiększeniu zasięgu na Facebooku. Warto się zapoznać z artykułem przed rozpoczęciem prac. Lepsze zrozumienie tematu pozwoli na bardziej świadome efekty.

Przed rozpoczęciem prac

Wszystkie prace wykonywane są na niestandardowym motywie (wykonanym od zera).

W gotowych motywach należy upewnić się czy istnieje możliwość konfiguracji w panelu lub czy istnieją już metatagi OG.

Przed modyfikacją motywu powinno się wykonać kopię bezpieczeństwa plików

Kolejną istotną rzeczą jest praca na motywie potomnym. Motyw potomny to miejsce, w którym modyfikujemy motyw rodzica. Polega na utworzeniu nowego folderu i dodaniu plików, które chcemy zmodyfikować przez co nadpisujemy funkcje motywu rodzica. Cała reszta jest dziedziczona z motywu rodzica.
Należy tak robić, ponieważ zmodyfikowane pliki motywu rodzica zostaną nadpisane przez aktualizację i wszystkie dodatkowe funkcje przepadną. Umieszczając je w motywie potomnym zabezpieczamy się przed tym, ponieważ zmiany są w osobnym katalogu, a aktualizacja dotyczy tylko głównego motywu.

Dodawanie metatagów do motywu

Dodanie metatagów będzie polegało na skopiowanie poniższego kodu i wklejeniu w odpowiednim pliku. I to wszystko!

Kod metatagów OG

Przygotowany kod wygląda następująco:

 
    <?php
        if (is_singular()) {
            ?>
                <meta property="og:title" content="<?php echo the_title_attribute(); ?>" />
                <meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
                <meta property="og:url" content="<?php echo get_permalink(); ?>" />
                <meta property="og:type" content="article" />
                <meta property="og:image" content="<?php echo get_the_post_thumbnail_url(); ?>" />
            <?php
        }
    ?>

Podany wyżej kod należy umieścić w pliku header.php przed wywołaniem funkcji wp_head(). Plik znajduje się w następującej ścieżce: /wp-content/themes/NAZWA_MOTYWU/header.php. NAZWA_MOTYWU to nazwa aktywnego motywu.

Warto wyjaśnić co się dzieje w podanym kodzie.

Tylko posty – is_singular()

Funkcja zwraca wartość true w przypadku jeśli jest to podstrona posta. Oznacza to, że w tym przypadku kod w środku if’a wykona się tylko jeśli będzie to post.

is_singular() na Codex WordPress

Tytuł posta – the_title_attribute()

Funkcja zwraca tytuł w postaci string’a.

the_title_attribute() na Codex WordPress

Skrót posta – get_the_excerpt()

Krótki opis posta umieszczany jest w panelu bocznym podczas edycji treści. Sekcja nazywa się „Zajawka”. Motyw musi wspierać zajawkę, inaczej nie będzie tej sekcji w panelu.

get_the_excerpt() na Codex WordPress

Zajawka – sekcja w panelu bocznym edytora wpisów

Bezpośredni link – get_permalink()

Funkcja zwraca link do postu

Obrazek wyróżniający – get_the_post_thumbnail_url()

Jeśli motyw wspiera obrazek wyróżniający to funkcja zwróci bezpośredni link do obrazka.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *