[Résolu] intégrer un fichier CSS et un fichier JS externes (Créer un compte)

  • WordPress :6.4
  • Statut : résolu
  • Ce sujet contient 5 réponses, 2 participants et a été mis à jour pour la dernière fois par laurentsc, le il y a 1 mois.
6 sujets de 1 à 6 (sur un total de 6)
  • Auteur
    Messages
  • #2471511
    laurentsc
    Participant
    Chevalier WordPress
    339 contributions

    Bonjour,

    j’ai développé une page autonome que je souhaite maintenant intégrer dans un site wordpress. Cette page fait appel à des ressources externes :

     <link href="stylenosmoking.css" rel="stylesheet">

    et

    <script src="scriptnosmoking.js"></script>

    peut-on faire cela dans wordpress et comment ?

    #2471515
    Rock4Temps
    Participant
    Maître WordPress
    1033 contributions

    Bonjour,

    Pour charger Les scripts vous pouvez entrer ce code:

    // chargement des scripts JS & CSS 
    function load_nosmoking_script() {

    // Pour la page d'ID = 12
    if ( is_page(12) ) {

    ?>
    <script src="scriptnosmoking.js"></script>


    <link
    rel="stylesheet"
    href="stylenosmoking.css"
    />
    <?php

    }

    }


    add_action('wp_head','load_nosmoking_script');

     

    #2471519
    laurentsc
    Participant
    Chevalier WordPress
    339 contributions

    Merci pour la réponse. 2 questions :

    1- Le code ne sera appliqué qu’à la page d’ID 12. Comment connaître l’ID de la page ?

    2- Les 2 fichiers (CSS et JS), il faut bien les uploader. Comment fait-on ? Et pour que le code fonctionne, il faudra bien ajouter le chemin des 2 fichiers car mon code suppose qu’ils sont dans le même répertoire que la page, ce qui ne sera pas le cas.

    #2471550
    Rock4Temps
    Participant
    Maître WordPress
    1033 contributions

    1- Lorsque vous editer la page en back office
    dans l’url  vous avez l’ID de noté comme par ex ici ID = 1638:
    wp-admin/post.php?post=1638&action=edit

    2- Vous parliez de ressource externe donc je supposais
    que c’était des styles & JS via un CDN dont il fallait renseigner
    l’URL comme par exemple dans le code ci-dessous pour la
    librairie SWIPER qui permet  d’établir un SLIDER

    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

    Si vous devez incoporer des fichiers de scripts CSS & JS  il vaudrait peut être mieux
    les mettre dans un dossier d’un thème enfant.
    dans ce theme enfant, créer deux dossier css & js
    ave cleur fichier respectif puis entrer le code suivant
    dans le fichier functions.php de votre thème enfant:

    add_action( 'wp_enqueue_scripts', 'my_css_enqueue_styles' );
    function my_css_enqueue_styles() {
    wp_enqueue_style( 'nosmoking-style',get_stylesheet_directory_uri() . 'css/stylenosmoking.css',array(),'1.0' );
    }

    add_action('wp_enqueue_scripts', 'enqueue_nosmoking_script');
    function enqueue_nosmoking_script() {

    // wp_enqueue_script : met en file d'attente notre script
    // paramètre: handle,URL script, dépendance, Version , True: script inséré dans le footer
    wp_enqueue_script( 'nosmoking-script-js', get_stylesheet_directory_uri() . 'js/scriptnosmoking.js', array( 'jquery' ), false, true );

    }

     

    #2471552
    laurentsc
    Participant
    Chevalier WordPress
    339 contributions

    Merci, j’ai parfaitement compris

    #2471555
    laurentsc
    Participant
    Chevalier WordPress
    339 contributions

    Je viens de décocher « résolu » car y a un truc que je ne vois pas : « Lorsque vous editer la page en back office » . Ça veut dire quoi éditer la page en back office ?

    oups, j’ai compris.

    • Cette réponse a été modifiée le il y a 1 mois par laurentsc.
    • Cette réponse a été modifiée le il y a 1 mois par laurentsc.
6 sujets de 1 à 6 (sur un total de 6)
  • Vous devez être connecté pour répondre à ce sujet.