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

Question

我在尝试在WordPress中使用JavaScript代码上传文件（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页面看起来像：

你可以看到，一个带有文字的按钮＆＃34; Examinar ......＆＃34;在＆＃34;浏览＆＃34;下方显得非常低调。按钮。

但是，如果我将以下代码直接粘贴到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和样式的第一种方式。

有人可以告诉我发生了什么，以及如何获得正确的外观（删除uggly＆＃34; Examinar＆＃34;按钮）？

非常感谢。

Answer 1

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

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

您可以使用这些ID（没有-css或-js部分）通过在{的依赖关系数组（$ deps）中传递id来修改加载样式或脚本的顺序{1}}或wp_enqueue_script。

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

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

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

Answer 2

感谢Andrei的评论，我找到了答案

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

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

再见，圣诞快乐!!