Tutoriel WordPress : résoudre les problèmes css thème enfant wordpress


Apprenez à forcer le style.css de votre thème wordpress

Dans le précédent tutoriel, vous avez appris des solutions simples et rapides, mais qui ne sont pas toujours adaptées. A présent, nous allons apprendre à maitriser l’ordre de chargement des feuilles de styles. Dans notre tutoriel vidéo, en début de page, nous vous expliquons pas à pas comment procéder.

 

Mettre les styles.css en file d’attente

Lors du tutoriel pour la création du thème enfant, nous avons déjà vu qu’il fallait charger le fichier style.css du thème parent à l’aide d’une fonction écrite dans le fichier functions.php du thème enfant. Ci-dessous le code écrit dans le fichier functions.php pour appeler le css du thème parent.


<?php
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
// création d'une fonction pour appeler le style.css du thème parent
// get_template_directory_uri() renvoi l'URL du thème parent
function theme_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
?>

Comment et à quel moment est chargé le style.css du thème wordpress enfant ?

Chaque thème wordpress possède une fonction pour charger la feuille de style du thème actif. Dans notre cas, le thème actif est le thème enfant. Notre style.css est donc appelé par le fichier functions.php du thème parent à l’aide de « get_stylesheet_uri() » que vous retrouverez dans chaque thème. Le schéma ci-dessous représente l’ordre de chargement d’un site wordpress.
Représentation du chargement d'un site internet wordpress Il faut toujours garder en mémoire : le style du thème parent est appelé par le functions du thème enfant et le style du thème enfant (thème actif) est appelé par le functions du thème parent. Puisqu’il est chargé après (schéma ci-dessus), dans la plus part des cas, notre style.css est prioritaire sur celui du parent. Dans les autres cas, il faut étudier un peu plus le problème.

Problème css thème enfant wordpress, pourquoi ça ne fonctionne pas ?

Tout d’abord, pour répondre à cette question, il faut observer le functions.php du thème parent. Ci-dessous, un extrait du functions présent dans le thème wordpress « wallstreet ».


1	function webriti_scripts()
2	{	
3		$current_options = get_option('wallstreet_pro_options');
4		wp_enqueue_style('wallstreet-style', get_stylesheet_uri() );
5		wp_enqueue_style('bootstrap', WEBRITI_TEMPLATE_DIR_URI . '/css/bootstrap.css');
6		wp_enqueue_style('wallstreet-default',WEBRITI_TEMPLATE_DIR_URI.'/css/default.css');	
7		wp_enqueue_style('wallstreet-theme-menu', WEBRITI_TEMPLATE_DIR_URI . '/css/theme-menu.css');
8		wp_enqueue_style('wallstreet-media-responsive', WEBRITI_TEMPLATE_DIR_URI . '/css/media-responsive.css');	
9		wp_enqueue_style('wallstreet-font-awesome-min', WEBRITI_TEMPLATE_DIR_URI . '/css/font-awesome/css/font-awesome.min.css');
10		wp_enqueue_style('wallstreet-tool-tip', WEBRITI_TEMPLATE_DIR_URI . '/css/css-tooltips.css');
11		
12		wp_enqueue_script('wallstreet-menu', WEBRITI_TEMPLATE_DIR_URI .'/js/menu/menu.js',array('jquery'));
13		wp_enqueue_script('wallstreet-bootstrap', WEBRITI_TEMPLATE_DIR_URI .'/js/bootstrap.min.js');
14	}

Nous retrouvons en ligne 4, l’appel à la feuille de style du thème actif (get_stylesheet_uri), dans notre cas, celle du thème enfant. Puis, des lignes 5 à 10 d’autres appels de css. Dans cette configuration, le fichier default.css (ligne 6) étant chargé après, il sera prioritaire sur notre feuille de style. Pour résoudre notre problème css wordpress, nous devons donc trouver une solution pour modifier l’ordre de chargement des css.

Fonctionnement de la file d’attente enqueue wordpress

Dans la représentation ci-dessous, on voit qu’il y a une étape de file d’attente avant le chargement. C’est dans ce processus que nous allons agir.
Représentation de la file d'attente enqueue wordpress

Dans le tuto de formation wordpress, nous voyons en détail le fonctionnement de la file d’attente.

Modification d’affichage thème wordpress, modifier la file d’attente

La file d’attente est alimentée par la fonction add_action(). Jusqu’à présent, nous utilisions uniquement les deux premiers paramètres de cette fonction. Le troisième, par défaut à 10, force l’ordre dans la file d’attente. Une action avec priorité inférieure à 10 sera placée avant, et une action supérieure 10 sera placée après.


<?php
// action pour faire entrer en file d'attente le style.css du thème parent
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
// action avec priorité 20. 
// on sort wallstreet-style de la file d'attente et on rentre le style.css de l'enfant
add_action('wp_enqueue_scripts', 'style_theme_enfant', 20);
function style_theme_enfant() {
wp_dequeue_style('wallstreet-style', get_stylesheet_uri() );
wp_enqueue_style('enfant-style', get_stylesheet_uri() );
}
?>

Ce procédé nous permet de faire passer le style.css du thème actif, dans notre cas le thème enfant, en dernier. Nous ne sommes pas obligés de sortir de la file d’attente le wallstreet-style. Etant associé à la même fonction get_stylesheet_uri(), il n’apporte rien de plus et allonge le temps de chargement.

Rappel des fonctions internes importantes :

  • get_stylesheet_uri() => pointe le fichier style.css du thème actif
  • get_template_directory_uri() => renvoi le chemin du thème parent
  • add_action() => peut prendre un troisième paramètre pour indiquer la priorité dans la file d’attente
  • Ne pas modifier l’ordre des différents appels défini par le développeur du site
  • Ne jamais modifier les fichiers d’origines (functions.php, style.css, etc…), faites un thème enfant