{"id":76973,"date":"2024-05-09T14:35:49","date_gmt":"2024-05-09T13:35:49","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=76973&#038;preview=true&#038;preview_id=76973"},"modified":"2024-05-23T10:01:33","modified_gmt":"2024-05-23T09:01:33","slug":"theme-wordpress-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/","title":{"rendered":"Comment cr\u00e9er un th\u00e8me WordPress avec React"},"content":{"rendered":"<p>Cet article pratique exploite la flexibilit\u00e9 de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-wordpress\/\">WordPress<\/a> et la puissante interface utilisateur de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a> pour le d\u00e9veloppement de th\u00e8mes. Il d\u00e9montre comment l&rsquo;int\u00e9gration de <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-react\/\">WordPress et de React<\/a> \u00e9l\u00e8ve vos projets WordPress en vous guidant \u00e0 travers les \u00e9tapes n\u00e9cessaires \u00e0 la cr\u00e9ation d&rsquo;un th\u00e8me.<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>Pr\u00e9-requis<\/h2>\n<p>Pour suivre cet article, vous devez disposer des \u00e9l\u00e9ments suivants :<\/p>\n<ul>\n<li>Un site WordPress. Kinsta propose plusieurs options d&rsquo;installation, y compris le <a href=\"https:\/\/kinsta.com\/local-development\/\">d\u00e9veloppement local<\/a> avec <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/\">DevKinsta<\/a>, un <a href=\"https:\/\/kinsta.com\/fr\/mykinsta\/\">tableau de bord MyKinsta<\/a> convivial, ou par programmation via l&rsquo;API Kinsta.<\/li>\n<li>Node.js et npm (<a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-npm\/\">Node Package Manager<\/a>) ou yarn install\u00e9s sur votre ordinateur<\/li>\n<\/ul>\n<h2>Cr\u00e9er une structure de base pour un th\u00e8me WordPress<\/h2>\n<p>La cr\u00e9ation d&rsquo;une structure de base pour un th\u00e8me WordPress implique la mise en place d&rsquo;une s\u00e9rie de fichiers et de r\u00e9pertoires que WordPress utilise pour appliquer les styles, les fonctionnalit\u00e9s et les mises en page de votre th\u00e8me \u00e0 un site WordPress.<\/p>\n<ol start=\"1\">\n<li>Dans votre environnement DevKinsta, acc\u00e9dez au dossier de votre site. Naviguez jusqu&rsquo;au r\u00e9pertoire <strong>wp-content\/themes<\/strong>.<\/li>\n<li>Cr\u00e9ez un nouveau dossier pour votre th\u00e8me. Le nom du dossier doit \u00eatre unique et descriptif &#8211; par exemple, <strong>my-basic-theme<\/strong>.<\/li>\n<li>Dans le dossier du th\u00e8me, cr\u00e9ez ces fichiers essentiels et laissez-les vides :\n<ul>\n<li><strong>style.css<\/strong> &#8211; Il s&rsquo;agit du principal fichier de feuille de style. Il contient \u00e9galement les informations d&rsquo;en-t\u00eate de votre th\u00e8me.<\/li>\n<li><strong>functions.php<\/strong> &#8211; Ce fichier d\u00e9finit les fonctions, les classes, les actions et les filtres \u00e0 utiliser par votre th\u00e8me.<\/li>\n<li><strong>index.php<\/strong> &#8211; Il s&rsquo;agit du fichier de mod\u00e8le principal. Il est n\u00e9cessaire pour tous les th\u00e8mes.<\/li>\n<\/ul>\n<p>Si vous n&rsquo;utilisez pas React, vous devez \u00e9galement cr\u00e9er les fichiers suivants. Mais avec React, nous cr\u00e9erons des composants pour eux plus tard.<\/p>\n<ul>\n<li><strong>header.php<\/strong> &#8211; Contient l&rsquo;en-t\u00eate de votre site.<\/li>\n<li><strong>footer.php<\/strong> &#8211; Contient la section de pied de page de votre site.<\/li>\n<li><strong>sidebar.php<\/strong> &#8211; Pour la section de colonne lat\u00e9rale, si votre th\u00e8me inclut des colonnes lat\u00e9rales.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Ensuite, ouvrez le fichier <strong>style.css<\/strong> et ajoutez les \u00e9l\u00e9ments suivants au d\u00e9but du fichier :<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: My Basic Theme\nTheme URI: http:\/\/example.com\/my-basic-theme\/\nAuthor: Your Name\nAuthor URI: http:\/\/example.com\nDescription: A basic WordPress theme.\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nTags: blog, custom-background\nText Domain: my-basic-theme\n*\/<\/code><\/pre>\n<p>Cet extrait de code est la section d&rsquo;en-t\u00eate du fichier <strong>style.css<\/strong> d&rsquo;un th\u00e8me WordPress, contenant des m\u00e9tadonn\u00e9es essentielles telles que le nom du th\u00e8me, les d\u00e9tails de l&rsquo;auteur, la version et la licence. Il aide WordPress \u00e0 reconnaitre et \u00e0 afficher le th\u00e8me dans le <a href=\"https:\/\/kinsta.com\/fr\/blog\/tableau-de-bord-admin-wordpress\/\">tableau de bord<\/a>, y compris sa description et ses \u00e9tiquettes pour la cat\u00e9gorisation.<\/p>\n<h2>Int\u00e9grer React \u00e0 WordPress<\/h2>\n<p>L&rsquo;int\u00e9gration de React dans un th\u00e8me WordPress vous permet d&rsquo;utiliser l&rsquo;architecture bas\u00e9e sur les composants de React pour construire des interfaces dynamiques et interactives dans votre site WordPress. Pour int\u00e9grer React, vous utiliserez le <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts\" target=\"_blank\" rel=\"noopener noreferrer\"> paquet @wordpress\/scripts<\/a>.<\/p>\n<p>Il s&rsquo;agit d&rsquo;une collection de scripts r\u00e9utilisables adapt\u00e9s au d\u00e9veloppement de WordPress. WordPress le fournit pour simplifier le processus de configuration et de construction, en particulier lors de l&rsquo;int\u00e9gration de flux de travail <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> modernes, tels que React, dans les th\u00e8mes et les extendsions WordPress.<\/p>\n<p>Cet ensemble d&rsquo;outils enveloppe les t\u00e2ches courantes, ce qui facilite le d\u00e9veloppement avec <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">JavaScript<\/a> dans l&rsquo;\u00e9cosyst\u00e8me WordPress.<\/p>\n<h3>Adapter votre th\u00e8me<\/h3>\n<p>Maintenant que vous avez une structure de base pour votre th\u00e8me WordPress, vous pouvez l&rsquo;adapter.<\/p>\n<ol start=\"1\">\n<li>Dans le r\u00e9pertoire de votre th\u00e8me, collez le code suivant dans le fichier <strong>functions.php <\/strong>:\n<pre><code class=\"language-php\">&lt;?php\nfunction my_react_theme_scripts() {\n    wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '\/build\/index.js', array('wp-element'), '1.0.0', true);\n    wp_enqueue_style('my-react-theme-style', get_stylesheet_uri());\n}\n\nadd_action('wp_enqueue_scripts', 'my_react_theme_scripts');<\/code><\/pre>\n<p>Le fichier <strong>functions.php<\/strong> int\u00e8gre React \u00e0 votre th\u00e8me WordPress. Il utilise les fonctions <code>wp_enqueue_script<\/code> et <code>wp_enqueue_style<\/code> pour ajouter des fichiers JavaScript et des feuilles de style en cascade (<a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">CSS<\/a>) \u00e0 votre th\u00e8me.<\/p>\n<p>La fonction WordPress <code>wp_enqueue_script<\/code> prend plusieurs arguments :<\/p>\n<ul>\n<li>Le nom de la poign\u00e9e (<code>'my-react-theme-app'<\/code>), qui identifie le script de mani\u00e8re unique<\/li>\n<li>Le chemin d&rsquo;acc\u00e8s au fichier de script<\/li>\n<li>Le tableau des d\u00e9pendances, <code>array('wp-element')<\/code>, qui indique que le script d\u00e9pend de l&rsquo;enveloppe de WordPress pour React <code>('wp-element')<\/code>.<\/li>\n<li>Le num\u00e9ro de version <code>('1.0.0')<\/code><\/li>\n<li>La position <code>true<\/code>, qui indique que le script doit \u00eatre charg\u00e9 dans le pied de page du document HTML pour am\u00e9liorer les performances de chargement de la page<\/li>\n<\/ul>\n<p>La fonction <code>wp_enqueue_style<\/code> prend les arguments suivants :<\/p>\n<ul>\n<li>Le nom de la poign\u00e9e <code>'my-react-theme-style'<\/code>, qui identifie de mani\u00e8re unique la feuille de style<\/li>\n<li>La source <code>get_stylesheet_uri()<\/code>, qui renvoie l&rsquo;URL de la feuille de style principale du th\u00e8me (<strong>style.css<\/strong>) et garantit l&rsquo;application des styles du th\u00e8me<\/li>\n<\/ul>\n<ul>\n<li>L&rsquo;\u00e9l\u00e9ment <code>add_action<\/code>, qui relie une fonction personnalis\u00e9e <code>'my_react_theme_scripts'<\/code> \u00e0 une action sp\u00e9cifique (<code>'wp_enqueue_scripts'<\/code>). Cela permet de s&rsquo;assurer que votre JavaScript et votre CSS sont correctement charg\u00e9s lorsque WordPress se pr\u00e9pare \u00e0 rendre la page.<\/li>\n<\/ul>\n<p>Ce code garantit que le fichier JavaScript compil\u00e9 de votre application React, situ\u00e9 dans <strong>&lt;votre r\u00e9pertoire-th\u00e8me&gt;\/build\/index.js<\/strong>, et la feuille de style principale de votre th\u00e8me sont charg\u00e9s avec votre th\u00e8me.<\/p>\n<p>Le <strong> r\u00e9pertoire \/build<\/strong> provient g\u00e9n\u00e9ralement de la compilation de votre application React \u00e0 l&rsquo;aide d&rsquo;un outil tel que <code>create-react-app<\/code> ou <a href=\"https:\/\/kinsta.com\/fr\/blog\/vite-vs-webpack\/\">webpack<\/a>, qui regroupe votre code React dans un fichier JavaScript minifi\u00e9 pr\u00eat pour la production.<\/p>\n<p>Cette configuration est essentielle pour int\u00e9grer les fonctionnalit\u00e9s React dans votre th\u00e8me WordPress, ce qui permet de cr\u00e9er des exp\u00e9riences utilisateur dynamiques, semblables \u00e0 celles d&rsquo;une application, au sein d&rsquo;un site WordPress.<\/li>\n<li>Ensuite, mettez \u00e0 jour le contenu du fichier <strong>index.php<\/strong>:\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;\n&lt;body &lt;?php body_class(); ?&gt;&gt;\n    &lt;div id=\"app\"&gt;&lt;\/div&gt;\n    &lt;?php wp_footer(); ?&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Le code du fichier <strong>index.php<\/strong> d\u00e9finit la structure HTML de base du th\u00e8me WordPress, y compris les crochets permettant \u00e0 WordPress d&rsquo;ins\u00e9rer les en-t\u00eates (<code>wp_head<\/code>) et les pieds de page (<code>wp_footer<\/code>) n\u00e9cessaires, ainsi qu&rsquo;un <code>div<\/code> avec l&rsquo;ID <code>app<\/code> o\u00f9 l&rsquo;application React est mont\u00e9e.<\/li>\n<\/ol>\n<h3>Configurer React avec @wordpress\/scripts<\/h3>\n<ol start=\"1\">\n<li>Ouvrez votre terminal et naviguez jusqu&rsquo;au r\u00e9pertoire de votre th\u00e8me :\n<pre><code class=\"language-bash\">cd wp-content\/themes\/my-basic-theme\n<\/code><\/pre>\n<\/li>\n<li>Initialisez un nouveau projet Node.js :\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<\/li>\n<li>Installez <code>@wordpress\/scripts<\/code> et <code>@wordpress\/element<\/code>:\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts @wordpress\/element --save-dev<\/code><\/pre>\n<p>Notez que cette \u00e9tape peut prendre quelques minutes.<\/li>\n<li>Modifiez votre fichier <strong>package.json<\/strong> pour inclure un script <code>start<\/code> et un script <code>build<\/code>:\n<pre><code class=\"language-json\">\"scripts\": {\n  \"start\": \"wp-scripts start\",\n  \"build\": \"wp-scripts build\"\n},<\/code><\/pre>\n<p>Le script <code>'@wordpress\/scripts'<\/code> est utilis\u00e9 pour d\u00e9marrer un serveur de d\u00e9veloppement avec rechargement \u00e0 chaud \u00e0 des fins de d\u00e9veloppement (<code>start<\/code>) et pour compiler l&rsquo;application React en ressources statiques pour la production (<code>build<\/code>).<\/li>\n<\/ol>\n<h3>Cr\u00e9er un projet React<\/h3>\n<ol start=\"1\">\n<li>Cr\u00e9ez un nouveau r\u00e9pertoire nomm\u00e9 <strong>src<\/strong> pour vos fichiers source React dans votre th\u00e8me.<\/li>\n<li>Dans le dossier <strong>src<\/strong>, cr\u00e9ez deux nouveaux fichiers : <strong>index.js<\/strong> et <strong>App.js<\/strong>.<\/li>\n<li>Placez le code suivant dans <strong>index.js<\/strong>:\n<pre><code class=\"language-jsx\">import { render } from '@wordpress\/element';\nimport App from '.\/App';\nrender(, document.getElementById('app'))<\/code><\/pre>\n<p>Le code ci-dessus importe la fonction <code>render<\/code> de <code>@wordpress\/element<\/code> et le composant <code>App<\/code>. Il monte ensuite le composant <code>App<\/code> dans le mod\u00e8le d&rsquo;objet du document (DOM).<\/li>\n<li>Collez ensuite ce code dans le fichier <strong>App.js<\/strong>:\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nexport default class App extends Component {\n  render() {\n    return (\n      &lt;div&gt; \n        &lt;h1&gt;Hello, WordPress and React!&lt;\/h1&gt;\n        {\/* Your React components will go here *\/}\n      &lt;\/div&gt;\n);\n    }\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3>Finaliser et activer votre th\u00e8me<\/h3>\n<p>Pour activer votre th\u00e8me :<\/p>\n<ol start=\"1\">\n<li>Ex\u00e9cutez le serveur de d\u00e9veloppement avec <code>npm start<\/code>.<\/li>\n<li>Activez votre nouveau th\u00e8me dans le tableau de bord de WordPress en naviguant vers <strong>Apparence <\/strong>&gt; <strong>Th\u00e8mes<\/strong>, en localisant votre th\u00e8me et en cliquant sur <strong>Activer<\/strong>.<\/li>\n<li>Assurez-vous que le processus de construction de votre projet React est correctement configur\u00e9 pour sortir dans le bon r\u00e9pertoire de th\u00e8me, permettant \u00e0 WordPress de rendre vos composants React.<\/li>\n<li>Visitez l&rsquo;interface publique de votre site WordPress pour voir les changements en direct.<\/li>\n<\/ol>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/hello-wp-react.png\" alt=\"La page d'accueil affiche le th\u00e8me WordPress bas\u00e9 sur React nouvellement cr\u00e9\u00e9 avec le message - Hello, WordPress and React.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">La page d&rsquo;accueil affiche le th\u00e8me WordPress bas\u00e9 sur React nouvellement cr\u00e9\u00e9 avec le message &#8211; Hello, WordPress and React.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Une fois que vous \u00eates pr\u00eat \u00e0 d\u00e9ployer votre th\u00e8me, ex\u00e9cutez : <code>npm run build<\/code>. Cette commande compile votre application React en ressources statiques dans un r\u00e9pertoire de construction \u00e0 l&rsquo;int\u00e9rieur du dossier de votre th\u00e8me.<\/p>\n<\/aside>\n\n<h2>D\u00e9velopper des composants React pour le th\u00e8me<\/h2>\n<p>Ensuite, suivez une approche bas\u00e9e sur les composants pour \u00e9tendre la configuration React de base dans votre th\u00e8me WordPress avec des composants sp\u00e9cifiques, comme un en-t\u00eate.<\/p>\n<h3>Cr\u00e9er le composant header<\/h3>\n<p>Dans le r\u00e9pertoire <strong>src<\/strong> de votre th\u00e8me, cr\u00e9ez un nouveau fichier pour le composant header. Donnez-lui un nom, par exemple <strong>Header.js<\/strong>, et ajoutez le code suivant :<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nclass Header extends Component {\n    render() {\n        const { toggleTheme, darkTheme } = this.props;\n        const headerStyle = {\n            backgroundColor: darkTheme ? '#333' : '#EEE',\n            color: darkTheme ? 'white' : '#333',\n            padding: '10px 20px',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n        };\n        return (\n            &lt;header style={headerStyle}&gt;\n                &lt;div&gt;My WP Theme&lt;\/div&gt;\n                &lt;button onClick={toggleTheme}&gt;{darkTheme ? 'Light Mode' : 'Dark Mode'}&lt;\/button&gt;\n            &lt;\/header&gt;\n        );\n    }\n}\nexport default Header;<\/code><\/pre>\n<p>Ce code d\u00e9finit un composant d&rsquo;en-t\u00eate utilisant <code>'@wordpress\/element'<\/code> qui stylise dynamiquement l&rsquo;en-t\u00eate en fonction de <code>darkTheme prop<\/code>. Il inclut un bouton permettant de basculer entre les th\u00e8mes clair et fonc\u00e9 en invoquant la fonction <code>toggleTheme<code> method passed as a prop.<\/code><\/code><\/p>\n<h3>Cr\u00e9er le composant de pied de page<\/h3>\n<p>Dans le r\u00e9pertoire <strong>src<\/strong> de votre th\u00e8me, cr\u00e9ez un nouveau fichier pour le composant footer. Donnez-lui un nom &#8211; par exemple, <strong>Footer.js<\/strong> &#8211; et ajoutez le code suivant :<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nclass Footer extends Component {\n    render() {\n        const { darkTheme } = this.props;\n        const footerStyle = {\n            backgroundColor: darkTheme ? '#333' : '#EEE',\n            color: darkTheme ? 'white' : '#333',\n            padding: '20px',\n            textAlign: 'center',\n        };\n        return (\n            &lt;footer&gt; style={footerStyle}&gt;\n                \u00a9 {new Date().getFullYear()} My WP Theme\n            &lt;\/footer&gt;\n        );\n    }\n}\nexport default Footer;<\/code><\/pre>\n<p>Ce code d\u00e9finit un composant de pied de page qui rend un pied de page avec un style dynamique bas\u00e9 sur le prop <code>darkTheme<\/code> et affiche l&rsquo;ann\u00e9e en cours.<\/p>\n<h3>Mettre \u00e0 jour le fichier App.js<\/h3>\n<p>Pour utiliser les nouveaux en-t\u00eate et pied de page, remplacez le contenu du fichier <strong>App.js<\/strong> par le code suivant :<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nimport Header from '.\/Header';\nimport Footer from '.\/Footer';\nexport default class App extends Component {\n    state = {\n        darkTheme: true,\n    };\n    toggleTheme = () =&gt; {\n        this.setState(prevState =&gt; ({\n            darkTheme: !prevState.darkTheme,\n        }));\n    };\n    render() {\n        const { darkTheme } = this.state;\n        return (\n            &lt;div&gt;\n                &lt;Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} \/&gt;\n                &lt;main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}&gt;               \n                &lt;\/main&gt;\n                &lt;Footer darkTheme={darkTheme} \/&gt;\n            &lt;\/div&gt;\n        );\n    }\n}<\/code><\/pre>\n<p>Le processus de d\u00e9veloppement, qui surveille les changements et recompile votre code, devrait toujours \u00eatre actif. Ainsi, votre derni\u00e8re version du mod\u00e8le devrait ressembler \u00e0 ceci :<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/new-styles-react-wp.png\" alt=\"La page d'accueil montrant le th\u00e8me WordPress bas\u00e9 sur React, y compris l'en-t\u00eate et le pied de page.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">La page d&rsquo;accueil montrant le th\u00e8me WordPress bas\u00e9 sur React, y compris l&rsquo;en-t\u00eate et le pied de page.<\/figcaption><\/figure>\n<h2>Comment g\u00e9rer les donn\u00e9es de WordPress dans React<\/h2>\n<p>L&rsquo;int\u00e9gration du contenu de WordPress dans les applications React offre un pont transparent entre les capacit\u00e9s robustes de <a href=\"https:\/\/kinsta.com\/fr\/blog\/systeme-gestion-contenu\/\">gestion de contenu<\/a> de WordPress et le design dynamique de l&rsquo;interface utilisateur de React. Ceci est possible gr\u00e2ce \u00e0 l&rsquo;API REST de WordPress.<\/p>\n<p>Pour acc\u00e9der \u00e0 l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/api-rest-wordpress\/\">API REST de WordPress<\/a>, activez-la en mettant \u00e0 jour les r\u00e9glages du permalien. Sur le tableau de bord d&rsquo;administration de WordPress, naviguez vers <strong>R\u00e9glages<\/strong> &gt; <strong>Permaliens<\/strong>. S\u00e9lectionnez l&rsquo;option <strong>Titre de la publication<\/strong> ou toute autre option que <strong>Simple<\/strong> et enregistrez vos modifications.<\/p>\n<p>Dans le r\u00e9pertoire <strong>src<\/strong> de votre th\u00e8me, cr\u00e9ez un nouveau fichier nomm\u00e9 <strong>Posts.js<\/strong> et ajoutez ce code :<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nclass Posts extends Component {\n    state = {\n        posts: [],\n        isLoading: true,\n        error: null,\n    };\n    componentDidMount() {\n        fetch('http:\/\/127.0.0.1\/wordpress_oop\/wp-json\/wp\/v2\/posts')\n            .then(response =&gt; {\n                if (!response.ok) {\n                    throw new Error('Something went wrong');\n                }\n                return response.json();\n            })\n            .then(posts =&gt; this.setState({ posts, isLoading: false }))\n            .catch(error =&gt; this.setState({ error, isLoading: false }));\n    }\n    render() {\n        const { posts, isLoading, error } = this.state;\n        if (error) {\n            return &lt;div&gt;Error: {error.message}&lt;\/div&gt;;\n        }\n        if (isLoading) {\n            return &lt;div&gt;Loading...&lt;\/div&gt;;\n        }\n        return (\n            &lt;div&gt;\n                {posts.map(post =&gt; (\n                    &lt;article key={post.id}&gt;\n                        &lt;h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} \/&gt;\n                        &lt;div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} \/&gt;\n                    &lt;\/article&gt;\n                ))}\n            &lt;\/div&gt;\n        );\n    }\n}\nexport default Posts;<\/code><\/pre>\n<p>L&rsquo;URL <code>fetch('http:\/\/127.0.0.1\/wordpress_oop\/wp-json\/wp\/v2\/posts')<\/code> peut \u00eatre l\u00e9g\u00e8rement diff\u00e9rente selon le nom de d\u00e9ploiement de WP &#8211; c&rsquo;est-\u00e0-dire le dossier dans lequel vous avez install\u00e9 WP. Vous pouvez \u00e9galement prendre le nom d&rsquo;h\u00f4te du site dans le tableau de bord DevKinsta et ajouter le suffixe <code>\/wp-json\/wp\/v2\/posts<\/code>.<\/p>\n<p>Le composant <code>Posts<\/code> est un excellent exemple de cette int\u00e9gration, d\u00e9montrant le processus de r\u00e9cup\u00e9ration et de gestion des donn\u00e9es WordPress &#8211; en particulier les articles &#8211; en utilisant l&rsquo;API REST de WordPress.<\/p>\n<p>En lan\u00e7ant une requ\u00eate r\u00e9seau dans la m\u00e9thode de cycle de vie du composant, <code>componentDidMount<\/code>, le composant r\u00e9cup\u00e8re efficacement les articles d&rsquo;un site WordPress et les stocke dans son \u00e9tat. Cette m\u00e9thode met en \u00e9vidence un mod\u00e8le permettant d&rsquo;incorporer dynamiquement des donn\u00e9es WordPress, telles que des pages ou des types de publication personnalis\u00e9s, dans des composants React.<\/p>\n<p>Pour utiliser un nouveau composant, remplacez le contenu du fichier <strong>App.js<\/strong> par le code suivant :<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nimport Header from '.\/Header';\nimport Footer from '.\/Footer';\nimport Posts from '.\/Posts'; \/\/ Import the Posts component\n\nexport default class App extends Component {\n    state = {\n        darkTheme: true,\n    };\n    toggleTheme = () =&gt; {\n        this.setState(prevState =&gt; ({\n            darkTheme: !prevState.darkTheme,\n        }));\n    };\n    render() {\n        const { darkTheme } = this.state;\n        return (\n            &lt;div&gt;\n                &lt;Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} \/&gt;\n                &lt;main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}&gt;\n                    &lt;Posts \/&gt; {\/* Render the Posts component *\/}\n                &lt;\/main&gt;\n\n                &lt;Footer darkTheme={darkTheme} \/&gt;\n            &lt;\/div&gt;\n        );\n    }\n}<\/code><\/pre>\n<p>Vous pouvez maintenant v\u00e9rifier la derni\u00e8re version finale de votre th\u00e8me. En plus de l&rsquo;en-t\u00eate et du pied de page, il se compose d&rsquo;une zone de contenu dynamique qui pr\u00e9sente les articles.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/fetch-data-react-wp-theme.png\" alt=\"La page d'accueil pr\u00e9sente la version finale du th\u00e8me WordPress bas\u00e9 sur React, y compris les articles.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">La page d&rsquo;accueil pr\u00e9sente la version finale du th\u00e8me WordPress bas\u00e9 sur React, y compris les articles.<\/figcaption><\/figure>\n<h2>Utiliser le th\u00e8me WordPress bas\u00e9 sur React dans un projet WordPress<\/h2>\n<p>L&rsquo;int\u00e9gration d&rsquo;un th\u00e8me bas\u00e9 sur React dans un projet WordPress commence par la transformation du code React dans un format compatible avec WordPress, en s&rsquo;appuyant sur des paquets tels que <code>@wordpress\/scripts<\/code>. Cet outil simplifie le processus de construction, vous permettant de compiler les applications React en ressources statiques que WordPress peut mettre en file d&rsquo;attente.<\/p>\n<p>La construction du th\u00e8me est simple avec les commandes npm fournies par <code>@wordpress\/scripts<\/code>. L&rsquo;ex\u00e9cution de <code>npm run build<\/code> dans le r\u00e9pertoire du th\u00e8me compile le code React en fichiers statiques JavaScript et CSS.<\/p>\n<p>Vous placez ensuite ces fichiers compil\u00e9s dans le r\u00e9pertoire appropri\u00e9 du th\u00e8me, ce qui permet \u00e0 WordPress de charger et de rendre correctement les composants React dans le cadre du th\u00e8me. Une fois int\u00e9gr\u00e9, vous pouvez activer le th\u00e8me WordPress React comme n&rsquo;importe quel autre, apportant instantan\u00e9ment au site WordPress une exp\u00e9rience utilisateur moderne, semblable \u00e0 celle d&rsquo;une application.<\/p>\n<h2>En r\u00e9sum\u00e9<\/h2>\n<p>En construisant et en int\u00e9grant un th\u00e8me dans WordPress en utilisant les puissantes capacit\u00e9s d&rsquo;interface utilisateur de React, vous pouvez lib\u00e9rer le potentiel de cr\u00e9ation d&rsquo;exp\u00e9riences web flexibles, hautement interactives et centr\u00e9es sur l&rsquo;utilisateur.<\/p>\n<p>Si vous \u00eates pr\u00eat \u00e0 mettre en ligne vos th\u00e8mes WordPress React, Kinsta propose un <a href=\"https:\/\/kinsta.com\/fr\/hebergement-wordpress\/\">service d&rsquo;h\u00e9bergement WordPress<\/a> infog\u00e9r\u00e9 avec une infrastructure s\u00e9curis\u00e9e, une mise en cache de pointe et d&rsquo;autres fonctionnalit\u00e9s qui augmentent la vitesse et la performance de votre site.<\/p>\n<p><em>Envisagez-vous de cr\u00e9er un th\u00e8me WordPress avec React ? N&rsquo;h\u00e9sitez pas \u00e0 nous faire part de vos conseils sur les raisons pour lesquelles vous pensez que c&rsquo;est la meilleure solution et sur la mani\u00e8re de proc\u00e9der.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cet article pratique exploite la flexibilit\u00e9 de WordPress et la puissante interface utilisateur de React pour le d\u00e9veloppement de th\u00e8mes. Il d\u00e9montre comment l&rsquo;int\u00e9gration de WordPress &#8230;<\/p>\n","protected":false},"author":199,"featured_media":76974,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1004,1038],"class_list":["post-76973","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-themes-wordpress"],"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 cr\u00e9er un th\u00e8me WordPress avec React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress \u00e0 partir de z\u00e9ro avec React en tirant parti de ses puissantes fonctionnalit\u00e9s comme les composants r\u00e9utilisables et les requ\u00eates API.\" \/>\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\/theme-wordpress-react\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cr\u00e9er un th\u00e8me WordPress avec React\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress \u00e0 partir de z\u00e9ro avec React en tirant parti de ses puissantes fonctionnalit\u00e9s comme les composants r\u00e9utilisables et les requ\u00eates API.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/\" \/>\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-05-09T13:35:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-23T09:01:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/05\/wordpress-react-theme.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 cr\u00e9er un th\u00e8me WordPress \u00e0 partir de z\u00e9ro avec React en tirant parti de ses puissantes fonctionnalit\u00e9s comme les composants r\u00e9utilisables et les requ\u00eates API.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/05\/wordpress-react-theme-1024x512.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=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Comment cr\u00e9er un th\u00e8me WordPress avec React\",\"datePublished\":\"2024-05-09T13:35:49+00:00\",\"dateModified\":\"2024-05-23T09:01:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/\"},\"wordCount\":2247,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/05\/wordpress-react-theme.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/\",\"name\":\"Comment cr\u00e9er un th\u00e8me WordPress avec React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/05\/wordpress-react-theme.jpg\",\"datePublished\":\"2024-05-09T13:35:49+00:00\",\"dateModified\":\"2024-05-23T09:01:33+00:00\",\"description\":\"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress \u00e0 partir de z\u00e9ro avec React en tirant parti de ses puissantes fonctionnalit\u00e9s comme les composants r\u00e9utilisables et les requ\u00eates API.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/05\/wordpress-react-theme.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/05\/wordpress-react-theme.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment cr\u00e9er un th\u00e8me WordPress avec React\"}]},{\"@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\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/fr\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment cr\u00e9er un th\u00e8me WordPress avec React - Kinsta\u00ae","description":"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress \u00e0 partir de z\u00e9ro avec React en tirant parti de ses puissantes fonctionnalit\u00e9s comme les composants r\u00e9utilisables et les requ\u00eates API.","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\/theme-wordpress-react\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er un th\u00e8me WordPress avec React","og_description":"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress \u00e0 partir de z\u00e9ro avec React en tirant parti de ses puissantes fonctionnalit\u00e9s comme les composants r\u00e9utilisables et les requ\u00eates API.","og_url":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-05-09T13:35:49+00:00","article_modified_time":"2024-05-23T09:01:33+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/05\/wordpress-react-theme.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress \u00e0 partir de z\u00e9ro avec React en tirant parti de ses puissantes fonctionnalit\u00e9s comme les composants r\u00e9utilisables et les requ\u00eates API.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/05\/wordpress-react-theme-1024x512.jpg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Jeremy Holcombe","Dur\u00e9e de lecture estim\u00e9e":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Comment cr\u00e9er un th\u00e8me WordPress avec React","datePublished":"2024-05-09T13:35:49+00:00","dateModified":"2024-05-23T09:01:33+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/"},"wordCount":2247,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/05\/wordpress-react-theme.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/","url":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/","name":"Comment cr\u00e9er un th\u00e8me WordPress avec React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/05\/wordpress-react-theme.jpg","datePublished":"2024-05-09T13:35:49+00:00","dateModified":"2024-05-23T09:01:33+00:00","description":"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress \u00e0 partir de z\u00e9ro avec React en tirant parti de ses puissantes fonctionnalit\u00e9s comme les composants r\u00e9utilisables et les requ\u00eates API.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/05\/wordpress-react-theme.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/05\/wordpress-react-theme.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/fr\/sujets\/react\/"},{"@type":"ListItem","position":3,"name":"Comment cr\u00e9er un th\u00e8me WordPress avec React"}]},{"@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\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.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:\/\/kinsta.com\/fr\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76973","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\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=76973"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76973\/revisions"}],"predecessor-version":[{"id":77133,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76973\/revisions\/77133"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76973\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76973\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76973\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76973\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76973\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76973\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76973\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76973\/translations\/nl"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76973\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/76974"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=76973"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=76973"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=76973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}