Розуміння налаштування Frontity React Framework для WordPress

Frontity — це гарячий новий інтерфейс-фреймворк для створення швидких веб-сайтів WordPress

WordPress вже довгий час є найпопулярнішою системою керування вмістом. Він не тільки забезпечує роботу понад 30% веб-сайтів в Інтернеті, але також може похвалитися величезною спільнотою учасників, які підтримують екосистему WordPress живою та сильною.

WordPress – це передусім серверне програмне забезпечення на основі PHP. Існують тисячі користувальницьких покращень і розширень для WordPress, які в основному представлені у формі плагінів на основі PHP. Таким чином, не дивно, що було багато спроб інтегрувати не PHP-фреймворки з WordPress, особливо фреймворки Javascript, які швидко займають простір Frontend у веб-розробці.

Однією з таких фреймворків, яка дійсно піднялася в хіт-параді, є фреймворк React.js для WordPress під назвою Frontity. Він розроблений стартапом з Іспанії. Розробка Frontity триває вже кілька років. Однак нещодавно компанія зібрала 1 мільйон євро на чолі з компанією, що стоїть за WordPress, Автоматичний та фірма венчурного капіталу KFund. Щоб зрозуміти причину цього, спочатку важливо зрозуміти, що таке фреймворк Frontity і які переваги він приносить.

Що таке Frontity?

Перш ніж ми дізнаємося про Frontity, важливо знати основну архітектуру WordPress. Як ви, можливо, знаєте, WordPress — це серверне програмне забезпечення на основі PHP. Це вимагає серверного програмного забезпечення, такого як Apache або Nginx, для обслуговування запитів, і програмного забезпечення бази даних, наприклад MySQL, для зберігання даних (повідомлень, сторінок, користувачів тощо).

Архітектура WordPress

Як тільки ви відкриєте, скажімо, головну сторінку веб-сайту WordPress, вона подзвонить index.php файл у серверній частині, який поверне HTML, CSS та JS для домашньої сторінки, яка потім відобразиться у браузері. Таким чином, PHP діє як загальний інтерфейс шлюзу (CGI) для веб-сайту, і тому будь-які вдосконалення інтерфейсу мають базуватися на PHP.

Фронтальна архітектура

Оскільки Frontity є a React-based framework, давайте спочатку трохи поговоримо про React JS. React — це інтерфейсний фреймворк Javascript, розроблений та опублікований Facebook. Він надзвичайно популярний завдяки своїй зручності у створенні швидких, стабільних та чуйних інтерфейсів. React працює як модуль Node JS, і, отже, веб-сайт, що використовує React, повинен бути заснований на сервері Node JS.

Тепер, якщо ви хочете використовувати чисто Javascript-фреймворк, такий як React, для покращення інтерфейсу, тобто для створення користувацьких тем, зробити це буде громіздко. Причина в тому, що такий фреймворк, як React, працює разом з Node, який запускає власний сервер. І, як ми вже згадували раніше, WordPress працює з сервером PHP CGI на сервері. Таким чином, немає простого способу створювати власні теми та інтерфейси користувача за допомогою React для WordPress.

Однак є спосіб отримати дані з бази даних WordPress віддалено. Це можна зробити за допомогою WordPress REST API, який повністю інтегрований в ядро ​​WordPress, починаючи з версії WP 4.7 і вище. Якщо ми можемо отримувати дані WordPress віддалено, це означає, що тепер ми можемо відображати отримані дані так, як ми хочемо. Користувачі вже давно використовують REST API для розробки спеціальних програм, веб-сторінок для доступу до даних WordPress безпосередньо з бази даних. Ці типи систем управління вмістом (CMS) також називаються безголовий CMS.

Frontity заснований саме на цій концепції. Він підключається до бази даних WordPress через REST API, займається аналізом та організацією отриманих даних. Вам залишається лише те, яку тему ви хочете використовувати для відображення веб-сайту. Оскільки вона заснована на React, для веб-сайту можна використовувати будь-яку тему React. Ви також можете розробити свою власну тему, якщо хочете. Інтерфейс WordPress на основі PHP все ще використовуватиметься творцями/адміністраторами для створення вмісту або зміни налаштувань. Але інтерфейс на основі Frontity буде використовуватися як головна сторінка веб-сайту.

Таким чином, у налаштуванні Frontity будуть потрібні два сервери: один — сервер WordPress, який має запущений і запущений API REST і повертає дані WordPress, а другий — сервер Node JS, який запускає Frontity для виклику REST API та відображення даних за допомогою React. .

Шлях вперед?

Оскільки компанія, яка стоїть за WordPress, збирає 1 мільйон євро, а React забезпечує багатий досвід роботи з WordPress, не буде перебільшенням сказати, що Frontity — це шлях вперед для сучасних веб-сайтів на базі WordPress. Інтерфейс WordPress і надалі використовуватиметься як інформаційна панель для створення контенту, а частина дисплея буде переміщена на сервер Frontity.

Детальніше про Frontity можна прочитати тут. Якщо у вас є веб-сайт WordPress і ви хочете спробувати Frontity, ви можете виконати вказані тут дії.