Si vous \u00eates un d\u00e9veloppeur WordPress, vous avez entendu parler de mots tels que wp_enqueue_script, wp_enqueue_style et wp_enqueue_scripts. Ce sont les m\u00e9thodes que nous devons utiliser pour inclure JavaScript et CSS dans WordPress.<\/p>\n
En ce qui concerne WordPress, il ne faut pas utiliser de balises de script et de lien pour ajouter des fichiers JavaScript et CSS.<\/p>\n
Pour un site Web, il est courant d’utiliser diff\u00e9rents types d’effets, d’animations pour am\u00e9liorer l’exp\u00e9rience utilisateur. Il existe de nombreux plugins pr\u00eats \u00e0 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\u00e9thodes fournies par WordPress, nous pouvons contr\u00f4ler les pages sur lesquelles ces plugins ne peuvent \u00eatre utilis\u00e9s que. Par exemple, si nous affichons le curseur sur la page d’accueil, il n’est pas n\u00e9cessaire 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\u00e9cessaire. Il s’agit d’une bonne pratique utilis\u00e9e pour am\u00e9liorer les performances du site et acc\u00e9l\u00e9rer le chargement de notre site.<\/p>\n
Supposons que nous ayons des fichiers custom.js et custom.css \u00e0 ajouter sur notre site. Pour cela, nous devons placer le code ci-dessous.<\/p>\n
add_action('wp_enqueue_scripts', 'include_js_css');\nfunction include_js_css() {\n\u00a0\u00a0\u00a0\u00a0wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true);\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('my-custom-script');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_register_style( \"my-custom-style\", get_stylesheet_directory_uri(). \"\/css\/custom.css\", array(), false, \"all\" );\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_style( \"my-custom-style\" );\n}<\/code><\/pre>\nRemarque<\/strong>: Le 3\u00e8me param\u00e8tre dans la fonction wp_register_script. Nous avons pass\u00e9 array(‘jquery’), ce qui signifie que notre custom.js d\u00e9pend du fichier jquery.js. Vous pouvez cr\u00e9er un tableau emay ici si votre script n’a pas de d\u00e9pendances.<\/p>\nLe dernier param\u00e8tre est d\u00e9fini sur true, ce qui signifie inclure le fichier custom.js dans un pied de page (avant la fin de la balise body).<\/p>\n
Explication des param\u00e8tres de la fonction wp_register_script()<\/h3>\n
$handle<\/strong> (obligatoire)\u00a0: nom du script. Devrait \u00eatre unique.
\n$src<\/strong> (Obligatoire)\u00a0: URL compl\u00e8te du script, ou chemin du script relatif au r\u00e9pertoire racine de WordPress.
\n$deps<\/strong> (facultatif)\u00a0: un tableau de scripts enregistr\u00e9s g\u00e8re ce script.
\nValeur par d\u00e9faut\u00a0: array()
\n$ver<\/strong> (facultatif)\u00a0: cha\u00eene sp\u00e9cifiant le num\u00e9ro de version du script, s’il en a un, qui est ajout\u00e9 \u00e0 l’URL en tant que cha\u00eene de requ\u00eate \u00e0 des fins de contournement du cache. Si la version est d\u00e9finie sur false, un num\u00e9ro de version est automatiquement ajout\u00e9, \u00e9gal \u00e0 la version WordPress actuellement install\u00e9e. S’il est d\u00e9fini sur null, aucune version n’est ajout\u00e9e. La valeur par d\u00e9faut est false
\n$in_footer<\/strong> (facultatif)\u00a0: s’il faut mettre le script en file d’attente avant la fermeture de la balise body plut\u00f4t que dans la t\u00eate. Par d\u00e9faut \u00ab\u00a0faux\u00a0\u00bb.<\/p>\nExplication des param\u00e8tres de la fonction wp_register_style()<\/h3>\n
$handle<\/strong> (obligatoire)\u00a0: nom de la feuille de style. Devrait \u00eatre unique.
\n$src<\/strong> (obligatoire)\u00a0: URL compl\u00e8te de la feuille de style, ou chemin de la feuille de style par rapport au r\u00e9pertoire racine de WordPress.
\n$deps<\/strong> (facultatif)\u00a0: un tableau de feuilles de style enregistr\u00e9es g\u00e8re cette feuille de style.
\nValeur par d\u00e9faut\u00a0: array()
\n$ver<\/strong> (facultatif)\u00a0: cha\u00eene sp\u00e9cifiant le num\u00e9ro de version de la feuille de style, si elle en a un, qui est ajout\u00e9e \u00e0 l’URL en tant que cha\u00eene de requ\u00eate \u00e0 des fins de contournement du cache. Si la version est d\u00e9finie sur false, un num\u00e9ro de version est automatiquement ajout\u00e9, \u00e9gal \u00e0 la version WordPress actuellement install\u00e9e. S’il est d\u00e9fini sur null, aucune version n’est ajout\u00e9e. Valeur par d\u00e9faut\u00a0: false
\n$media<\/strong>(Facultatif)\u00a0: le m\u00e9dia pour lequel cette feuille de style a \u00e9t\u00e9 d\u00e9finie. Accepte les types de m\u00e9dias tels que \u00ab\u00a0all\u00a0\u00bb, \u00ab\u00a0print\u00a0\u00bb et \u00ab\u00a0screen\u00a0\u00bb, ou les requ\u00eates multim\u00e9dias telles que \u00ab\u00a0(orientation\u00a0: portrait)\u00a0\u00bb et \u00ab\u00a0(max-width\u00a0: 640px) \u00bb. Valeur par d\u00e9faut\u00a0: \u00ab\u00a0tous\u00a0\u00bb.<\/p>\nIl 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.<\/p>\n