next wordpress starter
1.0.0
¡Escala de WordPress con el poder de Next.js y la 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 Agregue un archivo .env.local a la raíz con lo siguiente:
WORDPRESS_GRAPHQL_ENDPOINT="http://wordpressite.com/graphql"
En algunos casos, lo anterior puede no funcionar. Cambiarlo de la siguiente manera:
WORDPRESS_GRAPHQL_ENDPOINT="http://yourhost.com/index.php?graphql
El objetivo de este proyecto es tomar WordPress como un CMS sin cabeza y usar Next.js para crear una experiencia estática sin ningún servicio de terceros que se pueda implementar en cualquier lugar.
La esperanza es construir tantas características como podamos para apoyar lo que generalmente se espera de un tema fuera de la caja en WordPress. Actualmente, esas características incluyen:
Además, se espera que el tema sea amigable con SEO y de performance fuera de la caja, que incluye:
¡También puede habilitar opcionalmente el soporte de complementos de SEO para superar sobre su SEO! (Vea abajo)
¡Mira los problemas de lo que hay en cubierta!
¿Quieres algo un poco más básico ? Echa un vistazo a mi otro iniciador con una configuración de MVP para ponerte en funcionamiento con Wpgraphql en WordPress: https://github.com/colbyfayock/next-wpgraphql-sharter
Este proyecto utiliza wpgraphql para consultar WordPress con GraphQL. Para hacer esa solicitud al punto final apropiado, necesitamos establecer una variable de entorno para dejar que Next.js sepa de dónde solicitar la información del sitio.
Cree un nuevo archivo llamado localmente .env.local y agregue lo siguiente:
WORDPRESS_GRAPHQL_ENDPOINT= " [WPGraphQL Endpoint] " Reemplace el contenido de la variable con su punto final WPGRAPHQL. Por defecto, debe parecerse a [Your Host]/graphql .
Nota: Las variables de entorno se pueden configurar opcionalmente en next.config.js
| Nombre | Requerido | Por defecto | Descripción |
|---|---|---|---|
| WordPress_Graphql_endpoint | Sí | - | WordPress WPGraphql Endpoint (ex: host.com/graphl) |
| Wordpress_menu_location_navigation | No | PRIMARIO | Configura la ubicación del menú de navegación de encabezado |
| WordPress_Plugin_Seo | No | FALSO | Habilita el soporte del complemento SEO (verdadero, falso) |
Tenga en cuenta que algunos temas no tienen ubicación de menú principal.
Para comenzar el proyecto localmente, ejecute:
yarn dev
# or
npm run devEl proyecto ahora debería estar disponible en http: // localhost: 3000!
Es posible aprovechar esta extensión para mejorar la experiencia de desarrollo. Para configurar la extensión de Eslint en el código Visual Studio, agregue una nueva carpeta a la raíz .vscode . Inside Agregar un archivo settings.json con el siguiente contenido:
{
"editor.formatOnSave" : false ,
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : true
}
}Con este archivo, Eslint corrigirá y validará automáticamente los errores de sintaxis y formateará el código en Guardar (según la configuración más bonita).
Hay dos opciones sobre cómo puede implementar este proyecto para netlify:
next exportEl complemento esencial Next.JS debe proporcionarse como una opción cuando primero importe un proyecto basado en este arranque. Si no es así, puede instalar este complemento utilizando el directorio de complementos NetLify. Esto permitirá que el proyecto aproveche al máximo todas las características nativas de NEXT.JS que Netlify admite con este complemento.
La exportación del proyecto permite que Next.js compile el proyecto en activos estáticos, incluidos los archivos HTML. Esto le permite implementar el proyecto como un sitio estático directamente para netlify al igual que cualquier otro sitio. Puede hacer esto agregando next export al final del comando build dentro package.json (Ej: next build && next export ).
Independientemente de la opción que elija, puede configurar sus variables de entorno, ya sea al crear su nuevo sitio o navegar a Configuración del sitio> Build & Deploy> Entorno y activando un nuevo implementamiento una vez agregado.
Dado que Next.js es un proyecto respaldado por Vercel, simplemente puede importar el proyecto como un nuevo sitio y configurar sus variables de entorno agregándolas durante la importación o navegando a Configuración> Variables de entorno y activando una nueva construcción una vez agregada.
Para evitar un archivo de configuración adicional, aprovechamos algunas propiedades incorporadas de package.json para configurar partes del sitio web.
| Nombre | Requerido | Descripción |
|---|---|---|
| página principal | Sí | Página de inicio o nombre de host utilizado para construir URL completas (gráfico ex abierto) |
homepage actualizará instancias donde se requiere la URL completa, como las etiquetas de gráficos abiertosEste proyecto tiene como objetivo aprovechar tantas funciones incorporadas de WordPress de forma predeterminada como un tema típico de WordPress. Esos incluyen:
| Nombre | Uso |
|---|---|
| Lenguaje del sitio | atributo lang en la etiqueta <html> |
| Título del sitio | Encabezado de página de inicio, metadatos de página |
| Lema | Subtítulo de la página de inicio |
Se requiere una configuración específica de WordPress para permitir el mejor uso de este iniciador.
Este arrancador actualmente no proporciona ningún mecanismo para tratar el contenido de la imagen de WordPress. Las imágenes están vinculadas a "tal cual", lo que significa que si la imagen se carga a través de la interfaz de WordPress, la imagen se servirá desde WordPress.
Para servir las imágenes estáticamente, tiene algunas opciones.
Al habilitar el acelerador de imagen de JetPack, sus imágenes se atenderán automáticamente estáticamente y almacenan en caché a través del WP.com CDN. Esta característica viene gratuita con la instalación básica de JetPack, que requiere solo que conecte el sitio de WordPress al servicio JetPack.
Jetpack CDN
El complemento Yoast SEO es parcialmente compatible con la mayoría de las características principales como metadatos y personalización de gráficos abiertos.
Para habilitar el complemento, configure WORDPRESS_PLUGIN_SEO para que sea true como una variable de entorno o dentro de Next.config.js.
Ejemplos de sitios web que comenzaron con el inicio de WordPress Next.js
Hosting de WordPress para el proyecto de orientación pública proporcionada por WP Engine.
Gracias a estas maravillosas personas (Key Emoji):
Colby Fayock | Kevin Cunningham | Guillermo Angulo | Hein Snyman | Griscio ? | Jatin Rathee | Dave |
Brad Garropy | Ventas de Fábio | LeonardovovoSoviz | Avneesh Agarwal | Phattarapol L. | Peter Cruckshank | Shane O'Grady |
Nick Gaswirth | Alexandruvisan19 | Ritik Chourasiya ? | Rick Knowlton | Jedidiah amaraegbu |
Este proyecto sigue la especificación de todos los contribuyentes. ¡Contribuciones de cualquier tipo bienvenido!
