WordPress – jak stworzyć własne API

WordPress – jak stworzyć własne API

Nie często zagłębiam się w zagadnienia z obszaru back-endu – nie cieszą oczu. Zdarza mi się jednak napisać kod, który poważnie ułatwi życie. Tak jest właśnie tym razem. Pokażę wam, jak w WordPressie stworzyć prosty endpoint, zwracający dane w postaci JSON.

Problem

Jeden z moich projektów wymagał stworzenia rozbudowanego formularza, który będzie wyświetlał propozycje produktów na podstawie uzupełnionych pól. Ponieważ od pewnego czasu szlifuję swoją wiedzę na temat Angular.js postanowiłem ten właśnie framework wykorzystać. Angular.js działa w środowisku JavaScript skąd powstał problem w jaki sposób załadować informacje o produktach bezpośrednio z bazy danych WordPressa.

Rozwiązanie

Pierwsza myśl jaka przyszła mi do głowy to stworzenie prostego endpoint-a, który będzie zwracał dane w postaci JSON. Rozwiązanie takie wydało się dość sensowne ponieważ operowanie na danych JSON w Angular to czysta przyjemność. Istnieją oczywiście gotowe rozwiązania jak chociażby WP-API i nie odkrywam tutaj nowej planety zamieszkałej przez obcą cywilizację. W mojej naturze leży jednak obsesyjne unikanie wtyczek i nadmiarowego kodu.

Jak stworzyć własne API?

Otwieramy plik functions.php z naszego szablonu gdzie zawsze dzieje się magia.

  1. Po pierwsze dodajemy regułę rewrite dla nowego endpoint-a.
    W uproszczeniu jest to nic innego jak stworzenie adresu URL pod którym dostępne będzie nasze API.

    add_action('init', 'add_endpoint');
    function add_endpoint(){
       add_rewrite_endpoint('api', EP_PAGES, true);
    }
  2. Po drugie tworzymy logikę i wyświetlamy odpowiednie dane. Ze zmiennej query_vars otrzymujemy parametr podany w adresie URL, następnie pobieramy dane z bazy zapisując je w tablicy. Ponieważ w moim przypadku dane zapisane były w polach ACF, użyłem funkcji get_field(name,page_id). Równie dobrze możemy tu wykorzystać WP_QUERY lub cokolwiek innego co pozwoli wyciągnąć nasze dane. Na koniec wystarczy wysłać tablicę danych w postaci JSON.
    add_action('parse_request', 'endpoint', 0);
    function endpoint( ){
      global $wp;
      $param = $wp->query_vars['attachment'];
      $products = array();
      if ($wp->request == 'api/'.$param) {
        array_push($products, array(
          'items' => get_field('items_'.$param, 16),
        ));
        wp_send_json( $products );
      }
    }
    

Ostateczny wynik

W taki sposób pod adresem www.nazwastrony.pl/api/xx stworzyłem prosty endpoint zwracający dane w postaci JSON. Na koniec przykładowa implementacja Angular, pobierająca dane z API WordPressa z konkretnej kategorii.

$http.get('www.nazwastrony.pl/api/economy').then(function(res){
   $scope.products = res.data[0];
});
$http.get('www.nazwastrony.pl/api/premium').then(function(res){
   $scope.products = res.data[0];
});

Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.