Création d'un site Gatsby avec des données WordPress

Ce tutoriel s'appuie sur un article précédent, offrant une procédure pas à pas détaillée de l'intégration de Gatsby et WordPress. Les avantages de la vitesse et de la sécurité de Gatsby font appel aux utilisateurs de WordPress, offrant un moyen de tirer parti de ces avantages tout en conservant l'expérience familière de gestion de contenu WordPress.

Ce guide se concentre sur la mise en œuvre pratique, le tirant de diverses ressources et la résolution des défis potentiels. Notez que WPGraphQL et GATSBY CLI sont activement développés, ce qui signifie que la compatibilité des versions est cruciale. Ce projet utilise WPGraphQL 0.8.3, gatsby-source-wpgraphql 2.5.1 et Gatsby CLI 2.12.21. Reportez-vous toujours à la documentation officielle des dernières mises à jour.

Il existe plusieurs excellents partants de Gatsby, notamment gatsby-wordpress-theme-blog d'Alexandra Spalato et Zac Gordon et Muhammad Muhsin, twenty-nineteen-gatsby-theme .

Condition préalable

Pour suivre, vous aurez besoin:

• Connaissances de base de la réact et de JavaScript. De nombreuses ressources en ligne offrent des guides d'introduction.
• Une compréhension des mécanismes de création de pages dynamiques de Gatsby. Des tutoriels complets sont facilement disponibles.
• Une installation WordPress fonctionnelle. Il existe de nombreux guides pour aider à la configuration.

Tirer parti des ressources existantes

Ce projet a bénéficié de l'expérience antérieure de Gatsby et des composants réutilisables (typographie, mise en page, etc.). Ressources clés incluses:

• Guide complet de démarrage Gatsby WordPress de Gatsby de Henrik Wirth.
• Le tutoriel de migration Jason Lenstorf de Jason Lenstorf.
• Guide de Muhammad Muhsin sur le portage du thème des vingt-dix-neuf ans.

Ce tutoriel reflète la structure de Henrik Wirth, omettant des fonctionnalités avancées comme la manipulation d'images et le contenu flexible ACF.

Phases du projet:

1. Configuration WordPress et Gatsby
2. Migration de contenu
3. Mise en œuvre de la navigation
4. Affichage de l'article de blog
5. Style et déploiement

Phase 1: Configuration de WordPress et Gatsby

Commencez par établir un site WordPress (existant ou nouveau, même une installation locale fonctionne). Ce projet utilise le thème des vingt vingt.

Installer des plugins essentiels

Installez WPGRAPHQL (pour l'API GraphQL) et WPGRAPHIQL (facultatif, mais utile pour tester les requêtes). Ces plugins peuvent ne pas être disponibles dans le répertoire de plugin WordPress; Téléchargez-les directement depuis GitHub et installez manuellement. WPGraphiql fournit une interface de test pratique dans le tableau de bord WordPress.

Initialisation du site Gatsby

Créez un site GATSBY local en utilisant le démarreur par défaut:

 Gatsby New WordPress-Gatsby https://github.com/gatsbyjs/gatsby-starter-default

Démarrez le serveur de développement ( gatsby develop ) et accédez à la page de démarrage de localhost:8000 .

Installez et configurez le plugin gatsby-source-graphql :

 Yarn Ajouter Gatsby-Source-GraphQL # ou NPM Install - Save Gatsby-Source-GraphQL

Configurer gatsby-config.js :

 module.exports = {
  Plugins: [
    {
      Resolve: "Gatsby-Source-GraphQL",
      Options: {
        typename: "wpgraphql",
        FieldName: "WPContent",
        URL: "https://tinjurewp.com/wp-gatsby/graphql", // ou utilisez des variables d'environnement
      },
    },
  ],
};

Envisagez d'utiliser le module dotenv pour les variables d'environnement pour gérer les données sensibles.

Après le redémarrage du serveur, l'API WPGraphQL est accessible via Gatsby sur https://localhost:8000/__graphql/ .

Phase 2: Migrating WordPress Content

Gatsby crée des pages pendant le processus de construction en interrogeant les données avec GraphQL. Cela implique l'utilisation d'API onCreateNode et createPages de Gatsby.

Préparation de contenu

Ajoutez des publications et des pages à votre site WordPress. Supprimez index.js et page-2.js du dossier pages Gatsby pour éviter les conflits.

Création de modèle

Créer des modèles pour les articles ( /src/templates/post/index.js ) et les pages ( /src/templates/page/index.js ):

 // src / modèles / post / index.js (exemple)
importer réagir à partir de "réagir";
Importer la disposition de "../../components/layout";
Importer un référencement à partir de "../../components/seo";

const post = ({PageContext}) => {
  const post = pageContext.post;
  retour (
    <layout>
      <seo title="{post.title}"></seo>
      <h1 id="post-title">{post.title}</h1>
      <div dangerouslysetinnerhtml="{{" __html: post.content></div>
    </layout>
  ));
};

Exporter la publication par défaut;

Implémentation de l'API createPages

Utilisez l'API createPages de Gatsby pour générer des pages à partir de données WordPress. Cela implique des requêtes GraphQL et une cartographie des données. (Reportez-vous au code complet dans le référentiel GitHub lié).

Phase 3: Mise en œuvre de la navigation

La gestion de la navigation de WordPress permet de créer des menus. Cette section se concentre sur le portage du menu principal vers Gatsby.

Création de menu dans WordPress

Créez un menu nommé "Primary" dans WordPress, en ajoutant des liens à votre page d'accueil, à votre page d'échantillonnage et à d'autres contenus pertinents.

Requête graphique

Éléments de menu de requête en utilisant Graphiql:

 requête myquery {
  MENUITEMS (où: {emplacement: primaire}) {
    NODES {
      étiquette
      URL
      titre
      cible
    }
  }
}

Création de composants

Créez des composants pour les éléments de menu ( MenuItem.js ) et le menu lui-même ( Menu.js ), gérer la conversion d'URL des chemins absolus aux chemins relatifs. (Reportez-vous au code complet dans le référentiel GitHub lié).

Intégration du menu

Ajoutez le composant Menu à votre composant Layout . Implémentez un composant UniversalLink pour gérer les liens internes et externes.

Phase 4: affichage des articles de blog

Cette phase se concentre sur la création de modèles de blog et de composants pour la pagination.

Variables globales

Créez un fichier globals.js pour gérer les paramètres comme blogURI .

Modèle de blog

Créez un modèle de blog ( /src/templates/post/blog.js ) pour afficher les publications, en utilisant des composants PostEntry et Pagination .

Composant post-entrée

Créez un composant PostEntry pour afficher des publications individuelles, y compris des images et des extraits en vedette.

Composant d'image

Créez un composant Image pour gérer les images en vedette, y compris les images de secours.

Composant de pagination

Créez un composant Pagination pour naviguer dans les articles paginés.

Refactoriser createPages et createPosts

Refactor createPages.js et createPosts.js utilisant des fragments graphiques pour améliorer l'organisation et la maintenabilité du code. (Reportez-vous au code complet dans le référentiel GitHub lié).

Phase 5: style et déploiement

Cette section couvre les stratégies de style et de déploiement.

Coiffage

Utilisez Sass ou d'autres méthodes préférées pour le style. Envisagez d'incorporer les styles de blocs WordPress à l'aide de @wordpress/block-library .

Déploiement

Utilisez Netlify ou d'autres plateformes de déploiement continu. Pensez à utiliser le plugin de déploiements Jamstack pour les déploiements automatiques déclenchés par des modifications WordPress.

Ce guide complet fournit une base solide pour intégrer Gatsby et WordPress. N'oubliez pas de consulter le référentiel GitHub lié pour les exemples de code complets et les détails supplémentaires. Le processus implique plusieurs étapes et nécessite une bonne compréhension de Gatsby et WordPress. Cependant, le résultat est un site Web rapide, sécurisé et maintenable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!