控制台错误，即使一切都正常？

Question

当我访问管理页面时，我在我的控制台中得到了这个错误：

GET https://example/test/wp-content/plugins/home/account/public_html/wp-content/themes/mytheme-theme/inc/custom-script.js?ver=4.9.4 net::ERR_ABORTED

我在下面的代码中找到了错误：

function theme_add_color_picker( $hook ) {

if( is_admin() ) {

    wp_enqueue_style( 'wp-color-picker' );

    wp_enqueue_script( 'custom-script-handle', plugins_url( 'custom-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );

    wp_enqueue_script( 'admin-color-picker', get_template_directory_uri() . '/javascripts/admin/admin-color-picker.js', array( 'jquery' ) );

}
}

这里的问题是自定义脚本is在/inc文件夹中不可用，在主题文件夹中也没有。但是颜色选择器工作得很好。如果我去掉这一行：

wp_enqueue_script( 'custom-script-handle', plugins_url( 'custom-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );

它就不会一起工作了。那么，我怎么会得到这个错误，但它仍然有效？

希望有一个干净的控制台日志。

编辑：

我改了这个：

wp_enqueue_script( 'wp-color-picker' );

我知道这个错误：

Uncaught TypeError: $(...).wpColorPicker is not a function
at HTMLDocument. (admin-color-picker.js?ver=4.9.4:3)
at i (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,thickbox&ver=4.9.4:2)
at Object.fireWith [as resolveWith] (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,thickbox&ver=4.9.4:2)
at Function.ready (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,thickbox&ver=4.9.4:2)
at HTMLDocument.K (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,thickbox&ver=4.9.4:2)

Answer 1

颜色选择器工作正常，因为它是一个单独的脚本，作为custom-script-handle的依赖项被排队。因此，即使custom-script-handle没有因为URL错误而加载，颜色选择器脚本仍然会加载。

如果不对custom-script-handle进行排队，则颜色选择器将无法工作，因为脚本正在排队。您将需要使用wp_enqueue_script( 'wp-color-picker' );单独对其进行排队。

custom-script-handle本身没有加载，并导致您看到的控制台错误的原因，是因为URL错误。URL错误的原因是您使用的plugins_url()不正确。特别是如何使用__FILE__。

在文献资料中，plugins_url()的第二个参数是：

插件或中文件的完整路径。URL将相对于其目录。通常，这是通过传递__FILE__作为参数来完成的。

问题是，在您的例子中，__FILE__是在主题内的。所以你的__FILE__是：

/home/account/public_html/wp-content/themes/mytheme-theme/inc/{whatever-the-file-name-is}.php

但是插件目录是：

/home/account/public_html/wp-content/plugins

WordPress已经知道插件文件夹https://example/test/wp-content/plugins/的URL，但是需要使用这两条路径来计算出您请求的特定文件的URL。因此，plugins_url()所做的就是试图通过从第一条路径中减去第二条路径来找出插件文件夹。

因此，如果正确使用，__FILE__将类似于：

/home/account/public_html/wp-content/plugins/my-plugin/inc/assets.php

然后将插件路径从其中减去，您将得到：

my-plugin/inc/assets.php

然后，plugins_url()取下文件名：

my-plugin/inc

然后添加在第一个参数(custom-script.js)中提供的文件名：

/my-plugin/inc/custom-script.js

最后，将其添加到插件URL中：

http://example.com/wp-content/plugins/my-plugin/inc/custom-script.js

但是由于您的__FILE__不在插件文件夹中，所以没有重叠。因此，当它减去插件目录和文件名时，相对路径仍然是：

/home/account/public_html/wp-content/themes/mytheme-theme/inc/

然后，将文件名添加到插件URL中，您将得到以下结果：

https://example.com/wp-content/plugins/home/account/public_html/wp-content/themes/mytheme-theme/inc/custom-script.js

因此，如果您需要您的主题来对custom-script.js进行队列，您要么需要将其放入主题中，要么使用插件已经为其注册的句柄对其进行排队。不要直接从主题中尝试从插件加载文件。