web-dev-qa-db-fra.com

Différence entre les appels de wp_enqueue_scripts pour charger les scripts et les styles dans un thème personnalisé

Je suis nouveau sur WordPress. J'ai commencé à créer mon propre thème personnalisé. Lorsque je le crée, j'ai découvert que add_action('wp_enqueue_script', 'custom_script'); peut également être utilisé pour ajouter des styles.

Quelqu'un peut-il m'expliquer la différence entre les utilisations de wp_enqueue_style et wp_enqueue_script pour charger des styles et des scripts?

theme-developmentwp-enqueue-scriptwp-enqueue-style
3
Shyamali

wp_enqueue_scripts Crochet d'action:

WordPress fournit divers noms (ou espaces réservés) pouvant être utilisés pour injecter des fonctions de rappel dans le cycle de vie de l'exécution de WordPress. Celles-ci s'appellent action et filtrecrochets .

wp_enqueue_scripts est un crochet d’action WordPress.

Note: _ Ce n'est pas wp_enqueue_script, c'est le pluriel: wp_enqueue_scripts.

Avec ce hook, nous ajoutons un script ou un style à l'heure correcte de l'exécution de WP core. Il n'ajoute aucun style ni script lui-même, il ajoute simplement notre fonction de rappel personnalisée afin que WordPress puisse l'exécuter au bon moment. Donc, le code est comme:

function custom_script_style_adding_function() {
    // CODE for adding styles / scripts
}
add_action( 'wp_enqueue_scripts', 'custom_script_style_adding_function' );

Fonctions pour la mise en file d'attente des scripts et des styles:

Puisque nous ajoutons généralement les scripts et les styles dans la balise HTML <head>, WordPress n’a pas besoin de crochets d’action} distincts _ pour définir quand les ajouter, cependant, car les scripts et les styles ont une syntaxe HTML différente , WordPress doit être séparé fonctionspour les ajouter au code HTML. Pour les scripts, la fonction est wp_enqueue_script() et pour les styles, la fonction wp_enqueue_style() (remarquez l’utilisation de singular mots dans ces noms de fonctions).

Ainsi, lorsque nous utilisons ces fonctions pour ajouter nos scripts et nos styles, le code final devient quelque chose comme:

function custom_script_style_adding_function() {
    wp_enqueue_script( 'my-js', get_stylesheet_directory_uri() . '/script.js' );
    wp_enqueue_style( 'my-css', get_stylesheet_directory_uri() . '/style.css' ); 
}
add_action( 'wp_enqueue_scripts', 'custom_script_style_adding_function' );

Scripts et styles en file d'attente dans des fonctions distinctes:

Tout hook peut être utilisé pour attacher plusieurs fonctions de rappel. Nous pouvons donc utiliser le hook d’action wp_enqueue_scripts pour associer différentes fonctions personnalisées pour l’ajout de scripts et de styles, comme ci-dessous:

// this function only adds scripts
function custom_script_adding_function() {
    wp_enqueue_script( 'my-js', get_stylesheet_directory_uri() . '/script.js' );
}
add_action( 'wp_enqueue_scripts', 'custom_script_adding_function' );

// this function only adds styles
function custom_style_adding_function() {
    wp_enqueue_style( 'my-css', get_stylesheet_directory_uri() . '/style.css' ); 
}
add_action( 'wp_enqueue_scripts', 'custom_style_adding_function' );

C’est essentiellement la même chose, la seule différence est que nous utilisons ici des fonctions personnalisées distinctes pour ajouter des scripts et des styles. Donc, mis à part la séparation de CODE pour les styles et les scripts, il n'y a pas beaucoup de différence entre cette approche et l'autre approche ci-dessus.

Lectures complémentaires:

Il existe d'autres fonctions liées aux scripts et aux styles dans WordPress qui sont utiles pour différents scénarios. Par exemple, cochez Fonctions connexes dans le codex pour connaître d’autres fonctions similaires pour les scripts et les styles dans WordPress. Ce développeur doc. aussi avoir des informations utiles.

4
Fayaz