Как создать скин для вашего веб-приложения с помощью React и WordPress

Итак, вы выучились на веб-инженера и теперь хотите создать молниеносно быстрый интернет-магазин для своих клиентов. Список продуктов должен появиться мгновенно, и поиск также не должен занимать больше доли секунды. Это мечта?

Уже нет. Ну, по крайней мере, это не то, чего нельзя было бы достичь с помощью комбинации REST API WordPress и React, современной библиотеки JavaScript.

Чего ждать? REST API WordPress?

Да, WordPress REST API поможет вам создать серверную основу для вашего веб-приложения. Это хороший выбор для серверной технологии вашего веб-приложения, если вы создаете решение, ориентированное на контент. WordPress будет легко взаимодействовать и с другими технологиями; вы можете использовать Node.js в качестве основного приложения для подключения к другим службам RESTful.

WordPress REST API меняет правила игры для WordPress, который теперь можно смело назвать фреймворком для веб-приложений, а не просто CMS. Теперь, когда интерфейс и серверная часть полностью разделены, WordPress можно использовать в качестве серверной части мобильного приложения или в качестве серверной части для любой системы, ориентированной на контент.

Но почему WordPress? Причина: вы будете поражены функциональными возможностями, которые появляются из коробки с WordPress. Вы получите обширное управление пользователями, управление мультимедиа и невероятно удобный для разработчиков набор API для расширения вашей работы.

В этой статье я покажу вам, как создать тему WordPress SPA (одностраничное приложение) с использованием библиотеки JavaScript под названием React и подключением к WP REST API.

Давайте перейдем к созданию темы

В этой статье предполагается, что вы уже знакомы с различными существующими API-интерфейсами WordPress, особенно с теми, которые способствуют разработке тем для эстетики вашего сайта и функциональных возможностей плагинов вашего сайта. Я также предполагаю, что вы настроили свою платформу разработки для WordPress, такую ​​как стек LAMP в среде Linux или MacOS.

Однако для простоты я буду ссылаться только на абсолютные пути, которые видны на платформе XAMPP, используемой в Windows.

Теперь давайте создадим экземпляр WordPress на нашем локальном хосте, назвав его «Celestial». Это название темы WordPress, которую мы собираемся использовать, чтобы задать направление для создания будущих тем, готовых к использованию с веб-приложениями на базе WordPress REST API. Возможно, вы уже знакомы с любимой иерархией шаблонов WordPress, но с REST API у вас есть возможность открыть для себя что-то новое!

Затем нам нужно создать папку для темы в папке wp-content\themes . Перейдите в C:\xampp\htdocs\celestial\wp-content\themes\ (или аналогичный) и создайте папку celestial . Добавьте эти файлы в папку celestial темы:

1. index.php
   Универсальный файл для темы.
2. style.css
   Он содержит информацию о теме (а не фактический CSS).
3. functions.php
   Написать функционал и импорт файлов CSS и JS.

Добавьте файл изображения с именем screenshot.jpg , если вы хотите, чтобы изображение для вашей темы отображалось внутри панели инструментов.

Примечание . Код каждого файла состоит из нескольких строк, и его можно найти на GitHub .

Затем войдите в свою панель управления WordPress, перейдите в раздел « Внешний вид » → « Темы » и выберите «Небесная» в качестве темы. Теперь, когда основа готова, давайте приступим к созданию темы.

Начало работы с React и Webpack для темы

React — очень популярная библиотека пользовательского интерфейса, поддерживаемая и поддерживаемая Facebook. Согласно результатам опроса разработчиков Stack Overflow за 2017 год, «React больше всего нравится разработчикам».

Для запуска проекта вам необходимо инициализировать проект как проект NPM (Node Package Manager). Это делается с помощью команды npm init в терминале (после установки Node.js и NPM на ваш компьютер). При инициализации проекта вам будет предложено ввести определенную информацию о конфигурации. После успешной инициализации NPM создаст файл package.json в корневом каталоге темы. Этот файл будет включать в себя детали проекта и все зависимости проекта.

React теперь находится под лицензией MIT, поэтому мы будем использовать версию 16 React в качестве библиотеки JavaScript для этого проекта. В React есть несколько интересных функций, таких как виртуальный DOM (представление документа в памяти), и множество окружающих его инструментов, таких как React Router. React также используется в WordPress Project Calypso — приборной панели для WordPress.com.

Теперь мы установим необходимые пакеты NPM в проект:

1. Введите npm install --save react react-dom в терминале и нажмите Enter, чтобы установить пакеты.

   

   Поскольку мы создаем тему как одностраничное приложение (SPA), нам нужна помощь такого инструмента, как Webpack. Мы будем писать код как разные компоненты, а Webpack поможет нам упаковать их все вместе и вывести в виде одного файла .js или .css. Короче говоря, это сборщик модулей.
   
   Webpack сначала должен быть установлен глобально на вашем компьютере. Для этого мы снова можем использовать NPM.
2. Введите команду npm install -g webpack , чтобы получить последнюю стабильную версию Webpack, установленную глобально в вашей системе.
   
   Далее мы установим в наше приложение пакеты NPM, поддерживающие Webpack.
3. Перейдите к файлу package.json в моем репозитории git и скопируйте остальные зависимости оттуда в раздел зависимостей вашего package.json . Затем снова запустите npm install , чтобы установить все пакеты в package.json .

    { "name": "celestial", "version": "1.0.0", "description": "A basic theme using the WordPress REST API and React", "main": "index.js", "dependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.1", "file-loader": "^1.1.5", "image-webpack-loader": "^3.4.2", "node-sass": "^4.5.3", "path": "^0.12.7", "react": "^16.0.0", "react-dom": "^16.0.0", "react-router-dom": "^4.2.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack": "^3.6.0" }, "devDependencies": {}, "scripts": { "build": "webpack", "watch": "webpack --watch" }, "keywords": [ "blog", "decoupled", "react", "rest-api" ], "author": "Muhammad Muhsin", "license": "GPL-3.0" }

   
   Выше приведен список всех необходимых пакетов в файле package.json для этого проекта.
4. Скопируйте конфигурации из GitHub и вставьте их в файл webpack.config.js папки вашей темы.

    var ExtractTextPlugin = require("extract-text-webpack-plugin"); var path = require('path'); module.exports = { entry: { app: './src/index.jsx' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader','sass-loader'], publicPath: 'dist' }) }, { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.(jpe?g|png|gif|svg)$/i, use: [ 'file-loader?name=[name].[ext]&outputPath=images/&publicPath=https://localhost/celestial/wp-content/themes/celestial/dist/images', 'image-webpack-loader' ] }, { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000&name=fonts/[name].[ext]' }, { test: /\.(ttf|eot)$/, loader: 'file-loader?name=fonts/[name].[ext]' } ] }, resolve: { extensions: ['.js', '.jsx'] }, plugins: [ new ExtractTextPlugin({ filename: "style.css", allChunks: true }) ] }

   
   Важно : обратите внимание, что module.exports → module → rules[3] → use → publicPath может меняться в зависимости от того, где на локальном хосте расположены дистрибутивные образы вашего проекта. Если это неправильно, изображения могут отображаться неправильно в веб-приложении.
5. После этого эти команды можно использовать для компиляции проекта:
   • webpack или npm run build для компиляции проекта, или
   • webpack --watch или npm run watch для компиляции проекта и отслеживания изменений.

Примечание . Чтобы лучше понять Webpack, прочитайте эту статью Джозефа Циммермана в Smashing Magazine .

Расширение REST API WordPress

WordPress REST API поставляется с множеством различных конечных точек для получения сообщений, страниц, мультимедиа и так далее. Однако они не всегда могут иметь все детали в своем ответе. Например, метод posts не дает URL-адрес избранного изображения или имя автора. Следовательно, мы должны делать отдельные вызовы для каждого из этих элементов.

Но что, если вы хотите, чтобы ваши собственные данные отображались в ответах на сообщения? Вот тут-то и появляется магия расширения REST API. Следующий код добавит две дополнительные переменные в ответ на запрос публикации , а именно author_name и featured_image_src . Код находится в файле functions.php :

 // Add various fields to the JSON output function celestial_register_fields() { // Add Author Name register_rest_field( 'post', 'author_name', array( 'get_callback' => 'celestial_get_author_name', 'update_callback' => null, 'schema' => null ) ); // Add Featured Image register_rest_field( 'post', 'featured_image_src', array( 'get_callback' => 'celestial_get_image_src', 'update_callback' => null, 'schema' => null ) ); // Add Published Date register_rest_field( 'post', 'published_date', array( 'get_callback' => 'celestial_published_date', 'update_callback' => null, 'schema' => null ) ); } add_action( 'rest_api_init', 'celestial_register_fields' ); function celestial_get_author_name( $object, $field_name, $request ) { return get_the_author_meta( 'display_name' ); } function celestial_get_image_src( $object, $field_name, $request ) { if($object[ 'featured_media' ] == 0) { return $object[ 'featured_media' ]; } $feat_img_array = wp_get_attachment_image_src( $object[ 'featured_media' ], 'thumbnail', true ); return $feat_img_array[0]; } function celestial_published_date( $object, $field_name, $request ) { return get_the_time('F j, Y'); }

Глобальная переменная JavaScript

Существуют определенные константы WordPress (или известные как «переменные»), которые мы будем использовать в приложении React. Это будет информация о различных маршрутах приложения (а позже и о конкретных маршрутах WooCommerce).

Эта переменная определена в файле functions.php . Он будет называться CelestialSettings и будет добавлен к celestial-scripts , дескриптору поставленного в очередь файла app.js :

 wp_enqueue_script( 'celestial-script', get_stylesheet_directory_uri() . '/dist/app.js' , array(), '1.0', true ); $url = trailingslashit( home_url() ); $path = trailingslashit( parse_url( $url, PHP_URL_PATH ) ); wp_scripts()->add_data( 'celestial-script', 'data', sprintf( 'var CelestialSettings = %s;', wp_json_encode( array( 'title' => get_bloginfo( 'name', 'display' ), 'path' => $path, 'URL' => array( 'api' => esc_url_raw( get_rest_url( null, '/wp/v2' ) ), 'root' => esc_url_raw( $url ), ), 'woo' => array( 'url' => esc_url_raw( 'https://localhost/celestial/wp-json/wc/v2/' ), 'consumer_key' => 'ck_803bcdcaa73d3a406a0f107041b07ef6217e05b9', 'consumer_secret' => 'cs_c50ba3a77cc88c3bf46ebac49bbc96de3a543f03' ), ) ) ) );

В приведенном выше коде показан пример получения переменных WordPress (PHP) во внешнем интерфейсе, что является важным и очень полезным методом при создании несвязанной темы. Эта объектная переменная содержит заголовок сайта, путь, URL-адрес API и корень, а также три переменные, относящиеся к WooCommerce (поясняется позже).

Реагировать и JSX

React отличается от остальных основных библиотек JavaScript. Я имею в виду, что мы обычно пишем JavaScript в нашем HTML. Однако когда дело доходит до React, мы пишем HTML внутри нашего кода JavaScript. Чтобы быть более точным, мы пишем JSX внутри JS. JSX очень похож на HTML, но имеет несколько отличий. Атрибут class записывается, например, как className . Затем он преобразуется в простой JavaScript через Webpack и Babel и сохраняется в app.js.

Однако есть несколько ограничений при написании JSX. Например, у нас может быть только один дочерний элемент в нашем методе render() , который будет служить корневым элементом для компонента. Однако преимущество в том, что его легче отлаживать. Мы можем точно знать, где допустили ошибку, тогда как в обычном HTML наша ошибка обычно не отображается явно. Мы будем писать JSX для этого проекта, поэтому файлы JavaScript будут иметь расширение .jsx . Однако это также может быть .js , если вы этого хотите.

Создайте следующие файлы в папке src :

1. index.jsx (основной файл и тот, который содержит конфигурации React Router)
2. header.jsx (компонент заголовка)
3. footer.jsx (компонент нижнего колонтитула)
4. posts.jsx (для архива постов)
5. post-list.jsx (компонент для отдельного поста в posts.jsx )
6. post.jsx (для одного поста)
7. products.jsx (содержит все продукты из WooCommerce)
8. product.jsx (отображает один товар из WooCommerce)
9. style.scss (чтобы содержать весь код CSS в формате SASS)

ReactDOM.render()

Файл index.jsx является корнем проекта. Под этим я подразумеваю, что index.jsx содержит компонент App, который отображается в DOM.

 import { render } from 'react-dom'; // importing render from ReactDOM const App = () => ( // defining the routes <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> // the root path </Switch> </div> <Footer /> </div> ); // React Router const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( // rendering to the DOM by replacing #page with the root React component (routes), document.getElementById('page') // rendering the route );

Другие компоненты указаны в React Router и будут загружены при посещении различных маршрутов.

Вот как мы пишем модульные компоненты, где все различные компоненты в конечном итоге заканчиваются на index.jsx .

Компоненты с сохранением состояния и компоненты без состояния

Вы могли заметить, что компоненты записываются одним из следующих двух способов:

1. const App = () => (
2. class Post extends React.Component {

Первый способ — это то, как мы пишем компоненты без состояния, а второй — пример компонентов с состоянием. Без гражданства означает, что компонент не имеет «состояния». «Состояние» — это, по сути, переменная, содержащая информацию внутри компонента, и каждый раз, когда переменная изменяется, компонент перерисовывается. Компоненты с отслеживанием состояния также известны как «интеллектуальные компоненты». Таким образом, переменные состояния используются для внутренней связи внутри этого компонента.

Второй тип, компоненты без состояния, не имеют в себе переменной состояния и иногда называются «тупыми компонентами». Однако, как и у компонентов с отслеживанием состояния, у них есть «реквизиты», которые являются свойствами, передаваемыми им от их родительских компонентов.

Компоненты с состоянием имеют методы жизненного цикла React, тогда как компоненты без состояния имеют только метод render() , который является для него методом по умолчанию.

Реагировать на методы жизненного цикла

Это методы, вызываемые на разных этапах жизненного цикла компонента, которые мы можем переопределить для запуска нашего собственного кода в этих экземплярах. В нашем приложении мы используем следующие методы:

• constructor()
  Вызывается перед монтированием компонента.
• componentDidMount()
  Вызывается сразу после монтирования компонента.
• render()
  Метод, вызываемый для рендеринга содержимого JSX (HTML).
• componentDidUpdate()
  Вызывается при обновлении компонента.
• componentWillUnmount()
  Вызывается, когда компонент должен быть удален.

Примечание . Чтобы узнать больше о Компонентах и ​​их жизненном цикле, прочитайте документацию здесь .

Обещания JavaScript

Мы собираемся использовать обещания JavaScript для получения данных из нашего WordPress REST API. Во-первых, у нас есть URL-адрес REST API в нашем functions.php , куда мы добавили его как переменную JavaScript, к которой мы можем получить доступ из внешнего интерфейса.

Мы будем использовать метод fetch API JavaScript для получения данных из разных конечных точек. Мы добавляем загрузчик, чтобы показать пользователю, когда контент извлекается:

 getMorePosts() { var that = this; var totalPages; // adding a loader jQuery("#loader").addClass("active"); this.setState({ page: this.state.page + 1 }); fetch(CelestialSettings.URL.api + "/posts/?page=" + this.state.page) .then(function (response) { for (var pair of response.headers.entries()) { // getting the total number of pages if (pair[0] == 'x-wp-totalpages') { totalPages = pair[1]; } if (that.state.page >= totalPages) { that.setState({ getPosts: false }) } } if (!response.ok) { throw Error(response.statusText); } return response.json(); }) .then(function (results) { var allPosts = that.state.posts.slice(); results.forEach(function (single) { allPosts.push(single); }) that.setState({ posts: allPosts }); // removing the loader jQuery("#loader").removeClass("active"); }).catch(function (error) { console.log('There has been a problem with your fetch operation: ' + error.message); jQuery("#loader").remove(); }); }

Использование маршрутизатора React

React Router — это библиотека, которая будет обрабатывать маршрутизацию на стороне клиента для нашего приложения. Маршрутизация на стороне сервера возможна с WordPress, но для достижения настоящего SPA нам нужна помощь React Router.

Начиная с версии 4, React Router был разбит на три пакета: react-router , react-router-dom и react-router-native . Мы будем использовать react-router-dom для этого проекта, поскольку именно он используется в веб-приложениях.

Поскольку react-router-dom уже установлен, мы можем записать конфигурацию маршрутизатора в файл index.jsx . Код будет следующим:

 const App = () => ( <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> <Route exact path={CelestialSettings.path + 'posts/:slug'} component={Post} /> <Route exact path={CelestialSettings.path + 'products'} component={Products} /> <Route exact path={CelestialSettings.path + 'products/:product'} component={Product} /> <Route path="*" component={NotFound} /> </Switch> </div> <Footer /> </div> ); // Routes const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( (routes), document.getElementById('page') );

Приведенный выше код позаботится обо всей маршрутизации, обрабатываемой на стороне клиента. * в последней строке означает, что любой другой маршрут, не упомянутый выше, приведет пользователя на страницу «404 Not Found».

Тег <Link to=""> используется вместо тега <a href=””> для связи между разными страницами с помощью React Router:

 <div className="navbar-nav"> <Link className="nav-item nav-link active" to={CelestialSettings.path} >Home <span className="sr-only">(current)</span></Link> <Link className="nav-item nav-link" to={CelestialSettings.path + "products/"} >Products</Link> </div>

Получение тестовых данных

Теперь, когда вы создали тему, пришло время добавить некоторые данные. Одним из способов добавления данных является создание собственного контента. Однако есть более простой (и лучший) способ добавления данных на наш сайт WordPress. Этот метод импортирует данные заполнителя из внешнего источника:

• Перейдите на страницу https://codex.wordpress.org/Theme_Unit_Test и загрузите данные модульного теста темы.
• Перейдите в « Инструменты» > «Импорт» > «WordPress» , чтобы установить средство импорта WordPress.
• После установки импортера WordPress нажмите «Запустить импортер».
• Нажмите «Выбрать файл» в импортере.
• Выберите загруженный файл и импортируйте данные модульного теста темы WordPress.

Теперь вам нужно выбрать файл theme-unit-test-data.xml , и весь контент-заполнитель теперь находится на вашем сайте.

Интеграция с WooCommerce

Теперь мы готовы запустить наш магазин с помощью React. Для этой цели мы будем использовать файлы products.jsx и product.jsx , код которых похож на posts.jsx и p ost.jsx соответственно.

Мы добавим еще три переменные в CelestialSettings в разделе «woo» (см. «Глобальная переменная JavaScript»):

1. URL-адрес
2. consumer_key
3. consumer_secret

Ключ потребителя и секрет потребителя должны быть сгенерированы из Dashboard → WooCommerce → Settings → API → Keys/Apps .

Для URL-адреса woo вы должны добавить его вручную (поскольку WooCommerce разрешает передачу только через SSL, добавьте URL-адрес с https, то есть https://localhost/celestial/wp-json/wc/v2/ ).

Скопируйте ключ потребителя и секрет потребителя и вставьте их в соответствующие места в functions.php . Это будет служить аутентификацией для доступа к WooCommerce через вызов API.

Посетите документацию WooCommerce REST API для получения дополнительной информации о его API. В файле products.jsx есть код для заполнения магазина продуктами. Продукты могут быть добавлены администратором с панели инструментов. Просто перейдите в « Панель управления » → « Продукты » → « Добавить новый » и введите сведения о продукте.

Когда вы нажмете на определенный продукт, вы попадете на страницу product.jsx :

Код приведенной выше страницы аналогичен post.jsx :

 renderProduct() { return ( <div className="card"> <div className="card-body"> <div className="col-sm-4"><img className="product-image" src={this.state.product.images ? this.state.product.images[0].src : null} alt={this.state.product.images ? this.state.product.images[0].alt : null } /></div> <div className="col-sm-8"> <h4 className="card-title">{this.state.product.name}</h4> <p className="card-text"><strike>${this.state.product.regular_price}</strike> <u>${this.state.product.sale_price}</u></p> <p className="card-text"><small className="text-muted">{this.state.product.stock_quantity} in stock</small></p> <p className="card-text">{jQuery(this.state.product.description).text()}</p> </div> </div> </div> ); }

Постоянные ссылки

Чтобы тема работала правильно, мы должны установить следующие постоянные ссылки в Dashboard → Settings → Permalinks :

1. В разделе « Общие настройки » → « Пользовательская структура »: https://localhost/celestial/posts/%postname%/

2. В разделе «Постоянные ссылки на товары» → « Пользовательская база» : /products/

Если вы не установите постоянные ссылки, как указано выше, тема может работать не так, как хотелось бы.

Исправление WooCommerce

Когда вы перейдете к localhost/celestial/products , скорее всего, вы получите пустое место, где должны быть загружены продукты. Это происходит потому, что WooCommerce нужны аутентифицированные запросы, тогда как наш локальный хост не является https. Чтобы устранить проблему:

1. Посетите https://localhost/celestial/wp-json/wc/v2/products. Это даст нам предупреждение:

1. Нажмите «ДОПОЛНИТЕЛЬНО» > «Перейти к локальному хосту (небезопасно)» .
2. Теперь, если вы вернетесь на страницу товаров, товары будут отображаться правильно.

Примечание . Если вы используете Valet на Mac, вам необходимо запустить Valet Secure на своем сайте, чтобы защитить локальный сайт с помощью сертификата TLS. Это еще один способ решения проблемы.

Что такое ScrollMagic?

ScrollMagic — это библиотека, которая позволяет нам выполнять определенные действия при прокрутке страницы. Чтобы использовать ScrollMagic, мы добавим JavaScript-библиотеку ScrollMagic в functions.php . Мы используем ScrollMagic для двух экземпляров в этом проекте:

1. Для ленивой загрузки сообщений в компоненте posts.jsx :

    componentDidMount() { var that = this; window.onbeforeunload = function () { window.scrollTo(0, 0); } // init ScrollMagic Controller that.state.controller = new ScrollMagic.Controller(); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#colophon", triggerHook: "onEnter" }) .addTo(that.state.controller) .on("enter", function (e) { if (that.state.getPosts && that.getMorePosts !== null) { that.getMorePosts(); } }); }

   
   Ленивая загрузка сообщений в компоненте posts.jsx
2. Чтобы показать плавную анимацию для сообщений, появляющихся при прокрутке сообщений и продуктов в компонентах posts.jsx и products.jsx соответственно:

    componentDidUpdate() { var FadeInController = new ScrollMagic.Controller(); jQuery('.posts-container .col-md-4.card-outer').each(function () { // build a scene var FadeInScene = new ScrollMagic.Scene({ triggerElement: this.children[0], reverse: false, triggerHook: 1 }) .setClassToggle(this, 'fade-in') .addTo(FadeInController); }); }

   
   Применение плавной анимации для сообщений, которые появляются при прокрутке

Теперь мы готовы просмотреть нашу тему из внешнего интерфейса. Перейдите к localhost/celestial в веб-браузере и посмотрите, как работает ваша тема.

И похлопайте себя по плечу, потому что вы успешно создали тему!

Другие темы WordPress с библиотеками JavaScript

Если вы нашли это полезным, вы можете взглянуть на другие замечательные несвязанные темы WordPress, созданные с использованием современных библиотек/фреймворков JavaScript:

• Foxhound: первая отдельная тема, попавшая в репозиторий тем WordPress. Эта тема, написанная Келли Дван, использует React, Redux и React Router.
• Anadama React: еще одна тема от того же автора, но с использованием Flux вместо Redux и Page вместо React Router.
• Уоллес: Эта тема, написанная Кирби, использует Angular с API REST WordPress.
• Пикард: Написано самими Automattic для демонстрации возможностей WordPress REST API.
• React Verse: тема React и Redux, которую я написал на основе Foxhound.

Следующие шаги

Основные разделы, которые я хотел вам показать, теперь готовы. Вы можете продолжить создание проекта для получения дополнительных знаний. Вот некоторые рекомендации, которые вы могли бы выполнить:

1. Полноценный магазин с плагином WooCommerce, включая кассу и корзину;
2. Страница для архива, тега, таксономии и т. д.;
3. Управление состоянием с помощью Redux или Flux.
   

Удачи и удачного кодирования!