Qu’est-ce qu’un CMS headless ?<\/h2>\n
Un CMS Headless est un syst\u00e8me de gestion de contenu sp\u00e9cialis\u00e9 qui g\u00e8re exclusivement le backend de votre site. Contrairement aux CMS traditionnels, il ne dicte pas la mani\u00e8re dont le contenu appara\u00eet sur le frontend. Au contraire, il fournit une interface de programmation d’applications (API)<\/a> permettant aux d\u00e9veloppeurs<\/a> de r\u00e9cup\u00e9rer et de diffuser le contenu sur n’importe quel appareil ou plateforme.<\/p>\n Il existe aujourd’hui de nombreuses plateformes de CMS headless. Cependant, il peut sembler inutile de transf\u00e9rer votre contenu de WordPress, que vous connaissez d\u00e9j\u00e0. Heureusement, il existe une alternative : WordPress headless.<\/p>\n WordPress<\/a>, dans sa forme traditionnelle, n’est pas intrins\u00e8quement un CMS headless t\u00eate. WordPress est un CMS populaire et puissant, connu pour sa facilit\u00e9 d’utilisation et sa flexibilit\u00e9 en mati\u00e8re de cr\u00e9ation et de gestion de contenu. Cependant, il combine traditionnellement la gestion du contenu et la mani\u00e8re dont il est pr\u00e9sent\u00e9 dans un seul syst\u00e8me.<\/p>\n De nos jours, les d\u00e9veloppeurs ont cr\u00e9\u00e9 des impl\u00e9mentations headles de WordPress en utilisant son API REST. Dans ce cas, WordPress fonctionne toujours comme le CMS dans lequel vous cr\u00e9ez, g\u00e9rez et stockez du contenu. Cependant, au lieu de rendre le frontend ou le site web directement par le biais de mod\u00e8les<\/a> et de th\u00e8mes WordPress, la pr\u00e9sentation du frontend est d\u00e9coupl\u00e9e ou d\u00e9tach\u00e9e du backend.<\/p>\n Cela permet aux d\u00e9veloppeurs de cr\u00e9er des applications utilisant des technologies et des frameworks diff\u00e9rents tout en continuant \u00e0 tirer parti des fonctionnalit\u00e9s famili\u00e8res de gestion de contenu de WordPress. C’est une fa\u00e7on de faire fonctionner WordPress headless, m\u00eame si ce n’est pas la configuration par d\u00e9faut.<\/p>\n Cet article explore deux approches pour r\u00e9cup\u00e9rer des donn\u00e9es de votre CMS WordPress headless dans votre framework frontend, en se concentrant sur deux m\u00e9thodes principales : WPGraphQL et REST API.<\/p>\n L’API REST est un pilier fondamental du d\u00e9veloppement de WordPress qui facilite la r\u00e9cup\u00e9ration de donn\u00e9es au format JSON. Depuis WordPress 4.7<\/a>, elle est int\u00e9gr\u00e9e \u00e0 WordPress et ne n\u00e9cessite aucune extension pour fonctionner.<\/p>\n Elle fournit un acc\u00e8s aux donn\u00e9es du contenu de votre site et met en \u0153uvre les m\u00eames restrictions d’authentification – le contenu public de votre site est g\u00e9n\u00e9ralement accessible au public via l’API REST, tandis que le contenu priv\u00e9, le contenu prot\u00e9g\u00e9 par mot de passe, les utilisateurs internes, les types de publication personnalis\u00e9s et les m\u00e9tadonn\u00e9es ne sont disponibles qu’avec une authentification ou si vous l’avez sp\u00e9cifiquement d\u00e9fini comme tel.<\/p>\n Pour obtenir vos donn\u00e9es WordPress au format JSON, ajoutez Si l’API JSON n’est pas activ\u00e9e par d\u00e9faut lorsque vous visitez Cela fonctionne pour les sites WordPress locaux et publics, offrant des points de terminaison<\/a> pour les articles<\/a>, les pages<\/a>, les commentaires<\/a>, les m\u00e9dias<\/a>, etc.<\/p>\n Il y a plus que ce que vous pouvez faire avec l’API REST. Lisez notre guide complet<\/a> pour en savoir plus.<\/p>\n En 2012, Facebook a introduit GraphQL, une approche r\u00e9volutionnaire de la r\u00e9cup\u00e9ration de donn\u00e9es via les API. Sa nature d\u00e9clarative et la r\u00e9cup\u00e9ration s\u00e9lective des donn\u00e9es ont fourni une alternative robuste aux API REST traditionnelles.<\/p>\n En 2015, Jason Bahl<\/a> a reconnu la demande pour une solution qui combine la flexibilit\u00e9 de GraphQL avec les capacit\u00e9s de contenu de WordPress et a ensuite publi\u00e9 WPGraphQL<\/a>, un changement de jeu pour les d\u00e9veloppeurs WordPress.<\/p>\n WPGraphQL est une extension bas\u00e9e sur GraphQL qui offre une approche plus efficace et personnalis\u00e9e de l’interrogation des donn\u00e9es. Il pr\u00e9sente un point de terminaison unique, permettant une r\u00e9cup\u00e9ration pr\u00e9cise des donn\u00e9es et r\u00e9duisant les probl\u00e8mes de sur-r\u00e9cup\u00e9ration qui pr\u00e9valent dans l’API REST.<\/p>\n Pour utiliser WPGraphQL, suivez les \u00e9tapes suivantes :<\/p>\n Le terrain de jeu vous permet d’explorer le sch\u00e9ma, d’ex\u00e9cuter des requ\u00eates et de tester des mutations de mani\u00e8re interactive.<\/li>\n Vous pouvez maintenant int\u00e9grer WPGraphQL dans votre application frontend, qu’elle soit construite avec React<\/a>, Vue<\/a> ou tout autre framework, en utilisant un seul point de terminaison GraphQL pour r\u00e9cup\u00e9rer les donn\u00e9es efficacement et mettre \u00e0 jour votre interface utilisateur dynamiquement.<\/p>\n WPGraphQL poss\u00e8de des fonctionnalit\u00e9s cl\u00e9s pour une exp\u00e9rience de r\u00e9cup\u00e9ration de donn\u00e9es rationalis\u00e9e et cibl\u00e9e, comme indiqu\u00e9 ci-dessous.<\/p>\n WPGraphQL fournit un point de terminaison unifi\u00e9, typiquement Dans le cas de l’API REST, supposons que vous souhaitiez obtenir des d\u00e9tails sur un article sp\u00e9cifique et ses commentaires. Vous devez faire plusieurs demandes \u00e0 diff\u00e9rents points de terminaison, par exemple :<\/p>\n Pour obtenir des informations sur un article :<\/p>\n Pour obtenir les commentaires li\u00e9s \u00e0 l’article :<\/p>\n En revanche, avec WPGraphQL, vous pouvez obtenir le m\u00eame r\u00e9sultat avec une seule requ\u00eate cibl\u00e9e :<\/p>\n Dans cet exemple, la requ\u00eate GraphQL est envoy\u00e9e \u00e0 un seul point de terminaison. La requ\u00eate sp\u00e9cifie que nous voulons des informations sur l’article portant l’ID \u00ab 123 \u00bb, y compris son titre, son contenu et les commentaires associ\u00e9s. WPGraphQL traite cette requ\u00eate et renvoie une r\u00e9ponse contenant pr\u00e9cis\u00e9ment les donn\u00e9es demand\u00e9es, en une seule fois.<\/p>\n Avec GraphQL, vous pouvez \u00e9laborer des requ\u00eates sp\u00e9cifiques adapt\u00e9es \u00e0 vos besoins. Cela vous permet de ne demander que les donn\u00e9es n\u00e9cessaires et de minimiser les recherches excessives.<\/p>\n Supposons que vous souhaitiez r\u00e9cup\u00e9rer quelques d\u00e9tails (titre, auteur et date) sur tous les articles. L’API REST ne peut pas le faire. Pour r\u00e9cup\u00e9rer ces d\u00e9tails, vous devez utiliser un point de terminaison comme celui-ci :<\/p>\n Ce point de terminaison r\u00e9cup\u00e8re l’ensemble des donn\u00e9es de tous les articles, y compris le contenu, les cat\u00e9gories et les donn\u00e9es associ\u00e9es. Avec WPGraphQL, vous pouvez \u00e9laborer une requ\u00eate cibl\u00e9e pour r\u00e9cup\u00e9rer uniquement les donn\u00e9es sp\u00e9cifiques dont vous avez besoin :<\/p>\n Dans cet exemple, la requ\u00eate GraphQL est con\u00e7ue pour r\u00e9cup\u00e9rer des d\u00e9tails sur les articles. Cependant, nous ne demandons que le titre, la date et le nom de l’auteur. WPGraphQL vous permet de ne demander que les champs qui vous int\u00e9ressent, ce qui se traduit par une r\u00e9ponse plus efficace et plus l\u00e9g\u00e8re.<\/p>\n WPGraphQL vous permet d’interroger plusieurs ressources racines en une seule requ\u00eate, ce qui le rend flexible et efficace :<\/p>\n Lorsque vous vous embarquez dans le voyage d’une installation WordPress headless, l’une des d\u00e9cisions critiques auxquelles vous faites face est de choisir la t\u00eate id\u00e9ale – la technologie frontend qui alimentera votre interface utilisateur et dictera l’exp\u00e9rience de l’utilisateur.<\/p>\n Cette d\u00e9cision est d’une importance capitale car elle a un impact direct sur les performances, l’\u00e9volutivit\u00e9 et la maintenabilit\u00e9 de votre application web. Plusieurs frameworks et technologies frontales sont compatibles avec WordPress headless, chacun avec ses points forts et ses consid\u00e9rations.<\/p>\n Par exemple, vous pouvez choisir un g\u00e9n\u00e9rateur de site statique (SSG)<\/a>\u00a0et le d\u00e9ployer gratuitement sur l ‘h\u00e9bergement de site statique de Kinsta<\/a>, de sorte que vous n’avez qu’\u00e0 vous soucier de l’h\u00e9bergement de WordPress<\/a> (le backend) et \u00e0 profiter de l’h\u00e9bergement gratuit de l’interface publique (le frontend).<\/p>\n De m\u00eame, vous pouvez \u00e9galement utiliser une approche plus robuste, par exemple en utilisant une biblioth\u00e8que JavaScript<\/a> comme React<\/a> pour alimenter votre frontend et conserver le traitement de WordPress pour le backend.<\/p>\n WPGraphQL et l’API REST offrent tous deux des moyens puissants pour r\u00e9cup\u00e9rer des donn\u00e9es \u00e0 partir d’un CMS WordPress headless et les int\u00e9grer de mani\u00e8re transparente dans des applications frontend. Le choix entre les deux d\u00e9pend des besoins sp\u00e9cifiques de votre projet et de votre approche pr\u00e9f\u00e9r\u00e9e de r\u00e9cup\u00e9ration des donn\u00e9es.<\/p>\n Si vous optez pour l’API REST, vous aurez acc\u00e8s \u00e0 une solution int\u00e9gr\u00e9e dans WordPress, qui vous permettra de r\u00e9cup\u00e9rer facilement des donn\u00e9es au format JSON. D’un autre c\u00f4t\u00e9, WPGraphQL fournit une approche plus moderne et plus efficace, en tirant parti de la puissance de GraphQL.<\/p>\n Comme la tendance headless continue d’\u00e9voluer, les d\u00e9veloppeurs peuvent choisir l’outil qui correspond le mieux \u00e0 leur flux de travail et aux objectifs de leur projet, en assurant une int\u00e9gration transparente et efficace entre WordPress et le framework frontend de leur choix.<\/p>\n Chez Kinsta<\/a>, cr\u00e9er et g\u00e9rer votre WordPress (backend) est un jeu d’enfant gr\u00e2ce \u00e0 notre h\u00e9bergement WordPress<\/a> sp\u00e9cialis\u00e9. Il dispose de fonctionnalit\u00e9s int\u00e9ressantes, notamment la mise en cache<\/a>, les sauvegardes de site<\/a>, les certificats SSL Cloudflare gratuits<\/a>, le CDN de Kinsta<\/a>, et bien plus encore.<\/p>\n Vous pouvez \u00e9galement d\u00e9ployer votre frontend en utilisant notre h\u00e9bergement d’applications<\/a> ou notre h\u00e9bergement de sites statiques<\/a> pour les SSG. Cette approche unifi\u00e9e permet \u00e0 votre frontend et \u00e0 votre backend d’\u00eatre facilement h\u00e9berg\u00e9s et accessibles \u00e0 partir d’un seul tableau de bord<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Aujourd’hui, dans le domaine du d\u00e9veloppement web, le d\u00e9couplage des syst\u00e8mes frontend et backend a pris de l’ampleur, donnant naissance aux sites web headless. Traditionnellement, les …<\/p>\n","protected":false},"author":287,"featured_media":75023,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[953,973],"class_list":["post-75022","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-headless-cms"],"yoast_head":"\nWordPress headless<\/h3>\n
![\"Architecture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/headless-cms-arcitecture.png\")
Comprendre l’API REST pour WordPress headless<\/h2>\n
\/wp-json<\/code> \u00e0 l’URL de votre site WordPress :<\/p>\nhttp:\/\/yoursite.com\/wp-json<\/code><\/pre>\nhttp:\/\/yoursite.com\/wp-json<\/code>, vous pouvez l’activer en ouvrant vos Permaliens<\/strong> sous R\u00e9glages WordPress<\/strong> et en s\u00e9lectionnant Nom de publication<\/strong> ou tout autre nom de votre choix sauf Simple <\/strong>:<\/p>\n![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/configure-headless-wp-rest-api.jpg\")
http:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/comments\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/media<\/code><\/pre>\nExplorer WPGraphQL pour WordPress headless<\/h2>\n
Comment utiliser WPGraphQL<\/h3>\n
\n
![\"L'extension](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/wpgraphql-plugin.png\")
![\"Explorer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/graphql-ide-wp.jpg\")
![\"R\u00e9cup\u00e9rez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/testing-graphql-wp.jpg\")
Fonctionnalit\u00e9s cl\u00e9s de WPGraphQL<\/h3>\n
Un seul point de terminaison pour une r\u00e9cup\u00e9ration pr\u00e9cise des donn\u00e9es<\/h4>\n
\/graphql<\/code>, qui vous permet de r\u00e9cup\u00e9rer des donn\u00e9es sp\u00e9cifiques de mani\u00e8re efficace. Cela contraste avec l’API REST, o\u00f9 vous avez besoin de plusieurs points de terminaison pour collecter les m\u00eames informations.<\/p>\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\/123<\/code><\/pre>\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/comments?post=123<\/code><\/pre>\n{\n post(id: \"123\") {\n title\n content\n comments {\n edges {\n node {\n content\n }\n }\n }\n }\n}<\/code><\/pre>\nDes requ\u00eates cibl\u00e9es pour une r\u00e9cup\u00e9ration efficace<\/h4>\n
http:\/\/yoursite.com\/wp-json\/wp\/v2\/posts<\/code><\/pre>\n{\n posts {\n title\n date\n author {\n name\n }\n }\n}<\/code><\/pre>\nRessources racines multiples<\/h4>\n
{\n posts {\n edges {\n node {\n title\n content\n }\n }\n }\n\n pages {\n edges {\n node {\n title\n content\n }\n }\n }\n}<\/code><\/pre>\nChoisir la t\u00eate id\u00e9ale pour WordPress headless<\/h2>\n
R\u00e9sum\u00e9<\/h2>\n