Problèmes : Style et insérer une page html

  • WordPress :5.2
  • Statut : hors support
8 sujets de 1 à 8 (sur un total de 8)
  • Auteur
    Messages
  • #2274945
    gsmopige
    Participant
    Initié WordPress
    16 contributions

    Bonjour,

    Ma configuration WP 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

    Thème URI : ?

    Extensions en place : TablePress

    Nom de l’hébergeur : localhost

    Problème(s) rencontré(s) :

    Je développe en local une nouvelle version du site coutglobal.fr avec WordPress, avant de la placer en ligne. Le site est essentiellement constitué de pages car il a 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. J’ai listé ci-dessous quelques difficultés que je ne sais pas traiter.

    Styles des titres

    Lorsqu’il y a un menu, le titre de la page, qui s’affiche automatiquement en haut, reprend le titre saisi dans le menu. Quel est le format de ce titre? Lorsque je modifie la couleur de H1 dans les CSS additionnels (par exemple green), le titre de la page devient vert. Cependant, quand je modifie font-family dans H1, la modification n’est pas répercutée sur le titre. Comment personnaliser le format de ce titre?

    J’ai modifié le CSS des titres (h1, h2, h3). Il est ainsi possible de personnaliser font-family et color mais pas la taille qui reste inchangée quand on modifie font-size. Est-ce normal?

    Modifier un slug (identifiant)

    WordPress génère automatiquement des slugs de contenu à partir du titre. J’avais créé une page dont le Titre est “Analyse de risque” et je constate, après avoir ajouté une page enfant à cette page, que le Slug est “page-d-exemple” ce qui n’a rien à voir avec le Titre. Est-il possible de modifier le libellé du slug et si oui, comment faire?

    Insérer une page html

    Dans la page enfant mentionnée ci-dessus (Titre Simulateur) je souhaite insérer la page html qui est actuellement disponible à l’adresse suivante : http://coutglobal.fr/SimuRisque/somRisq.html. Cette page contient du javascript et l’appel à un fichier php. Vous pouvez constater qu’elle fonctionne très bien.

    Après avoir fait un copier de l’intégralité du code, dont la partie style, je l’ai collé dans la page enfant après sélection de l’éditeur de code. Je retrouve bien le code dans cette page. J’ai placé les fichiers contenant les images jpg et le fichier php dans le répertoire racine du site (celui qui contient wp-admin, wp-content et wp-includes). Après mise à jour, j’obtiens une page qui ressemble à celle mentionnée ci-dessus (http://coutglobal.fr/SimuRisque/somRisq.html) avec cependant les problèmes suivants:

    • Les 4 images des Lois de probabilité ne sont pas affichées;
    • Les boutons “Ajouter, Valider et Simulation” ne fonctionnent pas;
    • L’affichage des inputs “Nombre de risques, Minimum, Maximum et Moyenne” ne respecte pas du tout le format indiqué dans le style (voir pièce jointe simulateur.jpg).

    Ai-je placé les fichiers image et php au bon endroit, y-a-t-il des conflits de style entre WP et le fichier somRisq.html que j’ai copié dans une page, etc.

    Merci pour votre aide qui me serait fort utile

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2275107
    Flobogo
    Modérateur
    Maître WordPress
    15778 contributions

    Bonjour,

    Pour le problème de style des titres, postez votre demande en rubrique “Thèmes” qui est plus adaptée. Il faut éviter de mélanger différents problèmes sur la même demande.

    Modifier un slug (identifiant)

    Oui, c’est tout à fait possible. (même si il faut éviter, car WP crée une redirection, donc pas la peine d’alourdir le site avec de multiples redirections)
    Vous pouvez modifier la partie “slug” directement, lors de la modification de la publication, il y a un petit bouton Ok au bout pour valider. Attention, je parle là de l’ancien éditeur, que j’ai conservé avec Classic Editor. Si vous utilisez l’éditeur Gutenberg, c’est un peu différent, mais je suis presque sûre que c’est toujours possible.

    Insérer une page html

    Le principe de WordPress, c’est de séparer le fond de la forme, donc déjà, le style (et de préférence les fichiers JS) sont à part. Mais il ne faut pas les mettre à la racine du site, ce qui revient à les mettre hors WP ou presque. Le mieux serait de les mettre dans votre thème-enfant.

    • Les 4 images des Lois de probabilité ne sont pas affichées
      Logique, puisqu’elles n’ont pas été insérées via la bibliothèque. Uploadez-les dans la bibliothèque, récupérez l’URL, et insérez l’URL à l’endroit voulu.
    • Les boutons “Ajouter, Valider et Simulation” ne fonctionnent pas
      Le fichier JS (que vous utilisez pour ces boutons, je pense) doit être mal appelé. Soit vous modifiez son chemin, soit vous re-créez vos boutons avec l’outil Gutenberg, c’est facile.
    • L’affichage des inputs “Nombre de risques, Minimum, Maximum et Moyenne” ne respecte pas du tout le format indiqué dans le style (voir pièce jointe simulateur.jpg).
      Probablement un conflit de style. Ajoutez votre fichier style spécifiques au thème-enfant (sans oublier de l’appeler dans le fichier functions.php de ce thème), soit encore mieux, ajoutez vos règles au fichier style.css, en ajoutant la class spécifique à votre page, par exemple, pour bien cibler les input de cette page là.

     

    #2275406
    gsmopige
    Participant
    Initié WordPress
    16 contributions

    Bonjour,

    Merci pour votre réponse très complète que je vais exploiter. Certains conseils sont faciles à mettre en œuvre, d’autres moins. Je ne coche pas Résolu car il est  possible que je revienne pour un complément d’information sur les points abordés.

    Cordialement

    • Cette réponse a été modifiée le il y a 3 weeks par  PhiLyon. Raison: Visibilité
    #2275478
    Flobogo
    Modérateur
    Maître WordPress
    15778 contributions

    Je ne coche pas Résolu car il est possible que je revienne pour un complément d’information sur les points abordés.

    OK, pas de souci, n’hésitez pas si besoin.

    #2276370
    gsmopige
    Participant
    Initié WordPress
    16 contributions

    Bonjour,

    J’ai résolu les problèmes de style en créant un thème-enfant.

    Le problème est résolu pour les 4 images.

    Pour les 3 boutons, le problème n’est pas résolu. J’ai envisagé deux solutions.

    <u>Solution 1</u>/ S’ils sont mal appelés, il faut soit modifier les chemins, soit recréer les boutons avec l’outil Gutenberg. Je ne sais pas ce que veut dire “modifier les chemins” étant donné que la page dans WP est une copie exacte du code source (html et javascript) qui fonctionne très bien à l’adresse http://coutglobal.fr/SimuRisque/somRisq.html. Pour recréer les boutons avec l’outil Gutenberg, c’est probablement facile, mais je ne sais pas comment faire, et je ne suis pas sûr que cela soit la solution.

    En effet, 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. Pourquoi ?

    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”.

    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 : “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 trouver?

    (*) http://localhost:8000/cgrisq/page-d-exemple/simulateur/simuRisq-b.php

    <u>Solution 2</u>/ Faire un copier-coller du code initial en remplaçant l’application javascript qui appelle le code php par un appel direct à cette application à l’aide d’un iframe.

    <iframe style=”border: none ” title=”Lancer la simulation”

    src=http://localhost:8000/cgrisq/somRisq-b.html

    width=”1000″

    height=”500″>

    </iframe>

    Cela fonctionne bien. J’ai placé le fichier somRisq-b.html dans le répertoire principal (cgrisq). Ce fichier appelle le fichier simuRisq-b.php (http://localhost:8000/cgrisq/simuRisq-b.php) qui est aussi placé dans le répertoire principal.

    Une copie d’un extrait de l’écran que j’obtiens se trouve en pièce jointe. Les trois boutons fonctionne et la simulation affiche un résultat exact. J’ai fixé la hauteur à 500 ce qui permet de saisir une vingtaine de risques avant d’utiliser l’ascenseur. Est-il possible de spécifier une hauteur variable qui s’adapterait en fonction du nombre de risques?

     

    Cette deuxième solution fonctionne, mais étant curieux et un peu perfectionniste, j’aimerais bien savoir pourquoi la première ne fonctionne pas. Pourquoi un code html contenant du JS qui appelle du php, qui fonctionne bien, ne fonctionne plus quand on le copie sur une page WP.

     

    Merci d’avoir la patience de lire ce message et d’y apporter peut-être des réponses à certaines questions.

    Cordialement

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2276615
    Flobogo
    Modérateur
    Maître WordPress
    15778 contributions

    Bon … Quelques (éléments de) réponses :

    • je croyais qu’il s’agissait de boutons pour “appeler” (ouvrir) une page externe. Je n’avais pas compris qu’il s’agissait de boutons “calculateurs” en temps réel. Donc, forcément, rien à voir avec Gutenberg
    • Votre 1ère solution (un code html contenant du JS qui appelle du php) , ne peut pas fonctionner quand on le copie sur une page WP, parce que les pages WP ne peuvent pas contenir de PHP. (enfin, je pense que c’est ça ne problème)
      En passant par un iframe, c’est comme si c’était extérieur à votre site.
      Bon, n’étant pas codeuse, ma réponse est trèèèès approximative, mais j’espère que vous saisissez l’idée.
    #2276661
    gsmopige
    Participant
    Initié WordPress
    16 contributions

    Bonjour,

    Dans la solution 1, la page WP ne contient pas de PHP, elle lance une application PHP extérieure à la page. Est-il possible de lancer une application PHP à partir d’un site développé avec WP? Je suppose oui.

    La question concerne l’introduction de balises <p>…</p> dans le code JavaScript lors de la copie d’une page HTML dans une page WP. Est-ce normal, et si oui pourquoi ? Est-ce un bug de WP ? Est-il possible de copier du code html contenant du JS dans une page WP ?

    Merci de m’indiquer où je peux trouver des réponses à ces questions

    #2276762
    Flobogo
    Modérateur
    Maître WordPress
    15778 contributions

    Merci de m’indiquer où je peux trouver des réponses à ces questions

    Auprès de votre ami Goo gle 😉

    Et/ou peut-être sur le Slack WordPress (voir en bas à gauche de la colonne latérale, sur l’accueil de ce forum)

8 sujets de 1 à 8 (sur un total de 8)
  • Vous devez être connecté pour répondre à ce sujet.