Ajouter des fichiers Javascript et CSS à l’en-tête et au pied de page dans WordPress

De temps en temps, j’avais l’habitude d’ajouter des fichiers javascript et/ou CSS avec des liens codés directement dans les fichiers de modèle header.php ou footer.php d’un thème WordPress .

Comme cela peut entraîner des conflits de script, des duplications ou tout simplement une bêtise, il existe une méthode logique pour ajouter tous les fichiers javascript et CSS et pour que ces derniers soient correctement reconnus par WordPress et chargés en toute sécurité dans l’en-tête ou le pied de page .

Register et Enqueue

La méthode correcte dans WordPress pour charger des javascripts et des fichiers CSS consiste à enregistrer les scripts , puis à les mettre en file d’attente .

Le processus d’inscription; wp_register_script () pour Javascript ou wp_register_style () pour CSS , indique en gros à WordPress le script et le processus de mise en file d’attente; wp_enqueue_script () pour Javascript ou wp_enqueue_style () pour CSS, indique à WordPress de lancer / charger le script.

La différence entre register et enqueue est subtile et, en fait, vous pouvez vous contenter d’utiliser simplement l’étape enqueue , mais par souci de le faire de manière appropriée, utilisons les deux processus.

Fonction et fonctions.php

Alors, où ajoutez-vous les scripts et CSS? Eh bien, tout cela est fait dans votre fichier functions.php de votre thème situé dans le dossier des thèmes et ajouté en tant que fonction unique.

Si vous utilisez un thème enfant et que vous ne pouvez pas voir un fichier functions.php , créez-en un et assurez-vous que le fichier commence par une balise PHP d’ouverture.

<?php

Créons une fonction dans functions.php qui stockera tous nos fichiers javascript et CSS à utiliser. Avec cette fonction, nous devons indiquer à WordPress de charger la fonction en ajoutant une action .

function mythemename_all_scriptsandstyles() {
// Load JS and CSS files in here

}

add_action( 'wp_enqueue_scripts', 'mythemename_all_scriptsandstyles' );

Ainsi, les étapes consistent à créer un nom de fonction unique en le préfixant d’une abréviation de nom de thème. Les mots descriptifs sont une bonne idée dans ce cas . une action pour appeler la fonction pour charger tous les scripts et styles.

L’action; add_action utilise la fonction PHP WordPress wp_enqueue_scripts pour charger tous les scripts et styles en même temps dans ma nouvelle fonction; mythemename_all_scriptsandstyles

Ainsi, le script wp_enqueue_script est utilisé pour chaque script individuel, puis collectivement dans l’ action .

Ajout dans un fichier Javascript

Je choisis beaucoup le placeholder.js pour les navigateurs traditionnels afin d’afficher le texte par défaut dans les champs du formulaire de saisie et d’ajouter le javascript dans un dossier js du dossier de votre thème.

function mythemename_all_scriptsandstyles() {
// Load JS and CSS files in here

  wp_register_script ('placeholder', get_stylesheet_directory_uri() . '/js/placeholder.js', array( 'jquery' ),'1.0.0',true);

  wp_enqueue_script('placeholder');
}

add_action( 'wp_enqueue_scripts', 'mythemename_all_scriptsandstyles' );

Donc, en enregistrant le script avec wp_register_script () , vous transmettez 5 arguments séparés par des virgules, dont 2 sont obligatoires pour que cela fonctionne:

1. le nom – celui que vous préfériez, le mieux étant similaire au script – obligatoire
2. l’emplacement – où le script est stocké – obligatoire
3. toute dépendance de script – quels autres scripts sont nécessaires, le cas échéant – facultatif
4. la version – vous pouvez nommer ce que vous voulez, le mieux est de nommer ce que la version est réellement – optionnel – par défaut le numéro de version WordPress
5. emplacement de l’en-tête ou du pied de page – true pour le pied de page , false pour l’en- tête – facultatif – par défaut, en-tête

Dépendances de script

Si votre script dépend d’autres scripts, assurez-vous de connaître leur nature, de les enregistrer et de les mettre en file d’attente. WordPress est livré avec plusieurs scripts. Assurez-vous qu’il est peut-être déjà disponible, la liste complète se trouve dans WordPress. Codex ici .

Par conséquent, si vos scripts dépendent d’autres scripts déjà enregistrés, ajoutez-les au format array () , comme ci-dessus, le tableau peut inclure plusieurs scripts dépendants, séparés par des virgules.

Ajout dans un fichier CSS

Ajoutons maintenant un fichier CSS et utilisons une police Google comme exemple.

function mythemename_all_scriptsandstyles() {
// Load JS and CSS files in here
  wp_register_script ('placeholder', get_stylesheet_directory_uri() . '/js/placeholder.js', array( 'jquery' ),'1.0.0',true);
  wp_register_style ('googlefonts', 'http://fonts.googleapis.com/css?family=Hammersmith+One', array(),'1.0.0','all');

  wp_enqueue_script('placeholder');
  wp_enqueue_style( 'googlefonts');
}

add_action( 'wp_enqueue_scripts', 'mythemename_all_scriptsandstyles' );

La première chose à faire est de ne pas oublier de changer les noms des fonctions WordPress PHP en style plutôt qu’en script; wp_register_style () et wp_enqueue_style ()

Le wp_register_style () a également 5 paramètres;

• le nom – celui que tu aimes, mieux sois semblable au style – obligatoire
• l’emplacement – où le style est stocké – obligatoire
• any dependent stylesheets – quels autres styles sont nécessaires le cas échéant – facultatif
• la version – vous pouvez nommer ce que vous voulez, le mieux est de
• nommer ce que la version est réellement – optionnel – par défaut le numéro de version WordPress
• type de support – par exemple, ‘all’, ‘print’, ‘handheld’ – facultatif – valeur par défaut pour tous

Il est plus probable de simplement passer dans les 2 premiers paramètres pour les fichiers CSS. N’oubliez pas de déclarer également la fonction wp_enqueue_style après, en lui donnant le nom du style googlefonts dans l’instance ci-dessus.

Ajout d’un script à la page d’accueil uniquement

Vous pouvez également déclarer de manière sélective si vous souhaitez simplement qu’un style de script soit chargé uniquement sur une page donnée. Cet exemple utilisera le script js à défilement continu pour figurer uniquement sur la page d’accueil.

function mythemename_all_scriptsandstyles() {
// Load JS and CSS files in here
  wp_register_script ('placeholder', get_stylesheet_directory_uri() . '/js/placeholder.js', array( 'jquery' ),'1',true);
  wp_register_style ('googlefonts', 'http://fonts.googleapis.com/css?family=Hammersmith+One', array(),'2','all');
  wp_register_script ('smoothscroll', get_stylesheet_directory_uri() . '/js/smooth-scroll.js', array( 'jquery' ),'1',true);

  wp_enqueue_script('placeholder');
  wp_enqueue_style( 'googlefonts');
  if ( is_front_page() ) {
  wp_enqueue_script('smoothscroll');
  }

}
add_action( 'wp_enqueue_scripts', 'mythemename_all_scriptsandstyles' );

Donc ici, le fichier smooth-scroll.js est enregistré normalement avec wp_register_script , mais dans la fonction wp_enqueue_script , il est chargé de manière conditionnelle sur la page d’accueil uniquement.

Ceci est fait en ajoutant une instruction if avec une balise conditionnelle enroulée autour de la fonction wp_enqueue_script avec une paire d’accolades .

En conservant tous les scripts et tous les styles dans une fonction générique, la gestion de tous les outils est beaucoup plus simple et facile à utiliser.