Użyj WordPress z React, aby stworzyć Headless CMS dla swojej aplikacji internetowej

WordPress Rest API to jedna z wielu wspaniałych funkcji, które oferuje WordPress. Umożliwia programistom tworzenie fascynujących wtyczek i motywów oraz pozwala im zasilać aplikacje innych firm za pomocą CMS WordPress.

System zarządzania treścią został również opracowany do zarządzania treścią serwisu internetowego w nowoczesnych aplikacjach internetowych. Może to zwiększyć obciążenie programistów. Przy tak wielu możliwościach, jakie oferuje Rest API , można również pomyśleć o użyciu WordPressa z React jako bezgłowego CMS dla swoich aplikacji internetowych opartych na JavaScript.

Co to jest bezgłowy WordPress?

Bezgłowa witryna WordPress to witryna, która wykorzystuje WordPressa głównie do zarządzania treścią i wykorzystuje dowolną inną technologię do budowy interfejsu i wyświetlania treści odwiedzającym witrynę.

Rest API pozwala programistom na interakcję z interfejsami różnych technologii, o ile oba mówią tym samym językiem JSON. WordPress Rest API wypluwa dane w formacie JSON, co jest zrozumiałe przez dużą liczbę technologii internetowych. JSON to tekstowa reprezentacja obiektów JavaScript, która zawiera dane w parach klucz-wartość.

 "przyjaciele": [
      {
        "id": 0,
        "imię": "Harriet Stanley"
      },
      {
        "id": 1,
        "imię": "Benton Odom"
      },
      {
        "id": 2,
        "imię": "Jackie Edwards"
      }
    ],

Dzisiaj zademonstruję moc WordPress Rest API , używając go z React i WordPress jako bezgłowego CMS dla mojej podstawowej aplikacji internetowej.

Korzyści z używania Headless WordPress CMS

Będąc platformą typu open source, WordPress oferuje dużą elastyczność w tworzeniu dowolnej witryny internetowej. Korzystanie z WordPressa jako bezgłowego CMS-a pozwala stworzyć front-end aplikacji internetowej przy użyciu dowolnej technologii internetowej i zarządzać jej zawartością za pomocą jednego z najpopularniejszych CMS.

Możesz spotkać się z sytuacją, w której musisz dodać funkcję bloga w istniejącej aplikacji internetowej zbudowanej za pomocą Reacta lub Angulara. Zamiast kodować pełnoprawny system zarządzania treścią w natywnym frameworku, użyj bezgłowego CMS WordPress do zarządzania treścią za pomocą Rest API.

Jak skonfigurować witrynę WordPress dla ReactJS

Zacznijmy od skonfigurowania witryny WordPress, ponieważ będzie ona działać jako źródło danych dla naszej aplikacji front-endowej React.

Pobierz plik zip wtyczki WP-Rest API z git i prześlij folder zip do folderu wtyczek WordPress. Po przesłaniu pliku aktywuj wtyczkę. Umożliwi to WordPress Rest API w Twojej witrynie WordPress.

Przejdź do Ustawienia → Permalinki i wybierz nazwę posta lub strukturę niestandardową.

Ponieważ pracujemy z wywołaniami API, pobierz rozszerzenie chrome dla Postman . Wewnątrz Postmana wprowadź adres URL w następującym formacie:

https://example.com/wp-json/wp/v2/posts

Powyższy adres URL pobierze dane postów w witrynie WordPress.

Pobierz wtyczkę Custom Post Type UI do tworzenia niestandardowych typów postów. Ten niestandardowy post zostanie wyświetlony, gdy w następnym kroku użyjemy WordPressa z React.

Zainstaluj i aktywuj wtyczkę oraz dodaj nowy typ posta. W tym samouczku będę tworzyć niestandardowy typ posta dla Książek.

W polu Post Type Slug wpisz nazwę swojego niestandardowego posta.

Upewnij się, że pole wyboru Pokaż w interfejsie API REST jest ustawione na wartość prawda, a także ustawiona jest podstawowa informacja o stanie interfejsu API REST. Jest to obowiązkowe, jeśli chcesz używać WordPressa jako bezgłowego CMS.

Zaznacz wszystkie pola dla informacji, które chcesz uzyskać z REST API.

Po zapisaniu zmian zauważysz, że na pasku bocznym pojawiła się nowa opcja. Kliknij go, aby dodać nową książkę do niestandardowego typu posta.

Swoją pierwszą książkę stworzyłem, umieszczając przykładowe dane i fragment do mojego postu.

Aby sprawdzić, czy dane są dostępne za pośrednictwem interfejsu API, przejdź dalej i kliknij adres URL w Postman.

Teraz adres URL powinien wyglądać mniej więcej tak: https://exampe.com/wp-json/wp/v2/books .

Możemy również dodać kolejne pola, takie jak Publisher, za pomocą wtyczek ACF i ACF do RestAPI .

Zainstaluj i aktywuj obie wtyczki.

Domyślnie ACF nie komunikuje się z WordPress Rest API. Dlatego musimy również pobrać wtyczkę ACF REST API .

Za pomocą wtyczki pól niestandardowych dodam pole wydawcy do moich książek.

Upewnij się, że wybrałeś z listy żądany typ posta. Następnie naciśnij „ Opublikuj ”.

W moim niestandardowym typie posta zostanie wypełnione nowe pole, w którym mogę zdefiniować wydawcę mojej książki. To wszystko, co musieliśmy zrobić, aby skonfigurować naszego WordPressa do wysyłania naszych danych do naszej aplikacji internetowej ReactJS.

Pierwsze kroki z React

Co to jest ReactJS

React to biblioteka JavaScript dla sieci utrzymywana przez Facebooka i społeczność programistów. JavaScript jest potężnym narzędziem do tworzenia stron internetowych i istnieje kilka bibliotek napisanych w języku JavaScript w celu zwiększenia funkcjonalności stron internetowych. ReactJS jest używany głównie do tworzenia aplikacji jednostronicowych, które są szybkie, niezawodne i dynamiczne.

Konfigurowanie aplikacji React

Aby tworzyć aplikacje React, musisz mieć zainstalowane na swoim komputerze następujące zależności.

• NodeJS i NPM.
• Edytor tekstu, taki jak Sublime lub Visual Studio Code.
• Git do kontroli wersji (opcjonalnie)

Po skonfigurowaniu środowiska otwórz wiersz poleceń i uruchom poniższy kod, aby utworzyć projekt za pomocą ReactJS.

 npx nakładka na tworzenie-reaguj-aplikację

Po utworzeniu aplikacji, cd (zmień katalog) do folderu aplikacji i wpisz następujące polecenie, aby zainstalować pakiet Axios dla wywołań API.

 npm i aksjos

Teraz otwórz folder w swoim ulubionym edytorze tekstu. Używam kodu programu Visual Studio.

Uruchom aplikację, uruchamiając polecenie npm start.

Wszyscy jesteśmy gotowi do zbudowania naszej aplikacji internetowej z React przy użyciu WordPressa jako bezgłowego CMS, jeśli wszystko działa poprawnie.

Utwórz nowy folder „ components ” w folderze src , a wewnątrz folderu „ components ” utwórz nowy plik „ Books.js ”.

Jak renderować dane pocztowe w ReactJS

Wewnątrz pliku Book.js pobierzemy dane z WordPress Rest API. Poniżej znajduje się kod, który żąda punktu końcowego interfejsu API Rest – w moim przypadku jest to „ /books ” – i wyświetla dane w formacie JSON.

 import React, { Component } z 'react'
importować axios z „axios”;

export class Books extends Komponent {
   stan = {
       książki: [],
       isLoaded: fałsz
   }

 componentDidMount () {
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({
           książki: res.data,
           isLoaded: prawda
       }))
       .catch(err => console.log(err))
   }


   renderowanie() {
      console.log(ten.stan);
       zwrócić (
           <div>
              
           </div>
       )
   }
}

eksportuj domyślne książki

Powyższy kod pokaże tablicę danych w konsoli, która jest następnie wykorzystywana w bloku renderowania.

Teraz w pliku App.js wywołaj komponent Books , jak pokazano poniżej.

 importuj React z „react”;
importuj './App.css';
importuj książki z './components/Books';

funkcja App() {
 zwrócić (
   <div className="Aplikacja">
    <Książki/>
   </div>
 );
}

eksportuj domyślną aplikację;

App.js to punkt wejścia do naszej aplikacji internetowej. Dlatego ważne jest, aby odwoływać się do komponentów „Książki” w tym pliku.

Jak wyświetlić dane posta w ReactJS?

Dane można wyświetlić, dodając kod wewnątrz metody render.

 renderowanie() {
       const {książki, isLoaded} = this.state;
       zwrócić (
           <div>
               {książki.mapa(książka =>
               <h4>{book.title.rendered}</h4>
               )}
           </div>
       );
   }

Zamiast wyświetlać dane w tym miejscu, utworzymy nowy składnik i nazwiemy go „ BookItems.js ”, ponieważ chcę go oddzielić od składnika nadrzędnego.

Zmień metodę render w Bookk.js na coś takiego:

 renderowanie() {
       const {książki, isLoaded} = this.state;
       zwrócić (
           <div>
               {książki.mapa(książka =>
               <BookItems key={book.id} book={książka}/>
               )}
           </div>
       );
   }

Teraz musimy zamiast tego renderować składnik BookItems.

Wewnątrz BookItems.js dodaj następujący kod:

 import React, { Component } z 'react'
importować axios z „axios”;
importuj PropTypes z 'prop-types';

klasa eksportu BookItems rozszerza Komponent {
 
   renderowanie() {
       const { tytuł } = this.props.book;
       zwrócić (
           <div>
              <h2>{tytuł.rendered}</h2>
           </div>
       )
   }
}

eksportuj domyślne pozycje z książki

W powyższym kodzie odwołuję się do rekwizytu książki, aby uzyskać tytuł i inne informacje.

Uwaga: pamiętaj, aby odwoływać się do składnika BookItems wewnątrz składnika „Książki”.

Moja ostateczna wersja BookItems.js wygląda mniej więcej tak:

 import React, { Component } z 'react'
importuj PropTypes z 'prop-types';
importować axios z „axios”;
klasa eksportu BookItems rozszerza Komponent {

   stan = {
       imgUrl: '',
       autor: '',
       isLoaded: fałsz
   }

   statyczne propTypes = {
       książka: PropTypes.object.isRequired
   }

   componentDidMount () {
       const {polecane_media, autor} = this.props.book;
       const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_media}`);
       const getAuthor = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/${author}`);
      
       Promise.all([getImageUrl, getAuthor]).then(res => {

           console.log(res);
           this.setState({
               imgUrl: res[0].data.media_details.sizes.full.source_url,
               autor: res[1].data.name,
               isLoaded: prawda

           });
       });
    }
 
   renderowanie() {
       const { tytuł, fragment } = this.props.book;
       const {autor, imgUrl, isLoaded} = this.state;
       zwrócić (
           <div>
              <h2>{tytuł.rendered}</h2>
              <img src={imgUrl} alt={tytuł.rendered}/>
              <strong>{autor}</strong><br/>
              <div dangerouslySetInnerHTML={{__html: excerpt.rendered}}></div>
           </div>
       )
   }
}

eksportuj domyślne pozycje z książki

A wynik w przeglądarce wygląda tak:

Nie najładniejszy, prawda? Cóż, to dlatego, że stylizacja jest poza zakresem tego samouczka.

Podsumowanie!

Dzisiaj pokazałem Ci, jak korzystać z WordPressa z React jako bezgłowego CMS dla Twojej aplikacji internetowej. Kod React jest również dostępny do pobrania na Git. Jednak nie ogranicza się to do Reacta. Możesz także eksperymentować z VueJS, Angularem lub dowolnym frameworkiem JavaScript. Jest mnóstwo rzeczy, które możesz zrobić za pomocą WordPress Rest API. Nie ma ograniczeń, więc śmiało korzystaj z WordPressa w swoim następnym projekcie internetowym.