如何在wordpress主题中正确包含jquery ui滑块？

Question

我正在尝试包括jquery ui滑块到wordpress divi主题项目。但是滑块不工作。我不确定，也许我没有包括css或其他东西。但是我想直接从Wordpress中包含jquery ui，而不是从外部文件。那么，如何在wordpress divi主题中包含并进一步使用jquery ui滑块呢？

<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' );

Answer 1

实际上，这些是jQuery UI滑块的基本文件

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“

参考：https://www.javatpoint.com/jquery-ui-slider

然后下载并创建将js文件保存到js文件夹，将css文件保存到子主题的css文件夹( wp-content/themes/ child - theme -name/js和wp-content/themes/child- to name/css)

在functions.php (您的子主题)中

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' );

您可以下载并使用兼容的jQuery UI包。