W ostatnim projekcie, moim zadaniem była m.in. implementacja danych strukturalnych, a konkretnie koncertów. Na początku, w ogóle się tym nie przejmowałem, byłem pewien, że zadanie będzie polegało, jak zazwyczaj na dodaniu odpowiednich znaczników do struktury html. W tym konkretnym przypadku, chodziło o dodanie 3 znaczników ostatnich koncertów na stronie z kategorią „koncerty”. I tutaj napotkałem na mały problem, ponieważ informacje takie jak start, koniec, miejsce koncertu nie mogły być widoczne w widoku kategorii, więc nie mogłem w tym widoku opakować htmla w dane strutkuralne. (ale znaczniki jakoś musiały być dodawane na tej stronie). I tutaj właśnie z pomocą przyszedł mi JSON-LD.

Czym jest JSON-LD?

JSON-LD jest krótko mówiąc, kolejną metodą dodawania danych strukturalnych do naszych stron internetowych, za pomocą bardzo wygodnego formatu JSON. W tym przypadku dane strukturalne są dodawane za pomocą skryptu typu application/ld+json, a nie do struktury htmla, przez co mamy czysty kod html i również przejrzyste (odseparowane) dane strukturalne. No i super. A jak to wygląda w praktyce? W stopce naszej strony, musimy dodać taki przykładowy kod (dla pojedynczego koncertu):

<script type="application/ld+json">
[{
  "@context": "http://schema.org",
  "@type": "MusicEvent",
  "name": "Lady Gaga",
  "url": "http://ladygaga.com",
  "startDate": "2014-11-13T19:30",
  "doorTime": "18:30",
  "endDate": "2014-11-13T22:00",
  "location": {
    "@type": "Place",
    "name": "National Indoor Arena",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "King Edwards Rd.",
      "addressLocality": "Birmingham",
      "addressRegion": "United Kingdom",
      "addressCountry": "US"
    }
  },"offers": [{
    "@type": "Offer",
    "name": "General Admission",
    "category": "primary",
    "price": "100.00",
    "priceCurrency": "GBP",
    "url": "http://ticketmaster.com/ticket/17004C29"
  }]
}]
</script> 

Nie wszystkie dane są wymagane. Szczegóły dostępne są tutaj.

JSON-LD w naszym motywie WordPressa

Format jest bardzo fajny, ale dobrzy by było, gdyby te dane generowały się automatycznie. W moim przypadku na stronie kategorii, muszę generować 3 takie wpisy (pobierać dane z 3 ostatnich koncertów).

Dla pojedynczego koncertu, musimy też dodawać informacje, takie jak nazwa, start, koniec, miejsce, link do zakupu biletu na koncert i pozostałe znaczniki wymagane dla danych strukturalnych typu „Event”. Do tego celu wykorzystałem Custom Fields, tworzone przez wtyczkę Rich Snippets, ale nie ma też problemu, żeby wykorzystać standardowe Custom Fields. Funkcja jest następująca:

function wp_info_json_ld_events ($cat) {
	global $post;

	$args = array(
	'numberposts' => 3,
	'category' => $cat,
	'orderby' => 'post_date',
	'order' => 'DESC'
	);

	$recent_posts = wp_get_recent_posts( $args );
	// open script
	$html = '<script type="application/ld+json">[';
	// set counter
	$counter = 0;
		foreach( $recent_posts as $recent ){
			$html .= '{';
      		$html .= '"@context": "http://schema.org",';
      		$html .= '"@type": "MusicEvent",';
			$html .= '"name": "' . get_post_meta($recent["ID"], '_bsf_event_title', true) . '",';
			$html .= '"startDate": "' . get_post_meta($recent["ID"], '_bsf_event_start_date', true) . '",';
			$html .= '"endDate": "' . get_post_meta($recent["ID"], '_bsf_event_end_date', true) . '",';
			$html .= '"url": "' . get_the_permalink() . '",';
				$html .= '"location": {';
					$html .= '"@type": "Place",';
					$html .= '"name": "'. get_post_meta($recent["ID"], '_bsf_event_organization', true) .'",';
					$html .= '"address": "'. get_post_meta($recent["ID"], '_bsf_event_street', true) .', '.get_post_meta($recent["ID"], '_bsf_event_local', true).', '.get_post_meta($recent["ID"], '_bsf_event_region', true).', '.get_post_meta($recent["ID"], '_bsf_event_postal_code', true).'"';
				$html .= '},';

				$html .= '"offers": {';
					$html .= '"@type": "Offer",';
					$html .= '"url": "'. get_post_meta($recent["ID"], '_bsf_event_ticket_url', true) .'"';
				$html .= '}';
				$counter++;

			if($counter == 3) {
				$html .= '}]';
			} else {
				$html .= '},';
			}
			
		}
		wp_reset_query();
		

	// Close script
  	$html .= '</script>';

  echo $html;

}

Jeśli chodzi o linie 2-11 – to standardowe argumenty do pobrania 3 postów z danej kategorii (sortowanych po dacie). Kiedy mamy nasze posty, tworzymy zmienną $html, która będzie zawierać wynikowy kod, w linii 13 otwieramy nasz skrypt, następnie ustawiamy licznik (będzie potrzebny aby generować poprawny kod dla 3 ostatnich koncertów). Otwieramy naszą pętlę i dodajemy do zmiennej $html kolejne linijki w formacie JSON, z wartościami pobieranymi z ostatnich postów. Funkcja jest prosta i myślę, że nie wymaga dalszego komentarza.

Teraz w naszym pliku footer.php dodajemy następującą linijkę:

wp_info_json_ld_events (20);

z odpowiednim numerem naszej kategorii i to wszystko, może komuś się przyda to rozwiązanie. Można oczywiście w prosty sposób odpowiednio przebudować funkcję i uzyskać generator dla innych danych strukturalnych w formacie JSON-LD.