Souhaitez-vous ajouter un JavaScript à vos pages ou publications WordPress? Parfois, vous devez ajouter du code JavaScript à l’ensemble du site Web ou à des pages spécifiques. Par défaut, WordPress ne vous permet pas de coller du code directement dans vos articles. Dans cet article, nous allons vous montrer comment ajouter facilement du JavaScript dans des pages ou des publications WordPress.

Comment ajouter facilement du JavaScript dans les articles et pages WordPress

Qu’est-ce que JavaScript?

JavaScript est un langage de programmation qui n’est pas exécuté sur votre serveur mais dans le navigateur de l’utilisateur. Cette programmation côté client permet aux développeurs de faire beaucoup de choses intéressantes sans ralentir votre site Web.

Lorsque vous souhaitez intégrer un lecteur vidéo, ajouter une calculatrice ou un autre service tiers, il vous sera souvent demandé de copier et coller un extrait de code JavaScript dans votre site Web.

Un extrait de code JavaScript typique pourrait ressembler à ceci:


<script type="text/javascript"> 

// Some JavaScript code

</script>

<!-- Another Example: --!>  

<script type="text/javascript" src="/path/to/some-script.js"></script>


Désormais, si vous ajoutez un extrait de code Javascript à un article ou une page WordPress, WordPress le supprimera lorsque vous essayez de l’enregistrer.

Voyons comment vous pouvez facilement ajouter du JavaScript dans des pages ou des publications WordPress sans casser votre site Web.

Méthode 1. Ajoutez JavaScript à l’ensemble du site en ajoutant des en-têtes et des pieds de page

Parfois, il vous sera demandé de copier et coller un extrait de code JavaScript dans votre site Web pour ajouter un outil tiers. Ces scripts sont généralement placés dans l’en-tête ou en bas avant le -Tag de votre site Web affiché. De cette façon, le code sera chargé dans chaque page vue.

Par exemple, Installation de Google Analytics Le code doit figurer sur chaque page de votre site Web pour pouvoir suivre les visiteurs de votre site Web.

Vous pouvez ajouter ce code aux fichiers header.php ou footer.php de votre thème WordPress. Cependant, ces modifications seront écrasées si vous mettez à jour ou modifiez votre thème.

Pour cette raison, nous vous recommandons d’utiliser un plugin pour charger Javascript sur votre site Web.

Vous devez d’abord installer et activer cela Insérer des en-têtes et des pieds de page Brancher. Pour plus d’informations, consultez notre guide étape par étape à l’adresse Comment installer un plugin WordPress?.

Après l’activation, vous devez visiter Paramètres »Insérer des en-têtes et des pieds de page Page. Vous verrez deux champs, un pour l’en-tête et l’autre pour la zone de pied de page.

Ajouter les paramètres du plugin pour les en-têtes et les pieds de page

Vous pouvez maintenant coller le code JavaScript que vous avez copié dans l’un de ces champs, puis cliquer sur le bouton Enregistrer.

Le plugin pour insérer des en-têtes et des pieds de page chargera désormais automatiquement le code que vous avez ajouté sur chaque page de votre site Web.

Méthode 2. Ajout manuel de code JavaScript à l’aide de code

Cette méthode consiste à ajouter du code à vos fichiers WordPress. Si vous ne l’avez pas déjà fait, veuillez consulter notre guide ci-dessous comment copier et coller du code dans WordPress.

Voyons d’abord comment ajouter du code à l’en-tête de votre site WordPress. Vous devez ajouter le code suivant à votre sujet functions.php Fichier ou un plugin spécifique à l’emplacement.


function wpb_hook_javascript() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

Ajout de JavaScript à un article ou un site WordPress spécifique à l’aide de code

Supposons que vous souhaitiez uniquement charger ce javascript dans un article WordPress spécifique. Pour ce faire, vous devez ajouter une logique conditionnelle au code. Jetez un œil à l’exemple suivant:



function wpb_hook_javascript() {
  if (is_single ('16')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');


Si vous regardez de plus près le code ci-dessus, vous constaterez que nous avons enveloppé le code javascript autour de la logique conditionnelle pour correspondre à un PostID spécifique. Vous pouvez l’utiliser en remplaçant 16 par votre propre identifiant de publication.

Maintenant, ce code fonctionnerait pour n’importe quel type de publication à l’exception des pages. Regardons un autre exemple, sauf que celui-ci recherche un identifiant de page spécifique avant d’ajouter le code javascript à l’en-tête.


function wpb_hook_javascript() {
  if (is_page ('10')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

À la place de est célibatairenous utilisons maintenant is_page pour rechercher l’ID de page.

Nous pouvons utiliser le même code avec des modifications mineures pour ajouter du code Javascript au pied de page de votre site. Jetez un œil à l’exemple suivant.


function wpb_hook_javascript_footer() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

Au lieu de lier notre fonction à wp_head, nous l’avons maintenant liée à wp_footer. Vous pouvez également l’utiliser avec des balises conditionnelles pour ajouter du javascript à des articles ou des pages spécifiques.

Méthode 3. Ajout de code Javascript dans des articles ou des pages à l’aide du plugin

Cette méthode vous permet d’ajouter du code n’importe où dans vos articles et pages WordPress. Vous pouvez également choisir où dans le contenu incorporer le code Javascript.

Vous devez d’abord installer et activer cela Code intégré Brancher. Pour plus d’informations, consultez notre guide étape par étape à l’adresse Comment installer un plugin WordPress?.

Une fois activé, vous devrez modifier le message ou la page sur lequel vous souhaitez ajouter le javascript. Sur la page Post-traitement, cliquez surOptions d’écranCliquez sur le bouton Champs personnalisés.

Afficher le champ méta pour les champs personnalisés

Maintenant, faites défiler vers le bas et sous le post-éditeur, vous verrez la métabox «Champs définis par l’utilisateur», dans laquelle vous devez cliquer sur le lien «Entrer nouveau».

Ajouter un nouveau champ personnalisé

Les champs pour le nom et la valeur du champ personnalisé sont maintenant affichés.

Vous devez fournir un nom pour le champ personnalisé avec un préfixe CODE (par exemple CODEmyjscode), puis collez le code Javascript dans le champ de valeur.

Ajout de code JavaScript à un champ personnalisé

N’oubliez pas de cliquer sur le bouton « Ajouter un champ personnalisé » pour enregistrer votre champ personnalisé.

Vous pouvez maintenant utiliser ce champ personnalisé pour intégrer le code JavaScript n’importe où dans cet article ou cette page. Ajoutez simplement ce code d’intégration n’importe où dans le contenu de votre message.

{{CODEmyjscode}}

Vous pouvez maintenant enregistrer votre message ou votre page et afficher votre site Web. Vous pouvez afficher le code javascript en utilisant Vérifier l’outil ou en affichant la source de la page.

Conseil: Ces méthodes sont destinées à la fois aux débutants et aux propriétaires de sites Web. Si vous apprenez le développement de thèmes ou d’extensions WordPress, vous devez avoir raison File d’attente JavaScript et feuilles de style à vos projets.

Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement du JavaScript à des pages ou des publications WordPress. Vous pouvez également consulter notre liste de astuces extrêmement utiles pour le fichier de fonction WordPress.

Si vous avez apprécié cet article, veuillez vous abonner au nôtre chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.





Source link

Recent Posts