WordPress wp_enque_style 与 <link href=...> 不同的行为

Question

我在尝试使用 JavaScript 代码在 WordPress 中上传文件 (http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/) 时遇到问题。

按照 WordPress 的建议，我创建了一个插件，用于将 JavaScript 代码所需的脚本和样式排入队列。脚本的外观是：

function add_mini_ajax_file_upload_scrips() {
wp_enqueue_style('uploadBoxStyleFont', "http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" );
wp_enqueue_style('uploadBoxStyle', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/css/style.css" );
wp_enqueue_script('uploadBoxJquerymin', "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js");
wp_enqueue_script('uploadBoxJqueryknob', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.knob.js");
wp_enqueue_script('uploadBoxJquerywidget', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.ui.widget.js");
wp_enqueue_script('uploadBoxJqueryiframe', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.iframe-transport.js");
wp_enqueue_script('uploadBoxJqueryupload', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.fileupload.js");
wp_enqueue_script('uploadBoxScript', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/script.js");
}
add_action( 'wp_enqueue_scripts', 'add_mini_ajax_file_upload_scrips' );

以这种方式，WordPress 页面如下所示：

如您所见，“浏览”按钮下方出现一个带有“考试...”文本的按钮非常难看。

但是，如果我将以下代码直接粘贴到 WordPress 页面上：

<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />
<link href="http://localhost/wordpress/assets/MiniAJAX_FileUploader/css/style.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.knob.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.ui.widget.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.iframe-transport.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.fileupload.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/script.js"></script>

然后页面看起来：

显然，我想要第二种方式的外观，但 WordPress 推荐第一种方式来添加 JavaScript 和样式。

有人可以告诉我发生了什么，我怎样才能获得正确的外观（去掉丑陋的“考试”按钮）？

非常感谢。

Answer 1

检查脚本/样式的加载顺序。最有可能的是，它们以不同的顺序加载。

WordPress 为每个排队的样式表或脚本分配一个唯一的 ID，如 unique-id-css 或 unique-id-js。如果您查看页面源代码，您可以在生成的<link> 或<script> 标记中看到它。

您可以使用这些 id（不带 -css 或 -js 部分）通过在 wp_enqueue_script 或 @ 的依赖项数组 ($deps) 中传递 id 来修改样式或脚本的加载顺序987654328@。

您应该坚持使用 WP 方式，因为它可以避免多次加载资源，这可能导致难以跟踪的错误，尤其是对于 js 脚本。

例如，如果您直接加载它们，而另一个插件/小部件/主题脚本加载 jquery，它将在您的页面中加载两次，从而导致冲突。

另外请注意 jquery 已经由 WP 提供，您不需要从外部源加载它。只需将其指定为任何 jquery 依赖脚本的依赖项。

Answer 2

感谢安德烈的评论，我找到了答案

按照 Wordpress 的方式，我编写了使用 wp_enqueue_style 和 wp_enqueue_script 的脚本并将其与动作 wp_enqueue_scripts 挂钩。解决方案是在add_action 中引入优先级值，以强制稍后添加插件。在我的情况下，优先级 11 就足够了（默认为 10）。

add_action( 'wp_enqueue_scripts', 'add_mini_ajax_file_upload_scrips', 11 );

再见，圣诞快乐！！