web-dev-qa-db-fra.com

Comment ajouter du code JavaScript sur WordPress correctement?

Dans l'éditeur de code, coller:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    var words = [];

    words.Push('vocabulary');
    words.Push('Lexicon');
    words.Push('lexicons');

  </script>

va le faire:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script><br />
    var words = [];</p>
<p>    words.Push('vocabulary');<br />
    words.Push('Lexicon');<br />
    words.Push('lexicons');</p>
<p>  </script>

La version est 4.9.8. Comment dois-je l'ajouter correctement?


FYI: Comment inclure jQuery correctement?

javascripthtml-editorline-breaks
1
Ooker

Le Codex ( JavaScript dans les articles ) couvre exactement ce scénario. y compris javascript dans une publication ponctuelle. Donc, que votre javascript ait fonctionné dans le passé ou non soit sans importance, la meilleure approche consiste maintenant à utiliser la pratique décrite dans le Codex.

Ce sont les étapes que j'ai suivies:

1 - Enregistrez le javascript dans un fichier et enregistrez-le dans un dossier approprié sur votre site. Je mets le mien dans le dossier "js" de mon thème.

Ceci est mon exemple J'ai ajouté du code pour prouver que cela fonctionnait ou non.

function vocab(){
var words = [];
words.Push('vocabulary');
words.Push('Lexicon');
words.Push('lexicons');
    for (var key in words) {
            var value = words[key];

            console.log(key + ' : ' + value);
    }
}

2 - Copiez le texte suivant dans l'éditeur de publication à l'aide de l'onglet "Texte".

Vous pouvez constater que le nom et l'emplacement du dossier du fichier javascript correspondent au nom et à l'emplacement indiqués à l'étape 1.

<script type="text/javascript" src="/wp-content/themes/twentysixteen-child/js/vocab.js"></script>
<script type="text/javascript">
<!--
vocab();
//-->
</script>

3- Voir le post

Le message semble vide/vide (sauf pour le titre). Mais le javascript est exécuté.

Voici un instantané de la console à partir de Chrome montrant la sortie de mon javascript.

 enter image description here 

UPDATE:

Vous devez être extrêmement prudent lors de l'insertion de n'importe quel texte/média, ou même simplement en cliquant sur l'onglet "Visual". De toute façon, il semble que JavaScript sera compromis et ne fonctionnera pas.

Voici à quoi ressemblait le code après avoir simplement cliqué sur l'onglet "Visual" puis de nouveau sur l'onglet "Texte". Lorsque la publication a été enregistrée et affichée, le code JavaScript s’est exécuténot.

<script type="text/javascript" src="/wp-content/themes/twentysixteen-child/js/vocab.js"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></script>
<script type="text/javascript">
<!-- vocab(); //--></script>

Si vous envisagez de saisir du texte/un média dans le message, la solution semble être la suivante:

  • entrez-le (avec le code HTML approprié) dans l'onglet "Texte"

OU

  • après avoir utilisé l'onglet "Visual", cliquez sur l'onglet "Texte",
  • éditez le code JavaScript en conséquence,
  • enregistrer/mettre à jour tout en restant sur l'onglet "Texte".

Mise à jour n ° 2: 23 août 2018

En ce qui concerne les problèmes potentiels liés à Javascript et à l'onglet "Visual", vous pouvez lire jusqu'au bas du Codex (comme je ne l'ai évidemment pas fait;)) et noter que le problème est abordé sous " Dépannage ". Le plugin Text Control est une solution recommandée.

"jQuery doit-il être chargé?" ou, "levons toute ambiguïté"

Réponse courte = Non.
Long answer = Le présent article traite spécifiquement de Javascript dans un article WordPress ponctuel. Mais Javascript et jQuery ne sont pas la même chose ( Source ). Donc, si on voulait inclure du code jQuery dans un article unique, alors ce Q & A ne s'appliquerait pas.

WordPress a des protocoles très différents pour charger jQuery et le code jQuery correspondant. Ce n'est pas difficile à faire, et wp_enqueue_script et " Using jQuery " serait un bon endroit pour commencer à lire.

1
Tedinoz