[Nouveau] Les sauvegardes dans le Cloud deviennent plus simples - Duplicator Cloud élimine le stockage par des tiers
Joella Dunn
Joella Dunn
John Turner
John Turner
Avez-vous déjà visité un site web dont les éléments se déplacent, changent ou réagissent à vos clics sans que la page ne soit rechargée ? C'est le JavaScript en action.
Alors que WordPress est construit sur PHP, JavaScript est devenu essentiel pour créer des sites web modernes et interactifs que les utilisateurs adorent.
Qu'il s'agisse d'ajouter de simples animations ou de créer des fonctionnalités complexes, JavaScript ouvre un monde de possibilités.
Dans cet article, je vais vous expliquer ce qu'est le JavaScript et pourquoi vous devriez commencer à l'apprendre. Vous découvrirez également comment ajouter du JavaScript personnalisé dans WordPress !
JavaScript est un langage de programmation qui s'exécute dans le navigateur de vos visiteurs, et non sur votre serveur.
Lorsque quelqu'un visite votre site WordPress, le serveur traite le code PHP et envoie du HTML et du CSS au navigateur. Ensuite, JavaScript prend le relais, permettant des interactions en temps réel sans envoyer davantage de requêtes au serveur.
Voici quelques fonctions courantes de JavaScript sur les sites WordPress :
Contrairement aux modifications apportées en PHP qui nécessitent un traitement sur le serveur, JavaScript peut donner à votre site une impression de réactivité et d'application, car il intervient instantanément dans le navigateur de l'utilisateur.
Les compétences en JavaScript sont devenues de plus en plus précieuses, et ce pour de bonnes raisons.
L'ajout de JavaScript à votre boîte à outils WordPress vous permet de créer de meilleures expériences utilisateur en rendant votre site plus rapide et plus réactif.
Il peut également résoudre des problèmes frontaux que PHP ne peut tout simplement pas résoudre. Alors que PHP gère admirablement les opérations du serveur, il ne peut pas répondre directement aux mouvements de la souris ou mettre à jour le contenu de manière dynamique.
Grâce à JavaScript, vous pourrez personnaliser les thèmes et les plugins existants sans avoir à les reconstruire complètement. Souvent, une petite retouche JavaScript peut modifier une fonctionnalité sans avoir à plonger dans un code PHP complexe.
Connaître JavaScript vous aide à rester pertinent dans le développement WordPress. Avec l'éditeur de blocs (Gutenberg) construit sur React (un framework JavaScript), JavaScript est devenu essentiel pour les développeurs WordPress sérieux.
JavaScript vous permet également de créer des solutions personnalisées que les plugins ne peuvent pas fournir. Lorsque vous avez besoin de quelque chose d'unique, adapté aux besoins de votre site, JavaScript vous donne la liberté de le créer.
Commencez par les bases du JavaScript avant de plonger dans les applications spécifiques à WordPress. Vous ne construiriez pas une maison sans en comprendre les matériaux, et il en va de même ici.
Parmi les bonnes ressources pour les bases du JavaScript, citons
Une fois que vous avez assimilé les principes de base, passez aux ressources JavaScript spécifiques à WordPress.
Le manuel officiel du développeur WordPress comporte des sections consacrées à JavaScript. Il vous apprendra à charger correctement les scripts avec wp_enqueue_script() et à travailler avec l'API JavaScript de WordPress.
Learn.wordpress.org propose des ateliers sur le développement JavaScript. WPBeginner et CSS-Tricks publient également d'excellents tutoriels JavaScript pour WordPress.
Et voici un conseil supplémentaire (souvent négligé) : voyez comment les thèmes et les plugins de qualité utilisent JavaScript. Le code de WordPress est libre, ce qui vous permet d'étudier des exemples concrets.
Il y a plusieurs façons d'ajouter du JavaScript à votre site WordPress, chacune avec des cas d'utilisation différents. Examinons quelques méthodes courantes.
Pour les débutants, les plugins de code WordPress constituent le point d'entrée le plus sûr. L'ajout manuel de code JavaScript peut être difficile, et je ne le recommande qu'aux développeurs.
WPCode (anciennement Insert Headers and Footers) vous permet d'ajouter des extraits JavaScript sans toucher aux fichiers du thème. C'est un exemple parfait de plugin JavaScript WordPress qui simplifie la gestion du code.
Voici quelques avantages de l'utilisation de WPCode pour ajouter du JavaScript :
J'utilise personnellement cette méthode lorsque je teste de nouveaux scripts ou lorsque je mets en œuvre des correctifs rapides sur les sites de mes clients. Elle offre un filet de sécurité tout en permettant de faire le travail.
Pour commencer, installez et activez WPCode. Ensuite, ajoutez un nouveau snippet personnalisé.
Pour le type de code, choisissez l'extrait JavaScript. Saisissez votre JavaScript dans l'éditeur de code.
Enregistrez l'extrait de code JavaScript. Si vous souhaitez que WPCode s'occupe du placement pour vous, faites défiler la page jusqu'à Insertion et cliquez sur Insertion automatique.
Toutefois, n'hésitez pas à changer l'emplacement pour un article ou une page spécifique.
WPCode offre également des options de chargement conditionnel (afficher les scripts uniquement sur certaines pages), ce qui permet d'optimiser les performances. Il vous suffit d'activer la logique et de choisir les conditions.
Si vous êtes prêt à activer l'extrait, faites défiler l'écran jusqu'en haut et activez l'interrupteur à bascule.
Cliquez sur Mettre à jour et vous avez terminé ! Vous venez d'ajouter du JavaScript personnalisé sans avoir besoin d'aucune expérience en matière de développement.
Le fichier functions.php est l'endroit où WordPress gère ses fonctionnalités programmatiques, y compris la gestion des scripts.
L'ajout de JavaScript dans le fichier de fonctions de votre thème WordPress vous donne plus de contrôle et élimine le besoin de plugins supplémentaires.
Cependant, vous ne devez JAMAIS modifier directement le fichier functions.php de votre thème parent. Ces modifications seront perdues lors de la mise à jour du thème.
Utilisez toujours un thème enfant pour toute modification du code. C'est essentiel pour maintenir vos personnalisations à long terme.
Une fois le thème enfant activé, allez dans Appearance " Theme File Editor et ouvrez le fichier functions.php.
WordPress propose une fonction standardisée pour ajouter correctement du JavaScript : wp_enqueue_script(). Ce n'est pas une simple suggestion, c'est la façon dont WordPress gère les scripts.
L'utilisation de cette méthode est utile :
Voici un exemple basique de la manière d'ajouter un JavaScript personnalisé à votre site WordPress :
function my_custom_scripts() {
wp_enqueue_script(
'my-custom-script', // Unique handle
get_stylesheet_directory_uri() . '/js/my-script.js', // File path
array('jquery'), // Dependencies
'1.0', // Version number
true // Load in footer (recommended)
);
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');Les paramètres se décomposent comme suit :
Chargement des scripts dans le pied de page (paramètre #5 réglé sur true) améliore les performances de chargement des pages en laissant le contenu visible se charger en premier. L'utilisation de crochets WordPress tels que wp_enqueue_scripts garantit que votre code s'exécute exactement au bon moment dans le processus de chargement de la page.
Même les développeurs expérimentés rencontrent des problèmes lorsqu'ils ajoutent du JavaScript à WordPress. Voici quelques conseils pratiques pour éviter les problèmes les plus courants.
Toujours utiliser wp_enqueue_script() au lieu de coder en dur <script> des étiquettes. Cela permet d'éviter conflits avec d'autres plugins et des thèmes.
Vérifiez les outils de développement de votre navigateur pour les erreurs JavaScript. Si vous constatez que votre JavaScript WordPress ne fonctionne pas comme prévu, la console vous fournira généralement des indices sur ce qui ne va pas.
Lorsque les scripts ne fonctionnent pas, vérifiez que les dépendances se chargent correctement. Si votre code a besoin de jQuery mais qu'il se charge avant, les choses vont se gâter.
Placez les scripts dans le pied de page lorsque c'est possible en définissant le dernier paramètre de wp_enqueue_script() à true. Cela améliore les performances de chargement des pages et empêche les scripts d'essayer de manipuler des éléments qui n'ont pas encore été chargés.
Enveloppez votre JavaScript dans des expressions de fonctions invoquées immédiatement (IIFE) pour éviter les conflits avec d'autres scripts :
(function($) {
// Your code here
$('.my-button').click(function() {
// Button click code
});
})(jQuery);Utilisez des noms de variables et de fonctions uniques pour éviter les collisions avec d'autres scripts. Le préfixe avec le nom de votre thème ou de votre plugin est utile.
Rappelez-vous que WordPress inclut jQuery en mode "sans conflit". Utilisez toujours jQuery() au lieu de $() sauf si vous enveloppez votre code comme dans l'exemple IIFE ci-dessus.
JavaScript peut faire des tonnes de choses intéressantes pour votre site WordPress. Voici quelques exemples pour vous montrer ce qu'il est possible de faire.
Vous vous souvenez que j'ai dit que JavaScript pouvait ajouter des animations à votre site web ? Vous pouvez notamment faire disparaître votre page lorsque quelqu'un clique sur un lien.
WPCode dispose d'un extrait de code JavaScript prédéfini pour cela ! Il suffit de rechercher Fading Page Transitions dans la bibliothèque Code Snippets.
Vous pouvez également coller ce code dans un nouvel extrait personnalisé :
document.addEventListener("DOMContentLoaded", function() {
// Create and insert CSS styles for fade-in and fade-out
const style = document.createElement('style');
style.innerHTML = `
.fade-out {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.fade-in {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
`;
document.head.appendChild(style);
// Apply the fade-in effect on page load
document.body.classList.add('fade-in');
// Attach event listeners to all internal links for the fade-out effect
document.querySelectorAll('a').forEach(anchor => {
anchor.addEventListener('click', function(event) {
if (anchor.hostname !== window.location.hostname) return;
event.preventDefault();
const target = this.href;
document.body.classList.remove('fade-in');
document.body.classList.add('fade-out');
setTimeout(function() {
window.location.href = target;
}, 500); // Match this duration with the CSS transition time
});
});
});Si vous avez besoin de protéger votre contenu premium contre la copie facile, vous pouvez utiliser ce script :
document.addEventListener("contextmenu", (evt) => {
evt.preventDefault();
}, false);
document.addEventListener("copy", (evt) => {
evt.clipboardData.setData("text/plain", "You must pay a premium subscription to copy our content");
evt.preventDefault();
}, false);Une autre fonctionnalité que vous pouvez ajouter à votre site web WordPress avec JavaScript est le défilement fluide. Cet effet web utilise les actions de défilement pour créer une expérience de navigation beaucoup plus agréable pour les utilisateurs.
Voici le JavaScript pour un défilement fluide :
document.addEventListener('click', function(e) {
// Check if the clicked element is an anchor with href starting with '#'
if (e.target.tagName === 'A' && e.target.getAttribute('href') && e.target.getAttribute('href').startsWith('#')) {
e.preventDefault();
const targetId = e.target.getAttribute('href').slice(1); // Remove the '#' from the href
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
}
});WordPress utilise à la fois PHP et JavaScript, mais dans des buts différents. PHP gère les opérations côté serveur - le système de gestion de contenu, les interactions avec la base de données et la plupart des fonctionnalités de base de WordPress. Lorsque vous enregistrez un article ou modifiez des paramètres, PHP se charge de ces opérations.
JavaScript gère les interactions côté client, c'est-à-dire ce qui se passe dans le navigateur du visiteur après le chargement de la page. Cela inclut les animations, les éléments interactifs, la validation en temps réel et les changements de contenu dynamiques sans rechargement de la page.
Le développement moderne de WordPress, en particulier avec l'éditeur de blocs (Gutenberg), repose de plus en plus sur la collaboration des deux langues.
Rien ne remplace directement JavaScript. Seul langage de programmation natif pris en charge par tous les navigateurs web, JavaScript reste un élément fondamental du développement web.
La méthode la plus courante pour ajouter du JavaScript à WordPress est d'utiliser le fichier functions.php de votre thème enfant à l'aide de la fonction wp_enqueue_script() fonction. Pour les cas uniques, vous pouvez également utiliser la fonction de code personnalisé d'un constructeur de pages, si votre thème en propose une.
N'oubliez pas qu'il n'est pas toujours préférable d'éviter les plugins - un plugin bien entretenu gère souvent mieux les cas de figure et les mises à jour qu'un code personnalisé.
Oui, JavaScript peut être utilisé pour construire des sites et des applications web entiers, en particulier avec des frameworks modernes comme React, Vue ou Angular.
Dans le cas spécifique de WordPress, JavaScript améliore la base PHP/HTML/CSS existante plutôt que de la remplacer. Vous ajoutez des fonctionnalités JavaScript à un noyau WordPress qui est principalement basé sur PHP.
Par exemple, l'éditeur de blocs de WordPress (Gutenberg) est construit avec React (un framework JavaScript) mais fonctionne toujours dans l'écosystème WordPress basé sur PHP.
La manière la plus simple d'ajouter du JavaScript aux pages WordPress est d'utiliser WPCode. Ajoutez un nouvel extrait JavaScript personnalisé. Descendez jusqu'à Location et développez le menu déroulant. Sélectionnez Page-Specific, puis décidez de l'endroit où vous voulez que votre JavaScript s'applique.
Cette approche fonctionne aussi bien pour les pages que pour les articles de WordPress, ce qui vous permet de contrôler de manière granulaire l'endroit où vos scripts s'exécutent.
L'ajout de JavaScript à votre boîte à outils WordPress élargit considérablement les possibilités d'utilisation de votre site web.
Des simples améliorations de l'interface aux fonctions interactives complexes, JavaScript comble le fossé entre le contenu statique et les expériences dynamiques des utilisateurs.
N'oubliez jamais que des erreurs peuvent se produire. Avant d'ajouter du JavaScript ou d'apporter des modifications importantes, créez une sauvegarde complète de votre site.
Duplicator Pro vous permet de sauvegarder facilement votre site Web selon un calendrier précis. De plus, il vous offre des options de restauration simples en cas de problème. Essayez-le dès aujourd'hui !
Votre parcours JavaScript avec WordPress ne s'arrête pas là - il s'agit d'un domaine en constante évolution au fur et à mesure que JavaScript et WordPress se développent. Investir dans l'apprentissage de JavaScript bénéficiera de manière significative à vos propres projets et à vos clients !
Pendant que vous êtes ici, je pense que vous aimerez ces autres guides WordPress :
Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Nous ne recommandons que des produits dont nous pensons qu'ils apporteront une valeur ajoutée à nos lecteurs.
