{"id":76990,"date":"2024-05-13T09:06:09","date_gmt":"2024-05-13T08:06:09","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=76990&preview=true&preview_id=76990"},"modified":"2024-05-14T10:31:45","modified_gmt":"2024-05-14T09:31:45","slug":"wordpress-sveltekit","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/wordpress-sveltekit\/","title":{"rendered":"Int\u00e9grer SvelteKit avec WordPress headless"},"content":{"rendered":"

Depuis un certain temps, WordPress headless est une grande tendance dans les sph\u00e8res du d\u00e9veloppement web. Le d\u00e9couplage entre le frontend et le backend peut conduire \u00e0 un degr\u00e9 de contr\u00f4le plus fin, \u00e0 des applications omnicanales<\/a> et \u00e0 des utilisations int\u00e9ressantes de cette nouvelle technologie.<\/p>\n

De nombreux d\u00e9veloppeurs ont pris plaisir \u00e0 exp\u00e9rimenter des frameworks comme Vue.js<\/a> et React.js<\/a> ou m\u00eame des frameworks web comme Django<\/a> et Ruby on Rails<\/a>, qui sont g\u00e9n\u00e9ralement incompatibles avec WordPress.<\/p>\n

Il y a beaucoup de frameworks comme ceux-ci qui fonctionnent bien avec WordPress headless, mais SvelteKit est un framework sp\u00e9cial. Ce framework d’interface utilisateur a \u00e9t\u00e9 sp\u00e9cialement con\u00e7u pour faciliter le d\u00e9veloppement d’applications web gr\u00e2ce \u00e0 un code concis et gracieux. Il peut facilement rationaliser des fonctionnalit\u00e9s qui, normalement, ne fonctionnent pas bien dans un environnement d\u00e9coupl\u00e9.<\/p>\n

Vous souhaitez en savoir plus ? Passons en revue les bases de WordPress headless, puis nous vous apprendrons tout sur SvelteKit et comment le faire fonctionner dans votre environnement.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Qu’est-ce que WordPress headless ?<\/h2>\n

Vous connaissez peut-\u00eatre d\u00e9j\u00e0 la diff\u00e9rence entre le frontend et le backend de WordPress<\/a>. Le backend est l’endroit o\u00f9 se d\u00e9roulent toutes les op\u00e9rations sous-jacentes du CMS : vous cr\u00e9ez des articles et des pages, installez des extensions, concevez votre th\u00e8me et modifiez les r\u00e9glages.<\/p>\n

De l’autre c\u00f4t\u00e9, l’interface est essentiellement le site web pr\u00e9sent\u00e9 aux visiteurs. WordPress, avec ses th\u00e8mes et ses extensions, utilise diverses fonctions telles que get_posts()<\/a> pour extraire et afficher les donn\u00e9es dont il a besoin.<\/p>\n

Prenez par exemple le widget \u00ab Articles r\u00e9cents \u00bb qui s’affiche sur la page d’accueil. Gr\u00e2ce \u00e0 des fonctions de ce type, il acc\u00e8de aux donn\u00e9es du backend et affiche vos derniers articles dans l’interface publique.<\/p>\n

\"Les
Les articles similaires sont affich\u00e9s sur le blog Kinsta.<\/figcaption><\/figure>\n

Le backend et le frontend de WordPress sont \u00e9troitement li\u00e9s et, \u00e0 bien des \u00e9gards, d\u00e9pendent l’un de l’autre pour fonctionner, mais cela ne signifie pas qu’ils sont ins\u00e9parables.<\/p>\n

C’est l\u00e0 qu’intervient le concept de \u00ab WordPress headless \u00bb : avec ce concept, vous s\u00e9parez, ou d\u00e9couplez, le backend de WordPress. Vous \u00eates alors libre de le relier \u00e0 la technologie frontend que vous souhaitez utiliser – pas seulement PHP, mais n’importe quel framlework de d\u00e9veloppement web<\/a>, ou m\u00eame une application.<\/p>\n

Cette fonctionnalit\u00e9 suppl\u00e9mentaire vous permet d’utiliser le CMS WordPress sur plusieurs canaux. Portez vos articles de blog ou d’autres \u00e9l\u00e9ments du CMS sur plusieurs sites web, applications mobiles, et o\u00f9 vous voulez.<\/p>\n

Dans l’ensemble, WordPress headless vous donne plus de contr\u00f4le sur le CMS et la possibilit\u00e9 d’utiliser des technologies qui sont habituellement incompatibles avec lui. Il vous \u00e9vite \u00e9galement d’avoir \u00e0 \u00e9crire une application compl\u00e8te \u00e0 partir de z\u00e9ro – vous pouvez utiliser le CMS int\u00e9gr\u00e9 de WordPress pour faire une partie du travail.<\/p>\n

Qu’est-ce que l’API REST ?<\/h2>\n

Pour faire fonctionner WordPress headless, vous devez connecter vos applications \u00e0 l’aide d’une API (Application Programming Interface). Les API permettent \u00e0 deux applications diff\u00e9rentes de s’interfacer l’une avec l’autre, dans ce cas, le backend de WordPress et votre application frontend personnalis\u00e9e.<\/p>\n

Bien qu’il existe de nombreux types d’API, l’API REST<\/a> est l’une de celles qui sont int\u00e9gr\u00e9es \u00e0 WordPress. Elle permet \u00e0 des applications externes de r\u00e9cup\u00e9rer en toute s\u00e9curit\u00e9 des donn\u00e9es du backend de WordPress sans passer par l’interface d’administration.<\/p>\n

L’API REST est utilis\u00e9e dans une vari\u00e9t\u00e9 de fonctions officielles de WordPress, y compris l’\u00e9diteur de blocs, et la plupart des th\u00e8mes et des extensions qui ont besoin d’une API pour fonctionner l’utilisent.<\/p>\n

Cela s’applique \u00e9galement aux applications headless. Beaucoup d’entre elles utilisent l’API REST pour s’interfacer avec WordPress, en r\u00e9cup\u00e9rant les donn\u00e9es du backend et en les restituant dynamiquement dans votre application frontend.<\/p>\n

L’API REST fournit des points de terminaison<\/a> qui repr\u00e9sentent diff\u00e9rentes ressources WordPress, telles que les articles, les pages, les utilisateurs, les cat\u00e9gories, etc. L’acc\u00e8s \u00e0 ces points vous permet d’afficher ces donn\u00e9es dans l’application frontend.<\/p>\n

Bien que vous puissiez utiliser l’API REST, SvelteKit s’appuie principalement sur une technologie diff\u00e9rente pour la plupart de ses fonctions : GraphQL.<\/p>\n

Qu’est-ce que GraphQL ?<\/h2>\n
\"GraphQL
GraphQL est un langage de requ\u00eate d’API.<\/figcaption><\/figure>\n

GraphQL<\/a> n’est pas une API \u00e0 proprement parler, mais un langage de requ\u00eate d’API. Contrairement aux API REST<\/a> traditionnelles, o\u00f9 les clients doivent souvent faire plusieurs requ\u00eates \u00e0 diff\u00e9rents points de terminaison pour r\u00e9cup\u00e9rer des donn\u00e9es connexes, GraphQL vous permet de r\u00e9cup\u00e9rer toutes vos donn\u00e9es en une seule requ\u00eate.<\/p>\n

Dans l’ensemble, GraphQL a \u00e9t\u00e9 con\u00e7u pour vous permettre d’effectuer des requ\u00eates plus concises dans un framework rapide et optimis\u00e9. Il est \u00e9galement plus facile \u00e0 apprendre et moins complexe que l’API REST.<\/p>\n

Pour ces raisons, de nombreux frameworks WordPress headless utilisent GraphQL plut\u00f4t que l’API REST ou en compl\u00e9ment de celle-ci. Bien que GraphQL ne soit pas int\u00e9gr\u00e9 \u00e0 WordPress comme l’API REST, il existe des extrensions que vous pouvez utiliser pour int\u00e9grer cette fonctionnalit\u00e9 dans le CMS.<\/p>\n

Gr\u00e2ce au framework optimis\u00e9, vous \u00e9vitez de ne pas extraire suffisamment de donn\u00e9es ou d’en extraire trop. Vous pouvez r\u00e9cup\u00e9rer les donn\u00e9es exactes dont vous avez besoin en une seule requ\u00eate, ce qui est beaucoup plus facile pour votre r\u00e9seau et votre serveur.<\/p>\n

Qu’est-ce que SvelteKit ?<\/h2>\n
\"SvelteKit
SvelteKit est un framework que vous pouvez utiliser pour construire des applications et des WordPress headless.<\/figcaption><\/figure>\n

SvelteKit<\/a> est un framework web construit sur Svelte, un framework frontend open source similaire \u00e0 Next.js<\/a> ou React<\/a>. Il a \u00e9t\u00e9 con\u00e7u pour rationaliser le processus de cr\u00e9ation d’applications web, et bien qu’il n’ait pas \u00e9t\u00e9 con\u00e7u sp\u00e9cifiquement pour WordPress headless, ce n’est qu’une des nombreuses applications possibles.<\/p>\n

SvelteKit a \u00e9t\u00e9 construit sur HTML, CSS et Javascript – rien de plus. Cela le rend super facile \u00e0 utiliser et agnostique, vous pouvez donc l’utiliser avec d’autres frameworks pour cr\u00e9er une application frontend enti\u00e8rement dynamique ou construire un site statique<\/a>.<\/p>\n

Svelte a \u00e9t\u00e9 lanc\u00e9 en 2016 et est toujours activement mis \u00e0 jour aujourd’hui. Le framework web SvelteKit est arriv\u00e9 quelques ann\u00e9es plus tard, en 2020. Les deux sont bien connus et appr\u00e9ci\u00e9s sur la sc\u00e8ne du d\u00e9veloppement web, vous permettant d’\u00e9crire un code simple et \u00e9l\u00e9gant.<\/p>\n

Pourquoi devriez-vous utiliser SvelteKit pour WordPress headless ?<\/h3>\n

Il y a quelques aspects de WordPress sans t\u00eate qui peuvent \u00eatre difficiles \u00e0 faire fonctionner. Gr\u00e2ce \u00e0 la conception minimale de SvelteKit, ces probl\u00e8mes sont minimis\u00e9s et rendent l’installation de WordPress headless beaucoup plus facile.<\/p>\n

Voici quelques-unes des fonctionnalit\u00e9s offertes par SvelteKit.<\/p>\n