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