. WebdeZign
web design, intégration web et WordPress

wp_enqueue > bis repeTita !

Après la publication de mon dernier billet concernant l’accrochage de Zurb Foundation à Underscores, un très bon starter theme pour WordPress, on m’informe dans l’oreillette que la fonction wp_enqueue va encore bien plus loin que ça ! Du coup, comme j’en ai déjà parlé à plusieurs reprises et que j’apprends en même temps que je rédige les billets de ce blog, je pense qu’un récapitulatif ne sera pas de trop.

D’ailleurs, si vous avez créé un thème-enfant avec la méthode préconisée par le Codex et dont je vous ai parlé ici (les tribulations d’un thème-enfant) et ici (le plugin Child Theme Configurator), il vous est peut-être arrivé d’avoir à ajouter un « !important » à la fin de chacune de vos spécifications CSS pour que la règle soit prise en compte. C’est que vous avez un problème de priorité dans les feuilles de style de votre thème !

Donc … reprenons !

La fonction wp_enqueue se décline en deux options : wp_enqueue_style() et wp_enqueue_script(). Elle sert à ‘mettre à la file’ (mettre à la queuleuleu ^^) les différents appels à des fichiers externes, tels les feuilles de style, les librairies jQuery, les frameworks, etc. Elle est obligatoirement présente dans le fichier ‘functions.php’ de votre thème WordPress.

Le hook proprement dit est wp_enqueue_scripts() – avec un S à la fin de ‘script’ – pour accrocher à la fois les styles et les scripts de frontend.

http://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

 

Voici le code présenté dans l’article ‘les tribulations d’un thème-enfant…’ et qui visait uniquement à *enqueuer* les feuilles de style nécessaires au thème-enfant par rapport à son thème-parent (pas de framework, pas de librairie jQuery supplémentaire, etc).

function theme_child_scripts() {

	wp_enqueue_style('theme_child-style', get_template_directory_uri() . '/style.css', array(), '0.1', 'all');
	wp_enqueue_style('theme_child-style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'theme_child_scripts');

 

Et maintenant le code, présenté dans l’article concernant Underscores et Zurb Foundation, où il s’agissait – non pas sur un thème-enfant, mais sur un thème de base, un starter theme – de mettre les éléments venus du framework dans la file des feuilles de style par ailleurs déjà chargées par le thème.

/**
 * Enqueue scripts and styles.
 */
function processum_scripts() {
	wp_enqueue_style( 'processum-style', get_stylesheet_uri() );
	wp_enqueue_script( 'processum-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
	wp_enqueue_script( 'processum-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

/* Add Foundation CSS */
	wp_enqueue_style( 'foundation-normalize', get_stylesheet_directory_uri() . '/inc/foundation/css/normalize.css' );
	wp_enqueue_style( 'foundation', get_stylesheet_directory_uri() . '/inc/foundation/css/foundation.css' );

/* Add Custom CSS */
	wp_enqueue_style( 'foundation-icons', get_stylesheet_directory_uri() . '/inc/foundation-icons/foundation-icons.css', array(), '1' );
	wp_enqueue_style( 'processum-custom-style', get_stylesheet_directory_uri() . '/custom.css', array(), '1' );

/* Add Foundation JS */
	wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/inc/foundation/js/foundation.min.js', array( 'jquery' ), '1', true );
	wp_enqueue_script( 'foundation-modernizr-js', get_template_directory_uri() . '/inc/foundation/js/vendor/modernizr.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'foundation-fastclick-js', get_template_directory_uri() . '/inc/foundation/js/vendor/fastclick.js', false, '1', true );

/* Foundation Init JS */
	wp_enqueue_script( 'foundation-init-js', get_template_directory_uri() . '/inc/foundation.js', array( 'jquery' ), '1', true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'processum_scripts' );

 

Ce qu’on m’a soufflé à l’oreillette tout à l’heure (et si vous êtes dans le même groupe FB que moi, vous avez également lu cette publication de JB), c’est qu’en matière d’imbrication des feuilles de style, c’est le dernier qui parle qui a raison, qui override les autres, qui passe par-dessus. Cette publication nous permet également de préciser ce qu’est un hook dont j’ai évoqué la signification ici récemment :

Les feuilles de style sont ajoutées à votre thème dans ‘functions.php’ via la fonction wp_enqueue_style(), et ce, à l’intérieur d’une fonction bien à vous. Ceci fait, vous « accrochez » cette fonction au hook wp_enqueue_scripts via la fonction add_action().

En l’occurrence, la « fonction bien à vous » est celle que nous avons appelée processum_scripts() dans notre exemple Processum. Vous pouvez très bien – à ce que j’ai compris – avoir une « fonction bien à vous » dont le nom ne fait pas référence au nom du thème et qui du coup est réutilisable dans tous les thèmes. C’était le cas dans notre exemple sur les tribulations d’un thème-enfant où nous l’avons appelée theme_child_scripts().

Poursuivons ! Ce que nous explique JB, c’est que nous avons tout intérêt à mettre un ordre de priorité dans l’appel des feuilles de style et, pour ce faire, c’est à chaque niveau de priorité qu’il faut créer une fonction.

Cette fonction permet de définir l’ordre d’exécution des feuilles de styles.
En effet, add_action() comporte un paramètre de priorité : 10 étant la valeur par défaut. Sur chaque hook, les actions raccrochées sont donc appelées par ordre croissant de priorité : 1, puis 2, puis 10, puis 15, etc.
Si plusieurs actions sont accrochées avec le même niveau de priorité, elles seront appelées dans l’ordre dans lequel elles ont été accrochées.
C’est pourquoi il est recommandé (et particulièrement dans les thèmes-enfants) de donner à vos feuilles de style une priorité > 10.
Et si vous voulez imbriquer vos feuilles de style dans un ordre particulier, n’hésitez pas à multiplier les fonctions où vous paramétrez wp_enqueue_style(). Pour lire le Codex se rapportant à cette info, c’est ici : http://codex.wordpress.org/Function_Reference/add_action

Ce sera mon exercice pour cette nuit ^^, en reprenant l’exemple Processum, code qui – je vous le rappelle – est téléchargeable sur mon compte Github. JB qui me lit en copie pourra me corriger si je dis des bêtises !

(code en construction … revenez plus tard !)

Voilà, il est minuit trente, je rends mon ‘devoir’ … ;-) … qui nonobstant fonctionne parfaitement, avec une petite subtilité pour la galerie !

/**
 * Enqueue scripts and styles.
 * Add Custom CSS, Foundation CSS, Init JS depending on priority :
 3 fonctions pour 3 priorités : 10, 100 et 500 (ordre croissant)
 priorité 10 : style Underscores + navigation et skip-link-focus-fix
 priorité 100 : Foundation CSS JS et Init JS
 priorité 500 (la plus haute !) : custom.css et la fin avec la condition sur les commentaires
 */


function styles_priority10_scripts() {
	wp_enqueue_style( 'processum-style', get_stylesheet_uri() );
	wp_enqueue_script( 'processum-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
	wp_enqueue_script( 'processum-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
	}

add_action( 'wp_enqueue_scripts', 'styles_priority10_scripts', 10 );


function styles_priority100_scripts() {
	
/* Add Foundation CSS */
	wp_enqueue_style( 'foundation-normalize', get_stylesheet_directory_uri() . '/inc/foundation/css/normalize.css' );
	wp_enqueue_style( 'foundation', get_stylesheet_directory_uri() . '/inc/foundation/css/foundation.css' );
	wp_enqueue_style( 'foundation-icons', get_stylesheet_directory_uri() . '/inc/foundation-icons/foundation-icons.css', array(), '1' );

/* Add Foundation JS */
	wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/inc/foundation/js/foundation.min.js', array( 'jquery' ), '1', true );
	wp_enqueue_script( 'foundation-modernizr-js', get_template_directory_uri() . '/inc/foundation/js/vendor/modernizr.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'foundation-fastclick-js', get_template_directory_uri() . '/inc/foundation/js/vendor/fastclick.js', false, '1', true );

/* Foundation Init JS */
	wp_enqueue_script( 'foundation-init-js', get_template_directory_uri() . '/inc/foundation.js', array( 'jquery' ), '1', true );
	}
	
add_action( 'wp_enqueue_scripts', 'styles_priority100_scripts', 100  );


function styles_priority500_scripts() {
	wp_enqueue_style( 'processum-custom-style', get_stylesheet_directory_uri() . '/custom.css', array(), '1' );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'styles_priority500_scripts', 500 );

 

Plutôt que de nommer mes fonctions ‘bien à moi’ avec le nom de mon thème, je les ai appelées : styles_priority10_scripts() – styles_priority100_scripts() et styles_priority500_scripts(). Désormais, le nom du thème n’intervient plus que dans les lignes de référence (3 fois en l’occurrence).

J’ai tout fait juste ?

La ‘subtilité pour la galerie’ c’est le fait que j’aie inséré le reset d’Eric Meyer dans mon fichier ‘custom.css’ et que c’est la seule chose que ce fichier contient. De son côté, Underscores vient avec une feuille ‘style.css’. Vous pouvez admirer la différence entre les deux (avec ou sans reset) simplement en déplaçant la ligne qui *enqueue* processum-style. Dans l’exemple ci-dessus, le style d’Underscores est en priorité basse > le reset est actif. En déplaçant cette ligne dans la fonction à priorité 500, vous retrouverez la base du starter theme.

Pour ma part, pour la suite des exemples, je ne sais pas encore si je vais garder le reset dans ‘custom.css’ … ou pas. Je vais faire quelques tests avant de me décider ou de voir si cela peut être une option à retenir pour de prochains développements.

Bonne nuit ! Et merci de m’avoir lue jusqu’ici.

Tita

Conceptrice & CEO chez Tita Créations
Passionnée de chevaux, de nature, d'écriture... et d'informatique, j'ai découvert cette dernière avec un tout premier modèle d'ordinateur portable : un SHARP écran cristaux liquides d'au moins 10kg ! ... 1988
Aujourd'hui, je donne libre cours à ma créativité dans les domaines du web design, de la gestion de projet et de la gestion de contenu.


Commenter