Как использовать контент WordPress с Gatsby

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

Для того, чтобы создать статический веб-сайт с помощью «обезглавленного» WordPress в интернете есть ряд инструкций, которые, на мой взгляд, сильно разбросаны, попадались пара статей со старыми данными, а общего мануала по интеграции API WordPress с Gatsby на русском языке не так уж много. Большинство статей и инструкций на английском языке. Мне потребовалось неделю, чтобы найти верные решения.

Что нам потребуется?

Не буду описывать весь процесс установки Gatsby, его настройку, работу с ним, как подключить плагины, полагаю, вы люди знающие, а сам процесс настройки WordPress вам не чужд тоже. Все что, нам потребуется – это ряд плагинов и внимательно изучить их инструкции.

Как это работает?

Для извлечения данных WordPress из API нам потребуется плагин WPGraphQL, который включает API GraphQL и обеспечивает доступ ко всем общедоступным данным WordPress через API GraphQL без проверки подлинности. Плагин добавляет новую вкладку в панель WordPress, и вы сможете быстро опробовать запросы GraphQL и увидеть возвращаемые данные. Подробности на сайте https://www.wpgraphql.com

Дальше

Обязательные плагины для установки: WPGatsby (устанавливается на стороне WP) и gatsby-source-wordpress (установить на стороне Gatsby). 

Настройки gatsby-source-wordpress простые. Единственная опция плагина, необходимая для правильной работы – указать полный URL-адрес вашего эндпоинта GraphQL. Его вы можете узнать в настройках плагина WPGraphQL.

{

  resolve: `gatsby-source-wordpress`,

  options: {

    url: `https://yoursite.com/graphql`,

  },

}

Плагин по умолчанию делаю большую часть своей работы. Автоматически настраивает ссылки в html полях, изображения в html автоматически загружаются, а теги изображений заменяются на gatsby-image.

Не стоит упускать возможность добавить AFC (Advanced Custom Fields) в WP, и чтобы получить поля ACF для схемы WPGraphQL нам потребуется установить плагин WPGraphQL for Advanced Custom Fields. В настоящее время плагин недоступен в репозитории WordPress.org, поэтому его можно загрузить из Github. 

Если вы используете Yoast SEO в WP, вы можете установить на WordPress плагин wp- WPGraphQlYoast SEO (graphql-yoast-seo), что позволит создать дополнительное поле в GraphQL для SEO-данных из YOAST. Для лучшей интеграции можно использовать плагин gatsby-plugin-wpgraphql-seo. Этот плагин берет данные из WPGraphQL и WPGraphQlYoast SEO и предоставляет вам метатеги и схему JSON+LD в Gatsby. Последнее обновление датировано 26 июля 2021 – несколько настораживает.

Ну и последнее, что мне потребовалось установить – это плагин @wordpress/block-library. Если вы используете Gutenberg и хотите добавить стили для поддержки этих блоков на сайты Gatsby, нам нужно импортировать стили из репозитория @wordpress/block-library.

Тут можно остановиться. Конечно, были другие нюансы и вопросы, которые заслуживают отдельного внимания. Каждый я попытаюсь описать отдельно. Опять же, сам процесс построения связи с WP и Gatsby, передача данных, как и сам процесс создания веб сайта, основанный на это союзе, затяжной и энергоемкий. Но в этом есть свои преимущества и прелесть. Лично я получил удовольствие. Да здравствует союз Gatsby и WordPress!