next wordpress starter
1.0.0
Échelle WordPress avec la puissance de Next.js et le Web statique!
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 Ajoutez un fichier .env.local à la racine avec les suivants:
WORDPRESS_GRAPHQL_ENDPOINT="http://wordpressite.com/graphql"
Dans certains cas, ce qui précède peut ne pas fonctionner. Changez-le comme suit:
WORDPRESS_GRAPHQL_ENDPOINT="http://yourhost.com/index.php?graphql
L'objectif de ce projet est de prendre WordPress en tant que CMS sans tête et d'utiliser Next.js pour créer une expérience statique sans aucun service tiers pouvant être déployé n'importe où.
L'espoir est de créer autant de fonctionnalités que possible pour soutenir ce qui est généralement attendu d'un thème hors de la boîte sur WordPress. Actuellement, ces fonctionnalités incluent:
De plus, le thème devrait être convivial et performant de la boîte, notamment:
Vous pouvez également éventuellement activer votre prise en charge du plugin de référencement de votre référencement pour suralimenter votre référencement! (Voir ci-dessous)
Découvrez les problèmes de ce qui est sur le pont!
Vous voulez quelque chose d'un peu plus basique ? Consultez mon autre démarreur avec une configuration MVP pour être opérationnel avec wpgraphql dans wordpress: https://github.com/colbyfayock/next-wpgraphql-basic-starter
Ce projet utilise WPGraphQL pour interroger WordPress avec GraphQL. Afin de faire cette demande au point de terminaison approprié, nous devons définir une variable d'environnement pour permettre à Next.js de savoir où demander les informations du site.
Créez un nouveau fichier appelé localement .env.local et ajoutez ce qui suit:
WORDPRESS_GRAPHQL_ENDPOINT= " [WPGraphQL Endpoint] " Remplacez le contenu de la variable par votre point de terminaison WPGraphQL. Par défaut, il devrait ressembler à [Your Host]/graphql .
Remarque: les variables d'environnement peuvent éventuellement être configurées statiquement dans Next.config.js
| Nom | Requis | Défaut | Description |
|---|---|---|---|
| Wordpress_graphql_endpoint | Oui | - | WordPress WPGraphQL Endpoint (ex: host.com/graphl) |
| Wordpress_menu_location_navigation | Non | PRIMAIRE | Configure l'emplacement du menu de navigation d'en-tête |
| Wordpress_plugin_seo | Non | FAUX | Permet la prise en charge du plugin SEO (true, false) |
Veuillez noter que certains thèmes n'ont pas l'emplacement du menu principal.
Pour démarrer le projet localement, exécutez:
yarn dev
# or
npm run devLe projet devrait désormais être disponible sur http: // localhost: 3000!
Il est possible de profiter de cette prolongation pour améliorer l'expérience de développement. Pour configurer l'extension Eslint dans Visual Studio Code, ajoutez un nouveau dossier au root .vscode . Inside Ajouter un fichier settings.json avec le contenu suivant:
{
"editor.formatOnSave" : false ,
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : true
}
}Avec ce fichier, Eslint corrigera et validera automatiquement les erreurs de syntaxe et formara le code sur SAVE (basé sur la configuration plus jolie).
Il existe deux options sur la façon dont vous pouvez déployer ce projet sur Netlify:
next exportLe plugin Essential Next.js doit être fourni en option lorsque vous importez un projet en fonction de ce démarreur. Si ce n'est pas le cas, vous pouvez installer ce plugin à l'aide du répertoire des plugins Netlify. Cela permettra au projet de tirer pleinement parti de toutes les fonctionnalités natives NIFT.JS que NetLify prend en charge avec ce plugin.
L'exportation du projet permet à next.js compiler le projet en actifs statiques, y compris les fichiers HTML. Cela vous permet de déployer le projet en tant que site statique directement à Netlify comme tout autre site. Vous pouvez le faire en ajoutant next export à la fin de la commande build dans package.json (Ex: next build && next export ).
Quelle que soit l'option que vous choisissez, vous pouvez configurer vos variables d'environnement lors de la création de votre nouveau site ou en accédant aux paramètres du site> Build & Deploy> Environment et déclenchant un nouveau déploiement une fois ajouté.
Étant donné Next.js est un projet soutenu par Vercel, vous pouvez simplement importer le projet en tant que nouveau site et configurer vos variables d'environnement en les ajoutant pendant l'importation ou en naviguant vers des variables d'environnement et en déclenchant une nouvelle version une fois ajoutée.
Afin d'éviter un fichier de configuration supplémentaire, nous profitons de certaines propriétés intégrées de package.json pour configurer des parties du site Web.
| Nom | Requis | Description |
|---|---|---|
| page d'accueil | Oui | Page d'accueil ou nom d'hôte utilisé pour construire des URL complètes (ex graphique ouvert) |
homepage mettra à jour les instances où l'URL complète est requise, telles que les balises graphiques ouvertesCe projet vise à profiter de nombreuses fonctionnalités WordPress intégrées par défaut comme un thème WordPress typique. Ceux-ci incluent:
| Nom | Usage |
|---|---|
| Langage du site | Attribut lang sur la balise <html> |
| Titre du site | En-tête de page d'accueil, métadonnées de la page |
| Slogan | Sous-titre de page d'accueil |
Il existe une configuration WordPress spécifique requise pour permettre la meilleure utilisation de ce démarreur.
Ce démarreur ne fournit actuellement aucun mécanisme pour traiter le contenu d'image de WordPress. Les images sont liées à «tel quel», ce qui signifie que si l'image est téléchargée via l'interface WordPress, l'image sera servie à partir de WordPress.
Pour servir les images statiquement, vous avez quelques options.
En activant l'accélérateur d'image de Jetpack, vos images seront automatiquement servies statiquement et mises en cache via le CDN WP.com. Cette fonctionnalité est gratuite avec l'installation de base de Jetpack, nécessitant seulement que vous connectez le site WordPress au service Jetpack.
Jetpack cdn
Le plugin Yoast SEO est partiellement pris en charge, y compris la plupart des principales fonctionnalités telles que les métadonnées et la personnalisation des graphiques ouverts.
Pour activer le plugin, configurez WORDPRESS_PLUGIN_SEO pour être true soit en tant que variable d'environnement ou dans next.config.js.
Exemples de sites Web qui ont commencé avec le démarreur WordPress suivant.
Hébergement WordPress pour le projet orienté public fourni par WP Engine.
Merci à ces gens merveilleux (clé emoji):
Colby Fayock | Kevin Cunningham | Guillermo Angulo | Hein Snyman | Grische ? | Jatin Rathee | Dave |
Brad Garropy | Ventes de Fábio | Leonardo Losoviz | Avneesh Agarwal | Phattarapol L. | Peter Cruckshank | Shane O'Grady |
Nick Gaswirth | Alexandruvisan19 | Ritik chourasiya ? | Rick Knowlton | Jedidiah amaraegbu |
Ce projet suit les spécifications de tous les contributeurs. Contributions de toute nature bienvenue!
