next wordpress starter
1.0.0
Масштабирование WordPress с силой Next.js и статической сети!
yarn create next-app -e https://github.com/colbyfayock/next-wordpress-starter
# or
npx create-next-app -e https://github.com/colbyfayock/next-wordpress-starter Добавьте файл .env.local в корень со следующим образом:
WORDPRESS_GRAPHQL_ENDPOINT="http://wordpressite.com/graphql"
В некоторых случаях вышеупомянутое может не работать. Изменить его следующим образом:
WORDPRESS_GRAPHQL_ENDPOINT="http://yourhost.com/index.php?graphql
Цель этого проекта состоит в том, чтобы взять WordPress в качестве безголостного CMS и использовать Next.js, чтобы создать статический опыт без каких -либо сторонних услуг, которые можно развернуть в любом месте.
Надежда состоит в том, чтобы создать как можно больше функций, чтобы поддержать то, что обычно ожидается от темы из коробки на WordPress. В настоящее время эти функции включают:
Кроме того, ожидается, что тема будет дружелюбной и исполненаю из коробки, в том числе:
Вы также можете при желании включить поддержку плагинов Yoast SEO, чтобы перегружать SEO! (См. ниже)
Проверьте проблемы с тем, что на палубе!
Хотите что -то более простое ? Проверьте мой другой стартер с настройкой MVP, чтобы встать и работать с WPGraphQL в WordPress: https://github.com/colbyfayock/next-wpgraphql-basic-starter
Этот проект использует wpgraphql для запроса WordPress с помощью GraphQL. Чтобы сделать этот запрос в соответствующей конечной точке, нам нужно установить переменную среды, чтобы сообщить Next.js, откуда запросить информацию о сайте.
Создайте новый файл локально называемый .env.local и добавьте следующее:
WORDPRESS_GRAPHQL_ENDPOINT= " [WPGraphQL Endpoint] " Замените содержимое переменной вашей конечной точкой wpgraphql. По умолчанию он должен напоминать [Your Host]/graphql .
ПРИМЕЧАНИЕ. Переменные среды могут быть статически настроены в next.config.js
| Имя | Необходимый | По умолчанию | Описание |
|---|---|---|---|
| Wordpress_graphql_endpoint | Да | - | WordPress WPGraphQl Endpoint (Ex: host.com/graphl) |
| Wordpress_menu_location_navigation | Нет | НАЧАЛЬНЫЙ | Конфигурирует расположение меню навигации заголовка |
| Wordpress_plugin_seo | Нет | ЛОЖЬ | Включает поддержку плагинов SEO (True, False) |
Обратите внимание, что некоторые темы не имеют основного меню.
Чтобы начать проект локально, запустите:
yarn dev
# or
npm run devТеперь проект должен быть доступен по адресу http: // localhost: 3000!
Можно воспользоваться этим расширением, чтобы улучшить опыт разработки. Чтобы настроить расширение Eslint в коде Visual Studio, добавьте новую папку в root .vscode . Внутри добавить settings.json файла.
{
"editor.formatOnSave" : false ,
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : true
}
}С помощью этого файла Eslint автоматически исправляет и проверяет ошибки синтаксиса и форматирует код в сохранении (на основе более красивой конфигурации).
Есть два варианта относительно того, как вы можете развернуть этот проект для NetLify:
next exportEssential Next.js плагин должен быть предоставлен в качестве опции, когда вы впервые импортируете проект на основе этого стартера. Если это не так, вы можете установить этот плагин, используя каталог плагинов NetLify. Это позволит проекту в полной мере воспользоваться всеми нативными функциями next.js, которые NetLify поддерживает этот плагин.
Экспорт проекта позволяет следующему.js составить проект в статические активы, включая файлы HTML. Это позволяет вам развернуть проект в качестве статического сайта непосредственно в NetLify, как и любой другой сайт. Вы можете сделать это, добавив next export в конце команды build Inside package.json (например: next build && next export ).
Независимо от того, какой вариант вы выберете, вы можете настроить переменные своей среды либо при создании вашего нового сайта, либо путем навигации на настройки сайта> «Построить и развернуть> среду» и запуск нового развертывания после добавления.
Данный Next.JS является поддерживаемым версией проектом, вы можете просто импортировать проект в качестве нового сайта и настроить переменные вашей среды, добавив их во время импорта или перемещаясь в настройки> переменные среды и запуская новую сборку после добавления.
Чтобы избежать дополнительного файла конфигурации, мы используем некоторые встроенные свойства package.json для настройки частей веб-сайта.
| Имя | Необходимый | Описание |
|---|---|---|
| домашняя страница | Да | Домашняя страница или имя хоста, используемая для построения полных URL -адресов (EX Open Graph) |
homepage будет обновлять экземпляры, где требуется полный URL -адрес, например, теги Open GraphЭтот проект направлен на то, чтобы по умолчанию, по умолчанию используется как можно больше встроенных функций WordPress, таких как типичная тема WordPress. К ним относятся:
| Имя | Использование |
|---|---|
| Язык сайта | атрибут lang на теге <html> |
| Название сайта | Заголовок домашней страницы, метаданные страницы |
| Слоган | Домашняя страница |
Существует некоторая конкретная конфигурация WordPress, необходимая для наилучшего использования этого стартера.
Этот стартер в настоящее время не предоставляет никаких механизмов для борьбы с содержанием изображения от WordPress. Изображения связаны с «как есть», что означает, что если изображение загружается через интерфейс WordPress, изображение будет обслуживаться из WordPress.
Чтобы обслуживать изображения статически, у вас есть несколько вариантов.
Включив акселератор изображения из JetPack, ваши изображения будут автоматически обслуживаться статически и кэшируются через CDN WP.com. Эта функция бесплатна с базовой установкой JetPack, требующей только для того, чтобы вы подключали сайт WordPress к службе JetPack.
JetPack CDN
Плагин Yoast SEO частично поддерживается, включая большинство основных функций, таких как метаданные и настройка открытого графа.
Чтобы включить плагин, настройте WORDPRESS_PLUGIN_SEO , чтобы быть true , либо как переменная среды, либо в следующем.config.js.
Примеры веб -сайтов, которые начались с Next.js WordPress Starter
WordPress Hosting для публичного проекта, предоставленного WP Engine.
Спасибо этим замечательным людям (ключ эмодзи):
Колби Файок | Кевин Каннингем | Гильермо Ангуло | Хейн Сниман | Гриша ? | Джатин Рати | Дэйв |
Брэд Гаррупи | Фабио Продажи | Леонардо Лосовиз | Avneesh Agarwal | Phattarapol L. | Питер Крукшанк | Шейн О'Грэйди |
Ник Газвирт | Александрувизан19 | Ритик Чурасия ? | Рик Ноултон | Джедидия Амарагбу |
Этот проект следует за спецификацией всех контролей. Взносы любого вида приветствуются!
