使用jquery ui小部件需要几个步骤。

您需要为小部件添加适当的标记。我将以滑块为例。我刚刚创建了一个新页面，并在WordPress admin的文本编辑器中添加了以下标记：

    <div id="sample-theme-slider"></div>

您必须具有初始化逻辑才能呈现小部件。每个小部件都有不同的配置选项和语法，因此请参阅jquery-ui docs 获取要添加的小部件类型的正确代码注意小部件所需的任何依赖项

EDIT:

这是的初始化代码slider widget:

    $( "#sample-theme-slider" ).slider();

因此，您应该创建一个JS文件。我将把我的放在示例主题的js文件夹中，并称之为示例主题滑块。js。在WordPress中，jquery是以noConflict模式加载的，因此您不能只使用$而必须键入jquery，或者向上面的代码添加包装器。考虑到这一点，这是我的sample-theme/sample-theme-slider.js 看起来像：

( function( $ ) {
    $( "#sample-theme-slider" ).slider();
} )( jQuery );

现在，我们需要将脚本和样式排队，以便jquery ui小部件工作。这个示例将保持简单，并使用过程化PHP，但欢迎您根据需要实现它。让我们先创建我们需要做的事情的框架。我喜欢分别为脚本、样式和排队创建方法，以便在返回时让事情更干净一些：

function sample_theme_scripts() {
    // ...
}

function sample_theme_styles() {
    // ...
}

function sample_theme_enqueue() {
    sample_theme_scripts();
    sample_theme_styles();
}

add_action( \'wp_enqueue_scripts\', \'sample_theme_enqueue\' );

从脚本开始，我们需要添加js/sample-theme-slider.js 我们之前创建的文件。

您需要将脚本句柄注册到wp_register_script(), 我们将其称为示例主题滑块。通常，一个好的做法是按照主题的命名约定命名句柄，并命名文件以匹配句柄。您可以看到开发人员文档中列出的参数，您在问题中放置的代码顺序不正确wp_enqueue_script():

    function sample_theme_scripts() {
        // Your script\'s handle.
        $handle = \'sample-theme-slider\';
        // Path to the script to enqueue.
        $src = get_theme_file_uri( "js/{$handle}.js" );
        // Required dependencies.
        $deps = array( \'jquery\', \'jquery-ui-slider\' );
        // Your script\'s version.
        $ver = \'1.0.0\';
        // Add the script to the footer.
        $in_footer = true;
        // Register the script handle.
        wp_register_script( $handle, $src, $deps, $ver, $in_footer );
        // Enqueue your script by handle.
        wp_enqueue_script( $handle );
    }

您会注意到，在$deps数组中，我列出了脚本工作所需的依赖项，即jquery ui滑块脚本。要使任何其他jquery ui小部件在脚本中工作，只需通过脚本句柄将它们添加到数组中即可。

现在，如果您访问您的页面，您将看到标记被jquery ui滑块修改，所有内容都完全就绪，只是您实际上什么都看不到。这是因为jquery ui主题尚未加载
WordPress doesn\'t include the theme by default, 但您可以加载自己的，也可以从CDN中提取。

我们将采用与sample\\u theme\\u scripts（）中相同的方法，首先将样式表的句柄注册为wp_register_style() 然后使用wp_enqueue_style() 在我们的注册手柄上。我通常使用CDN路由，因为为常用的LIB缓存文件是一种好处，但也有很好的理由将其包括在本地。

当我们用wp\\u register\\u style（）注册样式时，我们会告诉它要添加到页面的文件的路径。它基本上相当于在HTML中链接样式表。要使用像Google这样的CDN，我们需要查找要包含的库(jquery-ui cdn). 您会注意到各种版本的CSS的链接的格式如下：

https://ajax.googleapis.com/ajax/libs/jqueryui/X.X.X/themes/smoothness/jquery-ui.css

哪里X.X.X 是，是版本号。由于我们正在从WordPress core加载jquery ui的JS，因此您需要获得匹配的版本号。这可以通过检查PHP中的$wp\\u scripts全局变量轻松完成。注册脚本时，我们可以选择指定$ver作为参数，WordPress core会为jquery ui指定该参数。

如果你要这么做var_dump( $wp_scripts ); 在PHP中，您将看到列出的jquery ui核心，您将看到可以通过以下方式访问$wp\\u scripts对象的注册脚本的版本号：

$wp_scripts->registered[\'jquery-ui-core\']->ver

如果我们在使用CDN时将其用于排队样式方法，我们可以确保当WordPress Core更新其依赖项时，我们不必担心更新版本号或为旧/新的WordPress版本添加条件（当然，除非脚本从Core中删除）。因此，要构建一个适用于CDN的路径，我们只需要获得该版本号，这样链接样式表的URL就正确了：

 http://ajax.googleapis.com/ajax/libs/jqueryui/{$wp_scripts->registered[\'jquery-ui-core\']->ver}/themes/smoothness/jquery-ui.css

将其付诸实践，我们将使示例\\u theme\\u styles（）方法如下所示：

    function sample_theme_styles() {
        // Access the wp_scripts global to get the jquery-ui-core version used.
        global $wp_scripts;
        // Create a handle for the jquery-ui-core css.
        $handle = \'jquery-ui\';
        // Path to stylesheet, based on the jquery-ui-core version used in core.
        $src = "http://ajax.googleapis.com/ajax/libs/jqueryui/{$wp_scripts->registered[\'jquery-ui-core\']->ver}/themes/smoothness/{$handle}.css";
        // Required dependencies
        $deps = array();
        // Add stylesheet version.
        $ver = $wp_scripts->registered[\'jquery-ui-core\']->ver};
        // Register the stylesheet handle.
        wp_register_style( $handle, $src, $deps, $ver );
        // Enqueue the style.
        wp_enqueue_style( \'jquery-ui\' );
    }

最后一步，您可能想在滑块中添加自己的样式，以匹配主题的外观和感觉。我通常添加样式表句柄\'jquery-ui\' 当主样式表排队时，我们对其依赖项数组进行了修改。这样我就知道这些样式是先加载的，而我对重写的特殊性并没有超出需要。我不知道你是怎么把你的主要风格排成队的。css-但您只想在主题中找到它并添加依赖项！

所以所有的东西都是这样的：

sample-theme/js/sample-theme-slider.js:

( function( $ ) {
    $( "#sample-theme-slider" ).slider();
} )( jQuery );

sample-theme/functions.php:

// Register and enqueue scripts.
function sample_theme_scripts() {
    // Your script\'s handle.
    $handle = \'sample-theme-slider\';
    // Path to the script to enqueue.
    $src = get_theme_file_uri( "js/{$handle}.js" );
    // Required dependencies.
    $deps = array( \'jquery\', \'jquery-ui-core\', \'jquery-ui-slider\' );
    // Your script\'s version.
    $ver = \'1.0.0\';
    // Add the script to the footer.
    $in_footer = true;
    // Register the script handle.
    wp_register_script( $handle, $src, $deps, $ver, $in_footer );
    // Enqueue your script by handle.
    wp_enqueue_script( $handle );
}

// Register and enqueue styles.
function sample_theme_styles() {
    // Access the wp_scripts global to get the jquery-ui-core version used.
    global $wp_scripts;
    // Create a handle for the jquery-ui-core css.
    $handle = \'jquery-ui\';
    // Path to stylesheet, based on the jquery-ui-core version used in core.
    $src = "http://ajax.googleapis.com/ajax/libs/jqueryui/{$wp_scripts->registered[\'jquery-ui-core\']->ver}/themes/smoothness/{$handle}.css";
    // Required dependencies
    $deps = array();
    // Add stylesheet version.
    $ver = $wp_scripts->registered[\'jquery-ui-core\']->ver;
    // Register the stylesheet handle.
    wp_register_style( $handle, $src, $deps, $ver );
    // Enqueue the style.
    wp_enqueue_style( \'jquery-ui\' );
    wp_enqueue_style( \'sample-theme-style\', get_stylesheet_uri(), array( \'jquery-ui\' ), \'1.0.0\' );
}

// Enqueue required scripts and styles.
function sample_theme_enqueue() {
    sample_theme_scripts();
    sample_theme_styles();
}

add_action( \'wp_enqueue_scripts\', \'sample_theme_enqueue\' );