{"id":48922,"date":"2021-10-07T14:36:19","date_gmt":"2021-10-07T12:36:19","guid":{"rendered":"https:\/\/kinsta.com\/?p=104261"},"modified":"2025-09-12T13:53:19","modified_gmt":"2025-09-12T12:53:19","slug":"wordpress-headless","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/","title":{"rendered":"Apprennez \u00e0 cr\u00e9er un site WordPress headless avec Vue.js"},"content":{"rendered":"<p>WordPress a \u00e9t\u00e9 le <a href=\"https:\/\/kinsta.com\/fr\/blog\/logiciel-cms\/\">syst\u00e8me de gestion de contenu<\/a> de pr\u00e9dilection des d\u00e9veloppeurs et des non-d\u00e9veloppeurs pour construire et cr\u00e9er rapidement des sites web \u00e9poustouflants.<\/p>\n<p>L&rsquo;utilisation d&rsquo;une architecture micro-service, o\u00f9 l&rsquo;administration de gestion de contenu est s\u00e9par\u00e9 de l&rsquo;interface publique, permet un contr\u00f4le maximal des deux \u00ab extr\u00e9mit\u00e9s \u00bb Ce probl\u00e8me de s\u00e9paration est ce que les syst\u00e8mes de gestion de contenu headless, y compris les solutions WordPress headless, tentent de r\u00e9soudre.<\/p>\n<p>Avec une approche headless, les entreprises ont un contr\u00f4le plus granulaire sur le backend de gestion de contenu. Elles sont \u00e9galement libres d&rsquo;utiliser le frontend de leur choix, notamment React, <a href=\"https:\/\/kinsta.com\/fr\/blog\/angular-vs-vue\/\">Vue, Angular<\/a>, etc.<\/p>\n<p>Ce guide explorera en d\u00e9tail WordPress headless, et ce dont il s&rsquo;agit, quand et pourquoi vous devriez envisager de l&rsquo;utiliser. Enfin, nous explorerons la cr\u00e9ation d&rsquo;un environnement WordPress headless, la construction du frontend avec <a href=\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/\">Vue.js<\/a>, et le d\u00e9ploiement de WordPress headless en utilisant Kinsta.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Qu&rsquo;est-ce que WordPress headless ?<\/h2>\n<p>WordPress est une application monolithique o\u00f9 les parties backend et frontend sont \u00e9troitement li\u00e9es. C&rsquo;est dans l&rsquo;administration (backend) qu&rsquo;intervient la gestion, o\u00f9 vous pouvez cr\u00e9er, modifier, ajouter et supprimer du contenu, y compris modifier les configurations d&rsquo;apparence. En revanche, l&rsquo;interface publique (frontend) est responsable de l&rsquo;affichage du contenu pour l&rsquo;utilisateur.<\/p>\n<p>WordPress headless est le terme utilis\u00e9 pour d\u00e9crire WordPress d\u00e9coupl\u00e9. La partie backend (gestion) est s\u00e9par\u00e9e de la partie frontend du <a href=\"https:\/\/kinsta.com\/fr\/apprendre\/histoire-de-wordpress\/\">CMS WordPress<\/a>. Vous pouvez d\u00e9velopper et g\u00e9rer l&rsquo;interface publique comme une application autonome avec le framework frontend de votre choix.<\/p>\n\n<h2>Avantages et inconv\u00e9nients de WordPress headless<\/h2>\n<p>Ensuite, nous allons explorer les avantages et les inconv\u00e9nients de WordPress headless pour vous permettre de mieux comprendre le concept.<\/p>\n<h3>Les avantages<\/h3>\n<p>Tout d&rsquo;abord, nous allons commencer par explorer les avantages.<\/p>\n<h4>Performances ultra-rapides<\/h4>\n<p>\u00c0 l&rsquo;\u00e8re des applications aux performances super rapides, votre site web ne doit pas prendre <a href=\"https:\/\/kinsta.com\/fr\/apprendre\/accelerer-wordpress\/\">plus de quelques secondes pour se charger<\/a> et \u00e9viter de perdre des visiteurs. Comme l&rsquo;interface publique est s\u00e9par\u00e9e de WordPress et qu&rsquo;elle peut \u00eatre d\u00e9velopp\u00e9e en tenant compte des hautes performances et de l&rsquo;\u00e9volutivit\u00e9 \u00e0 l&rsquo;aide d&rsquo;outils frontend modernes, l&rsquo;utilisation d&rsquo;une approche WordPress headless est tr\u00e8s b\u00e9n\u00e9fique pour l&rsquo;exp\u00e9rience utilisateur globale de votre site web.<\/p>\n<h4>Contr\u00f4le granulaire<\/h4>\n<p>Opter pour une architecture headless vous donne plus de contr\u00f4le sur la mise en page de votre design, la pr\u00e9sentation du contenu et la fa\u00e7on dont les utilisateurs interagissent avec le frontend de votre application. Cela permet \u00e9galement de s\u00e9curiser le contenu de votre backend et d&rsquo;y acc\u00e9der depuis un emplacement central.<\/p>\n<h4>\u00c9volutivit\u00e9 accrue<\/h4>\n<p>La mise \u00e0 l&rsquo;\u00e9chelle de WordPress peut parfois \u00eatre compliqu\u00e9e car vous n&rsquo;avez pas le contr\u00f4le total de tous les composants et codes qui propulsent WordPress, principalement si vous n&rsquo;\u00eates pas un d\u00e9veloppeur. Mais avec le d\u00e9couplage de WordPress, il est facile de mettre \u00e0 l&rsquo;\u00e9chelle chaque partie de mani\u00e8re isol\u00e9e, et vous pouvez facilement d\u00e9tecter quelle partie a besoin d&rsquo;\u00eatre mise \u00e0 l&rsquo;\u00e9chelle.<\/p>\n<h4>S\u00e9curit\u00e9 renforc\u00e9e<\/h4>\n<p>On ne soulignera jamais assez les avantages de WordPress headless en mati\u00e8re de s\u00e9curit\u00e9, car WordPress d\u00e9coupl\u00e9 pr\u00e9sente des avantages de haute s\u00e9curit\u00e9 contre les pirates et les <a href=\"https:\/\/kinsta.com\/fr\/blog\/attaques-ddos\/\">attaques DDoS<\/a>. L&rsquo;approche de WordPress headless rend difficile l&rsquo;acc\u00e8s des pirates \u00e0 vos donn\u00e9es sensibles du backend puisqu&rsquo;il est s\u00e9par\u00e9 de votre frontend, le site web tourn\u00e9 vers l&rsquo;utilisateur.<\/p>\n<h4>Conception l\u00e9g\u00e8re<\/h4>\n<p>Vous aurez plus de contr\u00f4le sur la structure et la mise en page de votre conception frontend. En outre, vous pouvez travailler sur le frontend avec plus de libert\u00e9 et un design personnalis\u00e9 ; gr\u00e2ce aux appels d&rsquo;API REST, vous pourrez profiter d&rsquo;outils web modernes et les d\u00e9ployer sur le frontend.<\/p>\n<h4>Publication de contenu multicanal<\/h4>\n<p>Comme WordPress headless utilise un <a href=\"https:\/\/kinsta.com\/fr\/blog\/api-http-wordpress\/\">syst\u00e8me bas\u00e9 sur l&rsquo;API<\/a> pour communiquer votre contenu \u00e0 l&rsquo;interface publique, vous pouvez afficher votre contenu n&rsquo;importe o\u00f9 et sur n&rsquo;importe quelle plateforme, y compris sur l&rsquo;ordinateur, le site web, les applications mobiles et le kiosque \u00e0 \u00e9cran tactile. Il est \u00e9galement possible d&rsquo;utiliser pleinement la r\u00e9alit\u00e9 augment\u00e9e, la r\u00e9alit\u00e9 virtuelle et les appareils de l&rsquo;Internet des objets pour afficher et pr\u00e9senter votre contenu provenant du syst\u00e8me bas\u00e9 sur l&rsquo;API.<\/p>\n<h3>Les inconv\u00e9nients<\/h3>\n<p>Nous explorerons les inconv\u00e9nients du headless plus en profondeur au fur et \u00e0 mesure, mais ses principaux inconv\u00e9nients sont les suivants :<\/p>\n<ol>\n<li>S\u00e9parer le backend et le frontend vous donne une charge suppl\u00e9mentaire lorsque vous g\u00e9rez diff\u00e9rentes instances de sites web.<\/li>\n<li>Cela peut \u00eatre co\u00fbteux \u00e0 mettre en \u0153uvre car cela n\u00e9cessite des membres suppl\u00e9mentaires dans votre \u00e9quipe et un capital suppl\u00e9mentaire pour g\u00e9rer diff\u00e9rentes instances.<\/li>\n<li>Rendre votre contenu disponible sur diff\u00e9rentes plateformes peut entra\u00eener une exp\u00e9rience incoh\u00e9rente pour vos utilisateurs si le contenu n&rsquo;est pas pr\u00e9sent\u00e9 de mani\u00e8re coh\u00e9rente sur toutes les plateformes.<\/li>\n<\/ol>\n<h2>Quand WordPress headless n&rsquo;est peut-\u00eatre pas la meilleure option<\/h2>\n<p>Puisque WordPress headless est une innovation incroyable avec de grands avantages, il y a certaines choses que vous devez garder \u00e0 l&rsquo;esprit lorsque vous d\u00e9cidez si vous devezvous lancer ou non.<\/p>\n<ol>\n<li>WordPress headless t\u00eate est tr\u00e8s co\u00fbteux \u00e0 entretenir. Vous maintiendrez deux instances diff\u00e9rentes d&rsquo;un m\u00eame site web, depuis <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-iaas\/\">l&rsquo;infrastructure<\/a> jusqu&rsquo;\u00e0 plusieurs d\u00e9veloppeurs.<\/li>\n<li>WordPress headless ne prend pas en charge toutes les fonctionnalit\u00e9s de WordPress. Par exemple, les grandes fonctionnalit\u00e9s de WordPress comme l&rsquo;\u00e9diteur WYSIWYG et l&rsquo;aper\u00e7u en direct ne fonctionneront pas si vous utilisez un frontend s\u00e9par\u00e9.<\/li>\n<li>Il est plus co\u00fbteux de mettre en place un WordPress headless. Par cons\u00e9quent, gardez toujours \u00e0 l&rsquo;esprit son co\u00fbt accru.<\/li>\n<\/ol>\n<h2>Qui devrait utiliser WordPress headless ?<\/h2>\n<p>Vous trouverez ci-dessous les cas les plus appropri\u00e9s pour lesquels vous pourriez avoir besoin de WordPress headless :<\/p>\n<ol>\n<li>Vous devriez utiliser WordPress headless si la <a href=\"https:\/\/kinsta.com\/fr\/blog\/securite-wordpress\/\">s\u00e9curit\u00e9 de votre site web<\/a> est votre principale pr\u00e9occupation et primordiale pour votre entreprise.<\/li>\n<li>Ensuite, si votre site web n&rsquo;a pas besoin d&rsquo;\u00eatre r\u00e9guli\u00e8rement mis \u00e0 niveau et actualis\u00e9, c&rsquo;est un excellent signe que vous devriez utiliser une installation headless.<\/li>\n<li>Ensuite, si vous voulez avoir un design personnalis\u00e9 qu&rsquo;un th\u00e8me WordPress ne pourra pas facilement faire, vous voulez pimenter la partie avant de votre site web avec un design unique. Alors, WordPress headless est votre prochaine option.<\/li>\n<li>Enfin, si vous construisez un site web \u00e0 courte dur\u00e9e de vie ou un site de d\u00e9monstration pour des pr\u00e9sentations et des tutoriels, alors vous pouvez essayer l&rsquo;approche headless.<\/li>\n<\/ol>\n<h2>Qui devrait \u00e9viter d&rsquo;utiliser WordPress headless ?<\/h2>\n<p>Voici plusieurs cas dans lesquels l&rsquo;utilisation de WordPress headless n&rsquo;est pas une bonne option :<\/p>\n<ol>\n<li>Lorsque votre site web repose uniquement sur des extensions et des fonctionnalit\u00e9s sp\u00e9cifiques qui contr\u00f4lent et fonctionnent au mieux avec le frontend de ton application, vous devez vous en tenir \u00e0 WordPress, sauf si les extensions proposent des options bas\u00e9es sur l&rsquo;API pour consommer les donn\u00e9es.<\/li>\n<li>Supposons que le codage de votre site web ne vous int\u00e9resse pas, ou que votre site web n\u00e9cessite une maintenance quotidienne, et que vous n&rsquo;engagez pas un professionnel pour la maintenance de routine en raison de votre faible budget. Dans ce cas, WordPress est une option adapt\u00e9e pour vous.<\/li>\n<li>Si vous n&rsquo;\u00eates pas un <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-devenir-un-developpeur-web\/\">d\u00e9veloppeur chevronn\u00e9<\/a> et que vous voulez cr\u00e9er et g\u00e9rer seul votre site web, vous devriez utiliser WordPress.<\/li>\n<\/ol>\n<h2>Comment rendre WordPress headless (construire une application) ?<\/h2>\n<p>Cette section explorera la construction et le d\u00e9veloppement d&rsquo;un blog d&rsquo;actualit\u00e9s avec WordPress headless pour le backend et Vue 3 comme frontend pour l&rsquo;utilisateur.<\/p>\n<h3>Configuration de WordPress headless avec Devkinsta<\/h3>\n<p>Nous d\u00e9velopperons le WordPress headless avec <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/\">DevKinsta<\/a>, un environnement de d\u00e9veloppement local WordPress populaire pour concevoir, d\u00e9velopper et d\u00e9ployer des sites WordPress depuis le confort de votre machine locale.<\/p>\n<p>DevKinsta est gratuit \u00e0 vie et vous offre de grands avantages et un grand confort pour d\u00e9velopper et cr\u00e9er WordPress avec lui.<\/p>\n<p>Vous pouvez t\u00e9l\u00e9charger et installer DevKinsta sur le <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/\">site officiel<\/a> et suivre les instructions de la documentation pour commencer.<\/p>\n<p>Comme nous avons d\u00e9j\u00e0 install\u00e9 DevKinsta, nous allons l&rsquo;ouvrir et suivre l&rsquo;\u00e9tape ci-dessous pour configurer notre premier WordPress headless.<\/p>\n<p>Sur le tableau de bord DevKinsta, cr\u00e9ez un nouveau site WordPress en utilisant <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-nginx\/\">Nginx<\/a>, <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-mysql\/\">MySQL<\/a> et toute version de WordPress disponible. Vous pouvez aussi importer une instance WordPress existante ou cr\u00e9er une instance WordPress personnalis\u00e9e depuis le tableau de bord.<\/p>\n<p>Ensuite, donnez un nom \u00e0 votre instance WordPress nouvellement cr\u00e9\u00e9e, un identifiant d&rsquo;admin et un mot de passe, puis cliquez sur <strong>Cr\u00e9er<\/strong> et copiez les d\u00e9tails pendant que DevKinsta cr\u00e9e une nouvelle instance WordPress sur votre machine locale.<\/p>\n<p>Ensuite, cliquez sur <strong>Ouvrir le site<\/strong> pour ouvrir votre instance WordPress nouvellement cr\u00e9\u00e9e sur votre navigateur par d\u00e9faut.<\/p>\n<p>Enfin, vous pouvez vous connecter au tableau de bord d&rsquo;administration en acc\u00e9dant au lien <code>http:\/\/headless-wordpress-news-blog.local\/wp-admin<\/code> et en saisissant les identifiants de connexion admin que vous avez saisis lors de la cr\u00e9ation de la nouvelle instance.<\/p>\n<p>Notez que nous avons configur\u00e9 notre WordPress headless localement avec l&rsquo;URL <code>http:\/\/headless-wordpress-news-blog.local<\/code> avec le frontend h\u00e9berg\u00e9 localement sur <code>http:\/\/news-blog.local<\/code>, et nous l&rsquo;utiliserons tout au long du tutoriel.<\/p>\n<h3>Configuration de notre WordPress headless<\/h3>\n<p>Ensuite, apr\u00e8s vous \u00eatre connect\u00e9 \u00e0 votre tableau de bord WordPress, vous pouvez proc\u00e9der \u00e0 l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-installer-plugins-wordpress\/\">installation des extensions<\/a> et \u00e0 la configuration de votre choix.<\/p>\n<p>Nous d\u00e9sactiverons enti\u00e8rement le th\u00e8me pour ce tutoriel et n&rsquo;acc\u00e9derons au contenu que via le point de terminaison bas\u00e9 sur l&rsquo;API REST de WordPress en installant l&rsquo;extension Simple Website Redirect et en la configurant.<\/p>\n<p>Allez dans <strong>Extensions &gt; Ajouter<\/strong> et recherchez l&rsquo;extension <a href=\"https:\/\/wordpress.org\/plugins\/simple-website-redirect\/\" target=\"_blank\" rel=\"noopener noreferrer\">Simple Website Redirect<\/a>, installez-la et activez-la :<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/plugin-1024x477.png\" alt=\"Installation de l'extension WordPress.\" width=\"1024\" height=\"477\"><figcaption class=\"wp-caption-text\">Installation de l&rsquo;extension WordPress.<\/figcaption><\/figure>\n<p>Ensuite, cliquez sur les <strong>R\u00e9glages <\/strong>de l&rsquo;extension et saisissez votre URL bas\u00e9e sur le frontend (par exemple <code>http:\/\/news-blog.local<\/code>), cliquez sur les <strong>options de r\u00e9glage avanc\u00e9es<\/strong> et ajoutez les chemins suivants &#8211; <code>\/wp-admin<\/code>, <code>\/wp-login.php<\/code>, et <code>\/wp-json<\/code> &#8211; \u00e0 la section Chemins exclus.<\/p>\n<p>Enfin, activez l&rsquo;extension en s\u00e9lectionnant <strong>Activ\u00e9<\/strong> dans la liste d\u00e9roulante <strong>\u00c9tat de la redirection<\/strong>:<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/plugin-setting-1024x658.png\" alt=\"R\u00e9glages de l'extension Simple Website Redirect.\" width=\"1024\" height=\"658\"><figcaption class=\"wp-caption-text\">R\u00e9glages de l&rsquo;extension Simple Website Redirect.<\/figcaption><\/figure>\n<p>&#8230;et c&rsquo;est tout !<\/p>\n<p>En outre, si votre API JSON n&rsquo;est pas activ\u00e9e par d\u00e9faut lorsque vous vous rendez sur <code>http:\/\/headless-wordpress-news-blog.local\/wp-json<\/code>, vous pouvez l&rsquo;activer en ouvrant vos <strong>Permaliens<\/strong> sous <strong>R\u00e9glages WordPress<\/strong> et en s\u00e9lectionnant <strong>Titre de la publication<\/strong> ou tout autre de ton choix sauf <strong>Simple <\/strong>:<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/wp-settings-1024x484.png\" alt=\"R\u00e9glages des permissions WordPress.\" width=\"1024\" height=\"484\"><figcaption class=\"wp-caption-text\">R\u00e9glages des permissions WordPress.<\/figcaption><\/figure>\n<p>Maintenant, lorsque vous allez sur <code>http:\/\/headless-wordpress-news-blog.local\/wp-json<\/code>, il devrait vous pr\u00e9senter des donn\u00e9es JSON comme ci-dessous :<\/p>\n<pre><code class=\"language-json\">{\n  \"name\": \"Headless WordPress News Blog\",\n  \"description\": \"Just another WordPress site\",\n  \"url\": \"http:\/\/headless-wordpress-news-blog.local\",\n  \"home\": \"http:\/\/headless-wordpress-news-blog.local\",\n  \"gmt_offset\": \"0\",\n  \"timezone_string\": \"\",\n  \"namespaces\": [\n    \"oembed\/1.0\",\n    \"wp\/v2\",\n    \"wp-site-health\/v1\"\n  ],\n  \"authentication\": [\n    \n  ],\n  \"routes\": {\n    \"\/\": {\n      \"namespace\": \"\",\n      \"methods\": [\n        \"GET\"\n      ],\n      \"endpoints\": [\n        {\n          \"methods\": [\n            \"GET\"\n          ],\n          \"args\": {\n            \"context\": {\n              \"default\": \"view\",\n              \"required\": false\n            }\n          }\n        }\n      ],\n...<\/code><\/pre>\n<h3>Configuration de Vue.js (Frontend)<\/h3>\n<p>Nous allons utiliser l&rsquo;outil de d\u00e9veloppement web Vite pour cr\u00e9er notre application Vue 3 afin de nous connecter \u00e0 WordPress headless. Vous pouvez en savoir plus sur <a href=\"https:\/\/v3.vuejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Vue 3<\/a> et les <a href=\"https:\/\/vitejs.dev\/guide\/#scaffolding-your-first-vite-project\" target=\"_blank\" rel=\"noopener noreferrer\">outils de d\u00e9veloppement Vite<\/a>.<\/p>\n<p>Dans cet article, nous allons cr\u00e9er un <a href=\"https:\/\/kinsta.com\/fr\/blog\/exemples-de-sites-wordpress\/#news-and-magazine-wordpress-sites\">blog d&rsquo;actualit\u00e9s<\/a>. Toute la gestion de contenu backend du projet sera d\u00e9velopp\u00e9e et h\u00e9berg\u00e9e avec notre WordPress headless en utilisant Devkinsta.<\/p>\n<p>Saisissez ces commandes simples :<\/p>\n<pre><code class=\"language-bash\">npm init @vitejs\/app news-blog\ncd news-blog\nnpm install\nnpm run dev<\/code><\/pre>\n<p>Si vous avez des probl\u00e8mes avec les espaces dans votre nom d&rsquo;utilisateur, essayez d&rsquo;utiliser :<\/p>\n<pre><code class=\"language-bash\">npx create-vite-app news-blog<\/code><\/pre>\n<p>Notez que nous avons configur\u00e9 notre application Vue 3 pour \u00e9couter <code>http:\/\/news-blog.local<\/code>, mais vous pouvez vous en tenir \u00e0 l&rsquo;adresse par d\u00e9faut <code>http:\/\/localhost:3000<\/code>.<\/p>\n<p>Enfin, ouvrez votre base de code Vue 3 avec l&rsquo;\u00e9diteur de code de votre choix. Nous opterons pour <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">VSCode<\/a>, et allons nous salir les mains avec des codes.<\/p>\n<h3>Consommer l&rsquo;API de WordPress<\/h3>\n<p>Nous avons pris les devants pour d\u00e9velopper la partie restante de l&rsquo;application Vue afin de vous faire gagner du temps de lecture, mais vous pouvez aller de l&rsquo;avant et <a href=\"https:\/\/github.com\/Kaperskyguru\/masteringbackend\" target=\"_blank\" rel=\"noopener noreferrer\">cloner le d\u00e9p\u00f4t<\/a> depuis mon GitHub.<\/p>\n<h4>Composant Post de l&rsquo;application Vue<\/h4>\n<p>L&rsquo;extrait de code ci-dessous montre comment nous mettons en \u0153uvre l&rsquo;API REST de WordPress avec notre instance Vue pour afficher tous les articles de WordPress headless :<\/p>\n<pre><code class=\"language-javascript\">&lt;template&gt;\n  &lt;section&gt;\n    &lt;div class=\"padding-top\"&gt;\n      &lt;div class=\"container inner-padding-top\"&gt;\n        &lt;div class=\"row\"&gt;\n          &lt;div class=\"col-md-12 col-sm-12-col-xs-12 text-center\"&gt;\n            &lt;h2 class=\"lead-title text-uppercase\"&gt;\n              Latest Backend Dev. Articles\n            &lt;\/h2&gt;\n            &lt;h3 class=\"article-subtitle\"&gt;\n              Latest Backend Dev. Articles curated daily by the community.\n            &lt;\/h3&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"row mb-1 mt-5\"&gt;\n          &lt;post v-for=\"(post, i) in posts\" :key=\"i\" :post=\"post\" \/&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"col-md-12 col-sm-12-col-xs-12 text-center mb-5\"&gt;\n      &lt;Button link=\"\/posts\" class=\"col p-3\"&gt;More Articles&lt;\/Button&gt;\n    &lt;\/div&gt;\n  &lt;\/section&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport { mapState } from 'vuex'\nexport default {\n  computed: {\n    ...mapState({\n      posts: (state) =&gt; {\n        return [...state.post.posts].slice(0, 22)\n      },\n    }),\n  },\n}\n&lt;\/script&gt;<\/code><\/pre>\n<h4>Afficher le composant d&rsquo;un article unique<\/h4>\n<p>L&rsquo;extrait de code montre comment nous r\u00e9cup\u00e9rons un seul article avec l&rsquo;API REST de WordPress avec WordPress headless et l&rsquo;affichons dans notre instance Vue :<\/p>\n<pre><code class=\"language-javascript\">&lt;template&gt;\n  &lt;div class=\"card single\"&gt;\n    &lt;div class=\"card-head pl-3 pr-3 pt-3\"&gt;\n      &lt;h1 class=\"title\"&gt;{{ post.title || '' }}&lt;\/h1&gt;\n      &lt;div class=\"d-flex\"&gt;\n        &lt;div class=\"author d-flex pr-3 pb-4\"&gt;\n          &lt;div class=\"profile mr-2\"&gt;&lt;\/div&gt;\n          &lt;a :href=\"'\/authors\/' + post.author.slug\" class=\"subtitle is-6\"&gt;\n            {{ post.author.name }}\n          &lt;\/a&gt;\n        &lt;\/div&gt;\n\n        &lt;div class=\"date_created\"&gt;\n          &lt;small class=\"text-muted\"&gt;\n            &lt;li class=\"fa fa-calendar\"&gt;&lt;\/li&gt;\n            &lt;time\n              :datetime=\"$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')\"\n              &gt;{{ $moment(post.date).format('MMMM Do YYYY') }}&lt;\/time\n            &gt;\n          &lt;\/small&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"block-image pl-3 pr-3 pt-2 mb-3\"&gt;\n      &lt;img\n        v-lazy-load\n        :data-src=\"image\"\n        class=\"card-img-top img-fluid\"\n        :alt=\"post.title\"\n      \/&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"tags absolute\"&gt;\n      &lt;a\n        v-for=\"category in post.categories\"\n        :key=\"category.id\"\n        :href=\"'\/categories\/' + category.slug\"\n        class=\"btn-tag\"\n      &gt;\n        {{ category.title }}\n      &lt;\/a&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport Vue from 'vue'\n\nexport default {\n  name: 'SinglePost',\n  props: {\n    post: {\n      type: [Object, Array],\n      default: () =&gt; {},\n    },\n  },\n}\n&lt;\/script&gt;<\/code><\/pre>\n<p>Vous trouverez ci-dessous ce qui effectue les appels \u00e0 l&rsquo;API de WordPress pour le contenu du backend :<\/p>\n<pre><code class=\"language-javascript\">export const actions = {\n  async getPosts({ commit }, { page, count = 22 }) {\n    try {\n      const response = await fetch(\n        `http:\/\/headless-wordpress-news-blog.local\/wp-json\/wp\/v2\/posts`\n      )\n      const data = await response.json()\n      if (data) {\n        commit('setPosts', data)\n      }\n      return data\n    }\n  },\n  \n async getPost({ commit }, id) {\n    try {\n      const response = await fetch(\n        `http:\/\/headless-wordpress-news-blog.local\/wp-json\/wp\/v2\/posts\/${id}`\n      )\n      const data = await response.json()\n      if (data) {\n        commit('setPost', data)\n      }\n      return data\n    }\n  },\n }<\/code><\/pre>\n<h3>D\u00e9ploiement de WordPress headless avec Kinsta<\/h3>\n<p>Enfin, le d\u00e9ploiement de votre WordPress headless est rendu tr\u00e8s facile avec DevKinsta en utilisant le service d&rsquo;h\u00e9bergement Kinsta.<\/p>\n<p>Pour d\u00e9ployer votre WordPress headless sur Kinsta, cliquez sur le bouton <strong>Pousser en staging<\/strong> dans votre tableau de bord DevKinsta et connectez-vous \u00e0 Kinsta avec vos identifiants de connexion.<\/p>\n<p>Vous pouvez apprendre \u00e0 <a href=\"https:\/\/kinsta.com\/fr\/docs\/devkinsta\/integration-devkinsta\/\">pousser les changements vers l&rsquo;environnement de staging<\/a> pour d\u00e9ployer votre WordPress headless t\u00eate vers les services d&rsquo;h\u00e9bergement Kinsta en un seul clic.<\/p>\n<p>Enfin, vous pouvez d\u00e9ployer votre instance Vue.js chez l&rsquo;h\u00e9bergeur cloud de votre choix. Assurez-vous de mettre \u00e0 jour votre point de terminaison WordPress headless en cons\u00e9quence pour tester votre application dans un environnement de production.<\/p>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>WordPress headless t\u00eate et les avantages qui en d\u00e9coulent sont l\u00e0 pour rester pendant un certain temps. Sa popularit\u00e9 ne fera que cro\u00eetre \u00e0 mesure que les d\u00e9veloppeurs et les propri\u00e9taires de sites comprendront les avantages d&rsquo;une option headless.<\/p>\n<p>Dans ce guide, nous vous avons pr\u00e9sent\u00e9 les avantages, les b\u00e9n\u00e9fices et les inconv\u00e9nients de WordPress headless, et nous vous avons montr\u00e9 comment construire et d\u00e9ployer votre premier WordPress headless avec DevKinsta. Vous \u00eates maintenant sur la bonne voie pour avoir votre impl\u00e9mentation de WordPress headless.<\/p>\n<p><em>Quels sont vos conseils pour d\u00e9ployer un site WordPress headless ? Partagez-les dans la section des commentaires !<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress a \u00e9t\u00e9 le syst\u00e8me de gestion de contenu de pr\u00e9dilection des d\u00e9veloppeurs et des non-d\u00e9veloppeurs pour construire et cr\u00e9er rapidement des sites web \u00e9poustouflants. L&rsquo;utilisation &#8230;<\/p>\n","protected":false},"author":193,"featured_media":48927,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[336,341],"topic":[973,1016],"class_list":["post-48922","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-headless","tag-web-development","topic-headless-cms","topic-vue-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Apprenez \u00e0 cr\u00e9er un site WordPress headless avec Vue.js<\/title>\n<meta name=\"description\" content=\"Vous vous \u00eates demand\u00e9 pourquoi on parle tant de WordPress headless ? D\u00e9couvrez ce que c&#039;est et apprenez \u00e0 l&#039;utiliser pour cr\u00e9er une application.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Apprennez \u00e0 cr\u00e9er un site WordPress headless avec Vue.js\" \/>\n<meta property=\"og:description\" content=\"Vous vous \u00eates demand\u00e9 pourquoi on parle tant de WordPress headless ? D\u00e9couvrez ce que c&#039;est et apprenez \u00e0 l&#039;utiliser pour cr\u00e9er une application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-07T12:36:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-12T12:53:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/10\/headless-wordpress.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Solomon Eseme\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Vous vous \u00eates demand\u00e9 pourquoi on parle tant de WordPress headless ? D\u00e9couvrez ce que c&#039;est et apprenez \u00e0 l&#039;utiliser pour cr\u00e9er une application.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/10\/headless-wordpress.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kaperskyguru\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solomon Eseme\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"Apprennez \u00e0 cr\u00e9er un site WordPress headless avec Vue.js\",\"datePublished\":\"2021-10-07T12:36:19+00:00\",\"dateModified\":\"2025-09-12T12:53:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/\"},\"wordCount\":2472,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/10\/headless-wordpress.jpeg\",\"keywords\":[\"headless\",\"web development\"],\"articleSection\":[\"Meilleurs Tutoriels WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/\",\"name\":\"Apprenez \u00e0 cr\u00e9er un site WordPress headless avec Vue.js\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/10\/headless-wordpress.jpeg\",\"datePublished\":\"2021-10-07T12:36:19+00:00\",\"dateModified\":\"2025-09-12T12:53:19+00:00\",\"description\":\"Vous vous \u00eates demand\u00e9 pourquoi on parle tant de WordPress headless ? D\u00e9couvrez ce que c'est et apprenez \u00e0 l'utiliser pour cr\u00e9er une application.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/10\/headless-wordpress.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/10\/headless-wordpress.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Apprenez \u00e0 cr\u00e9er un site WordPress sans t\u00eate avec Vue.js\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CMS Headless\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Apprennez \u00e0 cr\u00e9er un site WordPress headless avec Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\",\"name\":\"Solomon Eseme\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"caption\":\"Solomon Eseme\"},\"description\":\"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me\",\"sameAs\":[\"https:\/\/masteringbackend.com\",\"https:\/\/linkedin.com\/in\/solomoneseme\",\"https:\/\/x.com\/kaperskyguru\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/solomoneseme\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Apprenez \u00e0 cr\u00e9er un site WordPress headless avec Vue.js","description":"Vous vous \u00eates demand\u00e9 pourquoi on parle tant de WordPress headless ? D\u00e9couvrez ce que c'est et apprenez \u00e0 l'utiliser pour cr\u00e9er une application.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/","og_locale":"fr_FR","og_type":"article","og_title":"Apprennez \u00e0 cr\u00e9er un site WordPress headless avec Vue.js","og_description":"Vous vous \u00eates demand\u00e9 pourquoi on parle tant de WordPress headless ? D\u00e9couvrez ce que c'est et apprenez \u00e0 l'utiliser pour cr\u00e9er une application.","og_url":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2021-10-07T12:36:19+00:00","article_modified_time":"2025-09-12T12:53:19+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/10\/headless-wordpress.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"Vous vous \u00eates demand\u00e9 pourquoi on parle tant de WordPress headless ? D\u00e9couvrez ce que c'est et apprenez \u00e0 l'utiliser pour cr\u00e9er une application.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/10\/headless-wordpress.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Solomon Eseme","Dur\u00e9e de lecture estim\u00e9e":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"Apprennez \u00e0 cr\u00e9er un site WordPress headless avec Vue.js","datePublished":"2021-10-07T12:36:19+00:00","dateModified":"2025-09-12T12:53:19+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/"},"wordCount":2472,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/10\/headless-wordpress.jpeg","keywords":["headless","web development"],"articleSection":["Meilleurs Tutoriels WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/","url":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/","name":"Apprenez \u00e0 cr\u00e9er un site WordPress headless avec Vue.js","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/10\/headless-wordpress.jpeg","datePublished":"2021-10-07T12:36:19+00:00","dateModified":"2025-09-12T12:53:19+00:00","description":"Vous vous \u00eates demand\u00e9 pourquoi on parle tant de WordPress headless ? D\u00e9couvrez ce que c'est et apprenez \u00e0 l'utiliser pour cr\u00e9er une application.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/10\/headless-wordpress.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/10\/headless-wordpress.jpeg","width":1460,"height":730,"caption":"Apprenez \u00e0 cr\u00e9er un site WordPress sans t\u00eate avec Vue.js"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"CMS Headless","item":"https:\/\/kinsta.com\/fr\/sujets\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"Apprennez \u00e0 cr\u00e9er un site WordPress headless avec Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2","name":"Solomon Eseme","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","caption":"Solomon Eseme"},"description":"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me","sameAs":["https:\/\/masteringbackend.com","https:\/\/linkedin.com\/in\/solomoneseme","https:\/\/x.com\/kaperskyguru"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/solomoneseme\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/48922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=48922"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/48922\/revisions"}],"predecessor-version":[{"id":80897,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/48922\/revisions\/80897"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48922\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48922\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48922\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48922\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48922\/translations\/es"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48922\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48922\/translations\/nl"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/48922\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/48927"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=48922"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=48922"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=48922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}