webentwicklung-frage-antwort-db.com.de

Verschieben Sie alle JS-Dateien in die untere | Fußzeile, und zwar auf die richtige Weise

Um das Laden meiner Site zu beschleunigen und zu verhindern, dass Skripte die Seite rendern, versuche ich, alle möglichen Skripte (dh JS-Dateien) von headnach zu verschieben footername__. Nach dem Lesen und Recherchieren habe ich diesen Code erstellt:

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');

Aber es funktioniert nicht, da einige Skripte immer noch unter headgeladen sind. Siehe die Ausgabe unten:

<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>
...

Gibt es eine Problemumgehung zu diesem Thema? Live-Site für Testzwecke ist hier

Update

Nach @ Milo Tipp habe ich festgestellt, dass Skripte, wie er sagte, in der header.php -Datei nicht richtig in das Thema eingereiht sind, da ich dies sehen kann:

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

Meine Frage dazu ist (ich bin nicht der Entwickler des Themas, aber ich bin mir ziemlich sicher, dass dies behoben werden kann): Was ist der richtige Weg, um sie zu laden, ohne das Thema zu unterbrechen und Leistung und Seitengeschwindigkeit im Auge zu behalten?

1
ReynierPM

IMHO, ich denke immer noch, dass das Laden von Skripten und Stilen direkt in den Header eine schlechte Praxis ist, da es immer ein Problem ist, sie zu entfernen und sie coditional zu laden.

Die beste Möglichkeit, dies zu umgehen, besteht darin, ein [untergeordnetes Thema] zu erstellen und dann _header.php_ in Ihr untergeordnetes Thema zu kopieren. Wordpress lädt den Header Ihres untergeordneten Themas anstelle des Headers des übergeordneten Themas.

Sie können jetzt alle Skripte aus Ihrem Header löschen und sie ordnungsgemäß in die Warteschlange stellen und über den Haken wp_enqueue_scripts in Ihrem untergeordneten Thema _functions.php_ registrieren. Denken Sie daran, den Parameter _$in_footer_ in den Funktionen wp_enqueue_script() und wp_register_script() auf true zu setzen

BEARBEITEN

In Ihrem verknüpft _header.php_ werden Ihre Skripte zwischen den Zeilen 56 - 95 eingefügt. Dies müssen Sie löschen. Wenn Sie die Site besuchen, wird keine Abfrage geladen.

Die in jquery eingebaute Bibliothek wird bereits geladen, darüber müssen Sie sich keine Gedanken machen. Den Rest brauchst du, um dich zu stärken. Hier ist ein Beispiel ( Denken Sie daran, dass jedes Skript ein eindeutiges Handle haben sollte. Benennen Sie sie also mit einem eindeutigen Namen, der keinen Konflikt erzeugt .

_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
}
_

Beachten Sie, dass ich hier get_template_directory_uri() verwendet habe, da Sie Ihren js-Ordner in Ihrem übergeordneten Design verlassen. Sie können jedoch Ihren js-Ordner in Ihr untergeordnetes Thema verschieben, müssen dann jedoch get_stylesheet_directory_uri() verwenden.

ANMERKUNGEN ZU DEN BEDINGUNGEN

Nach vier Jahren gibt es immer noch keine Möglichkeit, Skripte gemäß dem Browser IE bedingt zu laden, wie dies für Stile der Fall ist. Sie können sich das Trac-Ticket und eine andere Frage ansehen, die das gleiche Problem aufwirft hier

Ich habe noch nie versucht, Skripte abhängig vom Browser zu laden. Daher kann ich diesen Abschnitt nicht kommentieren oder angeben, ob eine Lösung funktioniert, die in der verknüpften Antwort oder im Trac-Ticket aufgeführt ist. Was ich Ihnen sagen kann, wenn die Lösungen nicht funktionieren, müssen Sie _footer.php_ in Ihr untergeordnetes Thema kopieren und dann die Zeilen 61 bis 66 von Ihrer Kopfzeile in Ihre Fußzeile verschieben

HINWEISE ZU DEN SCRIPT-LINIEN 67 -69

Dieser Abschnitt übergibt eine PHP-Variable an jquery. Der richtige Weg, dies zu tun, ist wp_localize_script() . Sie müssen sich hier an den Entwickler wenden, um Unterstützung zu erhalten, da dies offen gesagt themenbezogen ist und ich nicht wirklich weiß, wo dies tatsächlich in Ihren Skripten verwendet wird. Überprüfen Sie den Link auch für die Verwendung und Informationen

ANMERKUNGEN ZU DEN ANALYTICS SCRIPT LINES 75 - 94

Sie müssen eine js-Datei für diesen Abschnitt erstellen. Wenn Sie den Ordner js nicht vom übergeordneten in das untergeordnete Thema kopiert haben, erstellen Sie einen neuen Ordner js für das untergeordnete Thema. Öffnen Sie es und erstellen Sie eine neue js-Datei. Nennen Sie sie so, wie Sie möchten, etwa _analytics.script.js_.

Als nächstes werden Sie alles in den Skript-Tags in diesen Ordner verschieben, dies sind die Zeilen 77 - 92. Verwenden Sie unbedingt den No Conflict Wrapper, um dieses Skript wie beschrieben einzuschließen hier

Sie können dieses Skript einfach wie oben beschrieben in die Warteschlange stellen. Denken Sie jedoch daran, get_stylesheet_directory_uri() und nicht get_template_directory_uri() zu verwenden.

BEARBEITEN 2

Der Patch aus der verlinkten Antwort unter NOTES ON THE CONDITIONAL SCRIPTS funktioniert nicht, ist noch nicht implementiert und wird es, wie ich in den Kommentaren sagte, höchstwahrscheinlich in 100 Jahren nicht mehr in Version 10 enthalten sein :-). Leider müssen Sie damit leben, es gibt derzeit einfach keine Möglichkeit, dies zu erreichen. Dies ist wirklich der Nachteil für die Unterstützung von IE6 - 8. Nun, um ehrlich zu sein, wenn Sie immer noch IE6 und 7 unterstützen, führen Sie einen Kampf, der vor langer Zeit verloren gegangen ist. Alle großen Softwareentwickler haben IE6 fallen gelassen (dies schließt Wordpress ein), IE7 wurde von Microsoft selbst fallen gelassen, daher werden Softwareentwickler bald folgen, und IE 8 wird Ende 2016 IMHO nicht mehr zu sehen sein

Um dieses Kompatibilitätsproblem mit jquery zu lösen, ist es möglicherweise besser, sich an das zu halten, was das Thema selbst bietet

Sie können so etwas versuchen

_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);

}
_

Wie ich bereits sagte, gibt es eine PHP-Variable, die an ein Skript übergeben wird, über das Sie mit dem Autor des Themas sprechen sollten. Außerdem sollten alle Kompatibilitätsprobleme mit den Autoren besprochen werden. Dies ist das richtige Layout und sollte theoretisch funktionieren. Bei anderen Themen- und Kompatibilitätsproblemen wenden Sie sich bitte an den Autor des Themas

EDIT 3

So sollte Ihr untergeordnetes Theme header.php aussehen

_<!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