{"id":77645,"date":"2024-08-02T09:27:51","date_gmt":"2024-08-02T08:27:51","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=77645&#038;preview=true&#038;preview_id=77645"},"modified":"2024-08-02T14:15:50","modified_gmt":"2024-08-02T13:15:50","slug":"creer-theme-wordpress-classique","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/","title":{"rendered":"Comment cr\u00e9er un th\u00e8me WordPress classique : guide \u00e9tape par \u00e9tape"},"content":{"rendered":"<p>WordPress est un <a href=\"https:\/\/kinsta.com\/fr\/blog\/systeme-gestion-contenu\/\">syst\u00e8me de gestion de contenu (CMS)<\/a> tr\u00e8s populaire pour la cr\u00e9ation de blogs, de boutiques de <a href=\"https:\/\/kinsta.com\/ecommerce\/\">commerce \u00e9lectronique<\/a> et d&rsquo;autres sites web. Il se distingue par sa flexibilit\u00e9, car il prend en charge des milliers de <a href=\"https:\/\/kinsta.com\/fr\/blog\/themes-wordpress-gratuits-vs-payants\/\">th\u00e8mes gratuits et payants<\/a> sur plusieurs plateformes, ce qui permet d&rsquo;acc\u00e9l\u00e9rer le processus de cr\u00e9ation de sites web.<\/p>\n<p>Cependant, la v\u00e9ritable puissance de WordPress r\u00e9side dans ses options de personnalisation, car vous pouvez modifier l&rsquo;apparence de votre site \u00e0 l&rsquo;aide de divers <a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/\">constructeurs de pages<\/a> et de th\u00e8mes bas\u00e9s sur des blocs pour l&rsquo;adapter \u00e0 vos gouts. Mais que faire si ces options ne r\u00e9pondent toujours pas \u00e0 vos besoins sp\u00e9cifiques ? La bonne nouvelle, c&rsquo;est que vous pouvez d\u00e9velopper votre th\u00e8me \u00e0 partir de z\u00e9ro.<\/p>\n<p>Ce guide d\u00e9crit la cr\u00e9ation d&rsquo;un <a href=\"https:\/\/kinsta.com\/fr\/outils\/detecteur-theme-wordpress\/\">th\u00e8me WordPress<\/a> classique. Vous apprendrez \u00e0 construire un th\u00e8me \u00e9tape par \u00e9tape, ce qui vous donnera les bases n\u00e9cessaires pour cr\u00e9er des th\u00e8mes plus avanc\u00e9s \u00e0 l&rsquo;avenir.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Vous vous demandez peut-\u00eatre ce qu&rsquo;est un th\u00e8me WordPress classique, ce qui le rend classique et s&rsquo;il existe un autre type de th\u00e8me. Si ces questions vous viennent \u00e0 l&rsquo;esprit, la r\u00e9ponse directe est qu&rsquo;un th\u00e8me WordPress classique utilise les fichiers mod\u00e8les et les fonctions PHP traditionnels pour construire la structure et la mise en page du site.<\/p>\n<p>Cela diff\u00e8re des th\u00e8mes de blocs modernes introduits avec l&rsquo;<a href=\"https:\/\/kinsta.com\/courses\/gutenberg-block-development\/history-of-gutenberg-block-editor\/\">\u00e9diteur Gutenberg<\/a>, qui utilise des blocs et l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-full-site-editing\/\">\u00e9dition compl\u00e8te du site (FSE)<\/a> pour cr\u00e9er et g\u00e9rer les \u00e9l\u00e9ments du th\u00e8me. Les deux types ont leurs avantages, mais ce guide se concentre sur les th\u00e8mes classiques.<\/p>\n<\/aside>\n\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>D\u00e9velopper votre th\u00e8me \u00e0 partir de z\u00e9ro est un processus technique qui implique d&rsquo;\u00e9crire du code. Vous devez \u00eatre familiaris\u00e9 avec les \u00e9l\u00e9ments suivants :<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-php\/\">PHP<\/a><\/strong> &#8211; Essentiel pour ajouter des fonctionnalit\u00e9s et du contenu dynamique \u00e0 votre th\u00e8me. C&rsquo;est l&rsquo;\u00e9pine dorsale de WordPress.<\/li>\n<li><strong><a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">HTML<\/a><\/strong> &#8211; Utilis\u00e9 pour cr\u00e9er la structure des mod\u00e8les de votre th\u00e8me.<\/li>\n<li><strong><a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">CSS<\/a><\/strong> &#8211; Utilis\u00e9 pour styliser votre th\u00e8me et s&rsquo;assurer qu&rsquo;il s&rsquo;affiche correctement sur diff\u00e9rents appareils et navigateurs.<\/li>\n<\/ul>\n<p>En outre, la mise en place d&rsquo;un environnement de d\u00e9veloppement est cruciale. Vous pouvez en cr\u00e9er un avec <a href=\"https:\/\/kinsta.com\/fr\/docs\/devkinsta\/\">DevKinsta<\/a>, une suite de d\u00e9veloppement local pour les sites WordPress, en suivant les \u00e9tapes suivantes :<\/p>\n<ol start=\"1\">\n<li>Visitez le <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/\">site web de DevKinsta<\/a> pour t\u00e9l\u00e9charger l&rsquo;application pour votre syst\u00e8me d&rsquo;exploitation.<\/li>\n<li>Suivez les instructions d&rsquo;installation correspondant \u00e0 votre syst\u00e8me d&rsquo;exploitation.<\/li>\n<li>Ouvrez DevKinsta et cliquez sur <strong>Nouveau site WordPress<\/strong>.<\/li>\n<li>Ensuite, s\u00e9lectionnez l&rsquo;option <strong>Nouveau site WordPress<\/strong> et remplissez les champs <strong>Nom du site<\/strong>, <strong>Nom d&rsquo;utilisateur de l&rsquo;administrateur WordPress<\/strong> et <strong>Mot de passe de l&rsquo;administrateur WordPress<\/strong>.<\/li>\n<li>Enfin, cliquez sur <strong>Cr\u00e9er un site<\/strong> et attendez 30 \u00e0 60 secondes pour que le site soit cr\u00e9\u00e9.<\/li>\n<\/ol>\n<p>Une fois votre site cr\u00e9\u00e9, vous pouvez le pr\u00e9visualiser, acc\u00e9der \u00e0 votre tableau de bord WP et m\u00eame voir le chemin d&rsquo;acc\u00e8s au fichier de l&rsquo;installation locale de WP sur votre ordinateur, ce qui vous permet d&rsquo;acc\u00e9der \u00e0 tout le code.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/create-site-devkinsta.png\" alt=\"D\u00e9tails du site dans DevKinsta.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">D\u00e9tails du site dans DevKinsta.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Supposons que vous ayez un site en ligne sur MyKinsta. Vous pouvez <a href=\"https:\/\/kinsta.com\/fr\/docs\/devkinsta\/integration-devkinsta\/#pull-a-site-from-kinsta\">transf\u00e9rer votre site sur DevKinsta<\/a> pour travailler dessus localement ou utiliser votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-utiliser-sftp\/\">client SFTP pr\u00e9f\u00e9r\u00e9<\/a>, comme <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">FileZilla<\/a>, avec les d\u00e9tails STFP de votre site pour acc\u00e9der \u00e0 vos fichiers WordPress<\/p>\n<\/aside>\n\n<h2>Comprendre la structure du th\u00e8me WordPress<\/h2>\n<p>Avant de plonger dans le processus \u00e9tape par \u00e9tape de cr\u00e9ation de votre th\u00e8me classique, il est essentiel de comprendre la structure d&rsquo;un th\u00e8me WordPress classique et les fichiers cl\u00e9s impliqu\u00e9s. Ces connaissances constitueront une base solide pour le d\u00e9veloppement de votre th\u00e8me.<\/p>\n<h3>Le r\u00e9pertoire des th\u00e8mes WordPress<\/h3>\n<p>Tous les th\u00e8mes WordPress sont stock\u00e9s dans le r\u00e9pertoire <code>wp-content\/themes<\/code> de votre installation WordPress. Chaque th\u00e8me r\u00e9side dans son propre dossier au sein de ce r\u00e9pertoire.<\/p>\n<h3>Les fichiers cl\u00e9s d&rsquo;un th\u00e8me WordPress<\/h3>\n<p>Il y a deux fichiers principaux que tout th\u00e8me WordPress classique doit poss\u00e9der :<\/p>\n<ul>\n<li><code>index.php<\/code> &#8211; Il s&rsquo;agit du fichier de mod\u00e8le principal qui sert de r\u00e9f\u00e9rence pour tous les autres fichiers de mod\u00e8le. C&rsquo;est le fichier principal que WordPress utilise pour afficher le contenu.<\/li>\n<li><code>style.css<\/code> &#8211; Ce fichier contient les m\u00e9tadonn\u00e9es du th\u00e8me et les styles CSS personnalis\u00e9s. Il est essentiel pour d\u00e9finir l&rsquo;apparence du th\u00e8me et fournir des informations essentielles, telles que son nom, son auteur et sa version.<\/li>\n<\/ul>\n<p>Pour bien structurer votre th\u00e8me et ajouter des fonctionnalit\u00e9s, vous pouvez utiliser des fichiers mod\u00e8les suppl\u00e9mentaires, tels que les suivants, qui sont communs aux th\u00e8mes classiques et utilis\u00e9s dans l&rsquo;exemple de th\u00e8me cr\u00e9\u00e9 dans ce guide :<\/p>\n<ul>\n<li><code>header.php<\/code>: Ce fichier peut contenir la section d&rsquo;en-t\u00eate de votre th\u00e8me, y compris le logo du site et le menu de navigation.<\/li>\n<li><code>footer.php<\/code>: Ce fichier doit contenir la section pied de page de votre th\u00e8me.<\/li>\n<li><code>functions.php<\/code>: Ce fichier peut \u00eatre utilis\u00e9 pour ajouter des fonctions personnalis\u00e9es, des caract\u00e9ristiques et des options de support du th\u00e8me.<\/li>\n<li><code>single.php<\/code>: Ce fichier de mod\u00e8le est utilis\u00e9 pour afficher des articles de blog individuels.<\/li>\n<li><code>page.php<\/code>: Le fichier mod\u00e8le utilis\u00e9 pour afficher les pages statiques.<\/li>\n<\/ul>\n<p>Maintenant que vous avez compris les fichiers essentiels et leurs r\u00f4les, passons au processus de cr\u00e9ation de votre th\u00e8me WordPress classique, \u00e9tape par \u00e9tape.<\/p>\n<h2>Comment cr\u00e9er un th\u00e8me WordPress classique<\/h2>\n<p>Un dicton populaire dit que la meilleure fa\u00e7on d&rsquo;apprendre est de faire. Appliquons ce principe en cr\u00e9ant un th\u00e8me de blog classique qui affiche vos articles WordPress sur la page d&rsquo;accueil avec un style CSS personnalis\u00e9 et des fonctionnalit\u00e9s suppl\u00e9mentaires.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/classic-blog-theme.png\" alt=\"Th\u00e8me de blog WordPress classique.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Th\u00e8me de blog WordPress classique.<\/figcaption><\/figure>\n<h3>\u00c9tape 1 : Cr\u00e9er un nouveau dossier de th\u00e8me<\/h3>\n<p>Cr\u00e9ez un dossier dans le r\u00e9pertoire <code>themes<\/code>, par exemple <code>myblogtheme<\/code>.<\/p>\n<h3>\u00c9tape 2 : Ajouter des informations sur les m\u00e9tadonn\u00e9es du th\u00e8me<\/h3>\n<p>Ensuite, nous allons d\u00e9finir les d\u00e9tails du th\u00e8me dans le fichier <code>style.css<\/code>. Voici un exemple d&rsquo;informations de m\u00e9tadonn\u00e9es que vous pouvez inclure dans <code>style.css<\/code>:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: Kinsta Blog Theme\nAuthor: Joel Olawanle\nAuthor URI: https:\/\/kinsta.com\/blog\/author\/joelolawanle\/\nDescription: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design.\nVersion: 1.0\nLicense: GNU General Public License v3 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.html\n*\/<\/code><\/pre>\n<p>Dans le code ci-dessus :<\/p>\n<ul>\n<li><strong>Theme Name <\/strong>: Le nom de votre th\u00e8me affich\u00e9 dans la zone d&rsquo;administration de WordPress sous <strong>Apparence<\/strong> &gt; <strong>Th\u00e8mes<\/strong>.<\/li>\n<li><strong>Author <\/strong>: Affiche le nom du cr\u00e9ateur du th\u00e8me.<\/li>\n<li><strong>Author URI <\/strong>: Liens vers le site web ou le profil de l&rsquo;auteur.<\/li>\n<li><strong>Description <\/strong>: Fournit une vue d&rsquo;ensemble de l&rsquo;objectif et des fonctionnalit\u00e9s du th\u00e8me.<\/li>\n<li><strong>Version <\/strong>: Indique la version actuelle du th\u00e8me pour les mises \u00e0 jour.<\/li>\n<li><strong>Licence <\/strong>: Sp\u00e9cifie les conditions de distribution.<\/li>\n<li><strong>License URI <\/strong>: Liens vers le texte int\u00e9gral de la licence.<\/li>\n<\/ul>\n<p>Vous pouvez en savoir plus sur ces champs dans le <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/main-stylesheet-style-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">manuel des th\u00e8mes WordPress<\/a>.<\/p>\n<p>Apr\u00e8s avoir ajout\u00e9 ces informations \u00e0 votre fichier <code>style.css<\/code>, naviguez vers <strong>Apparence<\/strong> &gt; <strong>Th\u00e8mes<\/strong> dans votre zone d&rsquo;administration WordPress. Vous verrez le th\u00e8me nouvellement cr\u00e9\u00e9 list\u00e9. Lorsque vous cliquez pour voir les <strong>d\u00e9tails du th\u00e8me<\/strong>, vous remarquerez que toutes les informations que vous avez ajout\u00e9es apparaissent.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/theme-details.png\" alt=\"D\u00e9tails du th\u00e8me de blog classique.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">D\u00e9tails du th\u00e8me de blog classique.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Ajoutez un fichier <code>screenshot.png<\/code> au dossier racine de votre th\u00e8me, et il apparaitra comme une image de pr\u00e9visualisation sur la page <strong>Th\u00e8mes<\/strong>. Il est ainsi plus facile d&rsquo;identifier \u00e0 quoi ressemblera un th\u00e8me.<\/p>\n<\/aside>\n\n<p>Maintenant que nous avons cr\u00e9\u00e9 le fichier <code>style.css<\/code>, passons \u00e0 la cr\u00e9ation des autres fichiers essentiels du th\u00e8me.<\/p>\n<h3>\u00c9tape 3 : Cr\u00e9er le fichier mod\u00e8le principal de votre th\u00e8me<\/h3>\n<p>Le fichier <code>index.php<\/code> sert de fichier mod\u00e8le principal pour votre th\u00e8me. Tout le code que vous ajoutez ici est utilis\u00e9 pour afficher le contenu principal de votre site.<\/p>\n<p>Par exemple, si vous ajoutez un <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-code-wordpress\/\">code HTML<\/a> de base ici, tout s&rsquo;affiche lorsque vous activez et pr\u00e9visualisez le th\u00e8me. Cependant, vous souhaitez extraire des informations de votre CMS WordPress pour les afficher via le fichier mod\u00e8le de votre th\u00e8me, et c&rsquo;est ici que vous utilisez PHP pour ajouter des fonctions WordPress.<\/p>\n<p>Voici \u00e0 quoi peut ressembler la structure de base du fichier <code>index.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n      &lt;!-- Main content goes here --&gt;<!-- Main content goes here -->\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Dans la structure ci-dessus, <code>get_header()<\/code> et <code>get_footer()<\/code> sont utilis\u00e9s pour extraire les sections d&rsquo;en-t\u00eate et de pied de page de leurs fichiers mod\u00e8les respectifs (<code>header.php<\/code> et <code>footer.php<\/code>).<\/p>\n<p>Nous allons remplir le fichier <code>index.php<\/code> avec le bon code, mais travaillons d&rsquo;abord sur les sections d&rsquo;en-t\u00eate et de pied de page du th\u00e8me.<\/p>\n<h3>\u00c9tape 4 : Cr\u00e9er le fichier d&rsquo;en-t\u00eate<\/h3>\n<p>Le fichier <code>header.php<\/code> affiche la section d&rsquo;en-t\u00eate de votre site, qui comprend g\u00e9n\u00e9ralement des \u00e9l\u00e9ments tels que le logo du site et le menu de navigation. Il comprend \u00e9galement les feuilles de style, les scripts et les balises m\u00e9ta. Voici \u00e0 quoi ressemble notre fichier <code>header.php<\/code>:<\/p>\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 name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;\n\n&lt;body &lt;?php body_class(); ?&gt;&gt;\n    &lt;header class=\"header-container\"&gt;\n        &lt;div class=\"my-logo\"&gt;\n            &lt;?php\n            if ( function_exists('the_custom_logo') && has_custom_logo() ) {\n                the_custom_logo();\n            } else {\n                \/\/ Fallback image\n                ?&gt;\n                &lt;a href=\"&lt;?php echo home_url('\/'); ?&gt;\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/dummy-logo.png\" alt=\"&lt;?php bloginfo('name'); ?&gt;\" class=\"custom-logo\" width=\"100px\"&gt;\n                &lt;\/a&gt;\n                &lt;?php\n            }\n            ?&gt;\n        &lt;\/div&gt;\n        &lt;nav&gt;\n            &lt;?php wp_nav_menu(array(\n                'theme_location' =&gt; 'header-menu',\n                'menu_class' =&gt; 'header-menu'\n            )); ?&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<p>D\u00e9composons et expliquons chaque partie de ce fichier et ajoutons les <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-functions-php\/\">fonctions<\/a> et <a href=\"https:\/\/kinsta.com\/fr\/blog\/hooks-wordpress\/\">crochets (hooks)<\/a> correspondants \u00e0 <code>functions.php<\/code>.<\/p>\n<p>Commen\u00e7ons par la section <code>&lt;head&gt;<\/code>. Cette section comprend les m\u00e9tadonn\u00e9es essentielles, le titre du site, l&rsquo;encodage des caract\u00e8res et la fonction <code>wp_head()<\/code>:<\/p>\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 name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;<\/code><\/pre>\n<p>La fonction <code>language_attributes();<\/code> d\u00e9finit les attributs linguistiques du document HTML. Ensuite, la fonction <code>wp_head();<\/code> est cruciale car elle permet \u00e0 WordPress et aux extensions d&rsquo;ins\u00e9rer des \u00e9l\u00e9ments essentiels dans la section <code>&lt;head&gt;<\/code>, tels que des feuilles de style et des scripts.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Enveloppez toujours les fonctions WordPress dans des balises <code>&lt;?php ... ?&gt;<\/code>.<\/p>\n<\/aside>\n\n<p>Mettez la feuille de style en <a href=\"https:\/\/learn.wordpress.org\/lesson-plan\/enqueueing-scripts-and-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">file d&rsquo;attente<\/a> en ajoutant ce qui suit \u00e0 <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_enqueue_styles() {\n    \/\/ Enqueue the main stylesheet\n    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());\n}\n\nadd_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');<\/code><\/pre>\n<p>La fonction <code>wp_enqueue_style()<\/code> ajoute la <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/\">feuille de style<\/a> principale \u00e0 la section head. Nous pr\u00e9fixons la fonction par <code>my_custom_theme<\/code> pour \u00e9viter les conflits avec d&rsquo;autres th\u00e8mes ou extensions. Vous pouvez d\u00e9cider de l&rsquo;ajouter directement \u00e0 la balise head avec la balise <code>&lt;link&gt;<\/code>.<\/p>\n<p>De m\u00eame, d\u00e9clarons une fonction pour ajouter le titre du site \u00e0 la section head :<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_wp_title() {\n    add_theme_support('title-tag');\n}\n\nadd_action('after_setup_theme', 'my_custom_theme_wp_title');<\/code><\/pre>\n<p>Maintenant, gr\u00e2ce \u00e0 la fonction <code>wp_head()<\/code>, le style et la balise title sont ajout\u00e9s dynamiquement \u00e0 l&rsquo;en-t\u00eate. Vous pouvez le v\u00e9rifier en inspectant votre site WordPress avec les outils de d\u00e9veloppement de votre navigateur. Dans la section <code>&lt;head&gt;<\/code>, vous devriez voir le lien de la feuille de style et la balise de titre g\u00e9n\u00e9r\u00e9e dynamiquement, ce qui confirme qu&rsquo;ils sont inclus.<\/p>\n<p>Ensuite, dans le corps, nous d\u00e9clarons la section navbar o\u00f9 nous affichons un logo factice et assurons une option pour l&rsquo;utilisation d&rsquo;un logo personnalis\u00e9 lorsqu&rsquo;il est d\u00e9fini dans l&rsquo;identit\u00e9 du site WordPress :<\/p>\n<pre><code class=\"language-php\">&lt;body&gt;\n    &lt;header class=\"header-container\"&gt;\n        &lt;div class=\"my-logo\"&gt;\n            &lt;?php\n            if ( function_exists('the_custom_logo') && has_custom_logo() ) {\n                the_custom_logo();\n            } else {\n                \/\/ Fallback image\n                ?&gt;\n                &lt;a href=\"&lt;?php echo home_url('\/'); ?&gt;\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/dummy-logo.png\" alt=\"&lt;?php bloginfo('name'); ?&gt;\" class=\"custom-logo\" width=\"100px\"&gt;\n                &lt;\/a&gt;\n                &lt;?php\n            }\n            ?&gt;\n        &lt;\/div&gt;<\/code><\/pre>\n<p>La section logo utilise la fonction <code>the_custom_logo()<\/code> pour afficher un logo personnalis\u00e9 s&rsquo;il est d\u00e9fini. Si aucun logo personnalis\u00e9 n&rsquo;est d\u00e9fini, elle affiche une image par d\u00e9faut.<\/p>\n<p>Pour activer la prise en charge des logos personnalis\u00e9s, ajoutez le code suivant \u00e0 <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_setup() {\n    add_theme_support('custom-logo', array(\n        'height'      =&gt; 100,\n        'width'       =&gt; 400,\n        'flex-height' =&gt; true,\n        'flex-width'  =&gt; true,\n    ));\n}\n\nadd_action('after_setup_theme', 'my_custom_theme_setup');<\/code><\/pre>\n<p>Cette fonction ajoute la prise en charge d&rsquo;un logo personnalis\u00e9. Enfin, la section du menu de navigation :<\/p>\n<pre><code class=\"language-php\">        &lt;nav&gt;\n            &lt;?php wp_nav_menu(array(\n                'theme_location' =&gt; 'header-menu',\n                'menu_class' =&gt; 'header-menu'\n            )); ?&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<p>La fonction <code>wp_nav_menu()<\/code> affiche le <a href=\"https:\/\/kinsta.com\/fr\/blog\/personnaliser-menu-wordpress\/\">menu de navigation<\/a> attribu\u00e9 \u00e0 l&#8217;emplacement \u00ab Header Menu \u00bb. Pour enregistrer le menu de navigation, assurez-vous d&rsquo;avoir ce code dans <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">register_nav_menus(array(\n    'header-menu' =&gt; __('Header Menu', 'my-custom-theme'),\n));<\/code><\/pre>\n<p>Voici \u00e0 quoi ressemblera votre fichier <code>function.php<\/code>:<\/p>\n<pre><code class=\"language-php\"> 100,\n        'width'       =&gt; 400,\n        'flex-height' =&gt; true,\n        'flex-width'  =&gt; true,\n    ));\n}\nadd_action('after_setup_theme', 'my_custom_theme_setup');\n\nfunction my_custom_theme_enqueue_styles() {\n    \/\/ Enqueue the main stylesheet\n    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());\n}\nadd_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');\n\n\/\/ Function to add the site title to the head section\nfunction my_custom_theme_wp_title() {\n    add_theme_support('title-tag');\n}\nadd_action('after_setup_theme', 'my_custom_theme_wp_title');\n?&gt;<\/code><\/pre>\n<p>En suivant ces \u00e9tapes, vous vous assurez que votre en-t\u00eate supporte un logo personnalis\u00e9 et affiche un menu de navigation, ce qui le rend dynamique et facilement personnalisable via le tableau de bord d&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/tableau-de-bord-admin-wordpress\/\">administration de WordPress<\/a>.<\/p>\n<h3>\u00c9tape 5 : Cr\u00e9er le fichier de pied de page<\/h3>\n<p>Le fichier <code>footer.php<\/code> sera responsable de l&rsquo;affichage de la section du pied de page de votre site. Pour ce th\u00e8me, le fichier <code>footer.php<\/code> n&rsquo;affichera que l&rsquo;ann\u00e9e du copyright :<\/p>\n<pre><code class=\"language-php\">&lt;footer&gt;\n  &lt;p&gt;Copyright \u00a9 2024&lt;\/p&gt;\n&lt;\/footer&gt;\n&lt;?php wp_footer(); ?&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Dans ce fichier, nous incluons la fonction <code>wp_footer()<\/code>, de la m\u00eame mani\u00e8re que nous avons inclus wp_head() dans l&rsquo;en-t\u00eate. La fonction <code>wp_footer()<\/code> permet \u00e0 WordPress et aux extensions d&rsquo;ins\u00e9rer des \u00e9l\u00e9ments essentiels, tels que des scripts, juste avant la balise de fermeture <code>&lt;\/body&gt;<\/code>. Cette fonction est essentielle pour s&rsquo;assurer que toutes les ressources n\u00e9cessaires sont charg\u00e9es correctement et que votre site fonctionne comme pr\u00e9vu.<\/p>\n<h3>\u00c9tape 6 : Afficher des articles de blog avec la boucle WordPress<\/h3>\n<p>Revenons au fichier <code>index.php<\/code> pour expliquer comment afficher en boucle les articles de votre site WordPress \u00e0 l&rsquo;aide de la boucle WordPress &#8211; un moyen puissant d&rsquo;afficher le contenu de mani\u00e8re dynamique. Voici \u00e0 quoi ressemble la boucle :<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"my-posts\"&gt;\n    &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n        &lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;\n            &lt;article class=\"article-loop\"&gt;\n                &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n                    &lt;?php the_post_thumbnail(); ?&gt;\n                &lt;?php endif; ?&gt;\n                &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n                &lt;div class=\"flex-info\"&gt;\n                    &lt;p&gt;By: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n                    &lt;p&gt;&lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;?php the_excerpt(); ?&gt;\n            &lt;\/article&gt;\n        &lt;\/a&gt;\n    &lt;?php endwhile; else : ?&gt;\n        &lt;article&gt;\n            &lt;p&gt;Sorry, no posts were found!&lt;\/p&gt;\n        &lt;\/article&gt;\n    &lt;?php endif; ?&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Le code ci-dessus v\u00e9rifie s&rsquo;il y a des articles \u00e0 afficher avant d&rsquo;entrer dans la boucle. Dans la boucle, les fonctions WordPress telles que <code>the_title()<\/code>, <code>the_author()<\/code>, <code>the_time('F j, Y')<\/code>, et <code>the_excerpt()<\/code> affichent des informations sur chaque article WordPress.<\/p>\n<p>La fonction <code>the_post_thumbnail()<\/code> est \u00e9galement utilis\u00e9e pour afficher la miniature, mais elle est envelopp\u00e9e dans une instruction if, de sorte qu&rsquo;elle ne s&rsquo;affiche que lorsqu&rsquo;il y a une image mise en avant pour votre article. Dans le fichier <code>functions.php<\/code>, nous devons ajouter la prise en charge des miniatures d&rsquo;articles avec cette fonction afin qu&rsquo;il y ait une option pour t\u00e9l\u00e9verser les images mises en avant lorsque vous cr\u00e9ez de nouveaux articles :<\/p>\n<pre><code class=\"language-php\">add_theme_support('post-thumbnails');<\/code><\/pre>\n<p>Ajoutez ceci \u00e0 la fonction <code>my_custom_theme_setup()<\/code> que nous avons cr\u00e9\u00e9e dans le fichier <code>functions.php<\/code>. Voici \u00e0 quoi ressemble maintenant le fichier <code>index.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    &lt;div class=\"hero\"&gt;\n        &lt;h1&gt;Welcome to my blog!&lt;\/h1&gt;\n        &lt;p&gt;Here, you'll find posts on a variety of topics, including programming, web development, and more.&lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"my-posts\"&gt;\n        &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n            &lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;\n                &lt;article class=\"article-loop\"&gt;\n                    &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n                        &lt;?php the_post_thumbnail(); ?&gt;\n                    &lt;?php endif; ?&gt;\n                    &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n                    &lt;div class=\"flex-info\"&gt;\n                        &lt;p&gt;By: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n                        &lt;p&gt;&lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n                    &lt;\/div&gt;\n                    &lt;?php the_excerpt(); ?&gt;\n                &lt;\/article&gt;\n            &lt;\/a&gt;\n        &lt;?php endwhile; else : ?&gt;\n            &lt;article&gt;\n                &lt;p&gt;Sorry, no posts were found!&lt;\/p&gt;\n            &lt;\/article&gt;\n        &lt;?php endif; ?&gt;\n    &lt;\/div&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Vous remarquerez que du code statique a \u00e9t\u00e9 ajout\u00e9, qui sera stylis\u00e9 comme une banni\u00e8re affichant \u00ab Welcome to my blog \u00bb et un paragraphe de texte.<\/p>\n<h3>\u00c9tape 7 : Cr\u00e9er un mod\u00e8le d&rsquo;article unique<\/h3>\n<p>Avant de styliser notre th\u00e8me, d\u00e9finissons un mod\u00e8le de base pour afficher des articles de blog individuels lorsqu&rsquo;on clique dessus \u00e0 partir de n&rsquo;importe quelle page ou article de votre th\u00e8me. Pour cela, cr\u00e9ez un fichier <code>single.php<\/code> \u00e0 la racine de votre th\u00e8me et ajoutez le code suivant :<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    &lt;section class=\"single__post\"&gt;\n        &lt;article class=\"article-full\"&gt;\n          &lt;div class=\"single__post-header\"&gt;\n            &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n              &lt;?php the_post_thumbnail(); ?&gt;\n            &lt;?php endif; ?&gt;\n            &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n            &lt;p&gt;By: &lt;?php the_author(); ?&gt; on &lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;?php the_content(); ?&gt;\n        &lt;\/article&gt;\n    &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Dans le code ci-dessus, <code>get_header()<\/code> et <code>get_footer()<\/code> incluent l&rsquo;en-t\u00eate et le pied de page. Dans les autres parties du code, les fonctions de WordPress affichent du contenu dynamique.<\/p>\n<h3>\u00c9tape 8 : Cr\u00e9er un fichier de mod\u00e8le pour les pages WordPress<\/h3>\n<p>Tout comme vous avez cr\u00e9\u00e9 un mod\u00e8le pour les articles WordPress individuels, vous pouvez cr\u00e9er un mod\u00e8le pour afficher vos pages WordPress. Pour cela, cr\u00e9ez un fichier <code>page.php<\/code> \u00e0 la racine du dossier de votre th\u00e8me et ajoutez le code suivant :<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main class=\"wrap\"&gt;\n  &lt;section class=\"\"&gt;\n      &lt;article class=\"article-full\"&gt;\n        &lt;div class=\"page-header\"&gt;\n          &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n        &lt;\/div&gt;\n        &lt;?php the_content(); ?&gt;\n      &lt;\/article&gt;\n  &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<h3>\u00c9tape 9 : Styliser votre th\u00e8me<\/h3>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, nous avons cr\u00e9\u00e9 quelques mod\u00e8les de base pour notre th\u00e8me. Il est maintenant temps d&rsquo;ajouter un style personnalis\u00e9 pour lui donner une belle apparence. Vous pouvez ajouter vos styles au fichier <code>style.css<\/code> dans le dossier de votre th\u00e8me. Pour commencer, copiez le style \u00e0 partir de ce <a href=\"https:\/\/gist.github.com\/olawanlejoel\/8cf4cee4429df83a7e005275d1f4275d\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub gist<\/a> pour l&rsquo;exemple de th\u00e8me cr\u00e9\u00e9 dans ce guide.<\/p>\n<h3>\u00c9tape 10 : Tester et d\u00e9ployer votre th\u00e8me<\/h3>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, vous avez r\u00e9ussi \u00e0 cr\u00e9er un th\u00e8me WordPress. Il est maintenant temps de le tester et de le d\u00e9ployer.<\/p>\n<p>Tout d&rsquo;abord, assurez-vous que votre th\u00e8me est activ\u00e9 en allant dans le tableau de bord d&rsquo;administration de WordPress et en s\u00e9lectionnant <strong>Apparence<\/strong> &gt; <strong>Th\u00e8mes<\/strong>. Si ce n&rsquo;est pas d\u00e9j\u00e0 fait, cliquez sur votre th\u00e8me et activez-le. Vous pouvez \u00e9galement cliquer sur le bouton <strong>Personnaliser<\/strong> pour d\u00e9finir l&rsquo;identit\u00e9 du site, ajuster le menu et modifier d&rsquo;autres r\u00e9glages afin de vous assurer que votre site s&rsquo;affiche correctement.<\/p>\n<p>Une fois que vous \u00eates satisfait de votre th\u00e8me, vous disposez de plusieurs options pour le d\u00e9ployer :<\/p>\n<ol start=\"1\">\n<li><strong>Mettre votre site local en ligne<\/strong>: Si vous d\u00e9veloppez localement avec DevKinsta, vous pouvez facilement pousser votre site vers un environnement de staging. Cela vous permet de tester votre th\u00e8me dans un environnement similaire \u00e0 l&rsquo;environnement r\u00e9el avant de le pousser dans l&rsquo;environnement r\u00e9el. Vous trouverez des instructions d\u00e9taill\u00e9es sur la fa\u00e7on de proc\u00e9der dans notre <a href=\"https:\/\/kinsta.com\/fr\/docs\/devkinsta\/integration-devkinsta\/#push-changes-to-staging\">documentation DevKinsta<\/a>.<\/li>\n<li><strong>Empaquetez et t\u00e9l\u00e9versez votre th\u00e8me<\/strong>: Vous pouvez \u00e9galement regrouper votre th\u00e8me dans un dossier zipp\u00e9 et le t\u00e9l\u00e9verser sur un site en ligne. Allez dans <strong>Apparence<\/strong> &gt; <strong>Th\u00e8mes<\/strong> &gt; <strong>Ajouter un nouveau<\/strong> <strong>th\u00e8me<\/strong> &gt; <strong>T\u00e9l\u00e9verser un th\u00e8me<\/strong> dans le tableau de bord d&rsquo;administration de WordPress, et s\u00e9lectionnez votre fichier de th\u00e8me zipp\u00e9 \u00e0 t\u00e9l\u00e9verser.<\/li>\n<\/ol>\n<p>Testez votre th\u00e8me dans un environnement de staging en sc\u00e8ne afin de vous assurer que tout fonctionne comme pr\u00e9vu avant de le mettre en ligne. Cette \u00e9tape est cruciale pour d\u00e9tecter les probl\u00e8mes potentiels et s&rsquo;assurer que votre site a une apparence et un fonctionnement parfaits.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Dans cet article, nous avons cr\u00e9\u00e9 un th\u00e8me WordPress classique \u00e0 partir de z\u00e9ro. Nous avons abord\u00e9 la configuration des fichiers essentiels, l&rsquo;ajout d&rsquo;un style personnalis\u00e9 et la cr\u00e9ation de mod\u00e8les pour les articles et les pages.<\/p>\n<p>Si vous voulez que votre site ait exactement les fonctionnalit\u00e9s et l&rsquo;aspect que vous souhaitez, le d\u00e9veloppement de votre th\u00e8me WordPress est la meilleure solution. Toutefois, si vous n&rsquo;avez pas le temps, les comp\u00e9tences ou l&rsquo;envie de le faire, faire appel \u00e0 un professionnel peut vous aider \u00e0 concr\u00e9tiser votre vision de mani\u00e8re efficace.<\/p>\n<p>Lorsque vous aurez enfin un site qui correspond \u00e0 vos go\u00fbts, vous aurez besoin d&rsquo;un h\u00e9bergement robuste pour \u00e9viter les probl\u00e8mes tels que les <a href=\"https:\/\/kinsta.com\/fr\/blog\/indisponibilite-de-site\/\">temps d&rsquo;arr\u00eat<\/a>, les <a href=\"https:\/\/kinsta.com\/fr\/blog\/prevenir-attaques-ddos\/\">attaques DDoS<\/a>, etc. C&rsquo;est l\u00e0 que les fournisseurs d&rsquo;h\u00e9bergement haut de gamme comme Kinsta brillent.<\/p>\n<p>Kinsta offre un <a href=\"https:\/\/kinsta.com\/fr\/hebergement-wordpress\/\">h\u00e9bergement WordPress infog\u00e9r\u00e9<\/a> puissant avec une architecture enti\u00e8rement conteneuris\u00e9e, aliment\u00e9 exclusivement par <a href=\"https:\/\/kinsta.com\/fr\/blog\/plateforme-cloud-pour-developpeurs\/\">Google Cloud Platform<\/a> sur le r\u00e9seau Premium Tier de Google.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/fr\/nous-contacter\/\">Contactez-nous<\/a> pour en savoir plus sur notre solution d&rsquo;h\u00e9bergement infog\u00e9r\u00e9 de qualit\u00e9 sup\u00e9rieure.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress est un syst\u00e8me de gestion de contenu (CMS) tr\u00e8s populaire pour la cr\u00e9ation de blogs, de boutiques de commerce \u00e9lectronique et d&rsquo;autres sites web. Il &#8230;<\/p>\n","protected":false},"author":287,"featured_media":77646,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1028,1038],"class_list":["post-77645","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-developpement-wordpress","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 classique - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress classique depuis le d\u00e9but en cr\u00e9ant des fichiers mod\u00e8les et en utilisant les fonctions de WordPress.\" \/>\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\/creer-theme-wordpress-classique\/\" \/>\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 classique : guide \u00e9tape par \u00e9tape\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress classique depuis le d\u00e9but en cr\u00e9ant des fichiers mod\u00e8les et en utilisant les fonctions de WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/\" \/>\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-08-02T08:27:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-02T13:15:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/create-your-own-wordpress-theme.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1461\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress classique depuis le d\u00e9but en cr\u00e9ant des fichiers mod\u00e8les et en utilisant les fonctions de WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/create-your-own-wordpress-theme-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Comment cr\u00e9er un th\u00e8me WordPress classique : guide \u00e9tape par \u00e9tape\",\"datePublished\":\"2024-08-02T08:27:51+00:00\",\"dateModified\":\"2024-08-02T13:15:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/\"},\"wordCount\":3025,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/create-your-own-wordpress-theme.png\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/\",\"name\":\"Comment cr\u00e9er un th\u00e8me WordPress classique - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/create-your-own-wordpress-theme.png\",\"datePublished\":\"2024-08-02T08:27:51+00:00\",\"dateModified\":\"2024-08-02T13:15:50+00:00\",\"description\":\"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress classique depuis le d\u00e9but en cr\u00e9ant des fichiers mod\u00e8les et en utilisant les fonctions de WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/create-your-own-wordpress-theme.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/create-your-own-wordpress-theme.png\",\"width\":1461,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Th\u00e8mes WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/themes-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment cr\u00e9er un th\u00e8me WordPress classique : guide \u00e9tape par \u00e9tape\"}]},{\"@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\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment cr\u00e9er un th\u00e8me WordPress classique - Kinsta\u00ae","description":"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress classique depuis le d\u00e9but en cr\u00e9ant des fichiers mod\u00e8les et en utilisant les fonctions de WordPress.","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\/creer-theme-wordpress-classique\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er un th\u00e8me WordPress classique : guide \u00e9tape par \u00e9tape","og_description":"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress classique depuis le d\u00e9but en cr\u00e9ant des fichiers mod\u00e8les et en utilisant les fonctions de WordPress.","og_url":"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-08-02T08:27:51+00:00","article_modified_time":"2024-08-02T13:15:50+00:00","og_image":[{"width":1461,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/create-your-own-wordpress-theme.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress classique depuis le d\u00e9but en cr\u00e9ant des fichiers mod\u00e8les et en utilisant les fonctions de WordPress.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/create-your-own-wordpress-theme-1024x512.png","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Comment cr\u00e9er un th\u00e8me WordPress classique : guide \u00e9tape par \u00e9tape","datePublished":"2024-08-02T08:27:51+00:00","dateModified":"2024-08-02T13:15:50+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/"},"wordCount":3025,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/create-your-own-wordpress-theme.png","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/","url":"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/","name":"Comment cr\u00e9er un th\u00e8me WordPress classique - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/create-your-own-wordpress-theme.png","datePublished":"2024-08-02T08:27:51+00:00","dateModified":"2024-08-02T13:15:50+00:00","description":"Apprenez \u00e0 cr\u00e9er un th\u00e8me WordPress classique depuis le d\u00e9but en cr\u00e9ant des fichiers mod\u00e8les et en utilisant les fonctions de WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/create-your-own-wordpress-theme.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/create-your-own-wordpress-theme.png","width":1461,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/creer-theme-wordpress-classique\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Th\u00e8mes WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/themes-wordpress\/"},{"@type":"ListItem","position":3,"name":"Comment cr\u00e9er un th\u00e8me WordPress classique : guide \u00e9tape par \u00e9tape"}]},{"@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\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/77645","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\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=77645"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/77645\/revisions"}],"predecessor-version":[{"id":77660,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/77645\/revisions\/77660"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77645\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77645\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77645\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77645\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77645\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77645\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77645\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77645\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77645\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/77646"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=77645"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=77645"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=77645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}