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

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

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.

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 année et 8 mois par Flobogo. Raison: Édit

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 …

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  ?