Как использовать react в wordpress
React JS + WordPress. Cоздания блога в приложении на React JS
Nov 28, 2016 · 5 min read
В современной разработке сложных веб-проектов часто возникает задача создания блога. Блог обычно необходим для увеличения лояльности среди клиентов и улучшения поисковой выдачи ресурса за счет качественного контента. Для наилучшего UX результата блог должен быть частью веб-ресурса и не отличатся дизайном от основного ресурса.
Достичь такого результат зачастую непросто. Одним из вари а нтов может быть создания темы для популярной CMS (WordPress, Joomla, др.), которая бы повторяла основные элементы дизайна и задание перекрестных ссылок между блогом и основным ресурсом. Негативной стороной данного решения является сложность поддержки. Необходимо не только наполнять блог контентом, а еще и обновлять дизайн и ссылки в случае каких-либо изменений на основном ресурсе.
Вторым вариантом может быть интеграция с CMS по API. Данный вариант позволяет встроить данные блога непосредственно в веб-приложение. Как следствие нет необходимости создавать и поддерживать отдельную тему и навигационную структуру.
В данном примере, мы рассмотрим интеграцию приложения на React JS с WordPress. Для работы с React JS мы воспользуемся Webpack, Babel и Fetch API.
Настройка WordPress
Для работы с WordPress через API необходимо:
— установить и активировать плагин WP REST API
— настроить ЧПУ (permalinks)
Обзор API
Плагин WP Rest API добавляет публичный API для нашего блога на WordPress. Он может расширяться другими плагинами, например для получения данных из плагина Yoast, необходимо установить плагин WP REST API Yoast SEO.
Полная документация плагина доступна по адресу http://wp-api.org/
Основной путь к API /wp-json/wp/v2. Мы для интеграции будем использовать такие ресурсы:
— GET: /wp-json/wp/v2/posts — получение списка статей блога
— GET: /wp-json/wp/v2/posts/:id — получение статьи по id
Выбранные ресурсы являются публичными, поэтому для запросов к ним не требуется никакая аутентификация клиента.
Для работы с API в браузере необходимо совершать AJAX запросы на сторонний домен. В рамках данного урока рекомендуем запустить браузер с отключенными CORS http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome
Интеграция с React JS
Для примера создадим приложение из 2 страниц: список статей и контент статьи. При нажатии на заголовок статьи будем перенаправлять пользователя на страницу статьи.
Настроим базовый проект на React JS. Для этого нам понадобится Node JS 6+ и npm.
Создадим конфигурацию для webpack.
Webpack — сборщик JS приложений/модулей. Позволяет использовать node js модули в браузере. Активно используется при создании приложений с помощью React JS.
В файл webpack.confg.js необходимо добавить следующее содержание.
Этот файл настраивает вебпак на то, чтобы он:
1. Начинал сборку приложения с файла app.js
2. Результат сборки должен сохраняться в папке ` static`
3. Для всех файлов с расширением `.js` нужно применить babel-loader c настройками es2015, react
Babel — это модуль трансформации JavaScript. Он позволяет использовать в процессе разработки различные вариации синтаксиса JavaScript, а на этапе сборки преобразовывать код в чистый JavaScript.
Создадим app.js и index.html
Для того, чтобы собрать наше приложение запустим команду
Какие преимущества дает связка wordpress сайта с react?
Нашел несколько уроков как создать шаблон сайта wordpress при помощи react и несколько уроков как добавить в проект gatsby.
Скажите какие преимущества для сайта на wordpress или любой cms это дает? Правильно ли я понимаю, что в таком случае весь сайт будет не mpa, а spa, что позволит ему моментально грузиться, но мы отключим в таком случае весь функционал wordpress и будем использовать его при помощи api просто как консоль для добавления информации в проект?
Правильно ли я понял, что в таком случае мне нужно будет подключить noSql базу данных или все также можно с mysql связать?
И еще правильно ли я понял, что gatsby генератор статических сайтов и при его использовании все будет быстро работать тк будет отдаваться html файл на клиенте, но в таком случае я не смогу использовать php и функции wordpress, например, комментарии на странице?
Всем спасибо за ответы))
Простой 6 комментариев
Александр, а зачем тогда люди делают сайты на reacte если они не индексируются? вы же говорите именно об этом.
А еще стоит обратить ваше внимание на то, что я указывал генератор gatsby. Он на выходе выдает html файл на сколько мне известно и поэтому проблем с индексацией не должно быть никаких тк поисковик видит html
Во первых, Gatsby это SSG, он генерирует статичные сайты, а еще умеет генерировать PWA (сам гэтсби, к слову, именно так себя позиционирует, как PWA генератор). Это не SPA.
На счет баз данных. Внутри гэтсби для работы с данными встроен GraphiQL, он работает из коробки. При этом источниками инфы может быть что угодно, это могут быть и внутренние файлы (популярно использование markdown файлов для постов в блоге, но вообще можно хоть json или csv использовать), и какие либо API (тот же вордпресс).
На счет комментариев. Можно пользоваться сервисами для комментариев, есть попсовый https://disqus.com/ или есть опенсорсная платформа для комментариев https://commento.io/.
Вообще я часто вижу что и сайты на вордпресе все равно использую тот же дискус.
Использование WordPress с React.js
Если вы создавали WordPress сайты раньше, решение может быть не таким очевидным, как можно было бы ожидать.
Что такое безголовая CMS
Прежде чем мы перейдем к коду, может быть полезно объяснить, как мы с этим справимся.
Возможно, вы слышали модное слово «безголовый cms», если искали простой способ управления контентом для вашего проекта JAS.
Поскольку этот термин становится все более популярным, может быть полезно определить его раньше, чем позже.
По умолчанию WordPress использует темы и шаблоны, чтобы предоставить интерфейс для наших сайтов WordPress.
Создание такого сайта использует взаимодействие с базой данных и создание структуры, которую могут просматривать наши пользователи.
Использование этого метода для создания внешнего интерфейса может иметь несколько недостатков.
Во-первых, он может создавать сайты, которые не особенно эффективны.
Хотя PHP является универсальным языком, существуют лучшие решения для создания пользовательских интерфейсов для наших пользователей.
Во-вторых, WordPress обеспечивает около трети Интернета.
Из-за этого хакерам нравится пытаться проникнуть на сайты WordPress для доступа к конфиденциальным данным.
Наличие отдельного интерфейса не позволяет пользователям или хакерам узнать, что это вообще сайт WordPress.
Итак, как я могу использовать React JS, чтобы сделать это?
WordPress предоставляет REST API, который позволяет получить доступ к данным, созданным сайтом.
Мы можем использовать эту технологию с такой библиотекой, как Axios, чтобы использовать данные с нашего сайта WordPress и включить их в наш проект React.js.
Это означает, что мы можем получить лучшее из обоих слов: простота использования WordPress для управления контентом и радость создания с помощью React.js.
Использование WordPress в качестве нашего бэкенда
API TechCrunch Posts
Идите и поиграйте, чтобы увидеть, какие данные вы можете найти. Это позволит нам решить, что мы хотим использовать, а что нет.
Наше приложение React JS Starter
Вы увидите нашу простую страницу, но заметите, что там нет контента. Давайте начнем и добавим контент.
Установите необходимые пакеты
Прежде чем мы продолжим работу с нашим реагирующим приложением, нам нужно добавить еще несколько пакетов.
Мы можем добавить Axios, который является пакетом, который позволяет нам делать http-запросы из нашего приложения без каких-либо хлопот.
React-router можно использовать для создания маршрутов, что означает, что мы можем переключать страницы или компоненты без обновления браузера.
Чтобы установить эти два пакета, мы можем использовать следующий код в нашем терминале:
Установите axios и реагируйте на роутер
Добавить React Router в файл App.js
Теперь, когда у нас установлены новые пакеты, нам нужно настроить react-router наш файл app.js, чтобы сообщить нашему браузеру, что должно отображаться при вводе разных путей в адресную строку.
Для начала нам нужно импортировать нужные нам фрагменты react-router вверху файла. В нижней части импорта добавьте следующий код:
Импортировать реагирующий маршрутизатор в app.js
Наш текущий файл app.js выглядит примерно так:
Файл App.js после добавления оператора импорта
Чтобы добавить маршрутизатор к нашему app.js компоненту, нам нужно обернуть крайний компонент
Добавьте два маршрута нашего приложения
Давайте разберем это:
Наш первый маршрут сообщает responsejs, чтобы показать компонент, вызываемый, PostList когда пользователь посещает домашний маршрут ( http: // localhost: 1234 ).
Второй маршрут покажет компонент, вызываемый, PostView когда пользователь посещает маршрутный символ. :slug
В нашем случае эта строка или slug (поскольку именно так мы ее назвали) будет фрагментом для сообщения в блоге TechCrunch.
Наш app.js файл должен теперь выглядеть так:
Модифицированный файл app.js
Далее нам нужно создать PostList и PostView компоненты и импортировать их в app.js компонент.
Создание нашего компонента PostList
Прежде чем приступить к созданию нашего PostList компонента, мы должны немного подумать о том, какой компонент нам следует использовать.
Мы можем использовать как состояние, так и методы жизненного цикла в компоненте класса.
Теперь, когда у нас есть представление о том, как будет построен этот компонент, мы можем начать. Сначала мы должны создать файл для компонента:
Создайте файл для нашего компонента PostList
Затем мы должны импортировать материал, который нам понадобится для создания этого компонента.
Добавьте эти операторы импорта в начало PostList.js файла:
Добавить импорт в наш файл PostList.js
После этого мы можем создать компонент класса с именем PostList и настроить конструктор и состояние для индексной страницы нашего блога.
Наше государство должно содержать список сообщений, которые мы будем отображать.
Любые пользовательские функции, которые мы пишем в этом компоненте, будут связаны с this ключевым словом в этом конструкторе.
Установить конструктор и состояние для PostList
Теперь, когда у нас есть место для размещения данных для наших сообщений, мы должны создать метод жизненного цикла для извлечения этих данных и присвоения их нашему состоянию.
Мы можем сделать это довольно легко, добавив следующий код после нашего конструктора:
Добавьте метод жизненного цикла componentDidMount для реагирования на js-компонент
Если вы часто разрабатываете приложения React, я бы рекомендовал установить React DevTools в выбранном вами браузере.
Это делает разработку с помощью реакции JS очень простой и отслеживает данные, передаваемые через состояние и реквизиты.
Теперь мы можем проверить наше состояние, чтобы убедиться, что оно правильно заполняется из нашего componentDidMount метода жизненного цикла.
Для этого откройте инструменты разработчика в вашем браузере и перейдите на вкладку реакции. Затем мы можем углубиться в структуру до тех пор, пока не найдем наш PostList компонент, а на панели справа показано наше состояние и реквизиты.
Проверьте реакцию JS Devtools, чтобы убедиться, что состояние назначается
Поскольку у нас есть все записи в нашем состоянии, мы можем создать метод рендеринга со структурой для нашей страницы.
Чтобы сделать это простым способом, мы можем использовать map() функцию, которая будет перебирать каждый элемент в массиве.
Наш метод рендеринга может идти после нашего componentDidMount метода со следующим кодом.
Добавить метод рендеринга в PostList.js
Чтобы сделать это правильно, мы должны создать функцию для использования с dangerouslySetInnerHTML атрибутом.
Давайте добавим функцию, чтобы сделать это после нашего, componentDidMount но до render метода.
Нам также нужно связать this ключевое слово внутри нашего конструктора.
Затем мы можем использовать dangerouslySetInnerHtml атрибут для визуализации выдержки из записи в
Завершенный компонент PostList
Создание компонента PostView
Если мы оглянемся назад на наш app.js файл, то увидим, что запись в блоге будет отображаться с PostView компонентом, поэтому давайте продолжим и создадим его!
Создайте файл для нашего компонента PostView
Приведенный выше код создаст файл для размещения нашего PostView компонента и откроет его в редакторе кода по умолчанию.
Чтобы упростить задачу, мы можем просто скопировать формулу для нашего PostList компонента.
Мы можем скопировать и вставить код из нашего PostList компонента и сделать несколько небольших изменений.
Далее нам нужно componentDidMount немного изменить метод. Мы можем добавить строку кода, которая будет получать :slug URL-адрес в адресной строке, и использовать его для фильтрации сообщений, возвращаемых WordPress API, до одного сообщения.
Наконец, нам нужно изменить render метод для отображения полного сообщения, если оно существует, или не отображать ошибку, если оно не существует.
Код ниже будет использоваться для нашего завершенного PostView компонента. Взгляните на это и посмотрите, сможете ли вы заметить различия и выяснить, почему мы так с ними справились.
Код для нашего законченного компонента PostView
Последние шаги для нашего блога ReactJS
Мы в значительной степени настроены сейчас с нашим блогом. Нам нужно сделать еще несколько небольших вещей, чтобы наше приложение работало так, как мы хотим.
Во-первых, ожидается, что логотип или заголовок сайта ссылаются на домашнюю страницу. Так как мы используем react-router в нашем проекте, мы можем даже сделать это без обновления страницы. Для этого мы можем открыть components/header.js файл и изменить его так:
Наш модифицированный код для компонента Header
Проблемы производительности с React js
Вы можете заметить некоторые проблемы со скоростью загрузки или странные ощущения, когда на экране не отображается ни секунды, прежде чем показывать содержимое.
Это связано с тем, что содержимое отображается после монтирования компонента, поэтому существует небольшая задержка.
Кроме того, сканерам поисковых систем трудно читать контент на таких сайтах, как этот, потому что он загружается через javascript после отображения страницы. Есть несколько популярных способов решения этих проблем:
Gatsby.js, генератор статических сайтов
Это позволяет нам создавать сайт или приложение, используя React, React-router и Graphql прямо из коробки! Затем, когда мы на самом деле строим приложение, Gatsby.js создает статические файлы, которые делают наши приложения быстрыми.
Поскольку файлы для нашего приложения обслуживаются статически, они могут быть очень быстрыми, поскольку весь контент создается заранее, а не при рендеринге страницы.
Это может быть немного сложно, так как мы должны найти способ вызвать сборку при обновлении контента.
Next.js, серверная отрендеренная React js
Тот факт, что Next.js предлагает рендеринг на стороне сервера, также устраняет проблему с сканерами, имеющими проблемы с чтением контента. Кроме того, учебники, доступные на их сайте, довольно круты.
Это было бы отличным решением, если вы создаете приложение с использованием стека MERN, поскольку оно может обрабатывать часто меняющиеся данные.
Завершение нашего проекта WordPress и React js
Как вы можете видеть, действительно довольно легко использовать удивительный пользовательский интерфейс, предоставляемый WordPress, наслаждаясь React.js для фронтэнда.
Вы можете использовать эти инструменты в своих личных проектах, корпоративных решениях или фрилансе. Это один из тех редких случаев, когда вы получаете лучшее из обоих миров!
Заметил ошибку или есть вопросы?Рассказывай нам о них,связаться с нами ты сможешь с помощью нашего чата или же с помощью бота обратной связь
Не забывайте ставить 👍 если вам понравилась и подписаться на канал,а так же посетить наш чат.
Как включить React в тему WordPress
Дата публикации: 2020-01-15
От автора: начиная с WordPress 5.0, React (или его абстракция) теперь поставляется с WordPress. WordPress берет все библиотеки React и ReactDOM и экспортирует их в объект глобального окна с именем wp.element.
Это немного отличается от того, как работает большинство приложений React. В обычном приложении React мы импортируем React, в WordPress — нет. Обычно с приложением или проектом React вы импортируете React вверху каждого файла, который использует React. На главной индексной странице вы, вероятно, также импортировали бы ReactDOM.
В WordPress мы не импортируем React или React DOM, потому что они доступны в глобальном объекте wp.element. Поэтому одним важным отличием включения React в проект WordPress является то, что вы не импортируете его в свои файлы. Другое отличие между обычным использованием React и темой или плагином WordPress связано с инструментами.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Использование WP Scripts вместо приложения React
Если вы создали приложения React ранее, вы, вероятно, использовали Create React App или аналогичный набор инструментов для запуска сервера разработки и создания производственного кода.
Этот инструмент не подходит так же хорошо для WordPress, потому что React загружается в объект глобального окна, wp.element, не в комплекте с кодом. Create React App официально не поддерживает загрузку React из внешнего источника без извлечения, так что это не лучший вариант инструмента.
К счастью, команда WordPress создала пакет wp-scripts, основанный на пакете react-scripts, используемом с Create React App. WP Scripts по умолчанию включает команды разработки, тестирования и сборки. Вы также можете расширить его с помощью собственной конфигурации webpack, если хотите сделать что-то особенное, например, скомпилировать SASS.
Ниже мы рассмотрим, как настроить WP Scripts, но сначала давайте загрузим базовую тему с React, загруженным во фронт-энд.