Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

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

Màj le 17 novembre 2019

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 .

ajouter javascript et css à l'en-tête et au pied de page de WordPress

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.


Vous aimerez également...

  • Sécuriser Wordpress:protéger votre dossier wp-admin
  • Trouver et réparer les liens cassés dans WordPress (Méthodes gratuites)
  • Accélérer le chargement de votre blog avec Lazy-loading
  • Comment corriger l’erreur «Failed To Load Resource» dans WordPress
  • Utiliser le CDN Fonte Awesome pour accélérer le chargement de votre site
  • Ajouter un bouton suivant et précédent (Next-previous) à votre blog

Classé sous :Tutoriels

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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • 5 façons pour trouver la clé de produit (serial) Windows facilement
  • Ajouter une Image mise en avant (featured image) sous le titre de vos article
  • 13 thèmes WordPress polyvalents pour sites des crypto-monnaies pour obtenir un site bien classé
  • C’est quoi l’API WordPress Heartbeat et pourquoi devriez-vous la contrôler ?
  • Créer un message d’incitation à réautoriser les annonces Adsense sans plugin

© 2023 ·Wpcours.com · Mentions · Contact