WEBDESIGN[.WP5.0] Créer le design avec WordPress
La possibilité d'éditer soi-même ses styles reste un énorme avantage que propose le CMS WordPress. Cela est possible, car le code de WordPress est libre d'accès. Il devient alors facile de s'éloigner des contraintes de mises en page et de styles imposer par le thème que nous avons choisi au départ. Le thème devient même secondaire, et on ne le choisi plus que pour les fonctionnalités qu'il propose. Et pour faire cela, on créé ce qu'on appelle dans le jargon un thème-enfant.
CHILD-THÈME[.WP5.1] Qu'est ce qu'un thème enfant
Comme son nom l'indique, un thème enfant possède un parent. Et son parent reste le thème que l'on a choisi au départ. L'idée du thème-enfant est de laisser le parent contrôler l'ensemble des fonctions et de lui rajouter ses propres feuilles de styles. On verra très rapidement que l'on peut même rajouter des fonctionnalités en les implémentant soit-même au thème !
Pré-recquis pour pouvoir créer un thème-enfant
- Choisir d'abord le thème parent qui vous convient le mieux techniquement
- Assurez-vous d'avoir accès aux fichiers de WordPress
- Utilisez un éditeur de code capable d'enregistrer un fichier en .php et en .css
Si votre site web est en ligne, il existe plusieurs solutions pour pouvoir accéder aux fichiers de wordpress. La première est de passer par un logiciel de FTP (File Teansfer Protocole) tel que FileZilla. Les spécifications techniques nécessaires sont disponibles dans votre espace d'hébergement.
La deuxième solution consiste à installer une sorte de FTP interne à WordPress et accessible par son Backoffice. L'un des plus connu est FileManager.
Dans les 2 cas, vous aurez donc un accès direct aux fichiers de WordPress.
Attention, à partir de maintenant, vous accédez à tous les fichires de WordPress. Une mauvaise manipulation dans l'un de ces fichiers peut rendre le site totalement non fonctionnel.
CREATE CHILD-THEME[.WP5.2] Créer son thème enfant
Au départ, c'est un peu l'inconnu, donc un peu stressant à l'idée d'avoir à créer des fichiers.php. mais vous allez voir que c'est d'uns simplicité enfantine !
La première chose est de dissocier le thème-parent du thème-enfant. On va donc se rendre là où sont tous les fichiers de WordPress et ouvrir le dossier suivant:
mon-site.fr / wp-content / themes.
Dans ce dossier, créez-y un sous-dossier et nommez-le comme vous le souhaitez. Attention, un fichier web est très sensible sur les petits noms... évitez les caractères spéciaux, les majuscules, les accents et les espaces.
Le fichier style.css
À l'intérieur de ce sous-dossier, créez un nouveau fichier que vous nommerez style.css. Voici les informations essentielles qu'il doit contenir au départ pour être fonctionnel:
.CSS styles.css
/**
Theme Name: krisken
Description: Thème enfant de thème-parent
Author: Moi-même
Template: Twentyseventeen
*/
/* Mon code CSS à partir d'ici */
Ici j'indique à mon thème-enfant, que le thème-parent - " Template: " - est " Twentyseventeen " (2017). C'est le thème de wordpress pour sa mise à jour en 2017.
Le fichier functions.php
Enfin, pour que WordPress utilise les fichiers de ce thème-enfant, il faut déclarer au système qu'il doit prendre en compte le fichier style.css. Pour faire cela, nous allons créer un nouveau fichier functions.php. C'est un fichier qui doit exister à la racine de tous les thèmes de WordPress. Voici les indications minimum qu'il lui faut recevoir:
.PHP functions.php
<?php
function krisken_enqueue_assets(){
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'krisken_enqueue_assets' );
?>
Que vient-on d'écrire ?
Les caractères <?php est la balise d'ouverture du langage .php.
Les caractères ?> est la balise de fermeture du langage .php.
Puis on créé ce qu'on appelle une fonction et on lui donne un nom : function krisken_enqueue_assets() -
Dans cette fonction on écrit que WordPress doit mettre à la suite du code de son theme-parent - wp_enqueue_style( 'parent-style') - le fichier style.css qui se trouve dans la dossier où nous sommes - get_template_directory_uri() . '/style.css'.
La dernière ligne - add_action( 'wp_enqueue_scripts', 'krisken_enqueue_assets' ); - permet d'ajouter la fonction à la file des autres en lui rappelant son nom.
Activer son thème-enfant
Il ne vous reste plus qu'à aller activer le nouveau thème qui est apparu dans le Backoffice de Wordpress (pensez à recharger la page). Attention, certains thème particuliers ont besoin d'un code un peu différent pour pouvoir être parfaitement fonctionnels. C'est le cas d'Astra, de Divi, de Neve par exemple. Dans ces cas là, rendez-vous sur les sites respectifs des thèmes en question pour lire leur documentation.
Info supplémentaire pour les jusquau-bout-istes : par défaut aucun visuel ne stylise l'apparence du thème enfant dans le backoffice. Pour avoir un rendu qui représente votre thème, créez un fichier image (.jpg ou.png) d'environ 1200x900px (de votre maquette par exemple) et enregsitrez-le dans le dossier de votre thème-enfant au nom de "screenshot". Et le tour est joué !
