以正确的方式将所有JS文件移到底部|页脚

时间：2015-02-17 作者：ReynierPM

为了加速我的站点加载并防止脚本呈现页面，我正在尝试移动所有possible 脚本（表示JS文件）head 到footer. 在阅读并进行一些研究后，我编写了以下代码：

function footer_enqueue_scripts() {
    remove_action(\'wp_head\', \'wp_print_scripts\');
    remove_action(\'wp_head\', \'wp_print_head_scripts\', 9);
    remove_action(\'wp_head\', \'wp_enqueue_scripts\', 1);
    add_action(\'wp_footer\', \'wp_print_scripts\', 5);
    add_action(\'wp_footer\', \'wp_enqueue_scripts\', 5);
    add_action(\'wp_footer\', \'wp_print_head_scripts\', 5);
}

add_action(\'after_setup_theme\', \'footer_enqueue_scripts\');

但它不起作用，因为某些脚本仍在加载head, 请参见以下输出：

<head>
<link rel="stylesheet" type="text/css" href="http://elclarin.dev/wp-content/cache/minify/000000/d4587/default.include.993ea9.css" media="all" />
<script type="text/javascript" src="http://elclarin.dev/wp-content/cache/minify/000000/d4587/default.include.0fe0ac.js"></script>
....
<!-- Metas -->
<meta charset="utf-8">

 <!-- JS Files -->
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/jquery.tools-1.2.7.min.js"></script>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/prefixfree-1.0.6.min.js"></script>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/modernizr.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/html5shiv.js"></script>
<![endif]-->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/selectivizr-1.0.2.min.js"></script>
<![endif]-->
<script type="text/javascript">
    var TEMPLATEURL = \'http://elclarin.dev/wp-content/themes/elclarin_v2\';
</script>


<!-- Generated by OpenX 2.8.9 -->
<script type=\'text/javascript\' src=\'http://openx.elclarinweb.com/www/delivery/spcjs.php?id=2&amp;target=_blank\'></script>

<!-- Analytics Files -->
<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push([\'_setAccount\', \'UA-29394358-3\']);
    _gaq.push([\'_trackPageview\']);
    _gaq.push([\'elclarin._setAccount\', \'UA-36592785-1\']);
    _gaq.push([\'elclarin._trackPageview\']);
    _gaq.push([\'elclarin._setAccount\', \'UA-49334701-1\']);
    _gaq.push([\'elclarin._trackPageview\']);

    (function () {
        var ga = document.createElement(\'script\');
        ga.type = \'text/javascript\';
        ga.async = true;
        ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\';
        var s = document.getElementsByTagName(\'script\')[0];
        s.parentNode.insertBefore(ga, s);
    })();

</script>
</head>
 ...
</footer>
    <script type=\'text/javascript\' src=\'http://elclarin.dev/wp-includes/js/admin-bar.min.js?ver=4.1\'></script>
    <script type=\'text/javascript\' src=\'http://elclarin.dev/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1\'></script>
    <script type=\'text/javascript\' src=\'http://elclarin.dev/wp-includes/js/hoverIntent.min.js?ver=r7\'></script>
...

这个主题有什么变通方法吗？测试用现场为here

Update

之后@Milo 提示：我发现他所说的脚本在中的主题中没有正确排队header.php 文件，因为我可以看到：

<!-- JS Files -->
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/jquery.tools-1.2.7.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/prefixfree-1.0.6.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/modernizr.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/html5shiv.js"></script>
<![endif]-->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/selectivizr-1.0.2.min.js"></script>
<![endif]-->
<script type="text/javascript">
    var TEMPLATEURL = \'<?php echo TEMPLATEURL; ?>\';
</script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/acciones.js"></script>

<!-- Generated by OpenX 2.8.9 -->
<script type=\'text/javascript\' src=\'http://openx.elclarinweb.com/www/delivery/spcjs.php?id=2&amp;target=_blank\'></script>

<!-- Analytics Files -->
<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push([\'_setAccount\', \'UA-29394358-3\']);
    _gaq.push([\'_trackPageview\']);
    _gaq.push([\'elclarin._setAccount\', \'UA-36592785-1\']);
    _gaq.push([\'elclarin._trackPageview\']);
    _gaq.push([\'elclarin._setAccount\', \'UA-49334701-1\']);
    _gaq.push([\'elclarin._trackPageview\']);

    (function () {
        var ga = document.createElement(\'script\');
        ga.type = \'text/javascript\';
        ga.async = true;
        ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\';
        var s = document.getElementsByTagName(\'script\')[0];
        s.parentNode.insertBefore(ga, s);
    })();

</script>
<!-- WP Files -->
<?php wp_head(); ?>

关于这些问题，我的问题包括（我不是主题的开发人员，但我很确定这是可以解决的）：在不破坏主题的情况下加载它们，并将性能和页面加速牢记在心的正确方法是什么？

2 个回复

最合适的回答,由SO网友:Pieter Goosen 整理而成

我仍然认为，直接在标题中加载脚本和样式是一种糟糕的做法，因为删除它们并按照规范加载它们总是一个问题。

解决此问题的最佳方法是创建[子主题]，然后复制header.php 到您的孩子主题。Wordpress将加载子主题的标题，而不是父主题的标题。

现在，您可以从标头中删除所有脚本，并通过wp_enqueue_scripts 加入你的孩子主题functions.php. 只需记住设置$in_footer 中的参数wp_enqueue_script() 和wp_register_script() 函数为“true”

从您的linked header.php, 脚本添加在第56-95行之间。您需要删除此项。如果您访问该站点，将不会看到正在加载任何jquery。

然后内置jquery库已经被加载，不必担心这一点。剩下的你需要自己排队。下面是一个示例（记住，每个脚本都应该有一个唯一的句柄，所以请给它们命名为不会产生冲突的唯一句柄）

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

function enqueue_my_scripts() 
{
    wp_enqueue_script(\'jquery-tools\', get_template_directory_uri() . \'/js/jquery.tools.js-1.2.7.min.js\', array(\'jquery\'), false, true);
    //Do the same for the other scripts
}

注意，我使用了get_template_directory_uri() 在这里，您将把js文件夹留在父主题中。但是，您可以将js文件夹移动到子主题，但之后需要使用get_stylesheet_directory_uri()
关于条件脚本的注释在提出四年后，仍然没有像样式那样的内置方式根据IE浏览器有条件地加载脚本。您可以查看trac记录单和提出相同问题的另一个问题here
我从未尝试根据浏览器有条件地加载脚本，因此我无法对此部分进行评论，也无法说明链接答案或trac票证中提到的任何解决方案是否有效。我可以告诉你的是，如果解决方案不起作用，你需要复制footer.php 到子主题，然后将第61-66行从页眉移到页脚
脚本第67-69行的注释本节将php变量传递给jquery。正确的方法是使用wp_localize_script(). 您需要联系这里的开发人员以获得帮助，因为这与主题相关，我真的不知道这在您的脚本中实际用于何处。查看链接了解用法和信息
在分析脚本第75-94行的注释中，您需要为本节创建一个js文件。如果尚未将js文件夹从父主题复制到子主题，请为子主题创建一个新的js文件夹。打开它，创建一个新的js文件，并随意调用它，比如analytics.script.js.
接下来，您将把脚本标记中的所有内容移动到此文件夹，这是第77-92行。请确保使用无冲突包装器按所述方式包装此脚本here
您可以像前面描述的那样将此脚本正常排队，只需记住使用get_stylesheet_directory_uri() 而不是get_template_directory_uri()
编辑2
条件脚本注释下链接答案的补丁不起作用，它尚未实施，正如我在评论中所说，它很可能在100年后不会包含在版本10中：-）。不幸的是，你需要接受这一点，目前根本没有办法做到这一点。这确实是支持IE6-8的倒退。老实说，如果您仍然支持IE6和IE7，那么您正在进行一场很久以前就失败了的战斗。所有主要软件开发商都放弃了IE6（包括Wordpress），IE7是微软自己放弃的，因此软件开发商很快就会效仿，IE 8将无法活到2016年底
为了克服jquery的兼容性问题，最好坚持主题本身提供的内容
你可以试试这样的
add_action(\'wp_enqueue_scripts\', \'enqueue_my_scripts\', PHP_INT_MAX); function enqueue_my_scripts() { /** * Make sure, get_template_directory_uri() if script stays in parent theme * Use get_stylesheet_directory_uri() if script is in child theme */ wp_enqueue_script(\'jquery-min\', get_template_directory_uri() . \'/js/jquery-1.7.2.min.js\', array(), false, true); wp_enqueue_script(\'jquery-tools\', get_template_directory_uri() . \'/js/jquery.tools.js-1.2.7.min.js\', array(\'jquery-min\'), false, true); wp_enqueue_script(\'prefixfree\', get_template_directory_uri() . \'/js/prefixfree-1.0.6.min.js\', array(), false, true); wp_enqueue_script(\'modernizr\', get_template_directory_uri() . \'/js/modernizr.js\', array(), false, true); /** * The two conditional scripts which there is no work around for, load them or drop support */ wp_enqueue_script(\'html5shiv\', get_template_directory_uri() . \'/js/html5shiv.js\', array(), false, true); wp_enqueue_script(\'selectivizr\', get_template_directory_uri() . \'/js/selectivizr-1.0.2.min.js\', array(), false, true); wp_enqueue_script(\'acciones\', get_template_directory_uri() . \'/js/acciones.js\', array(), false, true); wp_enqueue_script(\'openx\', \'http://openx.elclarinweb.com/www/delivery/spcjs.php?id=2&target=_blank\', array(), false, true); wp_enqueue_script(\'analytics\', get_stylesheet_directory_uri() . \'/js/analytics.script.js\', array(), false, true); }
如前所述，有一个php变量传递给脚本，您应该与主题作者讨论。此外，任何兼容性问题都应该和他们的作者进一步讨论。这是正确的布局，在理论上应该是可行的。有关任何其他主题相关和兼容性问题，请随时联系主题作者以获得支持
编辑3这是您的子主题标题的方式。php应该如下所示
<!DOCTYPE html> <html itemscope itemtype="http://schema.org/Blog"> <head>  <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="google-site-verification" content="V022hygXU9AHEdTBX2BFnTBYeo4SsaTjC7aGdoIMPL4"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width"> <meta name="description" content="<?php bloginfo( \'description\' ); ?>"> <?php if (is_single()) { ?> <meta property="og:title" content="<?php the_title(); ?>"/> <meta itemprop="name" content="<?php the_title(); ?>"> <meta property="og:type" content="article"/> <meta property="og:url" content="<?php the_permalink(); ?>"/> <?php if (has_post_thumbnail()) { $src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 490, 290 ), false ); ?> <meta property="og:image" content="<?php echo $src[0]; ?>"/> <meta itemprop="image" content="<?php echo $src[0]; ?>"> <?php } else { ?> <meta property="og:image" content="<?php echo TEMPLATEURL; ?>/images/logo.png"/> <meta itemprop="image" content="<?php echo TEMPLATEURL; ?>/images/logo.png"> <?php } ?> <meta property="og:site_name" content="<?php bloginfo( \'name\' ); ?>"/> <meta itemprop="description" content="<?php the_excerpt(); ?>"> <?php } ?>  <title> <?php if (isset($wp_query->query_vars[\'b\'])) { echo str_replace( "+", " ", $wp_query->query_vars[\'b\'] )." | "; } wp_title( \'|\', true, \'right\' ); bloginfo( \'name\' ); if (isset($paged) && $paged >= 2 || isset($page) && $page >= 2 || isset($page_alt) && $page_alt >= 2) { echo \' | \'.sprintf( \'Página %s\', max( $paged, $page, $page_alt ) ); } ?> </title>  <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( \'stylesheet_url\' ); ?>?version=4"/> <link rel="pingback" href="<?php bloginfo( \'pingback_url\' ); ?>"/> <link rel="alternate" type="application/rss+xml" title="RSS" href="<?php echo SITEURL; ?>/feed/"/> <link rel="alternate" type="application/atom+xml" title="Atom" href="<?php echo SITEURL; ?>/feed/atom/"/> <link rel="shortcut icon" href="<?php echo TEMPLATEURL ?>/images/favicon.ico"/> <link rel="shortcut icon" href="<?php echo TEMPLATEURL ?>/images/favicon.png"/> <link rel="apple-shortcut icon" href="<?php echo TEMPLATEURL ?>/images/favicon_iphone.png"/> <link rel="apple-touch-icon-precomposed" href="<?php echo TEMPLATEURL ?>/images/favicon_iphone.png"> <link rel="apple-touch-icon" href="<?php echo TEMPLATEURL ?>/images/favicon_iphone.png">  <?php wp_head(); ?> </head> <body> <div class="for_overlays"> <?php if (is_front_page()) { $prepost = $post; $normal_args = Array( \'post_type\' => \'portadadeldia\', \'post_status\' => \'publish\', \'posts_per_page\' => 1 ); $normal_query = new WP_Query( $normal_args ); if ($normal_query->have_posts()) { while ($normal_query->have_posts()) { $normal_query->the_post(); ?> <?php if (has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), \'full\' ); ?> <div id="portadadeldia" class="from_overlay"> <a href="<?php echo $large_image_url[0]; ?>" target="_blank"> <?php echo get_the_post_timthumbnail( $post->ID, \'portadadeldia_frontpage_overlay\', array( \'alt\' => trim( get_the_title() ), \'title\' => trim( get_the_title() ) ) ); ?> </a> </div> <?php } ?> <?php } } $post = $prepost; wp_reset_postdata(); } ?> <svg> <filter id="firefoxblur"> <feGaussianBlur stdDeviation="4"/> </filter> </svg> </div> <header> <div class="center_content"> <div id="header_publicity" class="publicity"> <span>Publicidad</span> <div> <script type=\'text/javascript\'></script> <noscript><a target=\'_blank\' href=\'http://openx.elclarinweb.com/www/delivery/ck.php?n=1073df0\'><img border=\'0\' alt=\'\' src=\'http://openx.elclarinweb.com/www/delivery/avw.php?zoneid=18&n=1073df0\'/></a> </noscript> </div> </div> <h1 id="header_logo"><a href="<?php echo SITEURL; ?>"> <?php $prepost = $post; $normal_args = Array( \'post_status\' => \'publish\', \'posts_per_page\' => 1, \'post_type\' => \'logos\', ); $normal_query = new WP_Query( $normal_args ); if ($normal_query->have_posts()) { $normal_query->the_post(); $thumbnail_id = get_post_thumbnail_id( $post->ID ); $thumbnail_object = get_post( $thumbnail_id ); $url = $thumbnail_object->guid; ?><img src="<?PHP echo $url; ?>" alt="<?php bloginfo( \'name\' ); ?>"><?php } else { ?><img src="<?PHP echo TEMPLATEURL; ?>/images/logo.png" alt="<?php bloginfo( \'name\' ); ?>"><?php } $post = $prepost; wp_reset_postdata(); ?> </a></h1> <?php custom_secondary_nav( "executive_menu", \'header_lateral_superior\', \'Menú corporativo\' ); ?> <div id="header_lateral_inferior"> <div id="header_buscador" role="search" title="Buscar"> <div id="header_buscador_inner"> <form method="get" action="<?php echo SITEURL; ?>"> Buscar <input title="Buscar" type="text" name="s" value="<?php echo str_replace( "+", " ", $wp_query->query_vars[\'s\'] ); ?>"> </form> </div> </div> <div id="header_redes"> <a href="http://twitter.com/elclarin_aragua" target="_blank"><img src="<?php echo TEMPLATEURL ?>/images/icons/tw.png"></a> <a href="<?php echo SITEURL; ?>/rss" target="_blank"><img src="<?php echo TEMPLATEURL ?>/images/icons/rs.png"></a> <a href="<?php echo SITEURL; ?>"><img src="<?php echo TEMPLATEURL ?>/images/icons/ho.png"></a> </div> </div> <div id="header_menu"> <?php wp_nav_menu( array( \'theme_location\' => \'primary\', \'menu_id\' => 3 ) ); ?> </div> </div> </header> <div role="main" id="main" class="main"> <div class="center_content">

SO网友:Hans Ganteng

我认为您的脚本是正确的，但也许您必须修复此元素
add_action(\'after_setup_theme\', \'footer_enqueue_scripts\');
更改为
add_action( \'wp_enqueue_scripts\', \'oiw_remove_head_scripts\' );
你可以找到reference here 我已经测试过了`

结束

文章导航

小码农CODE

以正确的方式将所有JS文件移到底部|页脚

脚本第67-69行的注释本节将php变量传递给jquery。正确的方法是使用`wp_localize_script()`. 您需要联系这里的开发人员以获得帮助，因为这与主题相关，我真的不知道这在您的脚本中实际用于何处。查看链接了解用法和信息

编辑2

相关推荐

有没有一个JavaScript API？如何访问JS中的公有数据和私有数据？

以正确的方式将所有JS文件移到底部|页脚

脚本第67-69行的注释本节将php变量传递给jquery。正确的方法是使用wp_localize_script(). 您需要联系这里的开发人员以获得帮助，因为这与主题相关，我真的不知道这在您的脚本中实际用于何处。查看链接了解用法和信息

编辑2

相关推荐

有没有一个JavaScript API？如何访问JS中的公有数据和私有数据？

脚本第67-69行的注释本节将php变量传递给jquery。正确的方法是使用`wp_localize_script()`. 您需要联系这里的开发人员以获得帮助，因为这与主题相关，我真的不知道这在您的脚本中实际用于何处。查看链接了解用法和信息