Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Headless WordPress est de plus en plus populaire auprès des développeurs qui souhaitent plus de contrôle sur leur contenu. À un moment donné, cependant, vous devez créer un frontal pour votre système de gestion de contenu sans tête (CMS).

Heureusement, il existe des outils qui peuvent rendre la création d’un frontal personnalisé beaucoup plus facile. Avec la sortie récente du Intégration WordPress de Gatsby SourceIl est maintenant plus facile d’associer ce générateur de site statique populaire à votre CMS sans tête et de créer un beau visage public pour votre contenu.

Dans cet article, nous allons explorer ce qu’est Gatsby et ce que la nouvelle intégration signifie pour les développeurs WordPress. Ensuite, nous vous montrerons comment utiliser WordPress et le générateur de site statique de Gatsby pour créer un site Web simple. Commençons!

Une introduction au Framework Gatsby (et pourquoi vous voudrez peut-être l’utiliser)

Gatsby est un générateur de site statique réactif pris en charge par GraphQL. Vous avez la liberté de concevoir et de créer votre propre front-end tout en utilisant le back-end WordPress familier pour créer et gérer du contenu. Cela fait du framework Gatsby un choix populaire parmi les développeurs WordPress qui cherchent à en créer un configuration sans tête.

Contrairement à certaines autres technologies React, Gatsby est fortement axé sur la vitesse. Ce générateur de site construit votre projet avec des fichiers HTML statiques optimisé pour la performance.

Pour augmenter encore les performances, Gatsby ne charge que les fichiers dont il a besoin. Cela permet de réduire au minimum vos temps de chargement et donne à Gatsby la flexibilité nécessaire pour consommer des ressources supplémentaires en cas de besoin.

En réduisant les temps de chargement de vos pages, le framework Gatsby peut réduire votre taux de rebond et encourager les utilisateurs à visiter davantage votre site Web. Cela peut augmenter les statistiques clés, y compris le temps passé sur votre site Web, et aider à générer plus de conversions.

De plus, Google a confirmé qu’il l’utilisait La vitesse de la page comme facteur de classement pour évaluer où le contenu doit apparaître dans les résultats de recherche. Si vous choisissez une solution basée sur les performances comme Gatsby, vous pouvez Augmenter l’optimisation des moteurs de recherche (SEO).

Gatsby, en revanche, a la réputation d’être difficile à apprendre, surtout par rapport à la concurrence Cadre de frontité. Cependant, l’équipe de Gatsby a récemment annoncé que le fonctionnaire Intégration WordPress de Gatsby Source est stable maintenant.

En utilisant ce plugin en combinaison avec le Plugin WPGatsby et le Page de démarrage de WordPress Gatsby Dans le projet, vous devriez maintenant trouver plus facile d’extraire des données de votre installation WordPress et de les afficher avec Gatsby.

Comment créer un site Web avec WordPress et Gatsby (en 4 étapes)

Maintenant que nous avons couvert Gatsby et pourquoi vous pourriez vouloir l’utiliser, voyons comment démarrer avec ce générateur de site populaire. Dans cette section, nous allons créer un site Web de démarrage simple en connectant Gatsby à une installation WordPress existante.

Étape 1: Préparez votre environnement de développement

Nous construisons notre site de démarrage en utilisant le plugin WPGatsby qui optimise votre site Web WordPress pour qu’il agisse comme une source de données pour Gatsby. Nous établirons également une connexion entre WordPress et Gatsby en utilisant cela Plug-in WPGraphQl::

Le plugin WordPress WPGatsby.

Le plugin WPGatsby crée un journal des événements administrateur que Gatsbsy utilise pour obtenir les modifications de contenu après la première construction. Si vous souhaitez continuer à travailler sur ce projet, WPGatsby a tout ce dont vous avez besoin pour déclencher automatiquement ces builds, y compris Aperçu de Gatsby.

Après avoir installé et activé WPGatsby et WPGraphQl, vous devez vous assurer que vous avez Gestionnaire de packages de nœuds (npm), les Runtime Node.jset Gatsby installés sur votre ordinateur. Le moyen le plus simple de télécharger tous ces composants est d’utiliser Gestionnaire de paquets Homebrew. Ce programme est disponible pour MacOS et Linux:

Le gestionnaire de paquets homebrew.

Pour installer Homebrew, ouvrez l’application de ligne de commande sur votre ordinateur. Exécutez ensuite la commande suivante:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Vous pouvez ensuite installer Homebrew en suivant les instructions. Une fois qu’il est opérationnel, vous pouvez installer Node.js et npm avec une seule commande:

brew install node

Ensuite, il est temps d’installer ça Outil CLI Gatsby. Nous allons utiliser ce package npm pour exécuter des commandes pour développer des sites basés sur Gatsby. Dans votre application de ligne de commande, entrez:

brew install gatsby-cli

Notez que selon la configuration de votre ordinateur, vous devrez peut-être modifier vos autorisations de fichiers à ce stade. Si vous devez apporter des modifications, votre application de ligne de commande doit afficher toutes les informations dont elle a besoin.

Étape 2: Téléchargez le projet Gatsby Framework Starter

Pour minimiser la quantité de configuration requise, nous utilisons le projet de démarrage Gatsby. Ce projet est livré avec les fichiers de configuration de base de Gatsby WordPress.

Pour installer le projet de démarrage Gatsby, vous aurez besoin Contrôle de version Git. Si vous ne l’avez pas déjà, vous pouvez Téléchargez la dernière version sur le site officiel:

La page d'accueil de Git.

Après avoir installé Git, modifiez le répertoire (cd) afin que votre ligne de commande pointe vers l’emplacement où vous souhaitez créer votre site Gatsby local. Par exemple, si vous souhaitez créer votre site sur le bureau, votre commande peut ressembler à ceci:

cd/Users/username/Desktop

Exécutez la commande suivante pour créer un nouveau projet à l’aide du site de démarrage WordPress Gatsby:

gatsby new my-wordpress-gatsby-site https://github.com/gatsbyjs/gatsby-started-wordpress-blog

Ce processus peut prendre plusieurs minutes. Une fois que cela est fait, vous constaterez que Git a créé un nouveau projet à l’emplacement que vous avez spécifié:

Un site Web local construit à l'aide du framework Gatsby.

Vous pouvez maintenant commencer à créer le frontal de votre site.

Étape 3: Démarrez le serveur de développement Gatsby Framework

La ligne de commande vous demandera maintenant de commencer à développer votre projet en entrant deux commandes. Selon l’endroit où vous avez commencé votre projet Gatsby, ces commandes devraient ressembler à ceci:

cd my-wordpress-gatsby-site

gatsby develop

Exécutez ces deux commandes pour démarrer le serveur de développement. Voilà – votre site de démonstration fonctionne maintenant dans votre environnement de développement. Vous pouvez afficher votre site localement en ouvrant un nouvel onglet dans votre navigateur et en naviguant http: // localhost: 8000 /::

Le projet Gatsby Framework Starter.

À ce stade, le framework Gatsby n’affiche que le contenu factice. L’étape suivante consiste à connecter Gatsby à votre installation WordPress afin que vous puissiez afficher vos propres articles et pages.

Étape 4: Connectez Gatsby à WordPress

Si vous ouvrez votre répertoire Gatsby local, vous trouverez tous les fichiers du site de démarrage de Gatsby. Vous pouvez ensuite les trouver gatsby-config.js Fichier et ouvrez-le dans un éditeur de texte compatible:

Le fichier de configuration du framework Gatsby.

Pour connecter WordPress à Gatsby, vous devez pointer Gatsby vers l’URL de votre site. Dans votre éditeur de texte, recherchez la section suivante:

url:
process.env.WPGRAPHQL_URL ||
'https://wpgatsbydemo.wpengine.com/graphql'

Vous pouvez remplacer l’URL par / graphql Endpoint que vous avez créé lors de l’installation du plugin WPGraphQL. Par défaut, WPGraphQL ajoute ce point de terminaison à http://votresite.com/graphql. Par exemple, si votre site Web est example.com, vous devrez ajouter ce qui suit:

url:
process.env.WPGRAPHQL_URL ||
'https://example.com/graphql'

Après avoir effectué cette modification, enregistrez le fichier et fermez l’éditeur de texte. Mettre à jour le http: // localhost: 8000 / Tab. Lorsque la page se recharge, vous devriez voir votre site Web WordPress:

Un site Web WordPress affiché à l'aide du framework Gatsby.

Si vous ne voyez pas votre contenu, vous devrez peut-être quitter développer gatsby Terminez le processus en quittant la fenêtre d’application de ligne de commande. Vous pouvez ensuite ouvrir une nouvelle fenêtre de ligne de commande, modifier le répertoire (CD) pour qu’il pointe vers votre projet Gatsby local et recommencer développer gatsby Commander. Le contenu de votre site Web devrait alors être affiché dans l’onglet localhost.

Conclusion

Le cadre Gatsby peut améliorer les performances et le classement de votre site Web sur les moteurs de recherche, mais n’a pas été l’outil le plus facile à apprendre dans le passé. Avec la sortie du nouveau plugin d’intégration WordPress, vous pouvez désormais créer une interface simple avec un minimum d’effort.

Récapitulons comment utiliser WordPress et Gatsby pour créer un site Web en quatre étapes faciles:

  1. Préparez votre environnement de développement.
  2. Téléchargez le Projet WordPress Gatsby Starter.
  3. Démarrez le serveur de développement Gatsby.
  4. Connectez Gatsby à WordPress.

Vous avez des questions sur la création d’un site Web avec WordPress et Gatsby? Faites-nous savoir dans les commentaires ci-dessous!



Source link

Recent Posts