Insérer une page html contenant un script JS dans un site WP
Bonjour,
Configuration actuelle
Version de WordPress : 5.2.2
Adresse du site : la version test est en local. Wampserver 3.1.0 64 bit x64
PHP 5.6.31, 7.0.23, 7.1.9 / MySQL 5.7.19
Thème utilisé : Twenty Sixteen
Je développe en local une nouvelle version du site http://coutglobal.fr/ avec WordPress, avant de la placer en ligne. Le site est essentiellement constitué de pages car il renferme beaucoup de contenu. De plus il permettra de mettre en ligne une application très utile pour l'analyse de risque dans les projets d'investissement. Cette application, qui fonctionne parfaitement, se trouve actuellement à l'adresse http://coutglobal.fr/SimuRisque/somRisq.html, en attendant d'être intégrée au site. Cette application contient du html et du javascript, dont un formulaire fait appel à un fichier php.
Code:
<form action="simuRisq-b.php" method="post" name="lesva" target="_blank">
Mon problème : j'ajoute une page dans le site WP dans laquelle je copie intégralement le code source du fichier somRisque.html mentionné ci-dessus. La page affiche alors une copie identique à celle du fichier initial. En revanche, les boutons "Ajouter" et "Valider" n'appellent pas les scripts JS qui sont placés au début du fichier, alors que ces mêmes boutons fonctionnent dans le code initial.
En regardant plus attentivement le code créé par WP après le copier-coller, j'ai constaté que de nombreuses instructions JS ont été placées entre les balises <p> et </p> ce qui, je suppose, les transforme en html. Si cette remarque est correcte, il est normal que les boutons "Ajouter" et "Valider" restent muets. J'ai reproduit cet ajout dans le fichier somRisq.html mentionné ci-dessus, dans la déclaration de la variable "tableau".
Code:
1
2
3
4
5
| function ajouterLigne() {
// déclaration des variables
var oInput; var oRow; var oCell; var oText;
var ind;
<p>var tableau = document.getElementById("tablo");</p> |
Le bouton Ajouter ne répond plus, alors qu'il fonctionne sans les balises.
Il semble donc que le copier-coller dans WP d'un fichier html contenant du JS modifie le code JS en y ajoutant des balises supplémentaires qui le rendent inopérant. Comment faire alors pour récupérer du code existant?
Ce constat est confirmé par le fait que le bouton Simulation, qui n'appelle pas de JS, fonctionne correctement. Il appelle un fichier php que j'ai placé dans le thème enfant en plus des fichiers "style.css" et "functions.php". Mais il affiche une page (*) contenant le message suivant :
Citation:
Oups ! Cette page est introuvable
. Si je place le fichier dans le répertoire principal (cgrisq), j'obtiens le même message. Où dois-je placer le fichier php pour qu'il le trouve?
(*) http://localhost:8000/cgrisq/page-d-...simuRisq-b.php
Ce message étant très long, je résume ici les 2 problèmes.
1/ Le copier-coller d'un code html contenant du JavaScript introduit des balise <p>…</p> dans le script JS qui le rendent inopérant. Les boutons des formulaires ne répondent donc pas.
2/ Le bouton du formulaire qui appelle le fichier php répond bien car il n'est pas dans les scripts JS. Cependant, il ne trouve pas le fichier php. Où dois-je le placer?
Merci pour votre aide qui me serait plus qu'utile, indispensable.
Insérer une page html contenant un script JS dans un site WP
Même message que le précédent avec un meilleur affichage du code intermédiaire
Bonjour,
Merci pour ta réponse. Après une interruption involontaire et plusieurs essais infructueux, je reviens sur mon problème qui n'est toujours pas résolu.
J'ai suivi la démarche indiquée à l'adresse https://www.thibautsoufflet.fr/charg...ans-wordpress/
Dans le répertoire wp-content/themes/theme-enfant/ j'ai placé un fichier essai1.js contenant le code suivant:
Code:
1
2
3
4
5
| function creerTab(f) {
document.write("bonjour <br>");
var nCo = f.nbVa.value;
document.write("Nbre de VA : " + nCo);
} |
Dans le fichier functions.php, placé dans le même répertoire, j'ai ajouté le code suivant :
Code:
1
2
3
4
5
6
7
8
| function add_script1() { // enqueue script
wp_enqueue_script (
'my_script',
get_template_directory_uri().'/js/essai1.js',
array (),
true );
}
add_action( 'wp_footer', 'my_script' ); |
Et dans une nouvelle page nommée "essais"du site WP, j'ai placé le code html suivant :
Code:
1
2
3
4
5
| <script type="application/javascript" src="essai1.js"></script>
<form method="post" name="somRisk">Nombre de variables <input name="nbVa" type="text">
<input name="lancer" type="button" value="valider">
</form> |
En cliquant sur le bouton "valider" rien ne se passe et j'obtiens le message suivant dans la console :
A noter que le code html placé dans la page "essais" qui appelle le script fonctionne parfaitement lorsqu'il est exécuté hors WordPress (voir ci-dessous).
Merci encore de bien vouloir m'aider à trouver l'erreur.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE HTML>
<html>
<head>
<title>Somme de variables uniformes indépendantes</title>
<script type="application/javascript" src="essai1.js"></script>
<meta http-equiv="Resource type" content="document"><!-- Fin de la section d'en-tete du document -->
</head>
<body>
<form name="somRisk" method="post">
Nombre de variables <input type="text" name="nbVa"> <br>
<input type="button" name="lancer" value="valider" onclick="creerTab(somRisk)"> <br>
<!-- value = libellé du button-->
</form>
</body>
</html> |
Code:
1
2
3
4
5
| function creerTab(f) {
document.write("bonjour <br>");
var nCo = f.nbVa.value;
document.write("Nbre de VA : "+nCo);
} |
