Vous l’aurez peut être remarqué, comme 35% de l’internet 1, ce blog utilise WordPress. Plus qu’un simple outil WordPress permet à près de 60 millions de personnes de profiter de la liberté d’expression qu’offre internet.
Après tout le slogan de Automattic, l’entreprise développant WordPress et Tumblr est
We don’t make software for free, we make it for freedom.
automattic.com
Vous l’aurez compris, WordPress est un outil d’expression exceptionnel, pour les particuliers et les entreprises, et aujourd’hui je veux vous apprendre à réaliser un thème WordPress depuis un thème déjà existant.
En somme vous allez apprendre à laisser parler votre créativité pour personnaliser votre univers sur internet.
Pour ce faire, nous allons prendre en main la documentation officielle 2, décortiquer rapidement l’architecture d’un thème pour finalement en modifier le style.
Un thème enfant?
Mais pourquoi?
Déjà, pourquoi faire un thème enfant, si vous avez déjà de l’expérience, que vous touchez un peu de HTML, CSS et PHP, pourquoi ne pas modifier simplement le thème que vous avez.
La raison principale, les mises à jour, la majorité des thèmes disponibles sont mis à jour très régulièrement, pour corriger des bugs, ajouter des fonctionnalités. Il serait dommage de passer à côté en bloquant votre thème à une version antérieure. Il serait encore plus triste de voir toutes vos modifications supprimées lors d’une mise à jour du thème.
Et soyons franc, créer un thème de 0 est une tâche coûteuse et délicate, il faut le créer, l’implémenter dans WordPress et le tester minutieusement.
C’est pour ces raisons que si vous voulez modifier un thème, il est préférable de créer un thème enfant.
Les thèmes WordPress
Sur WordPress vous pouvez utiliser des thèmes, pour personnaliser le style de votre blog.
Ces thèmes ont étés sont souvent utilisables gratuitement. Il existe plusieurs façons d’installer un thème, mais le sujet ici, c’est d’en modifier un profondément.
Il suffit alors de prendre le thème que vous voulez modifier et de vous amuser un peu. J’ai pris le thème Koji.
Maintenant qu’on sait ce qu’est un thème, passons à la création d’un thème enfant.
Les thèmes enfants
Créer mon thème enfant
Un thème enfant utilise une base fournie par un thème parent. Pour en créer un il suffit de créer un nouveau dossier de thème et de lui donner le nom du thème parent en y ajoutant -child , pour l’exemple du thème Koji, le dossier s’appellera koji-child.
Il faut ensuite trouver la page de style, à la racine du dossier du thème et en modifier la tête.
/*
Theme Name: Koji Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Koji Child Theme
Author: Johnny Gouvaert
Author URI: https://johnny.gouvaert.fr
Template: koji
Version: 2.0.6
License: GNU General Public License v2
URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: ...
*/Parfait, votre thème est quasiment prêt !
Si vous ne vouliez que modifier le style de certains éléments, vous avez presque fini ! Vous pouvez ajouter les règles de style dont vous avez besoin directement dans ce nouveau fichier de style.
Si vous voulez modifier les pages, c’est encore plus simple, chaque page écrite dans votre thème enfant écrasera la page du thème parent.
Modifier le style de mon thème
Une fois que vous avez ajouté toutes les informations dans le header du fichier style.css, il faut indiquer à WordPress d’utiliser cette feuille de style.
Pour ce faire il faut créer un fichier functions.php à la racine du thème enfant; il faut ensuite y ajouter quelques lignes. Malheureusement ces quelques lignes dépendent grandement du thème parent utilisé.
Les thèmes WordPress doivent utiliser la fonction wp_enqueue_style()get_template_directory()get_stylesheet_directory()
Selon que vous soyez dans le premier cas, ou dans le second, il faudra charger votre thème d’une manière particulière;
Si votre thème parent utilise une fonction get_template_directory()
<?php
function themename_child_style() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style,
get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_uri(),
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'themename_child_style');Si votre thème parent utilise une fonction get_stylesheet_directory()
<?php
function my_theme_enqueue_styles() {
$parenthandle = 'parent-style';
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle,
get_template_directory_uri() . '/style.css',
array(), // dependencies of parent
$theme->parent()->get('Version')
);
wp_enqueue_style( 'child-style',
get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );Finalement, l’architecture de votre thème enfant devrait ressembler à ça.
Il vous suffit ensuite d’ajouter les règles de styles dont vous avez envie.
Modifier des pages de mon thème
Un thème est en réalité une surcouche de votre blog. Il est découpé en petite partie, ça rend le code plus facilement réutilisable (On peut parler de code DRY, Don’t Repeat Yourself, car tout est fait pour ne pas avoir à répéter de gros bloc de codes plusieurs fois).
Il est bon de noter que les thèmes doivent respecter une certaine architecture de manière à utiliser l’ensemble des fonctionnalités mises à disposition par WordPress. Vous devriez vérifier que votre thème rend disponible, au moins les fonctionnalités dont vous avez besoin.
Toutes les pages php que vous pourriez ajouter dans votre thème enfant écraseront les pages écrient par le thème parent.
Conclusion
En sommes, nous avons appris à initialiser un thème enfant, à en modifier le style et à en éditer les pages. Vous avez tout ce dont vous avez besoin pour réaliser votre propre thème, à votre tour d’essayer !
En bonus, vous pouvez ajouter une image screenshot.jpg à la racine du thème pour avoir une belle preview sur l’écran des thèmes de Word Press.
