WP REST API – Praktický průvodce od úplných začátků

V poslední době se o WordPress REST API často píše. Dlouho
očekávanou událostí bylo přidání API přímo do jádra WordPressu 4.4. Tento
článek má za cíl přiblížit, co je WordPress API, jak je možné jej použít a následně
demonstrovat využití API v jazyce PHP a jQuery.

Co je WP REST API?

V překladu se jedná o WP (WordPress) REST (Representational
State Transfer) API (Application Programming Interface). Můžeme tedy
říci, že je to rozhraní pro programatické ovládání, úpravu a získávání dat z WordPressu
dle předem definované architektury. REST API není výhrada WordPressu, jedná se
v podstatě o standard. Více v článku REST:
architektura pro webové API. Takže abych to řekl naprosto lidsky: dostanete
se k WordPressu zadem a můžete snadno pracovat s daty odkudkoliv a
tahat je kamkoliv.

Zadejte si do prohlížeče toto URL: http://www.allten.cz/wp-json/wp/v2/posts/1019.
Toto je JSON výstup získaný pomocí metody pro přístup k datům GET ze
stránky Allten.cz. Konkrétní se jedná o tento příspěvek: http://allten.cz/darujte-efektivitu-jako-vanocni-darek/,
jehož ID je 1019.

JSON (JavaScript Object Notation) je způsob zápisu dat
nezávislý na počítačové platformě, určený pro přenos dat. Jak vidíte na
odkazu http://www.allten.cz/wp-json/wp/v2/posts/1019,
je to příspěvek zobrazený jako objekt a vše je přesně strukturované. Pole mají
jasně definované názvy id, title, link atd.

Toto je ukázka využití metody GET. Pro její využití stačí
zadat adresu do prohlížeče. GET není jediná metoda. REST podporuje další metody
POST (vytvořit), PUT (aktualizovat), DELETE (odstranit). Tento článek se bude
zabývat zejména metodou GET, jelikož je pro demonstraci nejpraktičtější a
nevyžaduje žádnou autentifikaci.

Pomocí těchto metod je možné pracovat defacto s celým WordPressem,
např. s příspěvky (včetně custom post types), stránkami, komentáři, taxonomiemi,
uživateli…

K čemu je možné WP REST API využít?

Možností je nespočet, já jsem již využil, nebo plánuji
využít následující:

Mám web, který není na WordPressu a chci na něm zobrazovat
nejnovější příspěvky na WordPress blogu.
Mám pět micrositů a potřebuji, aby se část obsahu
aktualizovala vždy dle hlavního webu.
Chci udělat předchozí, ale nechci pouze, aby se
obsah/příspěvky zobrazovaly, ale aby se přímo nahrály, pokud je na druhé straně
také WordPress.
Chci na klientském portálu zobrazovat novinky z dané služby.
Nedávno jsem viděl demonstraci mobilní aplikace, která byla
spravována přes WordPress.

Potenciál WP API může jít ještě dále. Např. pomocí PPC se
v konkrétní den nejlépe prodávají Saně XYZ. Z analytického systému
zjistíme tato data, a jelikož e-shop funguje na WooCommerce, pomocí WP REST API
upravíme, aby se tyto saně zobrazovaly jako doporučovaný produkt a ještě k tomu
aby se o 10 % zlevnily.

Praktické aplikace WP REST API – krok za krokem

Předně je nutné aby WordPress z kterého data získáváme,
byl ve verzi 4.4 a měl nainstalovaný plugin pro WP REST API v2 (aktuální
verze k 25.12.2015).

Seznam všech možných
zdrojů a metod naleznete na v2.wp-api.org.
Toto je naprosto nezbytný zdroj, kde např. zjistíte, že pro vypsání obsahu
příspěvku musíte použít metodu GET a adresu http://www.example.com/wp-json/wp/v2/posts/[id].

Vypsání obsahu článku pomocí WP API

Cílem je zobrazit na wp-api-demo.marketingmakers.net nadpis
a obsah článku z Allten.cz. První příklad ukazuje zobrazení tohoto článku
pomocí PHP. Příklad je kompletně komentovaný:

<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>WP API - PHP - výpis obsahu příspěvku</title>
</head>
<body>
<?php
// nastavení připojení k webové stránce - stáhnuto někde na netu
$curl = curl_init();
curl_setopt_array($curl, array(
    CURLOPT_RETURNTRANSFER => 1,
    CURLOPT_URL => 'http://www.allten.cz/wp-json/wp/v2/posts/1019',
    CURLOPT_USERAGENT => 'Codular Sample cURL Request'
));
// odeslání příkazu a uložení odpovědi do proměnné
$resp = curl_exec($curl);
// uzavření requestu
curl_close($curl);
// odpověď je přijata jako JSON, ten je třeba dekódovat
$json_data = json_decode($resp, true);
// první si uložím nadpis článku - jelikož cesta je content.rendered
// získám nejdříve první pole a následně proměnnou.
$json_data_help = $json_data["content"];
$obsah = $json_data_help["rendered"];
// a nyní stejným postupem získám obsah článku
$json_data_help_two = $json_data["title"];
$nadpis = $json_data_help_two["rendered"];
// Teď už jenom vše vypsat
?>

<h1><?php echo $nadpis; ?></h1>
<div><?php echo $obsah; ?></div>

</body>
</html>

Vyzkoušejte na: http://wp-api-demo.marketingmakers.net/obsah_prispevku_php.php

Stejného výsledku je možné dosáhnout i pomocí dalších
jazyků, zejména jsem vygooglil příklady s ASP, Ajax. Jelikož je mi velmi
sympatický jQuery a zároveň se vykonává až na straně klienta, přikládám ukázku:

<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>WP API - jQuery - výpis obsahu příspěvku</title>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 <!-- Jelikož je využito jQuery, je nutné vložit knihovnu -->
</head>
<body>

<script>
// definuji proměnné, které budu dále využívat
var nadpis;
var obsah;
// uložím do proměnných data z JSON
$.getJSON("http://www.allten.cz/wp-json/wp/v2/posts/1019", function(json){
           myjson = json;
		   nadpis = myjson.title.rendered;
		   obsah = myjson.content.rendered;		   
      })
  .done(function() {
    // vypíšu data do vhodných elementů na základě ID
    $("#nadpis").append(nadpis);
    $("#obsah").append(obsah);
  });
</script>
<!-- Zde mám připraven prázdný nadpis a prázdný div, kam vložím data -->
<h1 id="nadpis"></h1>
<div id="obsah"></div>

</body>
</html>

Vyzkoušejte na: http://wp-api-demo.marketingmakers.net/obsah_prispevku_jquery.html

Vypsání seznamu příspěvků pomocí WP API

V příkladu jsou vypsány pouze titulky příspěvků. Pokud
máte základy HTML/PHP/JS, dokážete si snadno do příkladu dosadit i odkaz. Mírné
komplikace jsou s náhledovými obrázky (řešení zde
– přidání adresy náhledového obrázku do JSON výstupu) a s custom post
types (řešení
zde – přidání CPT do API).

Pokud programování není vaším šálkem kávy, vznikají již
pluginy pro práci s API. Velmi nadějný se zdá REST API Post Embeds.

Vypsání seznamu příspěvků pomocí PHP:

<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>WP API - PHP - výpis seznamu příspěvků</title>
</head>
<body>
<?php
// nastavení připojení k webové stránce - stáhnuto někde na netu
$curl = curl_init();
curl_setopt_array($curl, array(
    CURLOPT_RETURNTRANSFER => 1,
    CURLOPT_URL => 'http://www.allten.cz/wp-json/wp/v2/posts/?filter[posts_per_page]=25',
    CURLOPT_USERAGENT => 'Codular Sample cURL Request'
));
// odeslání příkazu a uložení odpovědi do proměnné
$resp = curl_exec($curl);
// uzavření requestu
curl_close($curl);
// odpověď je přijata jako JSON, ten je třeba dekódovat
$json_data = json_decode($resp, true);

?>
<ul>
 <?php
 // for cyklus, který získává titulky. Jedná se o vnořené pole
    for ($i = 0; $i < count($json_data); ++$i) {
        $help = $json_data[$i];
		$help_two = $help["title"];
		echo "<li>". $help_two["rendered"] ."</li>";
    }
	?>
</ul>

</body>
</html>

Vyzkoušejte na: http://wp-api-demo.marketingmakers.net/seznam_prispevku_php.php

Vypsání příspěvků pomocí jQuery:

<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>WP API - jQuery - výpis seznamu příspěvků</title>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 <!-- Jelikož je využito jQuery, je nutné vložit knihovnu -->
</head>
<body>

<script>
// definuji proměnné, které budu dále využívat
var prispevky;
$.getJSON("http://www.allten.cz/wp-json/wp/v2/posts/?filter[posts_per_page]=25", function(json){
           prispevky = json;   
      })
  .done(function() {
    for ( var i = 0, l = prispevky.length; i < l; i++ ) {
    $("#vypis").append("<li>" + prispevky[i].title.rendered + "</li>");
	// typický for cyklus, který zajistí výpis příspěvků a připojení 
	// každého dalšího článku do seznamu odrážek.
}
  });  
</script>
<!-- Zde mám připraven prázdný odrážkový seznam -->
<ul id="vypis">
</ul>

</body>
</html>

Vyzkoušejte na: http://wp-api-demo.marketingmakers.net/seznam_prispevku_jquery.html

Postman – nezbytný nástroj pro REST API

Výborným nástrojem pro práci s REST API, nejen na
WordPressu, je rozšíření
pro Chrome – Postman. Naprosto intuitivně, v přehledném uživatelském
prostředí si můžete všechny příkazy vyzkoušet dříve, než je budete programovat.

A teď hurá na WordPress REST API. Před tím pár vět…

Jak vidíte, REST API se zdá být velmi nadějným „nástrojem“,
který posune WordPress opět mnohem dále.

Nedávno se mi klient ptal, jestli je
to bezpečné. No… je to asi tak bezpečné, jako každý jiný WordPress plugin, takže
bych se využití API nebál. Aktuální verze API je 2.0 (25.12.2015). Tento článek
nemusí pro novější verze fungovat, principy by měly zůstat stejné.

Dále bych chtěl upozornit na rizika využití jQuery/Ajax. Jedná se
o jazyk, který je závislý na povoleném Javascriptu, klientském prostředí a tento
obsah nebude vhodně hodnocen vyhledávači. Pro účel práce s API je PHP/ASP
rozhodně lepším řeším. Na druhou stranu, jQuery je velmi jednoduché a pokud vám
jde o rychlé řešení bez ohledu na vyhledávače, může být užitečné.

Zároveň vás prosím, napište své dotazy, nápady a use cases
do komentářů. Moje druhá prosba jde za zkušenými programátory – napište, jak
byste kód zjednodušili a vylepšili.

Těším se na Vaše reakce a nápady!