Comment ajouter une feuille de style CSS à WordPress en utilisant wp_enqueue_style

Lors du développement de thèmes ou de plugins WordPress, il est essentiel de mettre en file d’attente les feuilles de style pour qu’elles se chargent correctement.

Pour ce faire, nous vous recommandons d’utiliser la fonction wp_enqueue_style(). Il s’agit d’un outil puissant pour ajouter des feuilles de style personnalisées à votre thème WordPress ou à votre plugin. Cette fonction garantit également que les feuilles de style ne sont chargées que lorsque cela est nécessaire et permet d’éviter les conflits avec d’autres plugins ou thèmes.

Dans ce tutoriel, nous allons voir comment vous pouvez utiliser la fonction wp_enqueue_style() pour améliorer l’apparence de votre site WordPress et l’expérience globale de l’utilisateur.    

Comment utiliser wp_enqueue_style pour charger les feuilles de style CSS sur WordPress

Nous allons commencer par quelques exemples de base pour vous aider à mieux comprendre le fonctionnement de la fonction wp_enqueue_style().

Comment mettre en file d’attente la feuille de style principale style.css

Pour mettre en file d’attente la feuille de style style.css du thème principal, utilisez la fonction wp_enqueue_style() dans le fichier functions.php de votre thème. 

Voici un exemple de ce que cela donne :

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my_theme_style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Dans le code, my-theme-style est un nom unique pour la feuille de style que vous mettez en file d’attente, tandis que la fonction get_stylesheet_uri() gère l’URL du fichier style.css du thème principal.

Ensuite, la fonction wp_enqueue_style() enregistre le style et l’ajoute à la file d’attente. Enfin, la fonction add_action() ajoute votre fonction personnalisée my_theme_enqueue_styles() au hook wp_enqueue_scripts, ce qui garantit que la feuille de style est mise en file d’attente correctement.   

Comment mettre en file d’attente d’autres feuilles de style

Vous pouvez également utiliser la fonction wp_enqueue_style() pour ajouter des styles supplémentaires à la feuille de style principale. Par exemple, ajouter des options de style supplémentaires dans un fichier séparé.

En ce qui concerne le code, vous pouvez réutiliser la plupart des éléments de l’exemple précédent avec quelques ajouts supplémentaires :

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
 wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('extra.css') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Dans cette méthode, nous avons utilisé la fonction get_theme_file_uri(), qui renvoie l’URL du fichier dans le répertoire du thème actuel. Dans notre cas, il s’agit de extra.css. De cette manière, la fonction mettra en file d’attente la feuille de style principale d’abord, puis les styles supplémentaires.  

Comment charger des feuilles de style externes dans WordPress

Il est possible d’utiliser la fonction wp_enqueue_style() pour mettre en file d’attente une feuille de style à partir d’une source externe. Ce processus peut s’avérer utile si vous souhaitez utiliser des polices personnalisées ou une feuille de style hébergée sur un réseau de diffusion de contenu (CDN). 

Le code est très similaire aux exemples précédents :

function theme_files() { 
    wp_enqueue_style('theme_custom', 'INSERER URL'); 
} 

add_action('wp_enqueue_scripts', 'theme_files');

N’oubliez pas de remplacer la partie INSERER URL par une véritable URL de feuille de style.  

Comment ajouter des fichiers de script à WordPress en utilisant wp_enqueuing_style

WordPress dispose d’une fonction intégrée appelée wp_enqueue_script() qui vous permet de mettre en file d’attente JavaScript ou des scripts similaires. Ajoutez le code suivant au fichier functions.php de votre thème :

function theme_scripts() {
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

Notez que cette fonction utilise plus de paramètres :

• my-script – le nom de votre script. Vous pouvez choisir n’importe quel nom.
• /js/mon-script.js – emplacement de votre script. Dans ce cas, il se trouve dans le répertoire js du thème WordPress.
• array() – définit les dépendances que votre script peut avoir.
• 1.0 – le numéro de version de la feuille de style.
• true – détermine si le script doit être chargé dans le pied de page.

Exemples utiles de wp_enqueue_style

Découvrez quelques cas pratiques d’utilisation de la fonction wp_enqueue_style() pour améliorer votre site WordPress. 

Chargement des feuilles de style CSS uniquement sur des pages spécifiques

Le chargement de CSS sur des pages spécifiques peut présenter plusieurs avantages pour un site web WordPress :

• Temps de chargement des pages plus rapides – lorsque vous ne chargez le CSS que sur les pages où il est nécessaire, vous évitez d’avoir du code inutile. La vitesse globale de votre site s’en trouve améliorée. 
• Maintenance plus facile – vous pouvez modifier les fichiers CSS sans affecter les autres pages.

Dans l’exemple ci-dessous, nous allons enregistrer et charger le CSS pour la page Contact Us avec l’aide du hook WordPress wp_enqueue_scripts et de la fonction is_page() :

<?php
add_action('init', 'register_custom_styles');
function register_custom_styles() {
    wp_register_style( 'custom-design', '/wp-content/design.css' );
}
add_action( 'wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts' );
function conditionally_enqueue_styles_scripts() {
    if ( is_page('contactus') ) {
        wp_enqueue_style( 'custom-design' );
    }
}
?>

Chargement du fichier CSS dans le pied de page

En déplaçant les feuilles de style CSS vers le bas de la page, le navigateur peut donner la priorité au chargement du code HTML et des autres ressources importantes. Par conséquent, le chargement du CSS en bas de page améliore le temps de chargement de votre page.  

La meilleure façon de charger le CSS dans le pied de page est d’utiliser le hook WordPress get_footer() :

<?php
function footer_style() {
    wp_enqueue_style('custom-design', '/wp-content/design.css');
};
add_action( 'get_footer', 'footer_style' );
?>

N’oubliez pas que le chargement de feuilles de style CSS dans le pied de page peut entraîner des problèmes de rendu et donner à la page un aspect défectueux ou non stylisé. Pour cette raison, chargez d’abord les feuilles de style CSS les plus importantes dans la section de l’en-tête, puis passez à la partie du pied de page. 

Ajout de styles dynamiques en ligne

Les styles dynamiques en ligne vous permettent d’ajouter des styles personnalisés à des éléments individuels d’une page web. La manière la plus simple d’ajouter des styles en ligne est d’utiliser la fonction wp_add_inline_style(), qui les charge après un fichier CSS spécifique. 

Dans l’exemple suivant, nous allons combiner les fonctions wp_enqueue_style() et wp_add_inline_style() pour appliquer le style du fichier design.css et mettre les titres en gras :

<?php
function theme_style() {
	wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/wp-content/design.css' );
	$bold_headlines = get_theme_mod( 'headline-font-weight' ); 
	$inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';
	wp_add_inline_style( 'custom-style', $inline_style );
}
add_action( 'wp_enqueue_scripts', 'theme_style' );
?>

Gardez à l’esprit que le style en ligne ne fonctionnera qu’une fois que le fichier design.css aura été correctement mis en file d’attente. 

Vérification de l’état de la mise en file d’attente de la feuille de style

Utilisez la fonction wp_style_is() si vous souhaitez obtenir davantage d’informations sur l’état de la feuille de style. Cette fonction permet de vérifier si un fichier de feuille de style CSS est dans la file d’attente, en file d’attente, enregistré ou prêt à être affiché.

<?php
function check_styles() {
	if( wp_style_is( 'main' ) {
    
		wp_enqueue_style( 'my-theme', '/custom-theme.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'check_styles' );
?>

Insérer des métadonnées dans la feuille de style

Vous pouvez également utiliser la fonction wp_enqueue_style avec l’extrait de code suivant pour mettre en file d’attente une feuille de style CSS avec des métadonnées de titre :

<?php
function theme_extra_styles() {
	wp_enqueue_style( 'add-metadata', '/wp-content/design.css' );
	wp_style_add_data( 'add-metadata', 'title', 'My Awesome Title' );
	}
add_action( 'wp_enqueue_scripts', 'theme_extra_styles' );
?>

Dans cet exemple, nous avons utilisé la fonction wp_style_add_data() et ajouté un titre à la feuille de style CSS. 

Désenregistrement des fichiers de style

Il est important de désenregistrer les fichiers de style CSS que vous n’utilisez plus. Lorsque plusieurs plugins ou thèmes utilisent le même fichier de style, cela peut entraîner des conflits et des problèmes sur le site web. 

Le code suivant supprime l’enregistrement et la mise en file d’attente d’un style spécifique et le remplace par une nouvelle feuille de style :

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
function remove_default_stylesheet() {
    wp_dequeue_style( 'original-enqueue-stylesheet-handle' );
    wp_deregister_style( 'original-register-stylesheet-handle' );

    wp_register_style( 'new-style', get_stylesheet_directory_uri() . '/new.css', false, '1.0.0' ); 
    wp_enqueue_style( 'new-style' );
}

Conclusion

La fonction wp_enqueue_style() est un élément essentiel du développement de WordPress. Elle fournit un moyen simple et efficace de charger les feuilles de style sur votre site web.

Dans ce tutoriel, nous avons abordé la fonction wp_enqueue_style() et fourni quelques exemples de la manière dont vous pouvez l’utiliser pour personnaliser l’apparence de votre site web et améliorer sa vitesse. 

Nous espérons que ce tutoriel vous sera utile et que vous pourrez utiliser la fonction wp_enqueue_style() avec succès dans vos projets WordPress.
Si vous avez des questions ou des remarques, consultez notre guide WordPress ou laissez un commentaire ci-dessous.

Tout le contenu des tutoriels de ce site est soumis aux normes éditoriales et aux valeurs rigoureuses de Hostinger.