Codex

Astuces et codes à emporter.

Introduction

Par défaut, Wordpress ajoute les appels de fichiers externes nécessaires dans la queue list. Cependant, comme il est dorénavant recommandé d'appeler les fichiers CSS en haut de page dans la balise <head> et les fichiers JS dans le bas de page, juste avant la balise de fermeture </body>, afin d'améliorer les performances d'affichage et la vitesse de chargement des pages, il est nécessaire de modifier le fichier functions.php.

Les fonctions Wordpress

Wordpress propose tout un tas de fonctions prêtes à l'emploi :

  • wp_register_style qui permet de préparer les appels de styles css dans la liste d'attente.
  • wp_enqeue_style qui permet de placer les appels de styles css dans la liste d'attente.
  • wp_register_script qui permet de préparer l'appel vers les scripts.
  • wp_enqeue_script qui permet de placer les scripts dans la file d'attente.
  • wp_deregister_script qui permet de supprimer l'appel d'un script.

Exemple

Voici ci-contre un exemple qui permet de réorganiser tous les appels et plus encore.

  • array('') permet de lui signifier que le fichier utilise d'autres fichiers pour pouvoir fonctionner.
  • null permet d'éviter d'ajouter une version à l'appel du fichier.
  • false ou true : false pour placer le fichier dans le header, et true pour le placer en bas de page.


function wpbootstrap_styles_scripts(){
  wp_enqueue_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', array(), null, false);
  wp_enqueue_style('style', get_stylesheet_uri(), array(), null, false);
  wp_deregister_script('jquery');
  wp_register_script('jquery', includes_url( '/js/jquery/jquery.js' ), false, null, true);
  wp_enqueue_script('jquery');
  wp_enqueue_script('popper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array('jquery'), null, true);
  wp_enqueue_script('boostrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array('jquery', 'popper'), null, true);
}
add_action('wp_enqueue_scripts', 'wpbootstrap_styles_scripts');