Comment utiliser wp_enqueue_style pour charger des feuilles de style CSS dans WordPress
Nous allons commencer par quelques exemples de base pour vous aider à mieux comprendre comment fonctionne la fonction wp_enqueue_style().
Comment charger la feuille de style principale style.css
Pour charger la feuille de style principale du thème style.css, utilisez la fonction wp_enqueue_style() dans le fichier functions.php de votre thème.
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 chargez, tandis que la fonction get_stylesheet_uri() gère l'URL du fichier style.css principal du thème.
Ensuite, la fonction wp_enqueue_style() enregistre la feuille de style et l'ajoute à la file d'attente. Enfin, la fonction add_action() ajoute votre fonction personnalisée my_theme_enqueue_styles() au crochet wp_enqueue_scripts, ce qui garantit que la feuille de style est correctement chargée.
Comment charger d'autres feuilles de style
Vous pouvez également utiliser la fonction wp_enqueue_style() pour charger des feuilles de style supplémentaires en plus de la feuille de style principale. Par exemple, ajoutez des options de style supplémentaires dans un fichier séparé.
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. Ainsi, la fonction chargera d'abord la feuille de style principale, 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 charger une feuille de style à partir d'une source externe. Ce processus peut être bénéfique 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).
function theme_files() {
wp_enqueue_style('theme_custom', 'INSÉRER URL');
}
add_action('wp_enqueue_scripts', 'theme_files');
N'oubliez pas de remplacer la partie INSÉRER URL par une véritable URL de feuille de style.
Comment ajouter des fichiers de script à WordPress en utilisant wp_enqueue_script
WordPress dispose d'une fonction intégrée appelée wp_enqueue_script() qui vous permet de charger des scripts JavaScript ou similaires. Ajoutez le code suivant dans le 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 plusieurs paramètres :
my-script- le nom de votre script. Vous pouvez choisir n'importe quel nom./js/my-script.js- l'emplacement de votre script. Dans ce cas, il se trouve dans le répertoirejsdu thème WordPress.array()- définit les dépendances que votre script peut avoir.1.0- le numéro de version du script.true- détermine si le script doit être chargé dans le pied de page.
Charger du CSS uniquement sur des pages spécifiques
Charger du CSS uniquement sur des pages spécifiques peut offrir plusieurs avantages pour un site WordPress :
- Temps de chargement de la page plus rapide - en chargeant du CSS uniquement sur les pages où il est nécessaire, vous évitez d'avoir du code inutile. Cela améliorera la vitesse globale de votre site.
- Maintenance plus facile - vous pouvez modifier les fichiers CSS sans affecter les autres pages.
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');
}
}
?>
Charger du CSS dans le pied de page
En déplaçant le CSS vers le bas de la page, le navigateur peut prioriser le chargement du HTML et d'autres ressources importantes en premier. Ainsi, le chargement du CSS dans le pied de page améliore le temps de chargement de la page.
wp_enqueue_style('custom-design', '/wp-content/design.css');
};
add_action('get_footer', 'footer_style');
?>
Veillez à ce que le chargement du CSS dans le pied de page ne provoque pas de problèmes de rendu et ne rende pas la page mal affichée ou sans style. Pour cette raison, chargez d'abord le CSS le plus important dans la partie de l'en-tête, puis passez à la partie du pied de page.
Ajouter des styles internes dynamiques
Les styles internes dynamiques vous permettent d'ajouter des styles personnalisés à des éléments individuels d'une page web. Le moyen le plus simple d'ajouter des styles internes est d'utiliser la fonction wp_add_inline_style(), qui les charge après un fichier CSS spécifique.
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');
?>
Notez que le style interne fonctionnera uniquement après que design.css ait été correctement chargé.
Vérification du statut de l'enregistrement de la feuille de style
Utilisez la fonction wp_style_is() si vous souhaitez obtenir plus 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, chargé, enregistré ou prêt à être affiché.
if (wp_style_is('main')) {
wp_enqueue_style('my-theme', '/custom-theme.css');
}
}
add_action('wp_enqueue_scripts', 'check_styles');
?>
Insertion de métadonnées dans la feuille de style
Vous pouvez également utiliser la fonction wp_enqueue_style() avec le code suivant pour ajouter des métadonnées de titre à une feuille de style CSS :
wp_enqueue_style('add-metadata', '/wp-content/design.css');
wp_style_add_data('add-metadata', 'title', 'Mon super titre');
}
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 inscrivent le même fichier de style, cela peut entraîner des conflits et des problèmes sur le site web.
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');
}
?>