Comment inclure correctement le curseur jquery ui dans le thème wordpress?

J’essaie d’inclure le curseur jquery ui dans le projet de thème wordpress divi. Mais le curseur ne fonctionne pas. Je ne suis pas sûr, peut-être que je n’inclus pas CSS ou quelque chose comme ça. Mais je voudrais inclure jquery ui directement depuis WordPress, pas depuis un fichier externe. Alors, comment inclure et utiliser davantage le curseur jquery ui dans le thème wordpress divi ?

<div id="slider1" class="uiSlider">
    <div id="custom-handle1" class="ui-slider-handle"></div>
</div>
<script>
var handle1 = jQuery( "#custom-handle1" );

  jQuery(function($){
    jQuery("#slider1" ).slider({
      orientation: "horizontal",
      range: "min",
      min: 10,
      max: 100,
      step: 5,
        create: function() {
          handle1.text( jQuery( this ).slider( "value" ) );
            console.log('a');
      },
      slide: function( event, ui ) {
        console.log('c');
          handle1.html( ui.value );
      },
      change: function( event, ui) {
                console.log('b');
      }
  });
  });
</script>



function add_jquery_ui(){
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-slider');
}

add_action( 'wp_enqueue_scripts', 'add_jquery_ui' );

Solution n°1 trouvée

En fait, ce sont les fichiers de base pour jQuery UI Slider

css – https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css
js – https://code.jquery.com/ui/1.10.4/jquery-ui .js »

Pour référence : https://www.javatpoint.com/jquery-ui-slider

Ensuite, téléchargez et créez des fichiers de sauvegarde js dans le dossier js et le fichier css dans le dossier css du thème enfant ( wp-content/themes/child-theme-name/js et wp-content/themes/child-theme-name/css )

Dans le functions.php (Votre thème enfant)

function add_jquery_ui(){

// add jquery file if you required like following

wp_enqueue_script( 'jquery-ui-js', get_stylesheet_directory_uri() .'/js/jquery-ui.js', array(), '', true );

// add css files

wp_enqueue_style( 'jquery-ui-css', get_stylesheet_directory_uri() .'/css/jquery-ui.css', array(), '', 'all' );
}

add_action( 'wp_enqueue_scripts', 'add_jquery_ui' );

Vous pouvez télécharger et utiliser votre package jQuery UI compatible.