next wordpress starter
1.0.0
Escalando o WordPress com o poder do Next.js e a Web estática!
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 Adicione um arquivo .env.local à raiz com o seguinte:
WORDPRESS_GRAPHQL_ENDPOINT="http://wordpressite.com/graphql"
Em alguns casos, o acima pode não funcionar. Altere o seguinte:
WORDPRESS_GRAPHQL_ENDPOINT="http://yourhost.com/index.php?graphql
O objetivo deste projeto é considerar o WordPress como um CMS sem cabeça e usar o Next.js para criar uma experiência estática sem nenhum serviço de terceiros que possa ser implantado em qualquer lugar.
A esperança é criar o maior número possível de recursos para suportar o que normalmente espera de um tema fora da caixa no WordPress. Atualmente, esses recursos incluem:
Além disso, espera -se que o tema seja amigável de SEO e com performance saindo, incluindo:
Opcionalmente, você também pode ativar o suporte do plug -in do Yoast SEO para sobrecarregar seu SEO! (Veja abaixo)
Confira os problemas do que está no convés!
Quer algo um pouco mais básico ? Confira meu outro iniciante com uma configuração de MVP para subir e correr com wpgraphql no wordpress: https://github.com/colbyfayock/next-wpraphql-basic-starter
Este projeto faz uso do WPGRAPHQL para consultar o WordPress com o GraphQL. Para fazer essa solicitação para o endpoint apropriado, precisamos definir uma variável de ambiente para informar o Next.js onde solicitar as informações do site.
Crie um novo arquivo chamado localmente .env.local e adicione o seguinte:
WORDPRESS_GRAPHQL_ENDPOINT= " [WPGraphQL Endpoint] " Substitua o conteúdo da variável pelo seu endpoint wpgraphql. Por padrão, ele deve se parecer com [Your Host]/graphql .
Nota: As variáveis de ambiente podem opcionalmente ser configuradas estaticamente em next.config.js
| Nome | Obrigatório | Padrão | Descrição |
|---|---|---|---|
| Wordpress_graphql_endpoint | Sim | - | WordPress wpgraphql endpoint (ex: host.com/graphl) |
| Wordpress_menu_location_navigation | Não | Primário | Configure Localização do menu de navegação de cabeçalho |
| Wordpress_plugin_seo | Não | falso | Ativa o suporte do plug -in SEO (verdadeiro, falso) |
Observe que alguns temas não têm local de menu primário.
Para iniciar o projeto localmente, execute:
yarn dev
# or
npm run devO projeto agora deve estar disponível em http: // localhost: 3000!
É possível tirar proveito dessa extensão para melhorar a experiência de desenvolvimento. Para configurar a extensão ESLINT no código do Visual Studio, adicione uma nova pasta ao root .vscode . Dentro, adicione um arquivo settings.json com o seguinte conteúdo:
{
"editor.formatOnSave" : false ,
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : true
}
}Com este arquivo, o ESLint corrigirá e validará automaticamente erros de sintaxe e formatará o código no SALVO (com base na configuração mais bonita).
Existem duas opções sobre como você pode implantar este projeto para netlify:
next exportO plug -in essencial do Next.js deve ser fornecido como uma opção quando você estiver importando um projeto com base nesse iniciador. Caso contrário, você pode instalar este plug -in usando o diretório do plug -ins NetLify. Isso permitirá que o projeto aproveite ao máximo todos os recursos nativos do Next.js que o Netlify suporta com este plug -in.
A exportação do projeto permite que o próximo.JS compile o projeto em ativos estáticos, incluindo arquivos HTML. Isso permite que você implante o projeto como um site estático diretamente para netlify como qualquer outro site. Você pode fazer isso adicionando next export ao final do comando build Inside package.json (ex: next build && next export ).
Independentemente de qual opção você escolher, você pode configurar suas variáveis de ambiente ao criar seu novo site ou navegar para configurações do site> Construir e implantar> ambiente e acionar uma nova implantação depois de adicionada.
Dado o Next.js, é um projeto apoiado por vercel, você pode simplesmente importar o projeto como um novo site e configurar suas variáveis de ambiente adicionando-as durante a importação ou navegando para configurações> variáveis de ambiente e acionando uma nova compilação uma vez adicionada.
Para evitar um arquivo de configuração adicional, aproveitamos algumas propriedades internas do package.json para configurar partes do site.
| Nome | Obrigatório | Descrição |
|---|---|---|
| Página inicial | Sim | Página inicial ou nome de host usado para construir URLs completos (Ex Open Gráfico) |
homepage atualizará instâncias em que o URL completo é necessário, como tags de gráfico abertoEste projeto tem como objetivo aproveitar tantos recursos internos do WordPress por padrão, como um tema típico do WordPress. Esses incluem:
| Nome | Uso |
|---|---|
| Idioma do site | atributo lang na tag <html> |
| Título do site | Cabeçalho da página inicial, metadados da página |
| Slogan | Legenda da página inicial |
Existe alguma configuração específica do WordPress necessária para permitir o melhor uso deste iniciador.
Atualmente, esse motor de partida não fornece nenhum mecanismos para lidar com o conteúdo da imagem do WordPress. As imagens estão vinculadas a "como está", ou seja, se a imagem for carregada através da interface WordPress, a imagem será servida no WordPress.
Para servir as imagens estaticamente, você tem algumas opções.
Ao ativar o acelerador da imagem do JetPack, suas imagens serão automaticamente servidas estaticamente e armazenadas em cache através da CDN WP.com. Esse recurso vem gratuito com a instalação básica do JetPack, exigindo apenas que você conecte o site WordPress ao serviço JetPack.
Jetpack CDN
O plug -in Yoast SEO é parcialmente suportado, incluindo a maioria dos principais recursos, como metadados e personalização de gráficos abertos.
Para ativar o plug -in, configure WORDPRESS_PLUGIN_SEO para ser true como uma variável de ambiente ou no next.config.js.
Exemplos de sites que começaram com o próximo.js wordpress starter
Hospedagem do WordPress para o Projeto Público fornecido pelo WP Engine.
Obrigado a essas pessoas maravilhosas (key emoji):
Colby Fayock | Kevin Cunningham | Guillermo Angulo | Hein Snyman | Grische ? | Jatin Rathee | Dave |
Brad Garropy | Vendas de Fábio | Leonardo Losoviz | Avneesh Agarwal | Phattarapol L. | Peter Cruckshank | Shane O'Grady |
Nick Gaswirth | Alexandruvisan19 | Ritik Chourasiya ? | Rick Knowlton | Jedidiah Amaraegbu |
Este projeto segue a especificação de todos os contribuintes. Contribuições de qualquer tipo de boas -vindas!
