web-dev-qa-db-ja.com

すべてのJSファイルを一番下に移動|フッター、正しい方法

サイトの読み込みを高速化し、スクリプトがページをレンダリングしないようにするために、すべての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

更新

@ 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(); ?>

これらに関する私の質問には次のものがあります（私はテーマの開発者ではありませんが、これを修正できると確信しています）：テーマを壊さずにパフォーマンスとページの高速化を念頭に置いてロードする正しい方法は何ですか？

javascriptwp-enqueue-scriptwp-enqueue-stylefooterwp-head
1
ReynierPM

私見ですが、スクリプトとスタイルをヘッダーに直接読み込むのは悪い習慣だと思います。それは、それらを削除して条件付きで読み込むことが常に問題だからです。

これを回避する最良の方法は、[子テーマ]を作成してからheader.phpを子テーマにコピーすることです。 Wordpressは、親テーマのヘッダーではなく、子テーマのヘッダーをロードします。

これで、ヘッダーからすべてのスクリプトを削除し、子テーマwp_enqueue_scriptsの functions.php フックを使用して適切にエンキューおよび登録できます。 wp_enqueue_script() および wp_register_script() 関数の$in_footerパラメーターを「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
}

親テーマにjsフォルダーを残すため、ここではget_template_directory_uri()を使用していることに注意してください。ただし、jsフォルダーを子テーマに移動することはできますが、get_stylesheet_directory_uri()を使用する必要があります

条件付きスクリプトに関する注意事項

提起されてから4年たっても、スタイルのように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と7をまだサポートしているのであれば、ずっと前に負けていた戦いと戦っています。すべての主要なソフトウェア開発者はIE6（これにはWordpressを含む）をドロップし、IE7はMicrosoft自身によってドロップされたため、ソフトウェア開発者はすぐに追随し、IE 8は2016年のIMHOの終わりを迎えません

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

これが、子テーマheader.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">
3
Pieter Goosen