De temps en temps, lorsque je crée des sites Web pour mes clients, je dois ajouter du javascript. Par exemple, pour afficher un élément en cas de clic sur un bouton, effectuer des calculs sur un formulaire, etc.
Mais ajouter un simple code javascript à une page n’est pas la meilleure idée. Même s’il peut être ajouté, ce n’est pas le bon endroit pour ajouter des scripts. Deuxièmement, jquery nécessite d’appeler la fonctionnalité jquery dans votre site Web, et tous les thèmes ne l’appellent pas d’emblée.
Vous trouverez ici un petit tutoriel sur la façon d’exécuter des scripts javascript et jquery d’une manière qui fonctionne réellement.
Comment ajouter un script jquery à WordPress
Il y a beaucoup de plugins que vous pourriez installer pour ajouter des scripts jquery à WordPress. Mais comme je n’aime pas ajouter des plugins supplémentaires pour une si petite fonctionnalité, je vais vous montrer comment le faire sans plugins.
Voici l’exemple que nous utilisons :
<script>
$(document).on("click", ".showit", function () {
$(".my-element").toggle('slow');
});
</script>Si vous cliquez sur l’élément avec la classe showit, alors il bascule (affiche ou cache) l’élément avec la classe my-element.
Si vous ajoutez ce code à un bloc HTML ou à la section head d’un site WordPress, vous serez probablement déçu, car il ne fonctionnera pas. Il y a une chose qui manque – jquery doit être chargé en premier lieu.
Juste pour un test rapide, nous pouvons appeler jquery depuis son CDN comme ça :
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
<script>
<script>
$(document).on("click", ".showit", function () {
$(".my-element").toggle('slow');
});
</script>Maintenant, si vous avez le script au bon endroit, et les deux classes définies dans la page, le script devrait fonctionner correctement. Mais nous n’avons pas encore fini.
Premièrement, l’exécution de scripts à partir d’un autre serveur (CDN jquery) prendra un certain temps, ce qui ralentira votre site web. Ce n’est pas bon, et nous devons trouver une solution. Deuxièmement – nous devons placer ces scripts au bon endroit – dans la section <head> de votre site WordPress. Troisièmement, nous n’avons pas forcément besoin d’appeler ces scripts sur chaque page. Je vais vous montrer comment appeler le script uniquement là où il est nécessaire.
C’est parti.
Comment appeler jquery depuis le dossier de votre thème WordPress
Pour charger jquery aussi rapidement que possible, téléchargez le fichier jquery sur votre ordinateur. Vous pouvez utiliser ce lien du CDN mentionné précédemment – cliquez ici.
Une fois le fichier sur votre ordinateur, téléchargez-le sur le serveur où se trouvent les fichiers de votre site WordPress. Plus précisément – téléchargez ce fichier dans le répertoire de votre thème ( wp-content/themes/[votre thème]/). Créez le répertoire js s’il n’existe pas encore, et placez-y le fichier.
Vous pouvez utiliser l’application Filezilla pour télécharger, ou vous pouvez aller dans Cpanel ou DirectAdmin, et télécharger le fichier en utilisant le gestionnaire de fichiers dans le panneau.
Comment ajouter un script jquery à la section head du thème WordPress ?
C’est facile. Pour appeler n’importe quel script depuis la section <head> de WordPress, allez dans Apparence >> Editeur de fichier de thème ou Outils >> Editeur de fichier de thème. Ouvrez le fichier functions.php à droite, et ajoutez ce code à la fin du fichier :
function rocksolid_script() {
?>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.6.1.min.js"></script>
<script>
$(document).on("click", ".showit", function () {
$(".dont-show").toggle('slow');
});
</script>
<?php
}
add_action('wp_head', 'rocksolid_script');
Comme vous le voyez, nous appelons la fonction nommée rocksolid_script dans la section <head> de WordPress. Elle fait deux choses :
- Elle charge jquery à partir du répertoire js/ du thème actif actuel, donc nous n’avons plus besoin de lien CDN. Vous pouvez obtenir l’url du thème actif actuel en utilisant <?php echo get_template_directory_uri() ; ?>.
- Il exécute le script jquery réel dont nous avions besoin en premier lieu.
Maintenant, que faire si nous avons besoin de le charger juste dans une page ?
Comment charger un script jquery personnalisé uniquement sur une page spécifique ?
Si vous voulez appeler la fonction uniquement sur la page d’accueil ou toute autre page spécifique de WordPress, nous devons ajouter une vérification supplémentaire dans le script.
Par exemple, si vous voulez charger le script mentionné précédemment uniquement sur la page d’accueil, vous devez ajouter if is_front_page() à la fonction, comme ici :
function rocksolid_script() {
if (is_front_page()) { ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.6.1.min.js"></script>
<script>
$(document).on("click", ".showit", function () {
$(".dont-show").toggle('slow');
});
</script>
<?php }
}
add_action('wp_head', 'rocksolid_script');Pour charger le script uniquement sur un post spécifique, vous devez utiliser if (is_single(POST ID HERE)).
Pour charger le script uniquement sur une page spécifique, vous devez utiliser if (is_page(PAGE ID HERE)).
Si vous n’avez aucune idée de l’endroit où trouver l’ID de l’article ou de la page dans WordPress, lisez cet article.
