intégrer une page html dans wordpress (Créer un compte)

  • WordPress :6.1
  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 37)
  • Auteur
    Messages
  • #2440350
    condonjef1943
    Participant
    Initié WordPress
    37 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL :
    • Thème utilisé : simplicity
    • Extensions en place :
    • Nom de l’hébergeur : Nuxit
    • Adresse du site : jefcondon.fr

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

    Bonjour

    j’ai adapté cette animation de codepen.

    Voir à cette adresse:http://atrabilis.fr/dist2/index.html

    je voudrais l’utiliser comme page d’accueil sur mon site:https://jefcondon.fr

    Est-ce possible?

    Comment faire–>une piste

    Merci

    Je viens de modifier pour supprimer plein de texte qui s’est ajouté en plus…?

     

    • Ce sujet a été modifié le il y a 1 semaine et 4 jours par condonjef1943.
    • Ce sujet a été modifié il y a 1 semaine et 4 jours par Flobogo. Raison : suppression radicale de la fin de post (code issu d'un service de traduction)
    #2440372
    Flobogo
    Modérateur
    Maître WordPress
    19069 contributions

    Bonjour,

    Vous pouvez tout à fait insérer du code HTML dans vos pages WordPress … elles sont d’ailleurs toutes rédigées en HTML.

    Il vous suffit d’utiliser le « bloc HTML » avec l’éditeur Gutenberg (infos), ou bien de passer en « mode Text » si vous utilisez l’éditeur visuel classique (infos) avec l’extension Classic Editor.

    * * * * * * * * * * * * * *

    Et pour rappel, ne collez pas du texte ici directement, collez-le au préalable dans le bloc-notes de Windows (ou équivalent pour Mac / Linux) pour le débarrasser de cette « mise en forme informe » qui s’ajoute après vos posts, et qui semble liée au traducteur de votre navigateur. Il faut peut-être désactiver le module traduction de votre navigateur

    #2440417
    condonjef1943
    Participant
    Initié WordPress
    37 contributions

    Merci de votre prompte réponse. je teste et vous tiens au courant.

    Bien à vous

     

    • Cette réponse a été modifiée le il y a 1 semaine et 3 jours par Flobogo. Raison: suppression du code inutile
    #2440557
    condonjef1943
    Participant
    Initié WordPress
    37 contributions

    Bon. j’ai un peu travaillé.

    J’ai désactiver le traducteur de safari, j’espère qu’il ne va pas continuer à écrire du code après le message .

    Sur wp j’ai créé une page ou j’ai collé le html  et copier le css dans le dossier du thème dans Css –>le lien: ./css/style.css

    ensuite j’ai copié le JS dans le dossier js : le lien–>./js/script.js

    La page s’affiche, mais il semblerait que les lien css et js ne soient pas actifs.

    Le chemin indiqué est-il le bon? les 2 fichiers ont-ils été copiés dans le bon dossier?

    merci de votre aide

    #2440635
    Flobogo
    Modérateur
    Maître WordPress
    19069 contributions

    Bon, vous aviez parlé de HTML, mais en fait, il y a aussi du JS et du CSS.

    Sur l’original que vous nous avez présenté, comment ces 3 langages sont-ils imbriqués : tous dans le même fichier, ou bien avec l’appel de fichiers séparés ? Vous avez essayé avec des fichiers séparés, mais est-ce le cas sur l’original ? Car il est possible d’intégrer du CSS et du JS au sein du HTML, avec les balises appropriées

    Le chemin indiqué est-il le bon?

    Essayez en mettant le chemin complet.

    les 2 fichiers ont-ils été copiés dans le bon dossier?

    Où sont situés ces dossiers js et css : dans le dossier du thème ? ailleurs ? C’est ce qui va déterminer leur chemin complet (voir question précédente)

    * * * * * * * * * * * * *

    J’ai désactiver le traducteur de safari

    Ouf, c’est bon, votre dernier message ci-dessus ne comporte plus ces dizaines de lignes de code.

     

    #2440665
    condonjef1943
    Participant
    Initié WordPress
    37 contributions

    Merci

    J’avais mis pour le css et le js un lien absolu, mais échec.

    J’ai tout effacé pour revenir à qq chose clean.

    Pourriez vous regarder ,si je vous envoie l’id et le mdp de mon site ?

    Ci joint, le dossier qui comporte les 3 fichiers -index.html, script.js,style.css

    Merci de votre patience

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2440670
    condonjef1943
    Participant
    Initié WordPress
    37 contributions

    En fait, je devrais ajouter un bouton pour accéder à cette page :https://jefcondon.fr/peintures-2-3/

     

     

    #2440999
    Flobogo
    Modérateur
    Maître WordPress
    19069 contributions

    Je jetterai un œil aux fichiers du dossier zippé ce week-end, mais pas sûr que je sois compétente. Par contre, non, on ne répond pas aux demandes d’intervention individuelle avec accès à votre site, les réponses et solutions doivent pouvoir être accessibles et utiles à tous/toutes sur ce forum.

    #2441026
    condonjef1943
    Participant
    Initié WordPress
    37 contributions

    Merci de votre implication.

    #2441190
    Flobogo
    Modérateur
    Maître WordPress
    19069 contributions

    J’ai commencé à regarder, et comme je le pensais, l’appel aux fichiers inclus est mal fait. Plus exactement, il n’est pas adapté pour WordPress, mais pour un site HTML avec les fichiers uploadés les uns à côté des autres.
    Seul l’appel au fichier externe est correct :

    <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

    En plus, le fichier style.css est foireux à partir de la ligne 38. Et l’image 1 est manquante.

    Merci de rectifier et envoyer ce qui manque, je regarderai demain après-m’ ou soirée.

    Édit : j’ai quand même réussi à faire fonctionner l’animation, mais pour l’instant sur un site basique en HTML. Je verrai demain pour l’intégrer à un site WP.
    Mais pourriez-vous me redire quel effet vous voulez : mettre cette animation sur une page d’accueil ? telle quelle, sans menu ? Avec seulement des liens sur « peintures – céramiques » etc ?
    Pourquoi parliez-vous de bouton : où doit se trouver ce bouton, et vers quoi mènera-t-il ?

    • Cette réponse a été modifiée le il y a 1 semaine par Flobogo. Raison: Édit
    #2441242
    condonjef1943
    Participant
    Initié WordPress
    37 contributions

    <b>Merci</b>

    j’ai modifié le css en supprimant .image —>pas utile pour l’instant.

    Quand a l’appel aux fichiers script.js et style.css, je ne sais comment mettre le lien en direct.

    Faut-il supprimer ./ devant pour un lien direct?

    J’ai 80 ans et je ne maitrise pas tout.

    Je joins le dossier compressé

    Je voudrais  utiliser cette animation comme page de départ et y insérer un bouton pour qu’il ouvre la page peinture au click.

    Je pourrais  par exemple l’utiliser comme page d’accueil et le bouton servirait à ouvrir la page peinture qui est en ce moment la page d’accueil.

    Peintures

    Bien à vous

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

    Je pourrais par exemple l’utiliser comme page d’accueil et le bouton servirait à ouvrir la page peinture qui est en ce moment la page d’accueil.

    OK, mais il faudra supprimer l’animation sur votre accueil actuel.

    Mais du coup, c’est plus compliqué, car WordPress, par le biais de votre thème, utilise la même « maquette » de page y compris l’accueil, donc avec menu et pied-de-page. Or, je suppose que vous n’avez pas besoin du menu sur votre accueil.

    Je vais regarder un peu du côté des extensions de « landing page », mais je n’y connais rien …

    L’autre solution serait de mettre votre page de démarrage animée à la racine du site, avec le style.css, et tout le site dans un sous-dossier … Si votre site est récent, on peut essayer ça. Mais ça va nécessiter de mettre les mains dans le cambouis, avec accès au FTP, modification du .htaccess, création d’un sous-domaine chez votre hébergeur, etc …

    #2441374
    condonjef1943
    Participant
    Initié WordPress
    37 contributions

    Bonjour

    La suppression de l’animation est évidente, elle n’a plus sa raison d’être.

    Garder la maquette avec le menu ne pose pas de pb

    J’avais fait un essai en incluant le code html, la page s’affichait correctement, sauf que l’animation

    ne se jouait pas, je pense parce que les chemins des fichiers étaient mauvais

    ./script.js. et ./ style.css

    Je ne connais pas l’extension landind page

    La dernière solution me parait bien compliquée

    merci pour votre recherche

    Belle journée

    #2441415
    Flobogo
    Modérateur
    Maître WordPress
    19069 contributions

    Bon, grâce @ferman, un ami qui nous veut du bien, nous avons trouvé une solution assez simple.

    Il vous suffira de tout placer, y compris le JS, dans une nouvelle page, que vous pourrez ensuite désigner comme page d’accueil. Le CSS trouvera sa place soit dans l’onglet « CSS personnalisé » de l’outil de personnalisation du thème (version la + rapide), soit dans un thème-enfant que vous pourriez créer facilement (extension Child Theme Configurator). Il faut juste « supprimer » le début du fichier HTML qui comporte l’en-tête.

    Vous pouvez par exemple tester ça dans une nouvelle page, avec le bloc HTML de l’éditeur (ou en mode Text si vous utilisez l’ancien éditeur) :

    <!-- partial:index.partial.html -->
    <div class="title">
    <h3>JEF</h3>
    <h1>CONDON</h1>
    </div>

    <div class="more-pens">
    <a target="_blank" href="https://jefcondon.fr/" class="white-mode bouton-peintures">PEINTURES - CERAMIQUES - SULPTURES</a>
    <p class="minispace">
    <a target="_blank" href="" class="white-mode bouton-compo">COMPOSITIONS NUMERIQUES</a></p>
    </div>
    <!-- partial -->
    <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src="./script.js"></script>

    Bon, il manque l’animation, mais si vous savez utilisez le FTP, on va le mettre dans votre install et l’appeler avec le lien complet (comme le fichier du site jquery.com). C’est juste pour que vous commenciez à avancer.

    Et dans le CSS personnalisé de l’éditeur de code, collez ce qui se trouve ci-dessous (j’ai apporté quelques modifs) :

    @import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600");
    .more-pens {
    z-index: 10;
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translateX(-50%) translateY(-50%);
    font-family: "Montserrat";
    text-align: center;
    width: 100%;
    }


    a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active {
    font-family: "Montserrat";
    font-size: 20px;
    text-decoration: none;
    background: #212121;
    padding: 4px 8px;
    color: #f7f7f7;
    }
    a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover {
    background: #edf3f8;
    color: #212121;
    }

    body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #000000;

    }


    .title {
    z-index: 10;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translateX(-50%) translateY(-50%);
    font-family: "Montserrat";
    text-align: center;
    width: 100%;
    }

    .title h1 {
    position: relative;
    color: #EEEEEE;
    font-weight: 600;
    font-size: 60px;
    padding: 0 0 3em;
    margin: 20px;
    line-height: 1;
    text-shadow: 0 0 30px #000155;
    }

    .title h1 span {
    font-weight: 600;
    padding: 0;
    margin: 0;
    color: #BBB;
    }
    .title h3 {
    font-weight: 200;
    font-size: 20px;
    padding: 0;
    margin: 0;
    line-height: 1;
    color: #EEEEEE;
    letter-spacing: 2px;
    text-shadow: 0 0 30px #000155;
    }

    Si vous vous sentez d’attaque pour « bidouiller » un fichier .php reprenant le code du template page.php de votre thème, vous pourrez même définir un « template-vide » sans header ni footer. Peut-être même que votre thème en fournit un  ?

    #2441460
    condonjef1943
    Participant
    Initié WordPress
    37 contributions

    Merci d’avoir distrait de votre temps pour moi

    J’ai installé local, j’ai fait une sauvegarde de mon site que j’ai restauré sur un NAS.

    J’ai restauré cette sauvegarde.
    Mon site est maintenant cloné, je vais pouvoir essayer les conseils que vous m’avez prodigués.
    Je vous en remercie, y compris @ferman

    Je vous tiens  au courant

    • Cette réponse a été modifiée le il y a 5 jours et 17 heures par Flobogo. Raison: suppression du code inutile
15 sujets de 1 à 15 (sur un total de 37)
  • Vous devez être connecté pour répondre à ce sujet.