Wie verwende ich Head JS mit allen in die Warteschlange gestellten Skripten?

7

Ich möchte zuerst head js und dann alle in die Warteschlange gestellten Skripte in seine Funktion laden. Wie so ...

<script src=">/js/head.load.min.js" type="text/javascript" charset="UTF-8"></script>

<script type="text/javascript">
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {

   // all done

});
</script>

Wie würde ich das machen?

Für diejenigen, die HeadJS nicht kennen, ist das 2,30-KB-Skript, das Ihre Website beschleunigt, vereinfacht und modernisiert ...

http://headjs.com/

Agileapricot
quelle
Ich glaube nicht, dass du das brauchst. </body>
Legen
Wenn Sie Ihre Dateien unten platzieren, wird dies höchstwahrscheinlich zu Problemen führen, da viele Plugins Inline-Skripte in den Kopf setzen.
Backie

Antworten:

10

Sie sollten darauf hingewiesen werden, dass nicht alle Plugins / Themes die Warteschlange verwenden. Als ich anfing, mich mit allen ausgegebenen JavaScripts und CSS-Dateien zu befassen, habe ich mich einfach in die in die Warteschlange gestellten Dateien eingebunden. Dies führte dazu, dass ich nur 2 von 10 JavaScript-Dateien und 1 von 3 CSS-Dateien erhielt.

Hier sind einige schnelle PoCs. Weder getestet noch gedacht, um Sie in die richtige Richtung zu bringen, wenn Sie codieren können. Sobald ich nach Hause komme, werde ich etwas Passenderes und Funktionaleres zusammenschlagen.

add_action('wp_print_scripts','head_files');
function head_files(){

    global $wp_scripts, $auto_compress_scripts;

    print 'print out head.js';  

    $queue = $wp_scripts->queue;
        $wp_scripts->all_deps($queue);
        $to_do = $wp_scripts->to_do;
    $headArray = array();
        foreach ($to_do as $key => $handle) {
            $src = $wp_scripts->registered[$handle]->src;
        $headArray[] = $src;
    }

    print 'print out head.js("'.implode("'",$headArray.'")';
}

(Grundsätzlich wurde der größte Teil des Codes aus dem JS & CSS Script Optimizer geklaut. )

add_filter('wpsupercache_buffer', 'head_files' );
function head_files($buffer){
    if ( $fileType == "js" ){
            preg_match_all('~<script.*(type="["\']text/javascript["\'].*)?src=["\'](.*)["\'].*(type=["\']text/javascript["\'].*)?></script>~iU',$content,$matches);
            $headArray = $matches[2];
    }


    print 'print out head.js';  

    print 'print out head.js("'.implode("'",$headArray.'")';
    return $buffer;
}

Verwenden der WP Super Cache-Ausgabepufferung.

Backie
quelle
2
nett, aber er sollte dieses Plugin meiner Meinung nach anstelle von head.js verwenden. es hat die Option, alle js zu kombinieren, zu komprimieren und in der Fußzeile zu verschieben
onetrickpony
Wie bereits erwähnt, führt das automatische Verschieben von Inhalten in die Fußzeile bei der WordPress-Installation zu einem fehlerhaften Inline-JavaScript.
Backie
Ich verstehe nicht Warum sollte die Fußzeile Javascript brechen? Head.js macht hier genau das Gleiche (Laden von js nach dem Laden von DOM).
Onetrickpony
2

Folgendes versuche ich zu tun, um head.js zu integrieren:

Ich habe diesen Code in meine Vorlagendatei functions.phpeingefügt

define('THEME', get_bloginfo('template_url'), true);
define('THEME_JS', THEME . '/js/', true);

add_action('wp_print_scripts','head_js_files');
function head_js_files()
{
    if (is_admin()) return; //to preserve the admin

        global $wp_scripts;

    $in_queue = $wp_scripts->queue;

    if(!empty($in_queue))
    {
        $scripts = array();
        foreach($in_queue as $script)
        {

            $src = $wp_scripts->registered[$script]->src;
            $src = ( (preg_match('/^(http|https)\:\/\//', $src)) ? '' : get_bloginfo('url') ) . $src;
            $scripts[] = '{' . $script . ':"' . $src . '"}';
        }

        echo "<script type=\"text/javascript\" src=\"".THEME_JS."head.js\"></script>\n";
        echo "<script type=\"text/javascript\">head.js(\n". implode(",\n", $scripts). "\n);</script>\n";
    }

    $wp_scripts->queue = array();
}

Es gibt ungefähr so ​​aus:

<script type="text/javascript">head.js(
    {jquery:"/wp-includes/js/jquery/jquery.js"},
    {jquery_lastfm:"http://localhost/lucianomammino/wp-content/plugins/lastfm-recent-tracks-widget/js/jquery.lastfm.js"},
    {nav:"http://localhost/lucianomammino/wp-content/themes/lmtheme/js/jquery.dropdown.js"}
);</script>

Beachten Sie, dass auch Skriptbeschriftungen verwendet werden, die manchmal sehr nützlich sein können, um festzustellen, welche (und wann) Skripte geladen werden.

Luciano Mammino
quelle
Versuchen Sie dies mit Plugins zu testen, die wp_print_scriptsnach <head> :)
aufrufen
Welche Art von Plugins tun dies?
Luciano Mammino
Hier ist eine: Gravityforms.com (auch Ihre Funktion verarbeitet keine lokalisierten JS)
Onetrickpony
@ One-Trick-Pony Schwerkraftformen ist ein kostenpflichtiges Plugin ... ich versuche natürlich lieber ein kostenloses! In der Zwischenzeit habe ich meinen Code so korrigiert, dass er auch mit lokalisierten js kompatibel ist ...
Luciano Mammino
0

Sie können dieses Plugin auch ausprobieren (oder sich zumindest den Code darin ansehen):

http://wordpress.org/extend/plugins/headjs-loader/

Es gibt einen regulären Ausdruck für die Ausgabe aus, bevor sie auf dem Bildschirm gedruckt wird, sodass sie auch mit Skripten funktioniert, die nicht in die Warteschlange gestellt wurden.


quelle
0

Hier ist meine Lösung dafür. Ich benutze yepnope anstelle von head.js, aber die Theorie ist ziemlich gleich.

https://wordpress.stackexchange.com/a/40325/9802

Ich hoffe es hilft und lass es mich wissen, wenn du Kommentare zu diesem anderen Thread hast.

Dominic P.
quelle