Spis treści
Wstęp
Może być wiele osób, które mówiły Ci, abyś wybrał WordPressa, ponieważ jest to najlepszy CMS na rynku i jest darmowy, ale pozwól, że przedstawię Ci kilka szalonych statystyk na temat WordPressa, które zmuszą Cię do wybrania WordPressa. Udział WordPressa w globalnym rynku zarządzania treścią wynosi 64,4%i koniec 60 milionów ludzi wybrał WordPress do zasilania swojej witryny lub bloga. A jeśli te statystyki Cię nie intrygują, powiem Ci, że nawet Beyonce ma swoją stronę internetową na WordPressie. I czekaj, czy mówiłem ci, że nawet Jay Z i Sylvester Stallon mają również strony internetowe na WordPress.
A co jeśli powiem Ci, że możesz używać WordPressa z jedną z najlepszych bibliotek JavaScript na rynku, ReactJS, która została opracowana przez Facebooka i jest używana przez Ubera, Airbnb, Dropbox i nie tylko, nawet Asana jest tworzona przy użyciu ReactJS.
Teraz wiem, jakie będzie Twoje następne pytanie, ale jak to zrobić? Odpowiedź jest prosta, za pomocą Bezgłowy WordPress. Dzięki Headless WordPress możesz używać razem WordPress i ReactJS i budować jedną z najlepszych dostępnych witryn.
Ale najpierw zrozummy, czym jest Headless WordPress?
Co to jest bezgłowy WordPress?
Każda witryna internetowa, niezależnie od jej konfiguracji, posiada front-end i back-end. Frontend to sposób, w jaki odwiedzający wchodzą w interakcję z Twoją witryną. To, na co teraz patrzysz, oznacza front-end.
Zaplecze umożliwia zarządzanie witryną, w tym tworzenie i publikację stron i blogów, dostosowywanie projektu i ustawień oraz dodawanie dodatkowych możliwości za pomocą wtyczek.
Kiedy front-end i back-end są używane jednocześnie, nazywa się to połączoną architekturą CMS (systemu zarządzania treścią). Dzięki temu wszystko można utrzymać w jednym miejscu, takim jak WordPress, co jest idealne dla przedsiębiorców, blogerów i właścicieli firm.
Ze względu na „headless” architekturę serwisu, front-end platformy zostaje usunięty, pozostawiając jedynie backend i API działające po stronie serwera.
Oczywiście będziesz mógł kontynuować tworzenie, zmienianie, przesyłanie i organizowanie materiałów w taki sam sposób, jak w przypadku korzystania z połączonego systemu. Różnica polega na tym, że będziesz mieć dostęp do swoich zasobów za pomocą innego rozwiązania front-end, zwanego REST API.
Dzięki temu bezgłowy już system CMS może być stosowany uniwersalnie, niezależnie od „języka” użytego do budowy frontonu serwisu. W rezultacie nie będziesz już polegał na WordPressie przy wyświetlaniu swoich materiałów w Internecie.
Zagłębmy się w techniczne aspekty tego, czym jest Headless WordPress, teraz, gdy rozumiemy, co to jest.
Za pomocą Rest API, które umożliwia programistom interakcję z interfejsami międzytechnologicznymi, o ile obaj posługują się językiem JSON. Dane wychodzące za pomocą Rest API są w formacie JSON, a JSON jest najpopularniejszym formatem znanym w prawie każdej technologii internetowej. JSON to tekstowa reprezentacja obiektów JavaScript, która zawiera dane w parach klucz-wartość.
“nazwy”: [
{
“id”: 0,
“name”: “John Doe”
},
{
“id”: 1,
“name”: “Richard Lindley”
},
{
“id”: 2,
“name”: “Jack Moore”
}
],
Korzyści z używania Headless CMS WordPress
Można go używać na szerokiej gamie urządzeń, takich jak tablety, komputery PC i smartfony. Ta metoda pomaga zwiększyć dostępność Twojej witryny. Jako bezgłowy CMS, WordPress ułatwia zarządzanie i jest mniej ciężki. Możesz zmienić wygląd i styl swojej witryny, aby ułatwić użytkownikom korzystanie z niej. Kiedy WordPress jest używany z nowymi zintegrowanymi technologiami, jest bardzo stabilny i bardzo szybki. Oznacza to, że Twoja witryna internetowa powinna mieć możliwość zmiany sposobu działania, jej wielkości i wielkości. Bezgłowy WordPress zasilany przez React pozwala na zmianę potrzeb i aktualizacji platformy w czasie. Jest to usługa niezbędna na wszystkich platformach internetowych. Zatrudnij więc programistów ReactJS, aby mieć pewność, że Twoja witryna jest zabezpieczona przed zagrożeniami internetowymi.
Jak skonfigurować witrynę WordPress za pomocą ReactJs
Zacznijmy od skonfigurowania witryny WordPress, ponieważ będzie ona działać jako źródło danych dla naszej front-endowej aplikacji ReactJS.
Resztowy interfejs API będzie domyślnie włączony. Jeśli chcesz ograniczyć dostęp do Rest API, możesz użyć Podstawowa autoryzacja Lub Oauth2 Metoda Uwierzytelnienia
Przejdź do Ustawienia → Łącza bezpośrednie i wybierz opcję Nazwa wpisu lub Struktura niestandardowa.
Ze względu na to, że będziemy wchodzić w interakcję z API, pobierz rozszerzenie chrome dla Listonosz. Po zainstalowaniu Postmana otwórz go i wprowadź następujący adres URL:
https://example.com/wp-json/wp/v2/posts
Jeśli wpiszesz powyższy adres URL, pobierze on dane postu znajdujące się w Twojej witrynie WordPress.
Pierwsze kroki z Reactem
Co to jest ReactJS
React.js to framework JavaScript dla frontendu opracowany przez Facebooka. Nasz zespół wykorzystuje React do szybkiego i wydajnego budowania interfejsów użytkownika wielokrotnego użytku z kodem deklaratywnym w przewidywalny i wydajny sposób. Jest to darmowa platforma oparta na komponentach typu open source, służąca do projektowania warstwy wyświetlania aplikacji.
- Zgodnie z architekturą Model View Controller (MVC), ReactJs odpowiada za aplikacje mobilne i webowe, a warstwa widoku kontroluje te aplikacje.
- Jego zdolność do tworzenia aplikacji jednostronicowych i aplikacji mobilnych jest dobrze znana, a w ostatnich latach zyskała na popularności.
Konfigurowanie aplikacji React
Aby móc tworzyć aplikacje React, musisz mieć zainstalowane na swoim komputerze następujące zależności.
- NodeJS i NPM.
- Edytory tekstu, takie 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.
frontend tworzenia aplikacji npx
Po utworzeniu aplikacji przejdź cd (zmień katalog) do folderu aplikacji, a następnie wpisz następujące polecenie w wierszu poleceń, aby zainstalować pakiet Axios dla wywołań API.
Przejdź do swojego ulubionego edytora tekstu i otwórz folder. Używam kodu Visual Studio.
Uruchom aplikację wydając polecenie
Nasza aplikacja internetowa zostanie zbudowana w React z wykorzystaniem WordPressa jako bezgłowego CMS-a, jeśli wszystko pójdzie zgodnie z planem.
Stworzyć nowy folder ‘składniki‘ w środku źródło folderze i wewnątrz ‘składniki’ folderze, utwórz nowy plik „Posty.js.”
Jak renderować dane pocztowe w ReactJS
W środku ‘Posty.js plik, pobierzemy dane z API WordPress Rest. Poniżej znajduje się kod żądający punktu końcowego Rest API – a w moim przypadku tak jest „/posty” – i wyświetla dane w formacie JSON.
importuj Reaguj, { Komponent } z „reaguj” importuj osie z „axios”; klasa eksportu Posty rozszerza Komponent { stan = { posty: [], isLoaded: false } komponentDidMount () { axios.get(‘https://example.com/wp-json/wp/v2/posts/’) .then(res => this.setState({ posty: res.data , isLoaded: true })) .catch(err => console.log(err)) } render() { const {posty, isLoaded} = this.state; return (
{post.title.rendered
{post.content.rendered
)}
); } } eksportuj domyślne posty
Powyższy kod wyświetli tytuł posta i jego treść.
Teraz w pliku App.js wywołaj komponent Posts, jak pokazano poniżej.
import Reaguj z „reaguj”; importuj „./App.css”; importuj posty z ‘./components/Posts’; funkcja Aplikacja() { return (
); } eksportuj domyślną aplikację;
App.js to punkt wejścia naszej aplikacji internetowej. Dlatego ważne jest, aby odwołać się do komponentów „Posty” znajdujących się w tym pliku.
Streszczenie
Zarówno WordPress, jak i React mają dużą społeczność i zapewniają szeroki zakres funkcji. Korzystając z React with Headless WordPress, zauważysz znaczną poprawę wydajności i szybkości działania swojej witryny. Dodatkowo ułatwia przeprojektowanie i poprawia bezpieczeństwo Twojej witryny WordPress, jednak może to być mylące i może być nieco skomplikowane.
Na szczęście istnieje wielu doświadczonych i kompetentnych programistów, którzy pomogą Ci zbudować bezgłową witrynę WordPress, używając React jako technologii front-end. Nasz zespół programistów stale nadąża za postępem w rozwoju WordPressa i React JS Development, co pomaga projektować i rozwijać piękne aplikacje mobilne i internetowe oraz zapewnia najbardziej odpowiednie i kompleksowe rozwiązania dla Twojego projektu. Dowiedz się także więcej o tym, jak utworzyć bezgłową witrynę WordPress za pomocą Vue.js.
