WordPress est un système de gestion de contenu (CMS) très populaire pour la création de blogs, de boutiques de commerce électronique et d’autres sites web. Il se distingue par sa flexibilité, car il prend en charge des milliers de thèmes gratuits et payants sur plusieurs plateformes, ce qui permet d’accélérer le processus de création de sites web.
Cependant, la véritable puissance de WordPress réside dans ses options de personnalisation, car vous pouvez modifier l’apparence de votre site à l’aide de divers constructeurs de pages et de thèmes basés sur des blocs pour l’adapter à vos gouts. Mais que faire si ces options ne répondent toujours pas à vos besoins spécifiques ? La bonne nouvelle, c’est que vous pouvez développer votre thème à partir de zéro.
Ce guide décrit la création d’un thème WordPress classique. Vous apprendrez à construire un thème étape par étape, ce qui vous donnera les bases nécessaires pour créer des thèmes plus avancés à l’avenir.
Pré-requis
Développer votre thème à partir de zéro est un processus technique qui implique d’écrire du code. Vous devez être familiarisé avec les éléments suivants :
- PHP – Essentiel pour ajouter des fonctionnalités et du contenu dynamique à votre thème. C’est l’épine dorsale de WordPress.
- HTML – Utilisé pour créer la structure des modèles de votre thème.
- CSS – Utilisé pour styliser votre thème et s’assurer qu’il s’affiche correctement sur différents appareils et navigateurs.
En outre, la mise en place d’un environnement de développement est cruciale. Vous pouvez en créer un avec DevKinsta, une suite de développement local pour les sites WordPress, en suivant les étapes suivantes :
- Visitez le site web de DevKinsta pour télécharger l’application pour votre système d’exploitation.
- Suivez les instructions d’installation correspondant à votre système d’exploitation.
- Ouvrez DevKinsta et cliquez sur Nouveau site WordPress.
- Ensuite, sélectionnez l’option Nouveau site WordPress et remplissez les champs Nom du site, Nom d’utilisateur de l’administrateur WordPress et Mot de passe de l’administrateur WordPress.
- Enfin, cliquez sur Créer un site et attendez 30 à 60 secondes pour que le site soit créé.
Une fois votre site créé, vous pouvez le prévisualiser, accéder à votre tableau de bord WP et même voir le chemin d’accès au fichier de l’installation locale de WP sur votre ordinateur, ce qui vous permet d’accéder à tout le code.
Comprendre la structure du thème WordPress
Avant de plonger dans le processus étape par étape de création de votre thème classique, il est essentiel de comprendre la structure d’un thème WordPress classique et les fichiers clés impliqués. Ces connaissances constitueront une base solide pour le développement de votre thème.
Le répertoire des thèmes WordPress
Tous les thèmes WordPress sont stockés dans le répertoire wp-content/themes de votre installation WordPress. Chaque thème réside dans son propre dossier au sein de ce répertoire.
Les fichiers clés d’un thème WordPress
Il y a deux fichiers principaux que tout thème WordPress classique doit posséder :
index.php– Il s’agit du fichier de modèle principal qui sert de référence pour tous les autres fichiers de modèle. C’est le fichier principal que WordPress utilise pour afficher le contenu.style.css– Ce fichier contient les métadonnées du thème et les styles CSS personnalisés. Il est essentiel pour définir l’apparence du thème et fournir des informations essentielles, telles que son nom, son auteur et sa version.
Pour bien structurer votre thème et ajouter des fonctionnalités, vous pouvez utiliser des fichiers modèles supplémentaires, tels que les suivants, qui sont communs aux thèmes classiques et utilisés dans l’exemple de thème créé dans ce guide :
header.php: Ce fichier peut contenir la section d’en-tête de votre thème, y compris le logo du site et le menu de navigation.footer.php: Ce fichier doit contenir la section pied de page de votre thème.functions.php: Ce fichier peut être utilisé pour ajouter des fonctions personnalisées, des caractéristiques et des options de support du thème.single.php: Ce fichier de modèle est utilisé pour afficher des articles de blog individuels.page.php: Le fichier modèle utilisé pour afficher les pages statiques.
Maintenant que vous avez compris les fichiers essentiels et leurs rôles, passons au processus de création de votre thème WordPress classique, étape par étape.
Comment créer un thème WordPress classique
Un dicton populaire dit que la meilleure façon d’apprendre est de faire. Appliquons ce principe en créant un thème de blog classique qui affiche vos articles WordPress sur la page d’accueil avec un style CSS personnalisé et des fonctionnalités supplémentaires.
Étape 1 : Créer un nouveau dossier de thème
Créez un dossier dans le répertoire themes, par exemple myblogtheme.
Étape 2 : Ajouter des informations sur les métadonnées du thème
Ensuite, nous allons définir les détails du thème dans le fichier style.css. Voici un exemple d’informations de métadonnées que vous pouvez inclure dans style.css:
/*
Theme Name: Kinsta Blog Theme
Author: Joel Olawanle
Author URI: https://kinsta.com/blog/author/joelolawanle/
Description: 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.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/Dans le code ci-dessus :
- Theme Name : Le nom de votre thème affiché dans la zone d’administration de WordPress sous Apparence > Thèmes.
- Author : Affiche le nom du créateur du thème.
- Author URI : Liens vers le site web ou le profil de l’auteur.
- Description : Fournit une vue d’ensemble de l’objectif et des fonctionnalités du thème.
- Version : Indique la version actuelle du thème pour les mises à jour.
- Licence : Spécifie les conditions de distribution.
- License URI : Liens vers le texte intégral de la licence.
Vous pouvez en savoir plus sur ces champs dans le manuel des thèmes WordPress.
Après avoir ajouté ces informations à votre fichier style.css, naviguez vers Apparence > Thèmes dans votre zone d’administration WordPress. Vous verrez le thème nouvellement créé listé. Lorsque vous cliquez pour voir les détails du thème, vous remarquerez que toutes les informations que vous avez ajoutées apparaissent.
Maintenant que nous avons créé le fichier style.css, passons à la création des autres fichiers essentiels du thème.
Étape 3 : Créer le fichier modèle principal de votre thème
Le fichier index.php sert de fichier modèle principal pour votre thème. Tout le code que vous ajoutez ici est utilisé pour afficher le contenu principal de votre site.
Par exemple, si vous ajoutez un code HTML de base ici, tout s’affiche lorsque vous activez et prévisualisez le thème. Cependant, vous souhaitez extraire des informations de votre CMS WordPress pour les afficher via le fichier modèle de votre thème, et c’est ici que vous utilisez PHP pour ajouter des fonctions WordPress.
Voici à quoi peut ressembler la structure de base du fichier index.php:
<?php get_header(); ?>
<main>
<!-- Main content goes here -->
</main>
<?php get_footer(); ?>Dans la structure ci-dessus, get_header() et get_footer() sont utilisés pour extraire les sections d’en-tête et de pied de page de leurs fichiers modèles respectifs (header.php et footer.php).
Nous allons remplir le fichier index.php avec le bon code, mais travaillons d’abord sur les sections d’en-tête et de pied de page du thème.
Étape 4 : Créer le fichier d’en-tête
Le fichier header.php affiche la section d’en-tête de votre site, qui comprend généralement des éléments tels que le logo du site et le menu de navigation. Il comprend également les feuilles de style, les scripts et les balises méta. Voici à quoi ressemble notre fichier header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>Décomposons et expliquons chaque partie de ce fichier et ajoutons les fonctions et crochets (hooks) correspondants à functions.php.
Commençons par la section <head>. Cette section comprend les métadonnées essentielles, le titre du site, l’encodage des caractères et la fonction wp_head():
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>La fonction language_attributes(); définit les attributs linguistiques du document HTML. Ensuite, la fonction wp_head(); est cruciale car elle permet à WordPress et aux extensions d’insérer des éléments essentiels dans la section <head>, tels que des feuilles de style et des scripts.
Mettez la feuille de style en file d’attente en ajoutant ce qui suit à functions.php:
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');La fonction wp_enqueue_style() ajoute la feuille de style principale à la section head. Nous préfixons la fonction par my_custom_theme pour éviter les conflits avec d’autres thèmes ou extensions. Vous pouvez décider de l’ajouter directement à la balise head avec la balise <link>.
De même, déclarons une fonction pour ajouter le titre du site à la section head :
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');Maintenant, grâce à la fonction wp_head(), le style et la balise title sont ajoutés dynamiquement à l’en-tête. Vous pouvez le vérifier en inspectant votre site WordPress avec les outils de développement de votre navigateur. Dans la section <head>, vous devriez voir le lien de la feuille de style et la balise de titre générée dynamiquement, ce qui confirme qu’ils sont inclus.
Ensuite, dans le corps, nous déclarons la section navbar où nous affichons un logo factice et assurons une option pour l’utilisation d’un logo personnalisé lorsqu’il est défini dans l’identité du site WordPress :
<body>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>La section logo utilise la fonction the_custom_logo() pour afficher un logo personnalisé s’il est défini. Si aucun logo personnalisé n’est défini, elle affiche une image par défaut.
Pour activer la prise en charge des logos personnalisés, ajoutez le code suivant à functions.php:
function my_custom_theme_setup() {
add_theme_support('custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');Cette fonction ajoute la prise en charge d’un logo personnalisé. Enfin, la section du menu de navigation :
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>La fonction wp_nav_menu() affiche le menu de navigation attribué à l’emplacement « Header Menu ». Pour enregistrer le menu de navigation, assurez-vous d’avoir ce code dans functions.php:
register_nav_menus(array(
'header-menu' => __('Header Menu', 'my-custom-theme'),
));Voici à quoi ressemblera votre fichier function.php:
100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
// Function to add the site title to the head section
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
?>En suivant ces étapes, vous vous assurez que votre en-tête supporte un logo personnalisé et affiche un menu de navigation, ce qui le rend dynamique et facilement personnalisable via le tableau de bord d’administration de WordPress.
Étape 5 : Créer le fichier de pied de page
Le fichier footer.php sera responsable de l’affichage de la section du pied de page de votre site. Pour ce thème, le fichier footer.php n’affichera que l’année du copyright :
<footer>
<p>Copyright © 2024</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Dans ce fichier, nous incluons la fonction wp_footer(), de la même manière que nous avons inclus wp_head() dans l’en-tête. La fonction wp_footer() permet à WordPress et aux extensions d’insérer des éléments essentiels, tels que des scripts, juste avant la balise de fermeture </body>. Cette fonction est essentielle pour s’assurer que toutes les ressources nécessaires sont chargées correctement et que votre site fonctionne comme prévu.
Étape 6 : Afficher des articles de blog avec la boucle WordPress
Revenons au fichier index.php pour expliquer comment afficher en boucle les articles de votre site WordPress à l’aide de la boucle WordPress – un moyen puissant d’afficher le contenu de manière dynamique. Voici à quoi ressemble la boucle :
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>Le code ci-dessus vérifie s’il y a des articles à afficher avant d’entrer dans la boucle. Dans la boucle, les fonctions WordPress telles que the_title(), the_author(), the_time('F j, Y'), et the_excerpt() affichent des informations sur chaque article WordPress.
La fonction the_post_thumbnail() est également utilisée pour afficher la miniature, mais elle est enveloppée dans une instruction if, de sorte qu’elle ne s’affiche que lorsqu’il y a une image mise en avant pour votre article. Dans le fichier functions.php, nous devons ajouter la prise en charge des miniatures d’articles avec cette fonction afin qu’il y ait une option pour téléverser les images mises en avant lorsque vous créez de nouveaux articles :
add_theme_support('post-thumbnails');Ajoutez ceci à la fonction my_custom_theme_setup() que nous avons créée dans le fichier functions.php. Voici à quoi ressemble maintenant le fichier index.php:
<?php get_header(); ?>
<main>
<div class="hero">
<h1>Welcome to my blog!</h1>
<p>Here, you'll find posts on a variety of topics, including programming, web development, and more.</p>
</div>
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>Vous remarquerez que du code statique a été ajouté, qui sera stylisé comme une bannière affichant « Welcome to my blog » et un paragraphe de texte.
Étape 7 : Créer un modèle d’article unique
Avant de styliser notre thème, définissons un modèle de base pour afficher des articles de blog individuels lorsqu’on clique dessus à partir de n’importe quelle page ou article de votre thème. Pour cela, créez un fichier single.php à la racine de votre thème et ajoutez le code suivant :
<?php get_header(); ?>
<main>
<section class="single__post">
<article class="article-full">
<div class="single__post-header">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<p>By: <?php the_author(); ?> on <?php the_time('F j, Y'); ?></p>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>Dans le code ci-dessus, get_header() et get_footer() incluent l’en-tête et le pied de page. Dans les autres parties du code, les fonctions de WordPress affichent du contenu dynamique.
Étape 8 : Créer un fichier de modèle pour les pages WordPress
Tout comme vous avez créé un modèle pour les articles WordPress individuels, vous pouvez créer un modèle pour afficher vos pages WordPress. Pour cela, créez un fichier page.php à la racine du dossier de votre thème et ajoutez le code suivant :
<?php get_header(); ?>
<main class="wrap">
<section class="">
<article class="article-full">
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>Étape 9 : Styliser votre thème
Jusqu’à présent, nous avons créé quelques modèles de base pour notre thème. Il est maintenant temps d’ajouter un style personnalisé pour lui donner une belle apparence. Vous pouvez ajouter vos styles au fichier style.css dans le dossier de votre thème. Pour commencer, copiez le style à partir de ce GitHub gist pour l’exemple de thème créé dans ce guide.
Étape 10 : Tester et déployer votre thème
Jusqu’à présent, vous avez réussi à créer un thème WordPress. Il est maintenant temps de le tester et de le déployer.
Tout d’abord, assurez-vous que votre thème est activé en allant dans le tableau de bord d’administration de WordPress et en sélectionnant Apparence > Thèmes. Si ce n’est pas déjà fait, cliquez sur votre thème et activez-le. Vous pouvez également cliquer sur le bouton Personnaliser pour définir l’identité du site, ajuster le menu et modifier d’autres réglages afin de vous assurer que votre site s’affiche correctement.
Une fois que vous êtes satisfait de votre thème, vous disposez de plusieurs options pour le déployer :
- Mettre votre site local en ligne: Si vous développez localement avec DevKinsta, vous pouvez facilement pousser votre site vers un environnement de staging. Cela vous permet de tester votre thème dans un environnement similaire à l’environnement réel avant de le pousser dans l’environnement réel. Vous trouverez des instructions détaillées sur la façon de procéder dans notre documentation DevKinsta.
- Empaquetez et téléversez votre thème: Vous pouvez également regrouper votre thème dans un dossier zippé et le téléverser sur un site en ligne. Allez dans Apparence > Thèmes > Ajouter un nouveau thème > Téléverser un thème dans le tableau de bord d’administration de WordPress, et sélectionnez votre fichier de thème zippé à téléverser.
Testez votre thème dans un environnement de staging en scène afin de vous assurer que tout fonctionne comme prévu avant de le mettre en ligne. Cette étape est cruciale pour détecter les problèmes potentiels et s’assurer que votre site a une apparence et un fonctionnement parfaits.
Résumé
Dans cet article, nous avons créé un thème WordPress classique à partir de zéro. Nous avons abordé la configuration des fichiers essentiels, l’ajout d’un style personnalisé et la création de modèles pour les articles et les pages.
Si vous voulez que votre site ait exactement les fonctionnalités et l’aspect que vous souhaitez, le développement de votre thème WordPress est la meilleure solution. Toutefois, si vous n’avez pas le temps, les compétences ou l’envie de le faire, faire appel à un professionnel peut vous aider à concrétiser votre vision de manière efficace.
Lorsque vous aurez enfin un site qui correspond à vos goûts, vous aurez besoin d’un hébergement robuste pour éviter les problèmes tels que les temps d’arrêt, les attaques DDoS, etc. C’est là que les fournisseurs d’hébergement haut de gamme comme Kinsta brillent.
Kinsta offre un hébergement WordPress infogéré puissant avec une architecture entièrement conteneurisée, alimenté exclusivement par Google Cloud Platform sur le réseau Premium Tier de Google.
Contactez-nous pour en savoir plus sur notre solution d’hébergement infogéré de qualité supérieure.
Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.
Laisser un commentaire