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, a także pozwala im zasilać aplikacje innych firm za pomocą CMS WordPress.

W nowoczesnych aplikacjach webowych system zarządzania treścią rozwijany jest również do zarządzania treścią serwisu. 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.

Więc co to do cholery jest bezgłowy WordPress?

Bycie „bezgłowym” zdecydowanie nie oznacza, że ​​w systemie CMS brakuje sekcji nagłówka. Oznacza to, że możesz używać CMS jako ogólnego systemu zarządzania treścią niezależnie od technologii użytej do budowy front-endu.

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 dla dużej liczby technologii internetowych. JSON to tekstowa reprezentacja obiektów JavaScript, która zawiera dane w parze 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

Bycie platformą open-source; WordPress oferuje dużą elastyczność w tworzeniu dowolnej strony internetowej. Korzystanie z WordPressa jako bezgłowego CMS pozwala na stworzenie front-endu aplikacji internetowej przy użyciu dowolnej technologii internetowej i zarządzanie 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.

Konfigurowanie witryny WordPress

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.

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

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

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

Powyższy adres URL pobierze dane o wpisach 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 Reactem.

Zainstaluj i aktywuj wtyczkę, a następnie 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 REST API jest ustawione na wartość true i ustawiony jest również podstawowy slug interfejsu REST API. 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 oraz 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 URL powinien wyglądać mniej więcej tak https://exampe.com/wp-json/wp/v2/ książek

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 .

Korzystając z wtyczki pól niestandardowych, dodam pole wydawcy do moich książek.

Upewnij się, że wybrałeś z listy żądany typ posta. Po tym hitem „ 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

Czym 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 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 za pomocą Reacta, 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-react-app

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.

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

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

Renderowanie danych pocztowych 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);
       powrót (
           <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 wewnątrz 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() {
 powrót (
   <div className="Aplikacja">
    <Książki/>
   </div>
 );
}

eksportuj domyślną aplikację;

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

Wyświetlanie danych posta w ReactJS

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

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

Zamiast wyświetlać dane tutaj, 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;
       powrót (
           <div>
               {książki.mapa(książka =>
               <BookItems key={book.id} book={książka}/>
               )}
           </div>
       );
   }

Teraz zamiast tego musimy wyrenderować komponent 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;
       powrót (
           <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 o podaniu odniesienia do komponentu BookItems w komponencie „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;
       powrót (
           <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 Reactem jako bezgłowego CMS dla Twojej aplikacji internetowej. Kod React jest również dostępny na Git, abyś mógł go pobrać. 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 nie krępuj się i użyj WordPressa do następnego projektu internetowego.