Développement de thèmes à partir de zéro : ajout de fichiers CSS et JavaScript
Lorsqu'il s'agit de créer un thème WordPress à partir de zéro, il est essentiel de comprendre comment ajouter correctement des fichiers CSS et JavaScript pour garantir que votre site Web soit attrayant et fonctionne efficacement. Dans ce chapitre, nous explorerons les meilleures pratiques pour inclure des styles et des scripts dans votre thème WordPress personnalisé.
Comprendre la structure d'un thème WordPress
Avant de commencer à ajouter des fichiers CSS et JavaScript, il est important de comprendre la structure de base d'un thème WordPress. Un thème typique contient les fichiers suivants :
- style.css : le fichier de style principal, qui définit l'apparence visuelle du thème.
- functions.php - Un fichier PHP qui vous permet d'ajouter des fonctionnalités et des caractéristiques au thème.
- index.php : le fichier modèle par défaut qui affiche le contenu du site.
- header.php et footer.php : fichiers qui contiennent généralement respectivement l'en-tête et le pied de page du site Web.
- Autres fichiers de modèles spécifiques pour les pages, les articles, les catégories, etc.
Ajout de fichiers CSS
Pour ajouter des fichiers CSS à votre thème, vous devez utiliser la fonction wp_enqueue_style(). Cette fonction gère les dépendances de style et garantit que les fichiers sont chargés dans le bon ordre. Voici un exemple de la façon dont vous pouvez ajouter votre fichier CSS principal :
<?php
fonction mon_theme_styles() {
wp_enqueue_style('my-main-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_styles');
?>
Dans l'exemple ci-dessus, la fonction my_theme_styles() est créée et attachée au hook wp_enqueue_scripts. La fonction get_stylesheet_uri() renvoie l'URL du fichier style.css qui se trouve dans le répertoire racine du thème.
Vous pouvez également ajouter d'autres fichiers CSS, tels qu'un fichier de réinitialisation ou des fichiers de framework comme Bootstrap, comme suit :
<?php
fonction mon_theme_styles() {
// Réinitialiser le CSS
wp_enqueue_style('my-reset', get_template_directory_uri() . '/css/reset.css');
// Amorcer le CSS
wp_enqueue_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
//Style principal
wp_enqueue_style('my-main-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_styles');
?>
Ajout de fichiers JavaScript
Semblable aux fichiers CSS, la fonction wp_enqueue_script() est utilisée pour ajouter des fichiers JavaScript à votre thème. Cette fonction gère les dépendances des scripts et permet d'éviter les conflits entre les différentes bibliothèques JavaScript. Voir un exemple de comment ajouter un fichier JavaScript :
<?php
fonction mon_theme_scripts() {
wp_enqueue_script('mon-script', get_template_directory_uri() . '/js/my-script.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
?>
Dans le code ci-dessus, la fonction my_theme_scripts() inclut un fichier JavaScript appelé my-script.js situé dans le répertoire /js/. dossier de votre thème. Des paramètres supplémentaires précisent les dépendances (dans ce cas aucune), la version du script (falsifiée pour ne pas utiliser de version spécifique) et si le script doit être chargé dans le pied de page (true pour le pied de page , false pour l'en-tête).
Pour ajouter des bibliothèques populaires telles que jQuery ou Bootstrap JavaScript, vous pouvez procéder comme suit :
<?php
fonction mon_theme_scripts() {
// jQuery (déjà inclus dans WordPress)
wp_enqueue_script('jquery');
//Amorcer JavaScript
wp_enqueue_script('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array('jquery'), null, true);
// Votre script personnalisé
wp_enqueue_script('mon-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
?>
Gérer les dépendances
Un aspect important lors de l'ajout de CSS et JavaScript est la gestion des dépendances. Par exemple, si votre script personnalisé dépend de jQuery, vous devez l'indiquer dans la fonction wp_enqueue_script() pour vous assurer que jQuery est chargé avant votre script. Cela se fait en passant un tableau de dépendances comme troisième paramètre de la fonction, comme indiqué dans l'exemple précédent.
Considérations finales
L'ajout de fichiers CSS et JavaScript est une partie essentielle du développement de thèmes WordPress. En utilisant les fonctions wp_enqueue_style() et wp_enqueue_script(), vous vous assurez que les fichiers sont chargés correctement et que les dépendances sontgéré efficacement. N'oubliez pas de toujours réduire vos fichiers CSS et JavaScript pour améliorer les performances de votre site et de suivre les meilleures pratiques de développement WordPress pour garantir un thème robuste et fiable.
