JavaScript est un langage de programmation qui ajoute des fonctionnalités interactives aux sites web. Apprendre à utiliser JavaScript sur un site WordPress, y compris des sections spécifiques, peut vous aider à utiliser le code plus efficacement. Il existe de nombreuses fa?ons d'ajouter du JavaScript aux pages et aux articles de WordPress, que ce soit en utilisant des plugins, des fonctions et des crochets, ou en modifiant les fichiers du thème pour obtenir la personnalisation que vous souhaitez.

Puis-je utiliser JavaScript dans WordPress ? 

JavaScript est un langage de programmation qui peut être utilisé pour améliorer l'expérience utilisateur (UX) d'un site web, en le rendant plus interactif et réactif. Par exemple, JavaScript peut être utilisé pour créer une fenêtre contextuelle lorsqu'un visiteur clique sur un bouton. Un message peut également être affiché lorsque quelqu'un survole un élément de la page.

JavaScript permet d'ajouter des calculatrices, des lecteurs vidéo et d'autres outils aux pages et aux articles de WordPress. Bien que l'ajout de JavaScript à WordPress nécessite des connaissances de base en HTML et CSS, il s'agit d'un processus relativement simple.

Ce qu'il faut savoir avant d'ajouter du code JavaScript à WordPress

Lorsque vous ajoutez du code JavaScript à votre site WordPress, il est important de se rappeler que des erreurs dans le code peuvent endommager l'ensemble du site. La meilleure fa?on d'y parvenir est de vérifier le site avant d'y apporter des modificationssauvegarder. Ainsi, en cas de problème, vous pourrez toujours restaurer le site.

Deux parties de votre site WordPress doivent être sauvegardées avant toute personnalisation :

1. base de données complèteLe site web de l'entreprise : un emplacement où sont stockés tous les messages, pages, paramètres et configurations.
2. Documentation :Images, vidéos, thèmes et plugins.

La sauvegarde de votre site WordPress peut être effectuée rapidement et facilement à l'aide d'un plugin tel que Jetpack. Une autre option consiste à sauvegarder vos fichiers manuellement. Il convient également d'envisagerCréer un thème enfantpour ajouter un code personnalisé.

Un thème enfant est une copie du thème actuel et peut être personnalisé sans affecter le code original. En cas d'erreur, il suffit d'activer le thème original pour annuler les modifications. Cela vous permet également de mettre à jour le thème parent sans perdre les modifications apportées au code.

Comment ajouter du JavaScript à l'ensemble de votre site WordPress

Si vous souhaitez ajouter du JavaScript à l'ensemble de votre site WordPress, il existe plusieurs fa?ons de le faire. L'une d'entre elles consiste à ajouter un fichier HTML personnalisé au thème, puis à insérer du code JavaScript dans ce fichier.

Une autre option consiste à créer un plugin WordPress contenant du code JavaScript. Vous pouvez aussi simplement modifier le fichier functions.php et y insérer le code.

Vous pouvez également modifier l'ensemble d'un site WordPress en ajoutant du JavaScript à l'en-tête ou au pied de page. La manière la plus simple de procéder est d'installer et d'activer le plugin Insert Header and Footer.

Quatre fa?ons d'ajouter du JavaScript personnalisé à WordPress

Il existe de nombreuses fa?ons d'ajouter un JavaScript WordPress personnalisé à votre site web :

Méthode 1 : Utiliser des plug-ins

La manière la plus simple d'ajouter du JavaScript à WordPress est d'utiliser un plugin. Cette méthode est plus souple et plus facile à gérer que l'ajout de code directement dans le thème.

Si le codage n'est pas votre truc, ou si vous souhaitez une solution plus conviviale, il est recommandé d'utiliser l'un des nombreux plugins disponibles pour ajouter du JavaScript à WordPress.

Dans cet article, nous utiliserons la fonctionInsertion d'en-têtes et de pieds de page.

Après avoir activé le plugin, naviguez vers"Réglages" → "Dans le tableau de bord de WordPressInsérer un en-tête et un pied de page".

Vous verrez deux cases intituléesScripts dans l'en-têterépondre en chantantScripts dans le pied de page. Tout code ajouté dans ces deux cases sera inséré dans l'en-tête ou le pied de page du site. C'est là que vous ajouterez le JavaScript.

Si vous souhaitez ajouter unBo?te de confirmation JavaScript. En"Script dans le titre" insérez le code suivant :

<!DOCTYPE html>
<html>
<body>
<h2>Boîte de confirmation JavaScript</h2>
<button onclick="myFunction()">Essayez-le</button>
<p></p>
<script>
function myFunction() {
 var txt;
 if (confirm("Press a button!")) {
  txt = "You pressed OK!";
 } else {
  txt = "You pressed Cancel!";
 }
 document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

Ce code affichera un "tentatives "Bouton. Lorsque vous sélectionnez le bouton, il confirme que vous avez appuyé dessus.

Vous pouvez vous connecter à votre site web et cliquer sur "Procès "pour tester cette fonction.

Méthode 2 : Ajouter JavaScript au thème

L'ajout de JavaScript directement dans votre thème est l'un des moyens les plus simples d'y parvenir. Créez un nouveau fichier dans le répertoire de votre thème et nommez-le "custom.js".

Ensuite, ajoutez le code JavaScript au fichier et sauvegardez-le. Enfin, modifiez le fichier header.php et ajoutez une ligne de code pour charger le nouveau fichier JavaScript :

?phpbloginfo('template_directory');?/custom.js

N'oubliez pas de remplacer "custom.js" par le nom du fichier. Après avoir ajouté cette ligne de code, enregistrez le fichier header.php et téléchargez-le sur le serveur. Maintenant, votre code JavaScript devrait être prêt à fonctionner sur l'ensemble de votre site WordPress.

Méthode 3 : Utiliser les fonctions et les crochets de WordPress

Il est également possible d'utiliserFonctions et crochets WordPressAjoutez du code personnalisé. Une fonction est un morceau de code qui effectue une action spécifique. Par exemple, la fonction wp_enqueue_script() est utilisée pour charger des fichiers JavaScript.

Les hooks sont une fonctionnalité de WordPress qui vous permet d'ajouter du code sans modifier les fichiers principaux. Il existe deux types de crochets : les actions et les filtres.

Les actions sont des fonctions PHP qui sont déclenchées à des moments précis du chargement de la page. Par exemple, l'action wp_head est liée à la fonctionheader.phpDéclenché avant la balise du fichier. Ce crochet permet d'ajouter du code ou des scripts personnalisés à l'en-tête.

Les filtres peuvent modifier le code ou les données existantes. Par exemple, le filtre the_content peut modifier le contenu d'un article avant de l'afficher. Pour ajouter du JavaScript personnalisé à un site WordPress à l'aide de fonctions et de crochets, vous devez insérer le code dans le fichier functions.php du thème enfant.

Créez un thème enfant en ajoutant un nouveau dossier dans votre répertoire WordPress. Créez ensuite un fichier style.css qui contient les styles du thème enfant. Ensuite, vous devez ajouter le code suivant au fichier style.css :

/*
Nom du thème : Twenty Twenty-Two Child
Template : twentytwentytwo
*/

Après avoir créé le thème enfant, vous pouvez l'activer en allant dans Apparence → Editeur de fichier de thème depuis le panneau WordPress. Naviguez jusqu'au fichier functions.php et ajoutez le code suivant :

function ti_custom_javascript() {
    ?  Ti_custom_javascript() { ?
         Votre code javascript
          // votre code javascript va ici
        </script
    <?php
}
add_action('wp_head', 'ti_custom_javascript') ;

Lorsque vous avez terminé, enregistrez les modifications.?

Méthode 4 : Créer un plug-in

Si vous souhaitez séparer le code JavaScript du thème, vous pouvez créer un plugin WordPress pour inclure le code JavaScript. La création d'un plugin demande plus de travail que l'ajout du code directement dans le thème. Toutefois, cette approche est plus flexible et plus facile à gérer.

Pour créer un plugin, vous devez d'abord créer un nouveau répertoire dans le répertoire wp-content/plugins de votre installation WordPress. Nommez ce répertoire "my-javascript-plugin".

Ensuite, créez un nouveau fichier dans ce répertoire et nommez-le "my-javascript-plugin.php". Le contenu de ce fichier doit ressembler à ce qui suit :

Auteur : Jane Doe URI de l'auteur : */ ?

Changez le nom du plugin enetURI du pluginetDescriptionetAuteurrépondre en chantantAuteur URIsont remplacés par vos valeurs. Il s'agit de champs d'information générale qui décrivent le plugin.

Ensuite, le code JavaScript doit être ajouté au fichier. Le code doit être placé sous les informations initiales du plugin, mais avant la balise PHP de fermeture ( ? >). Après avoir ajouté le code, enregistrez le fichier et téléchargez-le sur le serveur.

Le plugin devrait maintenant être installé et activé. Vous pouvez vérifier que le plugin fonctionne en allant sur la page Plugins dans le panneau d'administration de WordPress. Votre plugin devrait y être listé.

Comment ajouter du JavaScript à une page ou un article spécifique de WordPress

Si vous souhaitez ajouter du JavaScript à une page ou à un article spécifique de WordPress, vous pouvez insérer le code directement dans l'éditeur du thème. Trouvez le fichier functions.php et ajoutez le code suivant :

function ti_custom_javascript() { if (is_single ('1')) {
  if (is_single ('1')) {
    if (is_single ('1')) { >if (is_single ('1') { ?
        
          // votre code javascript va ici
        </script
    <?php
  }
}
add_action('wp_head', 'ti_custom_javascript') ;

Le "1" dans le code ci-dessus doit être remplacé par l'identifiant de l'article ou de la page. Ouvrez l'article à partir du tableau de bord, puis recherchez l'URL dans la barre du navigateur pour trouver ce numéro. le numéro d'identifiant se trouve juste à c?té de "post=" :

N'oubliez pas d'enregistrer le fichier après avoir remplacé le numéro et ajouté le JavaScript personnalisé.?

Comment ajouter JavaScript au menu de WordPress

Pour ajouter JavaScript au menu de WordPress, vous devez créer un élément de menu personnalisé. Tout d'abord, utilisez Developer Tools pour trouver le numéro d'identification de l'élément de menu, puis utilisez jQuery pour le cibler avec cet identifiant. Cela déclenchera le script lorsqu'un visiteur cliquera sur l'élément de menu.

Comment ajouter du JavaScript au pied de page de WordPress

La manière la plus simple d'ajouter du JavaScript à votre pied de page WordPress est d'utiliser un plugin comme Insert Header and Footer. Cet outil insère du code dans l'en-tête et le pied de page de votre site Web WordPress sans avoir à modifier les fichiers du thème.

Pour utiliser Insert Header and Footer, il suffit d'installer et d'activer le plugin. Ensuite, rendez-vous surmettre en place→Insertion d'en-têtes et de pieds de page. Sur la page des paramètres, vous verrez trois cases permettant d'ajouter du code à l'en-tête, au corps et au pied de page de votre site web. Il vous suffit de coller le code JavaScript dans le champpieds de page?dans le script approprié, puis cliquez sur le bouton"Sauvegarder".fera l'affaire.

Une autre fa?on de procéder consiste à modifierfunctions.phpDocumentation. JavaScript peut être exécuté en insérant le code suivant dans le pied de page de votre site web :

function wpb_hook_javascript_footer() {
    function wpb_hook_javascript_footer() {  <script
         <script
          // votre code javascript va ici
        </script
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer') ;

Ce code s'insère dans le wp_footer. N'oubliez pas de sauvegarder le fichier lorsque vous avez terminé pour mettre à jour les modifications.

Comment ajouter du JavaScript aux widgets de WordPress

Pour ajouter du JavaScript à un widget WordPress, vous devez modifier le code du widget. Cliquez sur le menu du widget et sélectionnez"Modifier en HTML".

Dans l'éditeur de code du bloc, ajoutez la balise et le code JavaScript. Lorsque vous avez terminé, sélectionnez la balise"RenouvellementBouton.

Comment ajouter le JavaScript "onclick" aux boutons WordPress

L'ajout d'événements "onclick" aux boutons WordPress est un excellent moyen d'ajouter des fonctionnalités supplémentaires à votre site web. Vous pouvez utiliser l'événement onclick pour déclencher une fenêtre popup ou afficher un message lorsque le bouton est cliqué.

connecterL'événement onclick est ajoutéPour accéder au bouton WordPress, vous devez modifier le code du bouton et ajouter l'attribut suivant : onclick="your_function()". Veillez à remplacer "votre_fonction()" par le code JavaScript qui sera exécuté lorsque vous cliquerez sur le bouton. Après avoir ajouté l'attribut onclick, cliquez sur le bouton"Sauvegarder".bouton. Le bouton doit maintenant avoir l'événement onclick ajouté.

Comment trouver et déboguer les erreurs JavaScript sur les pages WordPress

Pour trouver et déboguer les erreurs JavaScript, vous pouvez ajouter ce qui suit à la page d'accueil du sitewp-config.phppour activer le débogage des scripts.?

Ouvrez le fichier via un client FTP (File Transfer Protocol) ou un gestionnaire de fichiers. Insérez ensuite le code suivant :

define('SCRIPT_DEBUG', true) ;

N'oubliez pas de placer ce code dans la ligne "C'est tout, arrêtez d'éditer ! Amusez-vous bien à bloguer".

Pour trouver et déboguer les erreurs JavaScript sur les pages WordPress, vous pouvez utiliser votre navigateur. Dans Google Chrome, cliquez sur l'ic?ne du menu (trois points verticaux) dans le coin supérieur droit. Puis, dans le menu déroulant, sélectionnezPlus d'outils → Outils du développeur.

Il peut également être modifié en appuyant sur la toucheCtrl + Déplacement + J (Windows/Linux) ouCmd + Option + J (Mac) pour accéder aux outils de développement.

Outils ouverts pour les développeursEnsuite, cliquez sur"Console".Onglet. Ici, vous verrez toutes les erreurs JavaScript qui se produisent sur votre site WordPress.

Si vous n'êtes pas s?r de la signification de l'erreur ou de la manière de la résoudre, vous pouvez effectuer une recherche en ligne. Il vous suffit de copier et de coller le message d'erreur dans un moteur de recherche pour trouver des résultats utiles. Essayez également de désactiver tous les plugins WordPress pour voir si cette méthode résout le problème. Si c'est le cas, cela signifie que l'un des plugins est à l'origine du problème. Les plugins peuvent être réactivés un par un jusqu'à ce que le plugin en cause soit trouvé, ce qui permet de réduire le nombre d'outils à l'origine du problème.

rendre un verdict

L'ajout de JavaScript à un site web WordPress permet de créer des fonctions interactives qui améliorent l'expérience de l'utilisateur (UX) de la page. Il existe plusieurs fa?ons d'ajouter du JavaScript. La méthode qui vous convient le mieux dépend de vos préférences et de la nature du code ajouté. Si vous n'insérez qu'une petite quantité de code, il peut être plus facile d'utiliser le thème directement. En revanche, si vous ajoutez beaucoup de code, il peut être préférable d'utiliser un plugin ou de modifier le fichier functions.php.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.