Aller au contenu

Intégration CMS : connecter WordPress et lier les données

Dans cette section, nous allons configurer WordPress comme source de données, le connecter à Silex et lier les articles de blog à votre page d'accueil.

Si vous n'avez pas WordPress ou ne souhaitez pas utiliser de CMS, vous pouvez passer cette page. Votre site fonctionne parfaitement bien sans — codez simplement votre contenu en dur au lieu de le récupérer depuis WordPress.

Configurer WordPress (si vous ne l'avez pas encore)

Vous aurez besoin d'un site WordPress fonctionnant avec deux extensions :

Pods — Vous permet de créer des types de contenu personnalisés et des champs personnalisés au-delà de la structure par défaut Articles/Pages. Pods est 100% gratuit et open source.

WPGraphQL et WPGraphQL for Pods — Expose votre contenu WordPress via GraphQL (un langage de requête que Silex utilise pour récupérer les données).

Installer les extensions

  1. Dans l'administration WordPress, allez dans Extensions → Ajouter
  2. Recherchez « Pods » et installez-le
  3. Recherchez « WPGraphQL » et installez-le
  4. Recherchez « WPGraphQL for Pods » et installez-le
  5. Activez les trois extensions

Créer un type de contenu personnalisé pour les projets (optionnel)

Si vous souhaitez mettre en avant des projets en plus des articles de blog, créez un type de contenu personnalisé avec Pods :

  1. Dans WordPress, allez dans Pods Admin → Add New
  2. Sélectionnez Custom Post Type
  3. Nom : « Project », Singulier : « Project », Pluriel : « Projects »
  4. Cliquez sur Save Pod

Vous disposez maintenant d'un menu « Projects » dans WordPress où vous pouvez ajouter des éléments de portfolio.

Configurer les champs personnalisés pour les articles de blog

  1. Dans WordPress, allez dans Pods Admin → Edit Pods
  2. Sélectionnez le pod Post (ou votre type de contenu personnalisé)
  3. Cliquez sur Add Field et créez des champs pour le contenu du blog :
  4. « Featured Image » (type : File / Image)
  5. « Excerpt » (type : Paragraph, 200 caractères)

  6. « Author Name » (type : Plain Text)

  7. Assurez-vous que Show in GraphQL est activé pour chaque champ

  8. Cliquez sur Save Pod

Lorsque vous créez des articles de blog, vous pouvez maintenant remplir ces champs personnalisés.

Obtenir votre endpoint WordPress GraphQL

Votre site WordPress expose les données via un endpoint GraphQL. C'est l'URL que Silex utilisera pour récupérer le contenu.

Trouver votre endpoint GraphQL :

Si votre WordPress est à https://monwordpress.com, l'endpoint GraphQL est généralement :

https://monwordpress.com/graphql

Testez-le en visitant cette URL dans votre navigateur. Vous devriez voir une interface GraphQL (ou une réponse JSON si vous la visualisez dans le navigateur).

Connecter WordPress dans Silex

Maintenant, indiquons à Silex où trouver vos données WordPress.

Dans Silex, allez dans les Paramètres du site :

  1. Cliquez sur Settings (barre latérale gauche, généralement une icône d'engrenage)
  2. Trouvez la section Data Source ou CMS
  3. Cliquez sur Connect Data Source
  4. Choisissez WordPress (ou GraphQL si vous utilisez une autre API GraphQL)
  5. Collez l'URL de votre endpoint : https://monwordpress.com/graphql
  6. Cliquez sur Save

Silex se connecte maintenant à WordPress. Vous devriez voir une coche verte indiquant que la connexion est réussie.

Créer une liaison de données pour les articles de blog

Nous allons maintenant ajouter les articles de blog à la page d'accueil. Créons une section qui affiche les trois derniers articles.

Sur la page index :

  1. Trouvez un emplacement sous votre section hero pour ajouter une zone d'articles de blog
  2. Ajoutez un Div avec la classe agency-blog
  3. Ajoutez un Heading 2 (h2) avec le texte « Derniers articles » ou similaire
  4. En dessous, ajoutez un Div avec la classe agency-blog-grid — celui-ci contiendra les cartes

Configurer la grille :

  1. Sélectionnez le Div agency-blog-grid
  2. Définissez Display : Flex
  3. Définissez Flex-wrap : wrap
  4. Définissez Column-gap et Row-gap (par ex. 24px)
  5. Cela affichera les articles de blog côte à côte

Ajouter un composant carte d'article de blog

À l'intérieur du agency-blog-grid, créez une carte qui se répétera pour chaque article de blog :

  1. Ajoutez un Div avec la classe agency-blog-card
  2. À l'intérieur, ajoutez :
  3. Image — affichera l'image mise en avant
  4. Heading 3 (h3) — affichera le titre de l'article
  5. Paragraph — affichera l'extrait
  6. Link — renverra vers l'article

Styliser la carte :

Appliquez les mêmes styles de carte que précédemment :

  • Border, Border-radius, Padding, Box-shadow
  • Flex-basis d'environ 300px avec Flex-grow 1
  • Définissez Width de l'image à 100% et Height à 200px avec Object-fit : cover

Créer une expression pour les articles de blog

Une expression indique à Silex où récupérer les données et comment les formater.

Sur le Div agency-blog-card :

  1. Cliquez sur le panneau Data (barre latérale droite)
  2. Cherchez « States » ou « Data Binding »
  3. Créez un nouvel état appelé post
  4. Définissez le type sur loop — cela indique à Silex que la carte se répétera pour chaque élément

Configurer la boucle :

La boucle a besoin de savoir sur quelles données itérer. Créez une expression :

  1. Cliquez sur Edit Expression (ou un bouton similaire dans le panneau Data)

  2. Votre expression doit pointer vers les articles de blog. Dans WordPress via GraphQL, cela peut être : 

    posts.edges.node
    (ou posts.nodes selon votre configuration WordPress)

  3. Cela indique à Silex d'itérer sur chaque article dans la collection posts

Pour des conseils détaillés sur les expressions, voir Expressions et Liaison de données.

Lier les champs individuels

Maintenant que la carte se répète pour chaque article, liez chaque champ aux données de l'article :

Image de l'article :

  1. Sélectionnez l'élément Image dans la carte
  2. Dans le panneau Data, créez un état appelé featured_image ou image
  3. Définissez l'expression sur : post.featuredImage.sourceUrl (ou similaire, selon votre configuration WordPress)
  4. Cela récupère l'URL de l'image mise en avant de chaque article

Titre de l'article :

  1. Sélectionnez le Heading 3
  2. Créez un état pour le titre
  3. Définissez l'expression sur : post.title
  4. Dans le contenu HTML, liez l'état pour afficher le titre

Extrait de l'article :

  1. Sélectionnez le Paragraph
  2. Créez un état pour l'extrait
  3. Définissez l'expression sur : post.excerpt
  4. Optionnellement, utilisez un filtre pour limiter la longueur (par ex. post.excerpt | slice: 0, 150)

Lien de l'article :

  1. Sélectionnez le Link
  2. Définissez l'attribut href sur l'URL de l'article : post.link ou post.uri

Utiliser les filtres pour formater les données

Silex inclut des filtres Liquid pour transformer les données. Les plus courants :

  • post.excerpt | strip_html — supprimer les balises HTML
  • post.date | date: "%Y-%m-%d" — formater la date
  • post.excerpt | slice: 0, 150 — afficher uniquement les 150 premiers caractères
  • post.title | upcase — convertir en majuscules

Voir Filtres pour la liste complète.

Limiter le nombre d'articles affichés

Par défaut, une boucle affiche tous les articles. Pour n'en afficher que trois :

Lorsque vous créez l'expression de la boucle, modifiez-la pour limiter les résultats :

posts.edges.node | slice: 0, 3

Cela affiche uniquement les trois premiers articles.

Tester votre intégration CMS

Avant de publier, testez la liaison de données :

  1. Dans Silex, assurez-vous d'être sur la page index
  2. Vous devriez voir les articles de blog rendus dans l'éditeur avec le contenu réel de WordPress
  3. Vérifiez que les titres, images et extraits apparaissent correctement
  4. Vérifiez que la mise en page des cartes est correcte avec les données

Si rien n'apparaît :

  • Vérifiez que votre connexion WordPress fonctionne (allez dans les Paramètres du site et vérifiez l'endpoint)
  • Assurez-vous d'avoir au moins un article de blog publié dans WordPress
  • Vérifiez la console du navigateur (F12 → Console) pour les messages d'erreur
  • Vérifiez que votre requête GraphQL est correcte (vous pouvez la tester directement à votrewodpress.com/graphql)

Prochaines étapes

Votre page d'accueil récupère maintenant dynamiquement les articles de blog depuis WordPress. Les visiteurs voient vos derniers articles sans que vous ayez à mettre à jour manuellement la page.

Rendez-vous sur Publication pour mettre votre site en ligne sur GitLab Pages.

Pages connexes

Éditer cette page sur GitLab