Как создать свой первый безголовый проект WordPress с помощью ACF + WPGraphQL

У каждого есть свои любимые инструменты, когда дело доходит до разработки WordPress, и идея создания безголового сайта без этих инструментов может быть сложной. К счастью, два любимых инструмента разработчиков WordPress — ACF и WPGraphQL — могут помочь вам окунуться в безголовую разработку.

На этой сессии старший защитник разработчиков WP Engine Джефф Эверхарт демонстрирует все тонкости инфраструктуры, создавая демонстрационный сайт всего за несколько минут с помощью Atlas!

Слайды сессии:

Стенограмма:

ДЖЕФФ ЭВЕРХАРТ: Как дела? Меня зовут Джефф Эверхарт, старший защитник разработчиков здесь, в WP Engine. Большое спасибо, что присоединились к моему сегодняшнему разговору о создании вашего первого безголового проекта WordPress с ACF и WP GraphQL. Прежде чем приступить к созданию, я всегда хотел бы дать некоторый контекст о том, что такое безголовый WordPress. Похоже, термин «безголовый» становится менее нишевым и более популярным, поэтому я постараюсь сделать объяснение кратким.

Безголовый WordPress по своей сути — это использование WordPress CMS через API для запуска приложений другого типа. Если мы посмотрим на диаграмму на этом слайде, когда пользователь запрашивает site.com/page, вместо того, чтобы WordPress обрабатывал этот запрос, приложение JavaScript отвечает на этот маршрут. Он просматривает путь, определяет, какие данные ему нужны из WordPress или других источников, вызывает эти API и генерирует ответ пользователю.

Важно отметить, что в этом слоте среды выполнения Node.js действительно может быть любое количество различных типов приложений или клиентов. Мы видели различные примеры мобильных приложений или веб-сайтов, созданных с использованием всех самых популярных фреймворков, с большим успехом использующих этот шаблон. Теперь, когда у вас есть хорошее представление о том, что такое безголовый WordPress, давайте пройдемся по стеку технологий, который мы собираемся использовать в сегодняшнем проекте.

На самом заднем уровне мы будем использовать WP GraphQL в качестве нашего API. WP GraphQL превращает ваш сервер WordPress в мощный API GraphQL. Он применяет все те же проверки безопасности ролей и возможностей, что и собственный WordPress и основной REST API. WP GraphQL — отличный выбор для разработки безголовых приложений, потому что, используя его декларативный язык запросов, мы можем запрашивать различные типы контента во всем этом контенте. Таким образом, получение сообщений, страниц с их категориями в одном запросе.

Теперь давайте посмотрим, как мы можем структурировать и моделировать более сложные данные с помощью WordPress CMS. Многим разработчикам, работающим над безголовыми проектами, нужно моделировать и хранить разные данные, верно? Выходит за рамки типичных сообщений или страниц WordPress. ACF или расширенные настраиваемые поля — отличный инструмент для моделирования этих настраиваемых полей. В следующем выпуске он станет еще более мощным, позволяя вам регистрировать типы сообщений и таксономии непосредственно в пользовательском интерфейсе в бесплатной версии этого плагина.

Он легко делает все данные доступными через REST API, но для добавления некоторых данных из этих полей в нашу схему GraphQL потребуется установить расширение WP GraphQL. Лично я очень рад видеть, как этот плагин развивается, поскольку он становится более мощным для безголовых разработчиков.

Теперь, когда мы можем моделировать сложные данные и запрашивать их через WP GraphQL, нам нужен какой-то способ создать эти современные веб-интерфейсы для наших пользователей, а также поддерживать редакторов контента, которые уже знают и любят WordPress. Вот тут-то и появляется Faust. Faust — это двухкомпонентный фреймворк, состоящий из плагина WordPress и фреймворка JavaScript на основе Next.js. Они работают вместе, чтобы сделать создание безголовых сайтов WordPress простым и интуитивно понятным.

Он добавляет поддержку таких вещей, как предварительный просмотр сообщений и аутентификация из коробки, и вы можете использовать переосмысленную иерархию шаблонов WP в современном JavaScript. Faust.js стремится стать очень расширяемой платформой и поставляется с системой подключаемых модулей и панелью администратора, которую вы можете использовать для настройки и создания опыта, который поддерживает ваш конкретный вариант использования.

И последнее, но не менее важное: нам понадобятся некоторые способы работы с этими инструментами локально и в рабочей среде. Используя локальную миграцию и миграцию WP, я собрал все ресурсы WordPress, которые вам понадобятся для этого проекта, в один zip-файл, который вы можете перетащить в локальную папку, чтобы начать работу. Как только мы закончим создание нашего сайта, мы сможем перенести нашу работу на платформу Atlas. Atlas WP Engine — это универсальное решение для безголового хостинга, которое сочетает в себе серверную часть WordPress и контейнер Node.js, настроенные для совместной работы, доступные через единую панель управления.

Итак, теперь, когда вы хорошо разобрались со всеми инструментами, которые мы будем использовать в сегодняшней презентации, давайте сразу приступим к созданию. Откройте URL-адрес на этом слайде, чтобы получить доступ к демонстрационному коду в браузере. Я постарался сделать этот опыт как можно более простым для понимания, но в следующие 25 минут мы рассмотрим многое, так что не стесняйтесь просто смотреть сейчас и возвращаться к этому репозиторию GitHub и запись этого сеанса позже, чтобы продолжить работу после конференции. Если остальная часть декодирования — это автомобильное шоу, то эта сессия посвящена сборке двигателей. Каламбур полностью задуман.

Теперь, когда у нас открыт репозиторий GitHub, давайте начнем. Первое, что я рекомендую вам сделать, это сделать форк этого репозитория в своей учетной записи. Если вы посмотрите, что содержится в этом репозитории, вы увидите кучу примеров кода, а также пошаговые инструкции в файле readme для всего, что мы будем делать в этой презентации. На самом деле, мы будем много копировать и вставлять прямо из этого репозитория в ваш проект. Чтобы клонировать это локально, давайте продолжим и запустим команду Git clone внутри вашего терминала.

Загрузка займет всего секунду, а затем, как только мы загрузим проект, давайте продолжим и изменим наш каталог на этот каталог проекта. Оттуда я собираюсь запустить команду, чтобы открыть этот проект в VS Code, но вы можете свободно использовать любой редактор кода, какой захотите. Поскольку в VS Code уже есть встроенный терминал, я могу очистить его, а затем просто закрыть iTerm. И теперь мы можем перейти к размещению нашего локального сайта WordPress. Для этого мы собираемся открыть этот проект в Finder, а затем найти zip-файл демонстрации WP без головы, который я подготовил для вас.

Мы перетащим этот zip-файл прямо в локальную среду разработки, а локальная запустит для вас процесс распаковки и загрузки вашего демо-сайта WordPress. Мы можем в значительной степени придерживаться настроек по умолчанию, и тогда локальному потребуется всего несколько минут, чтобы создать вам новый сайт WordPress. Теперь это отличная функция WP migrate pro, которая позволяет мне экспортировать любой сайт в виде zip-архива и перетаскивать его прямо на локальный компьютер, чтобы я мог очень быстро перенести рабочий сайт на свой локальный компьютер, независимо от платформы.

После завершения установки вы можете продолжить и доверять этому сертификату SSL, а затем мы продолжим и откроем этот проект в WP Admin. Оттуда мы продолжим и просто минимизируем local, так как он уже запущен, и нам больше не нужно с ним ничего делать. Итак, мы откроем наш репозиторий, где вы найдете имя пользователя и пароль администратора, которые я уже создал для этого демонстрационного сайта. Вы должны иметь возможность использовать эти учетные данные, чтобы войти в панель администратора WP. Оттуда нам понадобится всего одна секунда, чтобы разобраться с этой локальной установкой WordPress.

Первое, что мы сделаем, это посмотрим на плагины, которые установлены на этом сайте WordPress. Мы видим такие вещи, как расширенные настраиваемые поля для моделирования данных. У нас есть фолы, чтобы включить некоторые из наших безголовых возможностей, WP GraphQL для работы в качестве API для нашего сайта, а затем расширение WP GraphQL для ACF для отображения некоторых групп полей ACF. Теперь давайте также посмотрим на посты. Если вы посмотрите на все различные демонстрационные сообщения, которые я предварительно заполнил внутри этого проекта, мы увидим, что у нас есть несколько разных сообщений с кучей разных категорий.

Если мы посмотрим на содержимое каждого сообщения, то увидим, что у нас есть куча основного содержимого, несколько изображений, рекомендуемых изображений и некоторые группы полей ACF, которые мы уже создали и предварительно заполнили. Итак, давайте рассмотрим группы полей более подробно. Если мы откроем меню ACF, вы увидите, что у нас созданы две группы полей — пищевые ресурсы и сладкий микстейп. Давайте сначала взглянем на пищевые ресурсы.

Это действительно простая группа полей с двумя отдельными полями — текст и URL. Для каждой из этих вещей я установил флажок «Показать в GraphQL», чтобы они отображались в GraphQL. Затем я также проверил эту опцию на уровне группы полей. Кроме того, у меня есть некоторая условная логика, чтобы определить, когда отображать эти посты, например, если категория поста равна еде. И давайте посмотрим, как выглядит сладкий микстейп.

Мы увидим, что это очень похоже на наши пищевые ресурсы, и что у нас есть несколько разных полей. У каждого из них отмечена опция «Показать в GraphQL», а также дополнительно проверена на уровне группы полей. Мы видим, что есть несколько разных настроек, которые дает нам расширение WP GraphQL, которые нам могут не понадобиться. Кроме того, мы видим, что мы условно отображаем это также на основе категории сообщений.

Итак, теперь давайте посмотрим на WP GraphQL и на то, что он дает нам с точки зрения инструментов. Если мы откроем меню GraphQL, мы попадем внутрь графической IDE. Теперь это интерактивная среда разработки, позволяющая создавать запросы с использованием WP GraphQL. Мы можем указать, что нам нужны, скажем, первые 10 сообщений с категориями, а также включить здесь наши дополнительные поля ACF. Когда мы нажимаем кнопку «Выполнить», мы получаем оперативные данные с нашего сайта WordPress, которые соответствуют данным в этом запросе.

Если мы хотим, мы можем открыть окно Query Composer и визуально составить аспекты нашего запроса. Так что это действительно удобный инструмент, если вы не уверены, какие конкретные поля или данные могут быть в конкретном объекте WordPress. Вы можете использовать Query Composer для изучения и выполнения этих запросов в режиме реального времени. Теперь давайте перейдем к настройке Faust, открыв меню настроек Faust. Как я сказал во вступительном слове, Faust на самом деле представляет собой фреймворк, состоящий из двух частей, который состоит из плагина WordPress и кодовой базы вашего внешнего интерфейса.

Итак, если мы вернемся в меню настроек плагина WordPress, мы увидим, что мы установили эту опцию для URL-адреса внешнего интерфейса, который будет указывать на адрес нашего внешнего сайта. Прямо под этим в опции секретного ключа мы собираемся продолжить и нажать «Регенерировать», чтобы сгенерировать уникальный ключ, который вы можете использовать для своего демонстрационного проекта. Оттуда давайте вернемся к базе кода JavaScript, и мы собираемся запустить эту команду, чтобы скопировать образец файла переменной среды в файл, который мы можем использовать на нашем сайте.

Как только мы это запустим, команда откроет файл .env.local, и мы внесем пару изменений. Во-первых, это заменит следующий общедоступный URL-адрес WordPress на местоположение вашего локального сайта. Итак, ACF.WPEngine.local. А затем мы также возьмем это значение секретного ключа и используем его для нашего секретного ключа Faust. Убедитесь, что мы также хотим раскомментировать это, и тогда последняя переменная среды действительно полезна для тестирования и локальной разработки, чтобы вы могли сгладить любые проблемы с SSL, которые могут возникнуть при подключении к локальной среде разработки.

Оттуда мы захотим запустить NPM Install, чтобы установить все зависимости нашего проекта, а затем, как только это будет сделано, мы можем начать это и запустить NPM Run Dev, чтобы запустить наш проект. Это займет всего секунду для компиляции, но как только это произойдет, мы можем открыть localhost:3000 в браузере и увидеть наш сайт Faust в действии.

Как только это отобразится, вы увидите, что Фауст уже обрабатывает для нас некоторую магию. Если мы посмотрим на это меню в правом верхнем углу, мы увидим, что оно уже извлекает страницы и контент из наших меню, которые мы определили в нашем бэкэнде WordPress, и если мы вернемся к нашему администратору WordPress, мы сможем посмотреть на как это соединение работает немного подробнее.

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

Теперь давайте углубимся в структуру нашего JavaScript-проекта Faust. Если вы знакомы с работой в Next.js, вы, вероятно, использовали каталог страницы для создания компонентов страницы, реализующих ваши маршруты. Вы все еще можете сделать это в Faust, но он основан на этой концепции, предоставляя общий маршрут, называемый узлом WordPress, который позволяет вам взять любой URI, которым управляет WordPress, и разрешить его для определенного фрагмента контента.

Затем мы получаем некоторые дополнительные данные об этом элементе контента и передаем их через наши компоненты, чтобы мы могли преобразовать этот отдельный фрагмент контента в определенный шаблон в папке шаблонов WP. Это очень похоже на концепцию иерархии шаблонов и традиционные темы WordPress, а также множество соглашений об именах. Сопоставьте, например, frontpage.js — это главная страница нашего веб-сайта, а page.js отвечает за отрисовку элементов типа содержимого страницы. И single.js предназначен для отображения отдельных сообщений.

Теперь давайте начнем и сделаем наш frontpage.js немного более динамичным. ХОРОШО . Итак, для начала мы откроем наш файл front page.js и дадим себе немного больше места для работы. Итак, если мы посмотрим на содержимое этого файла, то увидим, что он состоит из трех основных частей. Есть сам компонент, который мы визуализируем, свойство запроса, которое прикрепляется к компоненту, и оно запускается каждый раз, когда мы визуализируем компонент, а затем некоторые переменные, которые мы можем передать внизу.

И, как вы можете видеть, есть два действительно основных способа использовать это. Либо используя хук запроса use внутри компонента, либо он может быть передан в качестве реквизита в сам компонент, и вы увидите это в примере позже. Итак, давайте вернемся в репозиторий и начнем с шага 2.1, чтобы обновить запрос для нашего frontpage.js. Итак, мы скопируем это, затем вернемся в графическую среду IDE и просто поиграем там секунду. Таким образом, этот запрос, который у нас есть в нашем буфере обмена, должен получить первые 10 сообщений и пару фрагментов данных, связанных с каждым из этих сообщений.

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

Теперь следующим шагом для того, чтобы сделать эту домашнюю страницу динамической, является создание компонента для отображения выдержек из сообщений. Итак, мы собираемся сделать это и создать пару файлов в папке компонентов, и я упомяну здесь, что я собираюсь создать postexcerpt.js внутри папки отрывка поста, и я m на самом деле просто дублирует структуру существующих компонентов, которые являются частью этого проекта Faust.js Getting Started. Вы действительно можете делать здесь все, что хотите, и я просто следую схеме, поскольку она уже была изложена для меня как часть этого руководства по началу работы.

Итак, как только у нас будут все эти три файла, мы начнем добавлять в них кое-что для рендеринга этих сообщений. Итак, первое, что мы сделаем, это поместим некоторый контент в наш компонент выдержки из поста. Итак, мы просто скопируем и вставим это из нашего репозитория, и мы увидим, что мы импортируем этот файл module.css. И у нас есть функция, называемая выдержкой поста, которая является нашим компонентом, который пробует одну опору, которая является постом, затем мы визуализируем раздел, имея ссылку, которая будет вести непосредственно к этому URI поста, отображая заголовок. Затем там внизу у нас есть плитки категорий, которые мы также визуализируем, а затем используем опасно установленный в нашем HTML, чтобы установить HTML-контент для отрывка поста.

Теперь, когда все это замечательно и сохранено, мы собираемся сохранить это, но мы также зайдем сюда и добавим этот дополнительный стиль с областью действия в наш компонент, чтобы стилизовать эти теги span для наших категорий, а затем мы просто сделайте некоторый импорт-экспорт внутри файла index.js, чтобы перевести его из экспорта по умолчанию в именованный экспорт, и мы сохраним все эти вещи. И затем последний шаг, чтобы сделать это доступным для использования в других целях, — добавить еще одну строку экспорта в файл index.js нашей папки компонентов. И теперь, когда мы это сделали, если мы вернемся на домашнюю страницу, frontpage.js, мы сможем просто добавить дополнительный импорт к нашему существующему оператору импорта, чтобы использовать отрывок из нашего поста.

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

И затем, если мы продолжим и сохраним все это, отобразим в браузере и обновим, мы должны увидеть, что у нас есть отличная динамическая домашняя страница. Да, у каждого из этих заголовков есть интерактивная ссылка, как и у плиток отдельных категорий. И если мы щелкнем, мы увидим, что благодаря шаблонам, которые уже существуют в Faust, все наши сообщения уже отображаются, хотя нам не хватает некоторых из тех групп ресурсов, которые мы создали с помощью ACF. Итак, если мы перейдем ко второму сообщению, мы увидим, что одно из них отлично отображается, а также все готовые ссылки на категории, которые есть — мы просто используем эти URI категории, чтобы опираться на Faust при рендеринге JS-шаблона этой категории. .

Хорошо, теперь, когда у нас есть динамическая домашняя страница, давайте перейдем к тому, чтобы эти поля ACF отображались в нашем шаблоне single.js. Итак, продолжайте и просто очистите наш редактор кода, а затем мы сможем открыть файл single.js и посмотреть, что там внутри. Мы знаем, что на этом верхнем уровне у нас есть функция компонента, которую мы экспортируем, которая фактически принимает реквизиты, и свойство component.query, имеющее динамический запрос GraphQL, который считывает некоторые из тех переменных, которые мы получаем из начального запроса.

И что мы в конечном итоге хотим сделать, так это отобразить некоторые из этих различных ресурсов публикации в нижней части нашего контента публикации. Итак, я возвращаюсь в репозиторий и прокручиваю вниз до шага 3.1, где мы обновляем одиночный запрос на публикацию, и мы рассмотрим его, потому что он начинает подтягивать как милые микстейпы, так и группы полей пищевых ресурсов, которые мы создали в более ранний шаг. Если я возьму этот запрос, скопирую и вставлю его в графическое изображение, я продолжу и жестко закодирую идентификатор базы данных для сообщения и удалю только пару тех разных вещей, которые нам не нужны, например As Preview и этот другой фрагмент. .

Если я продолжу и запущу это, мы увидим, что я верну некоторые данные, содержащие действительно то, что я ожидал. Содержание, я возвращаю автора, и я возвращаю, что важно, обе эти группы полей и их данные. Итак, я скопирую этот запрос и вернусь в single.js. Оттуда я действительно просто заменю эту часть запроса тем, что у меня есть из моего буфера обмена. Мы можем просто пойти дальше и сохранить это. Вы можете переформатировать его, если хотите, но это не зависит от пробелов, поэтому я думаю, что по большей части это выглядит просто отлично.

Отсюда мы хотим сделать то же самое, что и на последнем шаге, где мы сделали это частью нашего запроса. Теперь мы хотим убедиться, что эти переменные доступны внутри нашего компонента. Итак, мы добавим их к этому оператору структурирования, а затем дополнительно, поскольку у нас есть несколько разных категорий для наших сообщений, мы хотим создать некоторые логические элементы, которые помогут нам определить, должны ли мы отображать продукты питания или сладкий микстейп. Потому что, как вы можете видеть там, независимо от того, что мы получаем, оба, и если нечего найти для милых полей микстейпов, они возвращаются как нулевые. Итак, я хочу выполнить здесь некоторую условную проверку, поэтому я добавлю эти две строки кода в наш файл.

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

Теперь следующим шагом будет то, что мы действительно хотим, как и в предыдущем шаге, создать некоторые дополнительные компоненты. Итак, я продолжу и внутри моего файла компонентов создам компонент пищевых ресурсов. Итак, я создам папку, а затем внутри нее файл food resources.js, и вместе с ним я создам файл index.js, а также файл модулей CSS. И теперь этот файл модулей SCSS действительно полезен, потому что он позволяет нам ограничить наши стили этим конкретным компонентом. Так что это похоже на странный синтаксис, но, в конце концов, это действительно чистый результат, потому что нам не нужно писать кучу классов и прочего.

Итак, я начну копировать и вставлять код компонента из репозитория прямо в эти файлы. Мы видим, что у нас есть функция пищевых ресурсов, которая принимает два имени рецепта реквизита и ссылку на рецепт, а затем мы отображаем тех, кто моложе нашего прекрасного возраста, с помощью эмодзи буррито. Мы также скопируем и вставим некоторые стили файлов SCC в эту конкретную папку, а затем обязательно экспортируем их из папок компонентов index.js. И, как и в предыдущем примере, мы хотим продолжить и экспортировать это в index.js папки наших компонентов, чтобы у нас была действительно хорошая группа для импорта, как вы видели непосредственно из этих компонентов. папку в другом месте в некоторых из этих различных файлов.

Итак, как только мы это добавим, мы обратим внимание на компонент музыкальных ресурсов и сделаем то же самое. Мы собираемся пойти дальше и создать ту же файловую структуру. Итак, папка с музыкальными ресурсами и файл musicresources.js внутри нее. Затем мы продолжим и создадим файл index.js для его экспорта, а затем также наш файл musicresources.module.scss для этих стилей области видимости.

Итак, как только мы получим все это, мы сделаем то же самое, что и для наших пищевых ресурсов, и просто скопируем и вставим часть этого кода из репозитория. Мы видим, что этот компонент выглядит практически идентично. У нас есть музыкальные ресурсы. На самом деле здесь три реквизита вместо двух, но у нас было три поля в этой группе полей, но соглашение о стилях.component осталось прежним. И мы просто делаем немного другой рендеринг, потому что у нас другой контент.

Итак, оттуда мы также добавим наш код SCSS и обязательно экспортируем его из папок компонентов index.js, а затем также импортируем его в нашу папку здесь, и я думаю, что на самом деле сделал — давайте очень быстро переименуем это и просто убедитесь, что все наши имена выглядят хорошо, чтобы наш index.js и компоненты находили наши музыкальные ресурсы, и все это здорово. Итак, теперь мы продолжим и просто закроем все эти посторонние вкладки, потому что мы готовы реализовать эти компоненты в нашем файле single.js.

Чтобы сделать это, мы просто добавим эти два компонента в наш существующий оператор импорта, который уже автоматически распознает их, и мы найдем подходящее место для этого. Итак, у нас есть вот этот компонент-обертка контента. Итак, прямо сейчас мы передаем контент, но на самом деле он также может принимать дочерние элементы. Таким образом, мы можем передать содержимое, а затем также передать некоторые дочерние компоненты непосредственно в эту оболочку содержимого, чтобы оно отображалось в том приятном горизонтальном пространстве, которое у нас уже есть, и все было выровнено.

Вот что мы сделаем, а затем скопируем и вставим туда этот код, переформатируем его и поговорим о том, что происходит в этом конкретном примере. Итак, прямо внутри этого компонента-оболочки контента мы используем логические переменные is food и is music для условного рендеринга соответствующих компонентов ресурсов. Итак, если еда — это правда, и этот пост относится к категории еды, мы это отрендерим. И если это музыка, мы будем делать то же самое. И здесь вы можете видеть, что мы передаем все различные реквизиты, которые необходимы для рендеринга.

И если мы вернемся и обновим одну из наших страниц шаблона single.js, мы увидим, что наши пищевые ресурсы отображаются именно так, как мы ожидали, и эта ссылка будет работать должным образом, если мы вернемся в WP Admin или в нашу домашнюю страницу. страница. И если мы найдем его и категорию продуктов питания или музыку, мы можем открыть Kinfolk Synth DIY и посмотреть, как выглядит наш компонент музыкальных ресурсов, и все это выглядит великолепно. И если мы найдем тот, который на самом деле находится в обеих категориях, мы увидим, что он на самом деле внизу отображает оба этих компонента именно так, как мы и ожидали.

ХОРОШО. Итак, теперь, когда у нас есть наш сайт таким, каким мы его хотим, давайте перейдем к разговору о том, как развернуть этот сайт. Теперь у меня есть раздел репозитория GitHub, созданный для нас, и на самом деле я создал совершенно отдельную развернутую ветку в готовой ветке. Итак, запуск Git check out завершен, мы вам это дадим. И вы также можете просто развернуть эту ветку непосредственно в Atlas, который представляет собой безголовое решение для хостинга WordPress от WP Engine.

Это дает вам как установку WordPress, так и контейнер Node.js, и вы можете подписаться на бесплатную учетную запись песочницы, просто нажав эту кнопку на целевой странице Atlas. Вы попадете на действительно быстрый форум, и, как видите, цена нулевая. Возможно, вам по-прежнему придется вводить кредитную карту, которую мы используем только в целях предотвращения мошенничества, но у вас может быть бесплатная учетная запись, чтобы поиграть со всем этим, чтобы протестировать ее и научиться бездумно в соответствии с вашим сердечным желанием. Итак, я пойду вперед и открою панель инструментов WP Engine, чтобы начать развертывание этого сайта в Atlas.

Первое, что я на самом деле собираюсь сделать, это открыть свой список сайтов, и я собираюсь открыть свой рабочий сайт WordPress. Так что на самом деле этот безголовый сайт ACF, который вы видите прямо здесь, где я собираюсь открыть WP Admin в новом окне, является родительским сайтом для zip-файла, который вы все используете локально. Поэтому я заархивировал это с помощью экспорта WP, и именно это я собираюсь использовать для своего производственного развертывания.

Оттуда я перейду на вкладку Atlas и затем нажму «Создать приложение». И мне предлагают этот вариант. Я собираюсь выбрать «Извлечь из репозитория», а затем нажать «Продолжить». И если я не прошел аутентификацию с помощью GitHub, это то место, где вы бы это сделали, но, поскольку я уже прошел аутентификацию, я могу просто выбрать свой репозиторий. Итак, мы продолжим и выберем репозиторий, который мы используем для этого проекта, нажмите «Продолжить», затем я собираюсь развернуть свое приложение в US Central.

Отсюда он позволяет мне выбрать ветку, и, как я уже сказал, я собираюсь использовать Finished. Есть также варианты, если вы используете монорепозиторий, чего мы не делаем, и я собираюсь оставить флажок «У меня есть установка WordPress» и «Искать мой сайт ACF без головы». Теперь, здесь, на самом деле, вместо использования файла .env я хочу скопировать две переменные среды из моего проекта файлов.

Таким образом, первый — это следующий общедоступный URL-адрес WordPress. Это те же самые переменные среды, которые мы установили в нашем локальном проекте, и я скопирую туда ссылку на мою производственную установку WordPress. Затем я добавлю еще одну переменную среды, и она будет для нашего секретного ключа Faust. Итак, я скопирую это из меню «Настройки Фауста», вставлю его туда и установлю ключ для этого на «Секретный ключ Фауста».

И как только это будет сделано, я могу нажать «Создать приложение», и Atlas начнет процесс создания и развертывания моего приложения. В процессе сборки Atlas запустится установка NPM и ваша команда сборки NPM для любой используемой вами платформы. И затем, как только весь этот код будет построен, он развернет этот контейнер Node для вас в нашей сети. Итак, как только все это прокрутится всего на секунду, мы должны получить сообщение об успешном завершении, а затем мы можем щелкнуть предоставленный нам URL-адрес и фактически посмотреть на наш сайт вживую.

Итак, мы получим сообщение об успешном завершении, а затем сможем открыть этот URL-адрес на другой вкладке. И там мы видим, что наш сайт выглядит точно так же, как и локально, и он загружает все правильные данные, все правильные изображения и даже загружает весь наш контент ACF. Ряд наших постов выглядят действительно великолепно, и они очень эффективны в Atlas. На самом деле я использую здесь очень большие изображения, так что если вы видите некоторую медлительность, это, безусловно, связано с моим выбором.

Платформа Atlas переполнена функциями, которые оценят современные разработчики JavaScript. К сожалению, в этой презентации недостаточно времени, чтобы подробно рассмотреть их все.

Но Atlas действительно хорошо справляется с объединением важных деталей из внешней и внутренней частей вашей безголовой экосистемы в одну удобную панель инструментов, где вы можете просматривать отдельные журналы сборки и выходные данные сборки, изучать развертывания, переменные среды, которые вы использовали для конкретную сборку, а также иметь доступ к дополнительным настройкам или функциям, которые вы можете включить, например к средам предварительного просмотра, где вы можете создать дополнительную среду для каждого PR, созданного для вашего репозитория GitHub, или создать веб-перехватчики среды для перестроения определенных частей ваше приложение или CDN, когда вы вносите изменения в WordPress.

Все это становится возможным с платформой Atlas, и это действительно снижает барьер для начала работы с безголовым WordPress.

Ух ты. Поздравляю, как я уже сказал, что за 25 минут можно было многое охватить. Пожалуйста, не стесняйтесь продолжать практиковаться после презентации и звоните мне, если у вас есть какие-либо вопросы по началу работы с демонстрационными ресурсами. Если вы хотите узнать больше о безголовых, но вам нужно место для этого, зарегистрируйте бесплатную учетную запись Atlas Sandbox. В дополнение к развертыванию ваших собственных репозиториев кода, как мы сделали сегодня, вы также можете начать работу с некоторыми из наших готовых чертежей, которые представляют собой стеки проектов одним щелчком мыши, которые могут помочь вам увидеть, как выглядит безголовый проект после его завершения.

We have a basic scaffold example, a portfolio example with some custom post types, and a new ecommerce example that integrates with big commerce through some of their APIs. Our team and developer relations is really passionate about meeting you wherever you are on your journey towards learning headless. So check out our headless developer's roadmap for a step-by-step series of articles and videos that build on one another to help backfill some of the concepts we've just glossed over today.

The headless ecosystem is young, but it's growing quickly. If you need help on a project, want to talk to some people using headless WordPress in production, or just want to hang out where the magic happens, join the roughly 1,000 other developers in our Discord focused on headless, where we chat, help each other with projects, and help get you moving. Thank you so much for coming to this talk. I look forward to collaborating with you on all of your future headless projects.