Méthode standard pour inclure JavaScript et CSS dans WordPress

Si vous êtes un développeur WordPress, vous avez entendu parler de mots tels que wp_enqueue_script, wp_enqueue_style et wp_enqueue_scripts. Ce sont les méthodes que nous devons utiliser pour inclure JavaScript et CSS dans WordPress.

En ce qui concerne WordPress, il ne faut pas utiliser de balises de script et de lien pour ajouter des fichiers JavaScript et CSS.

Avantages de l’utilisation de méthodes standard

Pour un site Web, il est courant d’utiliser différents types d’effets, d’animations pour améliorer l’expérience utilisateur. Il existe de nombreux plugins prêts à l’emploi disponibles sur Internet qui nous permettent d’ajouter des curseurs, des formulaires de contact, un carrousel, etc. sur votre site Web. Lorsque nous utilisons ces ressources externes, nous devons utiliser les fichiers JS et CSS fournis par celles-ci. En utilisant les méthodes fournies par WordPress, nous pouvons contrôler les pages sur lesquelles ces plugins ne peuvent être utilisés que. Par exemple, si nous affichons le curseur sur la page d’accueil, il n’est pas nécessaire d’inclure les fichiers JS et CSS du curseur sur une autre page. C’est toujours une bonne pratique d’inclure JS et CSS uniquement lorsque cela est nécessaire. Il s’agit d’une bonne pratique utilisée pour améliorer les performances du site et accélérer le chargement de notre site.

Code réel pour inclure JavaScript et CSS

Supposons que nous ayons des fichiers custom.js et custom.css à ajouter sur notre site. Pour cela, nous devons placer le code ci-dessous.

add_action('wp_enqueue_scripts', 'include_js_css');
function include_js_css() {
    wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
    wp_enqueue_script('my-custom-script');
 
    wp_register_style( "my-custom-style", get_stylesheet_directory_uri(). "/css/custom.css", array(), false, "all" );
    wp_enqueue_style( "my-custom-style" );
}

Remarque: Le 3ème paramètre dans la fonction wp_register_script. Nous avons passé array(‘jquery’), ce qui signifie que notre custom.js dépend du fichier jquery.js. Vous pouvez créer un tableau emay ici si votre script n’a pas de dépendances.

Le dernier paramètre est défini sur true, ce qui signifie inclure le fichier custom.js dans un pied de page (avant la fin de la balise body).

Explication des paramètres de la fonction wp_register_script()

$handle (obligatoire) : nom du script. Devrait être unique.
$src (Obligatoire) : URL complète du script, ou chemin du script relatif au répertoire racine de WordPress.
$deps (facultatif) : un tableau de scripts enregistrés gère ce script.
Valeur par défaut : array()
$ver (facultatif) : chaîne spécifiant le numéro de version du script, s’il en a un, qui est ajouté à l’URL en tant que chaîne de requête à des fins de contournement du cache. Si la version est définie sur false, un numéro de version est automatiquement ajouté, égal à la version WordPress actuellement installée. S’il est défini sur null, aucune version n’est ajoutée. La valeur par défaut est false
$in_footer (facultatif) : s’il faut mettre le script en file d’attente avant la fermeture de la balise body plutôt que dans la tête. Par défaut « faux ».

Explication des paramètres de la fonction wp_register_style()

$handle (obligatoire) : nom de la feuille de style. Devrait être unique.
$src (obligatoire) : URL complète de la feuille de style, ou chemin de la feuille de style par rapport au répertoire racine de WordPress.
$deps (facultatif) : un tableau de feuilles de style enregistrées gère cette feuille de style.
Valeur par défaut : array()
$ver (facultatif) : chaîne spécifiant le numéro de version de la feuille de style, si elle en a un, qui est ajoutée à l’URL en tant que chaîne de requête à des fins de contournement du cache. Si la version est définie sur false, un numéro de version est automatiquement ajouté, égal à la version WordPress actuellement installée. S’il est défini sur null, aucune version n’est ajoutée. Valeur par défaut : false
$media(Facultatif) : le média pour lequel cette feuille de style a été définie. Accepte les types de médias tels que « all », « print » et « screen », ou les requêtes multimédias telles que « (orientation : portrait) » et « (max-width : 640px) ». Valeur par défaut : « tous ».

Il s’agit de savoir comment inclure JavaScript et CSS dans WordPress. Si vous avez des questions ou des suggestions, veuillez laisser des commentaires ci-dessous.