我正在为wordpress开发一个主题，并使用此功能将脚本和样式排队
function Joy_scripts() {
wp_enqueue_style( \'Joy-style\');
wp_enqueue_script( \'Joy-scripts\', get_template_directory_uri() . \'/js/scripts.js\', array( \'jquery\' ), \'1.0\', true );
if ( is_singular() && wp_attachment_is_image() ) {
wp_enqueue_script( \'Joy-keyboard-image-navigation\', get_template_directory_uri() . \'/js/keyboard-image-navigation.js\', array( \'jquery\' ), \'20120202\' );
}
if ( in_category(\'12\') ) {
wp_enqueue_script( \'Joy-jquizzy-engine\', get_template_directory_uri(). \'/js/jquery.jquizzy.js\', array( \'jquery\'), \'1.7\' );
wp_enqueue_script( \'Joy-jquizzy-init\', get_template_directory_uri(). \'/js/init.js\', array( \'jquery\'), \'1.7\' );
wp_enqueue_script( \'Joy-jquizzy-script\', get_template_directory_uri(). \'/js/jquizzy-script.js\', array( \'jquery\'), \'1.7\' );
}
}
add_action( \'wp_enqueue_scripts\', \'Joy_scripts\');
这是html输出：
</footer>
</div><!-- #page -->
<script type=\'text/javascript\' src=\'http://localhost:8888/theme/wp-includes/js/jquery/jquery.js?ver=1.8.3\'></script>
<script type=\'text/javascript\' src=\'http://localhost:8888/theme/wp-content/plugins/mailchimp-widget/js/mailchimp-widget-min.js?ver=3.5.2\'></script>
<script type=\'text/javascript\' src=\'http://localhost:8888/theme/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/mediaelement-and-player.min.js?ver=2.1.3\'> </script>
<!-- some other scripts loaded here they\'re not important for this question purposes-->
<link rel=\'stylesheet\' id=\'Joy-style-css\' href=\'http://localhost:8888/theme/wp-content/themes/Joy/style.css?ver=1.0\' type=\'text/css\' media=\'all\' />
正如您所看到的，主题样式表加载在脚本之后，并且位于文档的底部。这导致了FOUC（我在顶部添加了样式表，使用
<link rel="stylesheet" href="<?php bloginfo(\'stylesheet_url\'); ?>" type="text/css" media="all" /> 而FOUC出现了）
在Chrome控制台中，我还可以看到：Uncaught ReferenceError: jQuery is not defined localhost/:111 Uncaught TypeError: Property \'$\' of object [object Object] is not a function
jQuery在其他脚本之前正确加载，因此，我真的不明白这里发生了什么，我做错了什么吗？
我的主题基于下划线
谢谢你的帮助。
SO网友:Vigs
最好把事情分解成可管理的步骤。
打造你的风格
add_action( \'wp_enqueue_scripts\', \'Joy_styles\' );
function Joy_style(){
wp_enqueue_style( \'Joy-style\');
}
确保包含jquery。
if (!is_admin()) add_action(\'wp_enqueue_scripts\', \'kv_jquery_enqueue\', 11);
function kv_jquery_enqueue() {
wp_deregister_script(\'jquery\');
wp_register_script(\'jquery\', "http" . ($_SERVER[\'SERVER_PORT\'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
wp_enqueue_script(\'jquery\');
}
Enque您的脚本
function Joy_scripts() {
wp_enqueue_script( \'Joy-scripts\', get_template_directory_uri() . \'/js/scripts.js\', array( \'jquery\' ), \'1.0\', true );
if ( is_singular() && wp_attachment_is_image() ) {
wp_enqueue_script( \'Joy-keyboard-image-navigation\', get_template_directory_uri() . \'/js/keyboard-image-navigation.js\', array( \'jquery\' ), \'20120202\' );
}
if ( in_category(\'12\') ) {
wp_enqueue_script( \'Joy-jquizzy-engine\', get_template_directory_uri(). \'/js/jquery.jquizzy.js\', array( \'jquery\'), \'1.7\' );
wp_enqueue_script( \'Joy-jquizzy-init\', get_template_directory_uri(). \'/js/init.js\', array( \'jquery\'), \'1.7\' );
wp_enqueue_script( \'Joy-jquizzy-script\', get_template_directory_uri(). \'/js/jquizzy-script.js\', array( \'jquery\'), \'1.7\' );
}
}
add_action( \'wp_enqueue_scripts\', \'Joy_scripts\');
