Découvrez ici les bases pour créer votre propre thème avec Wordpress.
Lorsqu'on crée un site avec Wordpress, arrive très vite la question "Quel thème choisir pour correspondre aux attentes de notre client en termes de design et de fonctionnalités ?". Nous avons constaté à plusieurs reprises que certains sites peuvent se transformer en de véritables usines lorsque le choix du thème (payant ou non) et des divers plugins n'est pas optimal dès le départ. Il faut alors passer par une phase de surcharge importante qui peut rendre un site difficilement compréhensibles et utilisable par le client.
Nous allons donc montrer ici comment créer les bases d'un thème Wordpress, dans lequel vous pourrez développer les fonctionnalités et le design que votre client attend !
Le squelette d’un site Wordpress
Avant de se lancer dans la création d’un thème, il est important de connaître le fonctionnement général d'un site Wordpress. En effet, chaque site est découpé selon 4 zones, à savoir :
- l’en-tête du site (header)
- le contenu
- le pied-de-page (footer)
- la barre latérale (sidebar)
On retrouve généralement dans ces 4 zones des composants comme les menus (notamment au niveau de l’en-tête et du pied de page), les commentaires et la navigation (généralement présents dans le contenu des articles), ou encore les widgets (utilisés dans le footer ou dans la barre latérale par exemple pour afficher une liste de pages ou de catégories de blog).
Maintenant que l’on a vu comment se construit un site Wordpress, il est temps de savoir comment déclarer un nouveau thème.
Les bases pour créer un thème Wordpress
Après avoir téléchargé et installé votre nouvelle instance Wordpress, commencez par vous rendre dans le répertoire
wp-content/themes. Ici, créez un nouveau dossier au nom de votre thème.
Attention, veillez à n’utiliser aucun espace ni caractère spécial en nommant ce dossier.
Ensuite, vous devrez créer les 4 fichiers qui permettent de faire fonctionner un thème Wordpress, c’est-à-dire :
- index.php qui contiendra la page de base du thème.
- style.css dans lequel nous ajouterons du code permettant de déclarer le thème à Wordpress, en plus d’y insérer les éléments de style.
- functions.php grâce auquel on pourra ajouter des fonctionnalités au thème.
- screenshot.png qui correspond à l’image d’aperçu du thème, qui s’affichera dans l’interface d’administration Wordpress.
Déclarer le thème
Comme nous l’avons évoqué précédemment, c’est dans le fichier style.css que l’on déclare le nouveau thème à Wordpress. Cela peut paraître étrange, mais Wordpress part simplement du principe qu’il y a toujours au moins une feuille de style dans un thème, c’est pour cela que c’est ce fichier qui est utilisé pour la déclaration.
On ajoute donc le code suivant à notre fichier
style.css :
/*
Theme Name: Nom du thème
Theme URI: https://www.nomdutheme.fr
Author: Com to Code
Author URI: https://www.com-to-code.com
Description: Description du thème Wordpress et de ses fonctionnalités par exemple.
Version: 1.0
*/
Attention, jamais d’espace avant les « : », autrement vos déclarations ne fonctionneront pas !
Ensuite, on va ouvrir le fichier index.php et y ajouter le code de base de nos futures pages (pour le moment très modeste mais on verra plus tard comment l’ajuster), afin de s’assurer du bon fonctionnement du site lorsque l’on activera le thème dans l’interface d’administration.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Le nouveau thème est en place !</h1>
</body>
</html>
Maintenant que le thème est déclaré et que l’on a un peu de contenu dans le template de base des pages, on peut aller l’activer dans l’interface d’administration du site. Rendez-vous donc dans l’onglet
Apparences > Thèmes pour activer le nouveau thème.
Ajouter des fonctionnalités Wordpress de base au thème
Il existe des fonctionnalités Wordpress de base qui pourront s’avérer très utiles voire indispensables lors de la création des futures pages de votre site. Tout d’abord, afin d’ajouter dynamiquement un titre dans l’en-tête de vos pages (correspondant à la balise
<title>, très importante pour le référencement naturel), ajoutez le code suivant dans le fichier
functions.php précédemment créé :
// Cette méthode ajoute automatiquement le titre du site dans l'en-tête
add_theme_support( 'title-tag' );
Ensuite, vous voudrez certainement associer une image à vos articles, qui sera utilisée notamment sur votre blog, pour illustrer les résumés de ceux-ci. Cette fonctionnalité est elle aussi déjà présente dans Wordpress, et ce type d’image est appelé « image mise en avant ». Pour faire apparaître une metabox permettant d’insérer une image de mise en avant à vos articles dans l’interface d'administration, ajoutez le code suivant dans le fichier
functions.php :
/**
* Cette méthode ajoute une metabox pour l’image de mise en avant de vos articles
*/
add_theme_support('post-thumbnails’);
Appeler les feuilles de style et les scripts
La dernière étape pour créer la base de votre thème Wordpress est d’appeler vos feuilles de style et vos scripts dans votre thème pour le styliser / l’animer. Pour cela, il existe deux fonctions dans Wordpress.
Pour ajouter vos feuilles de style, utilisez :
wp_enqueue_style( 'nom-du-fichier', get_stylesheet_uri() );
Pour ajouter vos scripts, utilisez :
wp_enqueue_script( 'nom-du-fichier', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
Vous pouvez appeler ces deux fonctions dans une méthode qui vous servira à référencer toutes les feuilles de style et les scripts de votre thème, comme ceci :
/**
* Ajouter les styles et les scripts au thème
*/
function nomdutheme_scripts()
{
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_script( 'nom-du-fichier', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'nomdutheme_scripts');
Votre thème est maintenant fonctionnel ! A vous de jouer pour y ajouter les éléments dont vous avez besoin, comme des templates pour les pages, les articles, l’en-tête et le pied-de page etc...