Comment mettre les scripts en file d'attente dans WordPress en utilisant les crochets wp_enqueue_scripts 

Comment gérer efficacement les scripts et les feuilles de style dans WordPress ?

Dans WordPress, utilisez l'optionwp_enqueue_script()répondre en chantantwp_enqueue_style()Ces deux fonctions vous permettent d'ajouter des scripts JavaScript et des feuilles de style CSS à la file d'attente de chargement de votre site web. Cette méthode est appelée "mise en file d'attente".

L'utilisation des files d'attente présente deux avantages principaux :

1. Améliorer les performances du site webEn optimisant le processus de chargement, les files d'attente permettent de réduire le temps de chargement des pages web, ce qui rend les sites web plus rapides et plus fluides.
2. Éviter les conflitsLorsque plusieurs plugins ou thèmes tentent de charger le même script ou la même feuille de style, la mise en file d'attente permet d'éviter les conflits entre ces ressources et d'assurer la stabilité du site.

Comprendre wp_enqueue_script

Le processus de mise en file d'attente est géré parwp_enqueue_scripts Crochets WordPresset deux fonctions supplémentaires pour les feuilles de style et les scripts.

Premièrement.wp_enqueue_scriptsest un crochet d'action qui permet de programmer des feuilles de style et des fichiers JavaScript dans un site WordPress. Ce crochet est généralement utilisé dans la sectionfunctions.phpou dans le fichier du plugin.

Comment utiliser les feuilles de style dans WordPress

En éditant le fichier functions.phpIl est recommandé de créer une sauvegarde de votre site web avant de coder dans la rubrique

Pour accéder au fichier via le tableau de bord de WordPress, naviguez jusqu'à l'ongletApparence -> Editeur de fichier de thème.Vous trouverez la barre latérale droite sur le sitefichier functions.php.

Les feuilles de style sont gérées principalement par deux fonctions :wp_register_style()répondre en chantantwp_enqueue_style().

1. Feuille de style du registre: Utilisationwp_register_style()pour enregistrer une feuille de style. Cette fonction prend deux arguments principaux :
   • 1TP4Manche: Il s'agit du nom d'identification unique de la feuille de style, utilisé pour identifier la feuille de style dans WordPress.
   • $src: Il s'agit de l'URL ou du chemin d'accès au fichier de la feuille de style. Ce paramètre peut être omis si vous avez déjà fourni le chemin dans la fonction d'enregistrement.
2. Chargement des feuilles de styleUne fois la feuille de style enregistrée, vous pouvez utiliser la fonctionwp_enqueue_style()pour le charger sur votre site WordPress. Si vous avez déjà spécifié le chemin d'accès lors de l'enregistrement, vous n'avez pas besoin de le fournir à nouveau lors de la file d'attente.

Voici le code qui contient les deux fonctions :

function register_plugin_styles() {
wp_register_style( 'plugin-development', plugins_url( '/css/plugin.css' ) ) ;
wp_enqueue_style( 'plugin-development' ) ;
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' ) ;

C'est la seule façon d'inclure la fonction wp_enqueue_style()du code :

function register_plugin_styles() {
wp_enqueue_style( 'plugin-development', plugins_url( '/css/plugin.css' ) ) ;
}
add_action('wp_enqueue_scripts', 'register_plugin_styles' ) ;

Comment gérer les scripts JavaScript dans WordPress

WordPress gère les fichiers JavaScript à travers deux fonctions principales :wp_register_script()répondre en chantantwp_enqueue_script().

1. Script d'enregistrement: :
   • utiliserwp_register_script()pour enregistrer un fichier JavaScript personnalisé.
   • 1TP4Manche: Il s'agit du nom d'identification unique du script, utilisé pour l'identification dans WordPress.
   • $src: Il s'agit de l'URL ou du chemin d'accès du fichier de script. Si vous avez déjà spécifié le chemin d'accès lors de l'enregistrement, il n'est pas nécessaire de le spécifier à nouveau pour les chargements suivants.
2. Chargement des scripts: :
   • faire passer (un projet de loi, une inspection, etc.)wp_enqueue_script()pour charger le script enregistré sur le site web. Ce paramètre peut être omis lors du chargement si le chemin d'accès est déjà spécifié dans l'enregistrement.
3. Paramètres supplémentaires: :
   • $deps: liste un tableau d'autres scripts dont dépend le script actuel, tels quejQuery.
   • $verNuméro de version : Indiquez le numéro de version du script pour faciliter le suivi et la gestion de plusieurs versions.
   • $in_footer: Définit si le script doit être chargé dans la section du pied de page du document HTML. Par défaut, les scripts sont chargés dans la sectionEn-tête>Partiellement chargé.

Tout comme pour les feuilles de style, si vous connaissez déjà les détails du script, vous pouvez également utiliser la fonctionwp_enqueue_script()pour charger des scripts sans enregistrement préalable.

Exemples avec les deux fonctions :

function register_plugin_script() {
wp_register_script('new-script', plugins_url('/script.js') ) ;
wp_enqueue_script( 'new-script' ) ;
}
add_action('wp_enqueue_scripts', 'register_plugin_script' ) ;

Examinons une image avec unSimple wp_enqueue_script()Exemples de fonctions :

function register_plugin_script() {
wp_enqueue_script( 'new-script', plugins_url( '/script.js' ) ) ;
add_action
('wp_enqueue_scripts', 'register_plugin_script' ) ;

Comment utiliser wp_enqueue_script dans WordPress

Comment utiliser wp_enqueue_script avec jQuery

wp_enqueue_script()dispose d'une fonction supplémentairearray()qui permet à l'utilisateur de spécifier les dépendances de script nécessaires.

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

Dans le code, nous utilisonsLa fonction wp_enqueue_scripts() nommera le fichier my-script.jsdans la file d'attente.

Comment charger un script dans le pied de page en utilisant wp_enqueue_script

Vous pouvez augmenter la vitesse de votre site web en chargeant des scripts dans le pied de page. Lorsque les navigateurs attendent ces scripts, le temps de chargement des pages peut s'en trouver ralenti. Si vous placez les scripts dans le pied de page, le navigateur peut afficher le contenu d'abord, puis charger les scripts. Pour plus d'informations, consultez l'exemple suivant :

function plugin_assets() {
wp_enqueue_script( 'custom-script', plugins_url( '/js/my-script.js' , __FILE__ ), array( 'jquery' ), true ) ;
}
add_action('wp_enqueue_scripts', 'plugin_assets' ) ;

Dans l'exemple, nous avons créé un fichier nomméla fonction my_custom_styles, qui enregistre un fichier my-styles.cssPersonnalisez la feuille de style et mettez-la en file d'attente.

rendre un verdict

Dans WordPress, utilisez l'optionwp_enqueue_scriptsles crochets et les fonctions connexes telles quewp_enqueue_script()répondre en chantantwp_enqueue_style()Ces outils vous permettent d'ajouter facilement et efficacement des scripts JavaScript et des styles CSS personnalisés. Ces outils vous permettent de vous assurer que les scripts et les styles sont correctement chargés sur votre site web, tout en évitant les conflits de code et les problèmes de double chargement.