Les éléments interactifs d’une page, comme les barres de recherche dynamiques, les filtres avancés de produits et les curseurs, peuvent rendre votre site plus convivial et attrayant. Mais il est impossible de créer ces fonctionnalités sans utiliser JavaScript ou installer des extensions WordPress.
Heureusement, vous pouvez facilement créer des éléments de design JavaScript en utilisant jQuery dans WordPress. Vous pouvez le faire manuellement ou utiliser une extension pour accélérer le processus.
Dans cet article, nous allons vous présenter jQuery et expliquer pourquoi vous pourriez vouloir l’utiliser. Nous vous montrerons ensuite deux façons d’ajouter des scripts jQuery personnalisés à votre site WordPress et répondrons à certaines questions fréquemment posées.
Qu’est-ce que jQuery ? (et pourquoi pourriez-vous vouloir l’utiliser)
Avant d’apprendre à ajouter des scripts jQuery dans WordPress, vous devez comprendre les bases de jQuery.
En bref, jQuery est une bibliothèque JavaScript légère et open source qui simplifie la manière dont vous pouvez écrire et utiliser ce langage de programmation.
Elle vous permet de modifier et d’améliorer facilement les thèmes et extensions WordPress à l’aide de JavaScript. Cette fonctionnalité peut être extrêmement utile, car JavaScript est indispensable à de nombreuses fonctionnalités.
Par exemple, vous avez besoin de JavaScript pour Ajax, la gestion des événements et la traversée ou la manipulation du DOM. La fonctionnalité Ajax est particulièrement pratique et populaire. Les développeurs Web l’utilisent pour créer un chargement instantané des résultats de recherche et des filtres avancés pour les produits de commerce électronique.
Une action de l’utilisateur, comme un clic ou une recherche, déclenche souvent ces fonctionnalités JavaScript. Vous avez également besoin de jQuery pour créer des fonctionnalités supplémentaires côté client, comme des curseurs, des fenêtres contextuelles de type visionneuse et bien plus encore.
jQuery est-il inclus par défaut dans WordPress ?
jQuery est une ressource si utile et populaire qu’elle est incluse par défaut dans votre installation WordPress. Il vous suffit de savoir l’utiliser ! Dans les sections suivantes, nous vous expliquerons comment faire.
Que faire avant d’ajouter des scripts jQuery à WordPress
Nous allons bientôt vous expliquer comment ajouter des scripts jQuery dans WordPress. Mais avant cela, vous devriez prendre quelques mesures pour protéger votre site Web avant de tenter de modifier ses fichiers principaux.
Plus important encore, il est toujours recommandé de créer une sauvegarde de votre site. En effet, la moindre erreur de codage dans des fichiers essentiels du site Web peut causer de graves dommages. En effectuant des sauvegardes, vous pouvez facilement restaurer votre site dans son état précédent en cas d’urgence.
Si vous ne savez pas comment sauvegarder votre site WordPress, ou si vous cherchez simplement un outil pour simplifier le processus, Jetpack VaultPress Backup est une excellente option.
Jetpack VaultPress Backup enregistre automatiquement chaque modification apportée à votre site. Vous pouvez ensuite utiliser les restaurations en un clic pour récupérer rapidement votre contenu. Jetpack vous permet même de restaurer votre site depuis l’application mobile Jetpack. De plus, en cas de problème, vous pouvez bénéficier de l’assistance client exceptionnelle de nos Happiness Engineers !
Pour mieux protéger votre site Web, il peut également être utile de créer un site de préproduction WordPress. Vous pourrez ensuite tester vos modifications avant de les mettre en ligne.
Comment ajouter des scripts jQuery personnalisés à WordPress
Maintenant que vous en savez plus sur jQuery et sur la préparation de votre site aux changements importants, examinons deux façons d’ajouter du code jQuery personnalisé dans WordPress !
Méthode 1 : ajouter jQuery manuellement
Pour commencer, nous allons vous montrer comment ajouter jQuery à WordPress manuellement. Cette méthode peut vous convenir si vous avez une certaine expérience du développement et souhaitez garder un contrôle total sur le processus.
Il est recommandé d’utiliser un thème enfant afin que les modifications apportées ne soient pas remplacées lors de la mise à jour de votre thème.
Étape 1 : passer en mode de compatibilité
L’un des grands avantages de jQuery est de vous permettre d’utiliser des raccourcis familiers lors du codage. Plus particulièrement, vous pouvez utiliser le symbole $ pour représenter jQuery. Cela peut vous faire gagner beaucoup de temps, mais certaines autres bibliothèques utilisent ce raccourci pour représenter autre chose.
Vous voudrez donc passer en mode de compatibilité et créer un alias unique pour jQuery. Ainsi, vous pourrez éviter les conflits avec les autres bibliothèques.
Vous pouvez le faire à l’aide du code suivant :
<!-- Putting jQuery into no-conflict mode. -->
http://prototype.js
http://jquery.js
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( "div" ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv ci-dessous est un élément DOM, et non un objet jQuery.
window.onload = function() {
var mainDiv = $( "main" );
}
</script>Lorsque vous exécuterez le script ci-dessus, vous pourrez utiliser $j comme raccourci à la place de $. Vous pouvez également utiliser le code suivant :
<!-- Loading jQuery before other libraries. -->
http://jquery.js
http://prototype.js
<script>
// Utilisez le nom complet de la fonction jQuery pour faire référence à jQuery.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>Cet extrait de code empêchera simplement les conflits. Vous devrez néanmoins utiliser le nom complet, jQuery, plutôt qu’un raccourci.
Étape 2 : créer un fichier de script
Maintenant que vous disposez du code nécessaire, vous pouvez créer un fichier de script. Créez un fichier et donnez-lui un nom descriptif, comme « my_new_script_file.js ». Veillez à utiliser l’extension .js et ajoutez en haut l’extrait de code de compatibilité de votre choix.
À ce stade, vous devez accéder aux fichiers de votre thème et les modifier. Ceux-ci possèdent des dossiers qui leur sont propres dans les fichiers de votre site Web.
Commencez par vous connecter à votre site Web à l’aide de votre gestionnaire de fichiers ou d’un client gratuit utilisant le protocole de transfert de fichiers (FTP), comme FileZilla.
Ouvrez ensuite votre répertoire racine. Il devrait porter un nom comme public_html ou simplement public. Il pourrait également s’agir simplement du nom de votre site Web.
Localisez ensuite le dossier de votre thème actif et créez un nouveau sous-dossier. Appelez-le /js/.
Enfin, ajoutez votre nouveau fichier de script à ce sous-dossier. Son contenu dépendra de la fonctionnalité que vous essayez d’implémenter.
Étape 3 : ajoutez un script jQuery dans le fichier functions.php
Ensuite, vous devez trouver le fichier functions.php de votre thème. Les thèmes parent et enfant doivent chacun en avoir un. C’est ici que toutes les personnalisations manuelles sont effectuées.
Comme JavaScript nécessite une mise en file d’attente,vous devez utiliser la fonction wp_enqueue_script(). Votre code pourrait ressembler à ceci :
function my_theme_scripts() {
wp_enqueue_script( 'my_new_script_file', get_template_directory_uri() . '/js/my_new_script_file.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );Veillez à remplacer le nom de votre fichier de script unique et à l’ajouter à functions.php. Cela indiquera à votre fichier de thème d’utiliser le fichier de script que vous avez créé à l’étape précédente.
Méthode 2 : ajouter jQuery avec une extension WordPress
Comme nous venons de le voir, ajouter jQuery manuellement peut prendre du temps et présenter certains risques, surtout si vous ne connaissez pas bien la modification du code dans WordPress. Nous allons donc maintenant vous montrer comment ajouter jQuery avec une extension WordPress.
Étape 1 : installer une extension jQuery
Pour commencer, vous devez choisir une extension jQuery. Deux des options les plus populaires sont Simple Custom CSS et JS et Advanced Custom Fields.
Pour ce tutoriel, nous utiliserons Advanced Custom Fields. Cet outil vous aide à créer des fonctionnalités attrayantes et interactives avec des types de blocs personnalisés.
La version gratuite propose de nombreux types de blocs utiles pour ajouter des éléments tels que des groupes de boutons, Google Maps, des sélecteurs de couleurs, oEmbed et bien plus encore. Toutefois, si vous souhaitez utiliser les 30 blocs personnalisés, vous devrez passer à la version payante d’Advanced Custom Fields.
Une fois votre plan préféré sélectionné, installez et activez simplement l’extension comme vous le faites habituellement. Ajoutez les clés de licence dans les réglages de l’extension.
Étape 2 : créer un nouveau champ personnalisé
Après avoir installé et activé l’extension, accédez à Champs personnalisés → Ajouter un nouveau.
Ici, vous devez créer votre premier groupe de champs. Donnez-lui un titre à côté de Ajouter un nouveau groupe de champs. Cliquez ensuite sur Enregistrer les modifications.
Vous pouvez maintenant commencer à modifier le nouveau champ. Développez les options en cliquant sur Modifier sous le libellé.
Commencez par ouvrir le menu déroulant Type de champ, puis sélectionnez-en un.
Remplissez ensuite le Libellé du champ, le Nom du champ, etc. Si vous continuez à faire défiler la page, vous pouvez modifier des réglages supplémentaires tels que les Règles de localisation et la Présentation.
Selon l’emplacement sélectionné, vous pourrez afficher votre nouveau bloc personnalisé à cet endroit. Dans l’éditeur de blocs, vous pouvez identifier le bloc grâce au libellé que vous avez indiqué sous Libellé du champ.
Lorsque vous avez terminé, cliquez sur Enregistrer les modifications. Vous pouvez sélectionner le bouton + Ajouter un champ et répéter le processus. Ensuite, accédez simplement à l’un des emplacements choisis pour votre champ et commencez à le personnaliser !
Comment différer jQuery dans WordPress
Comme nous l’avons expliqué, il existe de nombreuses raisons d’utiliser JavaScript et jQuery dans WordPress. En fait, ces technologies sont indispensables à certaines fonctionnalités interactives que de nombreux utilisateurs tiennent pour acquises.
Mais l’inconvénient est que ces éléments sophistiqués côté client peuvent ralentir votre site Web. Vous pouvez donc souhaiter différer JavaScript (et, par extension, jQuery) lors du chargement de votre site WordPress.
En différant JavaScript, tous les éléments principaux de votre site se chargeront avant les fonctionnalités JavaScript moins essentielles. Bien sûr, les visiteurs de votre site ne remarqueront probablement pas ce changement, mais il améliorera vraisemblablement leur expérience utilisateur (UX), car la page semblera se charger plus rapidement.
Si vous souhaitez différer automatiquement jQuery sur votre site Web, vous pouvez utiliser Jetpack Boost pour cela.
Cette extension peut considérablement améliorer les performances globales de votre site. Vous pourrez ainsi conserver toutes vos fonctionnalités JavaScript préférées sans compromettre la vitesse de chargement des pages.
En plus de différer le chargement des éléments JavaScript non essentiels, Jetpack Boost peut optimiser le chargement des CSS et appliquer le chargement différé des images, entre autres optimisations des performances. Grâce à cet outil, vous pouvez améliorer vos scores de Core Web Vitals et accroître la visibilité de votre site dans les résultats de recherche.
Questions fréquemment posées sur jQuery dans WordPress
Nous espérons avoir dissipé la plupart de vos doutes concernant jQuery dans WordPress. Toutefois, si nous avons oublié quelque chose, voici quelques questions fréquemment posées !
Pouvez-vous modifier la version de jQuery utilisée dans WordPress ?
Il arrive que des thèmes et des extensions remplacent ou ajoutent des versions de jQuery sur votre site. Il est donc important de veiller à ce que votre version soit toujours à jour. Vous pouvez facilement le faire à l’aide d’une extension telle que jQuery Updater ou Version Control for jQuery.
Où puis-je vérifier la version de jQuery sur mon site WordPress ?
Vous pouvez généralement vérifier la version de jQuery dans un navigateur. Dans Google Chrome, accédez simplement à votre site sur la partie publique. Ensuite, accédez à Afficher → Développeur → JavaScript Console.
Saisissez jQuery.fn.jquery ; la console devrait afficher la version actuelle de jQuery utilisée par votre site.
Pouvez-vous supprimer complètement jQuery de WordPress ?
La réponse courte est : oui. Si vous constatez que l’utilisation de JavaScript sur votre site nuit à ses performances, vous pouvez supprimer ou « désenregistrer » jQuery.
Pour ce faire, il vous suffit d’ajouter le code suivant à votre fichier functions.php :
// Remove jQuery
function vpsb_remove_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', false);
}
}
add_action('init', 'vpsb_remove_jquery');Gardez à l’esprit que vous ne devez supprimer complètement jQuery de votre site que s’il ralentit considérablement le chargement de vos pages. Cela ne devrait toutefois probablement pas se produire, car jQuery optimise déjà le code JavaScript plus lourd.
Si la vitesse de votre site s’est dégradée après l’ajout de jQuery, une meilleure alternative serait d’utiliser une solution telle que Jetpack Boost. Elle peut différer le JavaScript non essentiel.
Pouvez-vous remplacer jQuery par du JavaScript natif ?
Il est possible de remplacer jQuery par du JavaScript natif. Cependant, cela peut s’avérer difficile si vous n’avez pas beaucoup d’expérience en développement. Vous devriez donc envisager de faire appel à un développeur si vous devez effectuer cette opération.
Encore une fois, il convient de noter que remplacer jQuery par du JavaScript natif est probablement inutile, car jQuery fournit déjà du code JavaScript optimal. La plupart du temps, les légères répercussions de jQuery sur les performances valent généralement les efforts nécessaires, et différer son chargement constitue souvent une meilleure option.
Si vous décidez de suivre cette voie, nous vous recommandons de consulter ce guide pour ajouter JavaScript à WordPress. Il peut vous aider dans cette démarche.
Utiliser jQuery dans WordPress
L’utilisation de JavaScript complexe pour créer des fonctionnalités attrayantes sur votre site peut considérablement améliorer l’UX et vous aider à atteindre vos objectifs. Malheureusement, vous n’avez peut-être ni le temps ni les compétences en développement nécessaires pour créer ces éléments interactifs à partir de zéro. La bonne nouvelle, c’est que vous pouvez utiliser des scripts jQuery pour simplifier ce processus.
En résumé, vous pouvez ajouter jQuery à WordPress de deux manières. Tout d’abord, vous pouvez le faire manuellement en passant en mode de compatibilité et en créant un fichier de script. Ajoutez ensuite votre nouveau script au fichier functions.php. Vous pouvez également utiliser une extension telle que Advanced Custom Fields pour accélérer le processus et éviter de coder manuellement.
Lorsque vous utilisez jQuery pour ajouter des éléments de design sophistiqués à votre site Web, vous pouvez améliorer l’expérience utilisateur (UX) et impressionner vos visiteurs. Cependant, plusieurs fonctionnalités interactives pourraient nuire aux performances de vos pages Web. Heureusement, Jetpack Boost peut contribuer à optimiser la vitesse de votre site.
Jetpack 