{"id":76669,"date":"2024-04-02T10:34:30","date_gmt":"2024-04-02T09:34:30","guid":{"rendered":"https:\/\/kinqsta.com\/fr\/?p=76669&#038;preview=true&#038;preview_id=76669"},"modified":"2024-04-04T18:22:20","modified_gmt":"2024-04-04T17:22:20","slug":"headless-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/","title":{"rendered":"Comment analyser le contenu de Gutenberg pour WordPress headless ?"},"content":{"rendered":"<p>Gutenberg est l&rsquo;\u00e9diteur par d\u00e9faut de <a href=\"https:\/\/kinqsta.com\/fr\/blog\/wordpress-headless-next-js\/\">WordPress<\/a>. L&rsquo;\u00e9diteur vous permet de cr\u00e9er et de styliser du contenu \u00e0 l&rsquo;aide de blocs discrets pour le texte, les images, les vid\u00e9os et d&rsquo;autres \u00e9l\u00e9ments du site via une interface de type glisser-d\u00e9poser. Cette approche am\u00e9liore la flexibilit\u00e9 et les capacit\u00e9s de conception de WordPress.<\/p>\n<p>Ce guide explique comment analyser le contenu de Gutenberg en <a href=\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">HTML<\/a> \u00e0 l&rsquo;aide de l&rsquo;<a href=\"https:\/\/kinqsta.com\/fr\/blog\/api-rest-wordpress\/\">API REST de WordPress<\/a> dans un site statique <a href=\"https:\/\/kinqsta.com\/fr\/blog\/next-js\/\">Next.js<\/a>.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Pr\u00e9-requis<\/h2>\n<p>Pour suivre ce guide, vous avez besoin de :<\/p>\n<ul>\n<li>Node.js et npm<a href=\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-npm\/\">(Node Package Manager<\/a>) ou yarn install\u00e9s sur votre ordinateur<\/li>\n<li>Des connaissances de base en <a href=\"https:\/\/kinqsta.com\/javascript\/\">JavaScript<\/a> et <a href=\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a><\/li>\n<li>Un <a href=\"https:\/\/kinqsta.com\/fr\/docs\/hebergement-wordpress\/premiers-pas-wordpress\/nouveau-site\/\">site WordPress<\/a> avec quelques articles publi\u00e9s<\/li>\n<\/ul>\n<h2>R\u00e9cup\u00e9rer le contenu de Gutenberg \u00e0 l&rsquo;aide d&rsquo;une API REST<\/h2>\n<p>Pour interagir avec votre site WordPress de mani\u00e8re programmatique et r\u00e9cup\u00e9rer le contenu structur\u00e9 dans les <a href=\"https:\/\/kinqsta.com\/courses\/gutenberg-block-development\/history-of-gutenberg-block-editor\/\">blocs Gutenberg<\/a>, vous utilisez l&rsquo;API REST de WordPress ou l&rsquo;<a href=\"https:\/\/kinqsta.com\/fr\/blog\/wpgraphql-et-wp-rest-api\/\">extension WPGraphQL<\/a>. Ces outils vous permettent de r\u00e9cup\u00e9rer votre contenu WordPress au format JSON.<\/p>\n<p>Pour activer l&rsquo;acc\u00e8s aux donn\u00e9es JSON via l&rsquo;API REST, modifiez les r\u00e9glages WordPress de vos permaliens en vous \u00e9loignant de \u00ab Sumple \u00bb Cela permet d&rsquo;acc\u00e9der \u00e0 l&rsquo;API par le biais d&rsquo;une URL structur\u00e9e, comme suit :<\/p>\n<pre><code class=\"language-bash\">https:\/\/yoursite.com\/wp-json\/wp\/v2<\/code><\/pre>\n<p>En effectuant des requ\u00eates API \u00e0 cette URL, vous pouvez r\u00e9cup\u00e9rer de mani\u00e8re programmatique diverses informations et effectuer des op\u00e9rations sur votre site WordPress. Par exemple, vous pouvez r\u00e9cup\u00e9rer une liste d&rsquo;articles en envoyant une requ\u00eate GET \u00e0 :<\/p>\n<pre><code class=\"language-bash\">https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts<\/code><\/pre>\n<p>Cela renverra un objet JSON contenant des informations sur les articles de votre site WordPress, y compris les titres, le contenu, les d\u00e9tails de l&rsquo;auteur, et plus encore.<\/p>\n<h2>Analyser les blocs Gutenberg en HTML<\/h2>\n<p>Lorsque vous r\u00e9cup\u00e9rez des articles d&rsquo;un site WordPress qui utilise l&rsquo;<a href=\"https:\/\/kinqsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">\u00e9diteur Gutenberg<\/a>, le contenu stock\u00e9 dans la base de donn\u00e9es peut comporter un m\u00e9lange de m\u00e9tadonn\u00e9es HTML et JSON pour d\u00e9crire diff\u00e9rents types de blocs, tels que les citations et les galeries. Par exemple :<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:quote {\"className\":\"inspirational-quote\",\"style\":{\"typography\":{\"fontSize\":\"large\"}}} --&gt;\n&lt;blockquote class=\"wp-block-quote inspirational-quote has-large-font-size\"&gt;&lt;p&gt;\u201cThe journey of a thousand miles begins with one step.\u201d&lt;\/p&gt;&lt;cite&gt;Lao Tzu&lt;\/cite&gt;&lt;\/blockquote&gt;\n&lt;!-- \/wp:quote --&gt;\n\n&lt;!-- wp:gallery {\"ids\":[34,35],\"columns\":2,\"linkTo\":\"none\",\"sizeSlug\":\"medium\",\"className\":\"custom-gallery\"} --&gt;\n&lt;ul class=\"wp-block-gallery columns-2 is-cropped custom-gallery\"&gt;&lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image1-300x200.jpg\" alt=\"A breathtaking view of the mountains\" class=\"wp-image-34\"\/&gt;&lt;\/figure&gt;&lt;\/li&gt;&lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image2-300x200.jpg\" alt=\"Serene lakeside at dawn\" class=\"wp-image-35\"\/&gt;&lt;\/figure&gt;&lt;\/li&gt;&lt;\/ul&gt;\n&lt;!-- \/wp:gallery --&gt;\n<!-- \/wp:gallery --><\/code><\/pre>\n<p>Cet extrait illustre deux blocs Gutenberg : une citation et une galerie. Chacun est compl\u00e9t\u00e9 par des m\u00e9tadonn\u00e9es JSON encapsul\u00e9es dans des commentaires HTML. Les m\u00e9tadonn\u00e9es d\u00e9finissent des attributs tels que les noms de classe, les styles et d&rsquo;autres configurations pertinentes pour la pr\u00e9sentation du bloc.<\/p>\n<p>Lorsque vous r\u00e9cup\u00e9rez ces blocs via l&rsquo;API WordPress REST ou WPGraphQL, WordPress les traite, transformant la combinaison des m\u00e9tadonn\u00e9es HTML et JSON en \u00e9l\u00e9ments HTML enti\u00e8rement rendus que vous pouvez directement incorporer dans des pages web. Le HTML transform\u00e9 pour les blocs ci-dessus apparaitrait comme suit :<\/p>\n<pre><code class=\"language-html\">&lt;blockquote class=\"wp-block-quote inspirational-quote has-large-font-size\"&gt;&lt;p&gt;\u201cThe journey of a thousand miles begins with one step.\u201d&lt;\/p&gt;&lt;cite&gt;Lao Tzu&lt;\/cite&gt;&lt;\/blockquote&gt;\n\n&lt;ul class=\"wp-block-gallery columns-2 is-cropped custom-gallery\"&gt;\n  &lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img loading=\"lazy\" src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image1-300x200.jpg\" alt=\"A breathtaking view of the mountains\" class=\"wp-image-34\" sizes=\"(max-width: 300px) 100vw, 300px\" \/&gt;&lt;\/figure&gt;&lt;\/li&gt;\n  &lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img loading=\"lazy\" src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image2-300x200.jpg\" alt=\"Serene lakeside at dawn\" class=\"wp-image-35\" sizes=\"(max-width: 300px) 100vw, 300px\" \/&gt;&lt;\/figure&gt;&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n<p>Pour les d\u00e9veloppeurs qui construisent des applications d\u00e9coupl\u00e9es ou headless en utilisant des frameworks JavaScript comme Next.js, il s&rsquo;agit d&rsquo;une m\u00e9thode simple pour afficher le contenu en injectant directement le HTML dans la page \u00e0 l&rsquo;aide de la propri\u00e9t\u00e9 <code>dangerouslySetInnerHTML<\/code> pour rendre le balisage.<\/p>\n<pre><code class=\"language-html\">&lt;div dangerouslySetInnerHTML={{ __html: &lt;raw_html_string&gt; }} \/&gt;<\/code><\/pre>\n<p>En outre, vous pouvez avoir besoin d&rsquo;effectuer un formatage suppl\u00e9mentaire pour des \u00e9l\u00e9ments tels que les liens et de g\u00e9rer les caract\u00e8res de nouvelle ligne en exc\u00e8s (<code>\\n<\/code>), ce que ce guide explique plus loin.<\/p>\n<h2>Analyser le contenu des blocs Gutenberg dans un site statique Next.js<\/h2>\n<p>Dans cette section, nous allons r\u00e9cup\u00e9rer le contenu de WordPress dans un projet Next.js, puis analyser les blocs Gutenberg en HTML.<\/p>\n<ol start=\"1\">\n<li>Commencez par configurer une fonction pour r\u00e9cup\u00e9rer les articles de votre site WordPress. Ouvrez le fichier <strong>src\/page.js<\/strong> dans votre projet et remplacez son contenu par l&rsquo;extrait de code suivant :\n<pre><code class=\"language-jsx\">const getWpPosts = async () =&gt; {\n\tconst res = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts');\n  \tconst posts = await res.json();\n\treturn posts;\n};<\/code><\/pre>\n<p>Cette fonction asynchrone effectue une requ\u00eate \u00e0 l&rsquo;API REST de WordPress. Elle r\u00e9cup\u00e8re tous les articles disponibles sur votre site et les renvoie sous forme de tableau.<\/li>\n<li>Ensuite, nous allons utiliser les articles r\u00e9cup\u00e9r\u00e9s dans un simple composant de page Next.js en enregistrant les articles dans la console et en affichant un message d&rsquo;accueil basique :\n<pre><code class=\"language-jsx\">const page = async () =&gt; {\n  const posts = await getWpPosts();\n  console.log(posts);\n  \n  return (\n    &lt;div&gt;\n      &lt;h1&gt;Hello World&lt;\/h1&gt;\n    &lt;\/div&gt;\n  );\n};\n\nexport default page;<\/code><\/pre>\n<p>Lorsque vous ex\u00e9cutez votre projet \u00e0 l&rsquo;aide de <code>npm run dev<\/code>, il affiche le message \u00ab Hello World \u00bb et enregistre les articles r\u00e9cup\u00e9r\u00e9s dans le terminal.<\/p>\n<pre><code class=\"language-json\">[\n  {\n    \"_links\" : {\n      \"about\" : [...],\n      \"author\" : [...],\n      \"collection\" : [...],\n      \"curies\" : [...],\n      \"predecessor-version\" : [...],\n      \"replies\" : [...],\n      \"self\" : [...],\n      \"version-history\" : [...],\n      \"wp:attachment\" : [...],\n      \"wp:term\" : [...]\n    },\n    \"author\" : 1,\n    \"categories\" : [...],\n    \"comment_status\" : \"open\",\n    \"content\" : {\n      \"protected\" : false,\n      \"rendered\" : \"\\n&lt;p&gt;Fire, a primal force, captivates with its &lt;strong&gt;flickering flames&lt;\/strong&gt;, evoking both awe and caution. Its &lt;quote&gt;dance&lt;\/quote&gt; symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure class=\\\"wp-block-image size-full\\\"&gt;&lt;img loading=\\\"lazy\\\" decoding=\\\"async\\\" width=\\\"250\\\" height=\\\"148\\\" src=\\\"https:\/\/img.example.com\/wp-content\/uploads\/2024\/02\/burningbuilding.jpg\\\" alt=\\\"\\\" class=\\\"wp-image-14\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;In ancient times, fire was a beacon of light and warmth, essential for survival. Today, it remains a symbol of human ingenuity and danger. From the comforting glow of a hearth to the destructive fury of wildfires, fire\u2019s dual nature reminds us of our fragile relationship with the elements.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure class=\\\"wp-block-image size-large\\\"&gt;&lt;img decoding=\\\"async\\\" src=\\\"https:\/\/img.example.com\/premium-photo\/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\\\" alt=\\\"\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;You can check out other articles on our blog:&lt;\/p&gt;\\n\\n\\n\\n&lt;ul&gt;\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=6\\\"&gt;Lorem Ipsum: Beginnings&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=9\\\"&gt;Lorem Ipsum: Act 2&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=11\\\"&gt;Lorem Ipsum: Act 3&lt;\/a&gt;&lt;\/li&gt;\\n&lt;\/ul&gt;\\n\"\n    },\n    \"date\" : \"2024-02-27T12:08:30\",\n    \"date_gmt\" : \"2024-02-27T12:08:30\",\n    \"excerpt\" : {\n      \"protected\" : false,\n      \"rendered\" : \"&lt;p&gt;Fire, a primal force, captivates with its flickering flames, evoking both awe and caution. Its dance symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate. In ancient times, fire was a beacon of light and warmth, [\u2026]&lt;\/p&gt;\\n\"\n    },\n    \"featured_media\" : 0,\n    \"format\" : \"standard\",\n    \"guid\" : {\n      \"rendered\" : \"https:\/\/yoursite.com\/?p=13\"\n    },\n    \"id\" : 13,\n    \"link\" : \"https:\/\/yoursite.com\/?p=13\",\n    \"meta\" : {\n      \"footnotes\" : \"\"\n    },\n    \"modified\" : \"2024-02-29T16:45:36\",\n    \"modified_gmt\" : \"2024-02-29T16:45:36\",\n    \"ping_status\" : \"open\",\n    \"slug\" : \"fire-fire\",\n    \"status\" : \"publish\",\n    \"sticky\" : false,\n    \"tags\" : [],\n    \"template\" : \"\",\n    \"title\" : {\n      \"rendered\" : \"Fire\"\n    },\n    \"type\" : \"post\"\n   },\n  },\n  ...\n]<\/code><\/pre>\n<p>Les objets JSON repr\u00e9sentant les donn\u00e9es individuelles des articles de Gutenberg comprennent divers champs, parmi lesquels les champs contenu et extrait sont renvoy\u00e9s sous forme de blocs Gutenberg analys\u00e9s en tant que chaines HTML.<\/li>\n<li>Pour rendre ce contenu HTML correctement dans Next.js, nous utilisons la propri\u00e9t\u00e9 <code>dangerouslySetInnerHTML<\/code>:\n<pre><code class=\"language-jsx\">const page = async () =&gt; {\n  const posts = await getWpPosts();\n\n  return (\n    &lt;&gt;\n      &lt;h1&gt; Headless Blog &lt;\/h1&gt;\n\n      &lt;div&gt;\n        {posts.map((post) =&gt; (\n          &lt;Link href={'\/blog\/' + post.id} key={post.id}&gt;\n            &lt;h2&gt;\n              {post.title.rendered} &lt;span&gt;-&gt;&lt;\/span&gt;\n            &lt;\/h2&gt;\n            &lt;div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} \/&gt;\n          &lt;\/Link&gt;\n        ))}\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n};\n\nexport default page;<\/code><\/pre>\n<p>Dans ce composant mis \u00e0 jour, nous mappons le tableau des articles r\u00e9cup\u00e9r\u00e9s pour g\u00e9n\u00e9rer une liste d&rsquo;extraits d&rsquo;articles. Chaque extrait est envelopp\u00e9 dans un composant <code>Link<\/code> pour la navigation, affichant le titre de l&rsquo;article et un extrait de son contenu. <br \/>La propri\u00e9t\u00e9 <code>dangerouslySetInnerHTML<\/code> est utilis\u00e9e pour analyser et rendre le contenu HTML contenu dans le champ <code>excerpt.rendered<\/code>.<\/li>\n<li>Ensuite, cr\u00e9ez un fichier <strong>blog\/[id]\/page.js<\/strong> dans le r\u00e9pertoire de l&rsquo;<strong>application<\/strong>. Vous utilisez des dossiers pour d\u00e9finir des itin\u00e9raires. Ainsi, en cr\u00e9ant un dossier <strong>blog<\/strong>, vous d\u00e9finissez la route <strong>blog<\/strong>. Vous combinez cela avec le <a href=\"https:\/\/kinqsta.com\/fr\/blog\/next-js\/#dynamic-routes\">routage dynamique<\/a> pour g\u00e9n\u00e9rer des itin\u00e9raires pour chaque article.<\/li>\n<li>Chaque article poss\u00e8de un identifiant. Vous utilisez cet identifiant pour g\u00e9n\u00e9rer une route unique, <code>\/blog\/{post_id}<\/code>dans votre application. Ajoutez le code suivant :\n<pre><code class=\"language-jsx\">import Link from 'next\/link';\n\nexport async function generateStaticParams() {\n    const res = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts');\n    const posts = await res.json();\n    return posts.map((post) =&gt; {\n        return {\n            params: {\n                id: post.id.toString(),\n            },\n        };\n    });\n}\n\nexport async function getPost(id) {\n    const response = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\/' + id);\n    const post = await response.json();\n    return post;\n}<\/code><\/pre>\n<p>La fonction <code>generateStaticParams()<\/code> g\u00e9n\u00e8re statiquement des routes au moment de la construction en fonction de l&rsquo;ID correspondant renvoy\u00e9 pour chaque article. La fonction <code>getPost()<\/code> r\u00e9cup\u00e8re les donn\u00e9es Gutenberg de l&rsquo;API REST pour l&rsquo;article dont l&rsquo;identifiant a \u00e9t\u00e9 transmis.<br \/>Une section pr\u00e9c\u00e9dente a montr\u00e9 un exemple de donn\u00e9es Gutenberg analys\u00e9es renvoy\u00e9es par l&rsquo;API REST pour un article. Pour l&rsquo;instant, nous ne nous int\u00e9ressons qu&rsquo;au champ <code>content.rendered<\/code>:<\/p>\n<pre><code class=\"language-json\">[\n  {\n    ...\n    \"content\": {\n      \"rendered\" : \"\\n&lt;p&gt;Fire, a primal force, captivates with its &lt;strong&gt;flickering flames&lt;\/strong&gt;, evoking both awe and caution. Its &lt;quote&gt;dance&lt;\/quote&gt; symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure&gt; class=\\\"wp-block-image size-full\\\"&gt;&lt;img loading=\\\"lazy\\\" decoding=\\\"async\\\" width=\\\"250\\\" height=\\\"148\\\" src=\\\"https:\/\/img.example.com\/wp-content\/uploads\/2024\/02\/burningbuilding.jpg\\\" alt=\\\"\\\" class=\\\"wp-image-14\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;In ancient times, fire was a beacon of light and warmth, essential for survival. Today, it remains a symbol of human ingenuity and danger. From the comforting glow of a hearth to the destructive fury of wildfires, fire\u2019s dual nature reminds us of our fragile relationship with the elements.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure&gt; class=\\\"wp-block-image size-large\\\"&gt;&lt;img decoding=\\\"async\\\" src=\\\"https:\/\/img.example.com\/premium-photo\/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\\\" alt=\\\"\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;You can check out other articles on our blog:&lt;\/p&gt;\\n\\n\\n\\n&lt;ul&gt;\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=6\\\"&gt;Lorem Ipsum: Beginnings&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=9\\\"&gt;Lorem Ipsum: Act 2&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=11\\\"&gt;Lorem Ipsum: Act 3&lt;\/a&gt;&lt;\/li&gt;\\n&lt;\/ul&gt;\\n\"\n    },\n    ...\n  }\n]<\/code><\/pre>\n<p>Ce champ contient le code HTML brut de l&rsquo;article. Il peut \u00eatre rendu directement en utilisant la propri\u00e9t\u00e9 <code>dangerouslySetInnerHTML<\/code> comme ceci : <code>&lt;div dangerouslySetInnerHTML={{ __html: &lt;raw_html_string&gt; }} \/&gt;<\/code>.<\/li>\n<li>Ensuite, vous pouvez traiter les donn\u00e9es en analysant les liens internes et en redimensionnant les images. Installez le paquet <code>html-react-parser<\/code> pour simplifier le processus d&rsquo;analyse des balises :\n<pre><code class=\"language-bash\">npm install html-react-parser --save<\/code><\/pre>\n<\/li>\n<li>Ajoutez le code suivant au fichier <strong>blog\/[id]\/page.js<\/strong>:\n<pre><code class=\"language-javascript\">import parse, { domToReact } from \"html-react-parser\";\n\n\/*\n * We use a regular expression (pattern) to match the specific URL you want to replace.\n * The (\\d+) part captures the numeric ID after ?p=.\n * Then, we use the replacement string 'data-internal-link=\"true\" href=\"\/blog\/$1\"',\n * where $1 is a placeholder for the captured ID.\n *\/\nexport function fixInternalLinks(html_string) {\n  const pattern = \/href=\"https:\\\/\\\/yoursite.com\\\/\\?p=(\\d+)\"\/g;\n  const replacement = 'data-internal-link=\"true\" href=\"\/blog\/$1\"';\n\n  return html_string.replace(pattern, replacement);\n}\n\nexport function parseHtml(html) {\n  \/\/ Replace 2+ sequences of '\\n' with a single '&lt;br \/&gt;' tag\n  const _content = html.replace(\/\\n{2,}\/g, '&lt;br \/&gt;');\n  const content = fixInternalLinks(_content);\n\n  const options = {\n    replace: ({ name, attribs, children }) =&gt; {\n      \/\/ Convert internal links to Next.js Link components.\n      const isInternalLink =\n        name === \"a\" && attribs[\"data-internal-link\"] === \"true\";\n\n      if (isInternalLink) {\n        return (\n          &lt;Link href={attribs.href} {...attribs}&gt;\n            {domToReact(children, options)}\n          &lt;\/Link&gt;\n    \t  );\n      } else if (name === \"img\") {\n        attribs[\"width\"] = \"250\";\n        attribs[\"height\"] = \"150\";\n        return (\n          &lt;img {...attribs}\/&gt;\n        );\n      }\n    },\n  };\n\n  return parse(content, options);\n}<\/code><\/pre>\n<p>La fonction <code>fixInternalLinks()<\/code> utilise une expression r\u00e9guli\u00e8re pour trouver des liens vers des articles de votre site WordPress \u00e0 partir de la cha\u00eene HTML. Dans le code HTML brut, vous pouvez voir que l&rsquo;article contient une balise <code>List<\/code> avec des liens vers d&rsquo;autres articles de votre site, rempla\u00e7ant ces liens par des liens internes vers des itin\u00e9raires de votre site statique. <br \/>La fonction <code>parseHTML()<\/code> d\u00e9tecte les s\u00e9quences multiples de nouvelles lignes en exc\u00e8s, <code>n<\/code>et les remplace par des balises <code>&lt;br \/&gt;<\/code>. Elle trouve \u00e9galement les liens internes et convertit les balises d&rsquo;ancrage en balises Link. Enfin, cette fonction redimensionne les images \u00e0 l&rsquo;aide des attributs des balises.<\/li>\n<li>Pour g\u00e9n\u00e9rer l&rsquo;interface utilisateur principale de chaque route dynamique, ajoutez le code suivant :\n<pre><code class=\"language-javascript\">export default async function Post({ params }) {\n  const post = await getPost(params.id);\n\n  const content = parseHtml(post.content.rendered);\n\n  return (\n    &lt;&gt;\n      &lt;h1&gt;\n        {post.title.rendered}\n      &lt;\/h1&gt;\n \t \n      &lt;div&gt;{content}&lt;\/div&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<p>Apr\u00e8s avoir analys\u00e9 le HTML brut \u00e0 partir des donn\u00e9es Gutenberg, le code renvoie le JSX repr\u00e9sentant l&rsquo;interface utilisateur format\u00e9e de la page.<\/li>\n<\/ol>\n<p>Enfin, lorsque vous ex\u00e9cutez votre projet, la page d&rsquo;accueil affichera une liste d&rsquo;articles sur votre WordPress. De plus, lorsque vous cliquez sur des articles individuels, vous verrez le contenu analys\u00e9 de Gutenberg rendu correctement.<\/p>\n<h2>D\u00e9ployer votre site statique Next.js sur Kinsta<\/h2>\n<p>Lorsque vous combinez WordPress headless avec des frameworks de pointe comme Next.js, trouver une solution de d\u00e9ploiement rentable devient essentiel, en particulier lorsque vous utilisez un <a href=\"https:\/\/kinqsta.com\/fr\/hebergement-wordpress\/\">h\u00e9bergement WordPress puissant<\/a> comme celui de Kinsta pour votre site WordPress. Le service d&rsquo;<a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">h\u00e9bergement de sites statiques<\/a> de Kinsta offre un moyen transparent et abordable de mettre votre site en ligne.<\/p>\n<p>Kinsta vous permet d&rsquo;<a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">h\u00e9berger<\/a> <strong>gratuitement<\/strong> jusqu&rsquo;<a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">\u00e0 100 sites web statiques<\/a>. Tout d&rsquo;abord, envoyez votre code \u00e0 votre fournisseur Git pr\u00e9f\u00e9r\u00e9 <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">(Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> ou <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>). Une fois que votre r\u00e9pertoire est pr\u00eat, suivez les \u00e9tapes suivantes pour d\u00e9ployer votre site statique sur Kinsta :<\/p>\n<ol start=\"1\">\n<li>Connectez-vous ou cr\u00e9ez un compte pour afficher votre tableau de bord <a href=\"https:\/\/my.kinqsta.com\/?lang=fr\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autorisez Kinsta avec votre fournisseur Git.<\/li>\n<li>Cliquez sur <strong>Sites statiques<\/strong> dans la colonne lat\u00e9rale de gauche, puis cliquez sur <strong>Ajouter un site<\/strong>.<\/li>\n<li>S\u00e9lectionnez le d\u00e9p\u00f4t et la branche \u00e0 partir desquels vous souhaitez d\u00e9ployer.<\/li>\n<li>Attribuez un nom unique \u00e0 votre site.<\/li>\n<li>Ajoutez les r\u00e9glages de construction dans le format suivant :\n<ul>\n<li><strong>Commande de construction<\/strong>: <code>npm run build<\/code><\/li>\n<li><strong>Version du n\u0153ud<\/strong>: <code>18.16.0<\/code><\/li>\n<li><strong>R\u00e9pertoire de publication<\/strong>: <code>out<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Enfin, cliquez sur <strong>Cr\u00e9er un site<\/strong>.<\/li>\n<\/ol>\n<p>Et le tour est jou\u00e9 ! En quelques secondes, vous disposez d&rsquo;un site d\u00e9ploy\u00e9. Un lien est fourni pour acc\u00e9der \u00e0 la version d\u00e9ploy\u00e9e de votre site. Vous pourrez par la suite ajouter votre <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">domaine personnalis\u00e9<\/a> et votre <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">certificat SSL<\/a> si vous le souhaitez.<\/p>\n<p>Comme alternative \u00e0 l&rsquo;h\u00e9bergement de sites statiques, vous pouvez opter pour le d\u00e9ploiement de votre site statique avec le service d&rsquo;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">h\u00e9bergement d&rsquo;applications<\/a> de Kinsta, qui offre une plus grande flexibilit\u00e9 d&rsquo;h\u00e9bergement, un plus large \u00e9ventail d&rsquo;avantages et l&rsquo;acc\u00e8s \u00e0 des fonctionnalit\u00e9s plus robustes &#8211; comme l&rsquo;\u00e9volutivit\u00e9, le d\u00e9ploiement personnalis\u00e9 \u00e0 l&rsquo;aide d&rsquo;un fichier Docker, et des <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">analyses compl\u00e8tes<\/a> englobant des donn\u00e9es en temps r\u00e9el et historiques. Vous n&rsquo;avez pas non plus besoin de configurer votre projet Next.js pour un rendu statique.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Ce guide a expliqu\u00e9 comment int\u00e9grer et analyser le contenu des blocs Gutenberg efficacement en tant que HTML via l&rsquo;API WordPress. Cela rend le rendu de tout type de contenu sur votre frontend possible lorsque vous utilisez WordPress headless.<\/p>\n<p>Vous pouvez h\u00e9berger votre WordPress headless sur notre service d&rsquo;h\u00e9bergement WordPress infog\u00e9r\u00e9 et d\u00e9ployer votre site statique sur notre service d&rsquo;h\u00e9bergement de site statique. Cela signifie que tout ce qui concerne votre site se trouve dans un seul tableau de bord : MyKinsta.<\/p>\n<p>En choisissant Kinsta, vous b\u00e9n\u00e9ficiez d&rsquo;un fournisseur d&rsquo;h\u00e9bergement qui donne la priorit\u00e9 \u00e0 la performance et \u00e0 l&rsquo;\u00e9volutivit\u00e9 optimales du site, tout en renfor\u00e7ant les sites web avec des mesures de s\u00e9curit\u00e9 avanc\u00e9es. <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Essayez Kinsta d\u00e8s aujourd&rsquo;hui <\/a>!<\/p>\n<p><em>Que pensez-vous de WordPress headless et de son rendu ? Vous avez une meilleure fa\u00e7on d&rsquo;int\u00e9grer les blocs Gutenberg ? Partagez vos id\u00e9es dans la section des commentaires !<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg est l&rsquo;\u00e9diteur par d\u00e9faut de WordPress. L&rsquo;\u00e9diteur vous permet de cr\u00e9er et de styliser du contenu \u00e0 l&rsquo;aide de blocs discrets pour le texte, les &#8230;<\/p>\n","protected":false},"author":199,"featured_media":76670,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[973,979],"class_list":["post-76669","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-headless-cms","topic-frameworks-javascript"],"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>Comment analyser le contenu de Gutenberg pour WordPress headless ? - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 int\u00e9grer le contenu Gutenberg analys\u00e9 en HTML dans votre site avec ce guide d\u00e9taill\u00e9. Il montre comment utiliser le contenu dans Next.js.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment analyser le contenu de Gutenberg pour WordPress headless ?\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 int\u00e9grer le contenu Gutenberg analys\u00e9 en HTML dans votre site avec ce guide d\u00e9taill\u00e9. Il montre comment utiliser le contenu dans Next.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/\" \/>\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=\"2024-04-02T09:34:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-04T17:22:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\" \/>\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=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez \u00e0 int\u00e9grer le contenu Gutenberg analys\u00e9 en HTML dans votre site avec ce guide d\u00e9taill\u00e9. Il montre comment utiliser le contenu dans Next.js.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Comment analyser le contenu de Gutenberg pour WordPress headless ?\",\"datePublished\":\"2024-04-02T09:34:30+00:00\",\"dateModified\":\"2024-04-04T17:22:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/\"},\"wordCount\":1779,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/\",\"name\":\"Comment analyser le contenu de Gutenberg pour WordPress headless ? - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"datePublished\":\"2024-04-02T09:34:30+00:00\",\"dateModified\":\"2024-04-04T17:22:20+00:00\",\"description\":\"Apprenez \u00e0 int\u00e9grer le contenu Gutenberg analys\u00e9 en HTML dans votre site avec ce guide d\u00e9taill\u00e9. Il montre comment utiliser le contenu dans Next.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CMS Headless\",\"item\":\"https:\/\/kinqsta.com\/fr\/sujets\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment analyser le contenu de Gutenberg pour WordPress headless ?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment analyser le contenu de Gutenberg pour WordPress headless ? - Kinsta\u00ae","description":"Apprenez \u00e0 int\u00e9grer le contenu Gutenberg analys\u00e9 en HTML dans votre site avec ce guide d\u00e9taill\u00e9. Il montre comment utiliser le contenu dans Next.js.","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:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment analyser le contenu de Gutenberg pour WordPress headless ?","og_description":"Apprenez \u00e0 int\u00e9grer le contenu Gutenberg analys\u00e9 en HTML dans votre site avec ce guide d\u00e9taill\u00e9. Il montre comment utiliser le contenu dans Next.js.","og_url":"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-04-02T09:34:30+00:00","article_modified_time":"2024-04-04T17:22:20+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Apprenez \u00e0 int\u00e9grer le contenu Gutenberg analys\u00e9 en HTML dans votre site avec ce guide d\u00e9taill\u00e9. Il montre comment utiliser le contenu dans Next.js.","twitter_image":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Jeremy Holcombe","Dur\u00e9e de lecture estim\u00e9e":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Comment analyser le contenu de Gutenberg pour WordPress headless ?","datePublished":"2024-04-02T09:34:30+00:00","dateModified":"2024-04-04T17:22:20+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/"},"wordCount":1779,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/","url":"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/","name":"Comment analyser le contenu de Gutenberg pour WordPress headless ? - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","datePublished":"2024-04-02T09:34:30+00:00","dateModified":"2024-04-04T17:22:20+00:00","description":"Apprenez \u00e0 int\u00e9grer le contenu Gutenberg analys\u00e9 en HTML dans votre site avec ce guide d\u00e9taill\u00e9. Il montre comment utiliser le contenu dans Next.js.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#primaryimage","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/fr\/blog\/headless-wordpress-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"CMS Headless","item":"https:\/\/kinqsta.com\/fr\/sujets\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"Comment analyser le contenu de Gutenberg pour WordPress headless ?"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/fr\/#website","url":"https:\/\/kinqsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinqsta.com\/fr\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/76669","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/comments?post=76669"}],"version-history":[{"count":5,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/76669\/revisions"}],"predecessor-version":[{"id":76703,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/76669\/revisions\/76703"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76669\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76669\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76669\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76669\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76669\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76669\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76669\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76669\/translations\/es"},{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76669\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media\/76670"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media?parent=76669"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/tags?post=76669"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/topic?post=76669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}