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

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

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

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&amp;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>
    <!-- Metas -->
    <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 -->
    <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>

    <!-- Stylesheets & others -->
    <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">

    <!-- WP Files -->
    <?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\'><!--// <![CDATA[
                    /* [id18] Header Top */
                    OA_show(18);
                    // ]]> --></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&amp;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 我已经测试过了`

结束

相关推荐

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

根据this post Wordpress没有内置的JavaScript API。因此,想要在AJAX上构建的开发人员似乎想出了他们自己的解决方案,但我觉得这并不合适。除了使用内置API获取帖子或任何数据之外,我真正错过的是一组处理后端和前端接口的JavaScript函数。现在,关于这个问题有什么计划吗?例如,我很想知道左侧主菜单被折叠,用户登录的是哪个组,甚至是浏览器等客户端数据。