web-dev-qa-db-fra.com

Comment ajouter une page en utilisant HTML, CSS et JS?

J'ai donc un client qui veut un petit extra qui dépasse les capacités de mon thème wordpress que j'ai acheté. Je sais par le biais de HTML, CSS et JS que je peux le créer à partir de zéro (ils veulent des animations et une page d'atterrissage soignée). Je me demandais s'il y avait un moyen ou des plugins que je peux utiliser pour créer directement une page en utilisant tout le code. Désolé si je n'explique pas bien ma question!

pluginscsshtml
1
Lewis

Vous pouvez créer des modèles personnalisés dans WordPress en définissant le nom du modèle en haut du modèle. Ceci est un modèle de base qui devrait vous aider à démarrer. Vous pouvez enregistrer votre modèle avec un nom de fichier tel que tmp-mycustomname.php et le placer dans votre thème. Vous devriez probablement créer un thème enfant dans lequel vous pouvez enregistrer ce modèle personnalisé et ajouter du CSS supplémentaire sans le perdre si le client met à jour le thème.

<?php
/*
* Template Name: Template name goes here
*/
?>
<?php get_header(); ?>
<div class="row">
  <div class="col-md-12">

    Your content can go here.

    <script> alert ("my javascript is working"); </script>

  </div>
</div>
<?php get_footer(); ?>

Une fois votre modèle créé, allez aux pages> Ajouter un nouveau. Ensuite, vous devriez voir quelque chose comme ceci où vous pouvez trouver le modèle personnalisé dans la liste déroulante.

 page template 

Liens utiles:

https://codex.wordpress.org/Child_Themes

https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/

0
JediTricks007

Vous pouvez suivre la manière indiquée par JediTricks007. Mais si vous voulez des fichiers css et js complètement différents pour votre page de destination et ne souhaitez pas inclure les thèmes wordpress header et footer, vous pouvez le faire en n'incluant ni l'en-tête ni le pied.

  1. Créer un thème enfant à l'aide du plug-in "Configurateur de thème enfant"
  2. Dans le dossier du thème enfant, créez ce fichier "myCustomTemplate.php".
<?php
    /*
    * Template Name: Your Template Name
    */
?>
<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=Edge">
        <title>Your Title</title>
        <meta name="description" content="Your Description">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="Apple-touch-icon" href="Apple-touch-icon.png">
        <!-- Add your own desired css independent to wordpress theme -->
        <link rel="stylesheet" href="<?= get_stylesheet_directory_uri();?>/css/normalize.css">
        <link rel="stylesheet" href="<?= get_stylesheet_directory_uri();?>/css/main.css">
        <!-- Add your own desired js independent to wordpress theme -->
        <script src="<?= get_stylesheet_directory_uri();?>/js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>

        <!-- Add your site or application content here -->
        <p>Hello world! This is HTML5 Boilerplate.</p>
        <!-- Add your own desired css independent to wordpress theme -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/{{JQUERY_VERSION}}/jquery.min.js"></script>
        <script src="<?= get_stylesheet_directory_uri();?>/js/plugins.js"></script>
        <script src="<?= get_stylesheet_directory_uri();?>/js/main.js"></script>
    </body>
</html>
  1. Créez un lien vers vos sources en utilisant <?= get_stylesheet_directory_uri();?>/ pour établir un lien vers le dossier du thème enfant.

De cette façon, vous pouvez réaliser ce que vous voulez sans changer les fichiers d'en-tête et de pied de page des thèmes.

Après avoir enregistré le fichier de modèle, vous pouvez créer une page avec ce modèle et faire de cette page votre page d'accueil.

J'espère que cela pourra aider.

0
Hasan Sumon