wake-up-neo.com

Überprüfen Sie zuerst Modernizr und fahren Sie dann mit wp_register_script ()/wp_enqueue_script fort

Ich habe in letzter Zeit mit Modernizr in WordPress gespielt und hier ist etwas, das ich zu erreichen versuche.

Ich füge ein HTML5-Eingabefeld auf einer benutzerdefinierten Optionsseite hinzu, und zwar:

<input type="number" />

Jetzt kann ich mit Modernizr testen, ob der Browser dies so unterstützt:

Modernizr.load([
{
test: Modernizr.inputtypes.number, // this is the test
nope: [ load js,css etc ] // if it's not supported load your custom lib
complete: function() {
  // do something 
}]);

Wäre es möglich, anstatt meine benutzerdefinierten Bibliotheken manuell in die "nope" -Methode zu laden, die Funktionen wp_register_script ()/wp_enqueue_script aufzurufen?

Ich meine, ich könnte nur meine benutzerdefinierten Bibliotheken registrieren/in die Warteschlange stellen, aber ich möchte das nur tun, wenn es notwendig ist (wenn der Browser diese Art von Eingabe nicht nativ unterstützt).

Irgendwelche Ideen?

1
tsiger

Bitte überprüfen Sie das Beispiel von Alex Hempton-Smith , vielleicht hilft es Ihnen.

<?php

function urls_of_enqueued_scrips( $handles = array() ) {
    global $wp_scripts, $wp_styles;

    foreach ( $wp_scripts->registered as $registered )
        $script_urls[ $registered->handle ] = $registered->src;

    foreach ( $wp_styles->registered as $registered )
        $style_urls[ $registered->handle ] = $registered->src;

    if ( empty( $handles ) ) {

        $handles = array_merge( $wp_scripts->queue, $wp_styles->queue );
        array_values( $handles );

    }

    $output = '';

    foreach ( $handles as $handle ) {

        if ( !empty( $script_urls[ $handle ] ) )
            $output .= $script_urls[ $handle ] . ',';

        if ( !empty( $style_urls[ $handle ] ) )
            $output .= $style_urls[ $handle ] . ',';

    }

    $output = substr( $output, 0, -1 );

    echo $output;

}

?>

<script>
Modernizr.load([
  {
    test : Modernizr.inputtypes.number,
    nope : [<?php urls_of_enqueued_scrips( array('spinbox') ); ?>],
    complete: function() {
      jQuery('.html5-number').spinbox();
    }
  }
]);
</script>
2
bueltge

Ich würde es auf diese Weise tun (zugegebenermaßen ist es nicht ideal, aber ich denke, es ist wahrscheinlich am einfachsten zu lesen).

Erstellen Sie ein Array aller erforderlichen bedingten Skripten und übergeben Sie sie mit wp_localize_script an Javascript (ab 3.3 können Sie den viel logischeren Alias ​​wp_add_script_data verwenden, wie hier beschrieben . ).

$conditional_scripts = array(
    'spinner' => get_stylesheet_directory_uri().'/js/spinbox.js',
    'datepicker' => get_stylesheet_directory_uri().'/js/datepicker.js'
    // etc, etc, etc.
);

/* You could tie the variables to anything, since I assume you're just using
   an inline script. But including it as a "localization" of modernizr makes
   as much sense as anything. */
wp_localize_script( 'modernizr', 'modernizrScripts', $conditional_scripts );

Greifen Sie dann einfach in Ihren Modernizr-Tests auf diese Variablen zu:

<script>
Modernizr.load([
  {
    test : Modernizr.inputtypes.number,
    nope : modernizrScripts.spinner,
    complete: function() {
      jQuery('.html5-number').spinbox();
    }
  },
  {
    test : Modernizr.inputtypes.date,
    nope : modernizrScripts.datepicker,
    complete: function() {
      jQuery('.html5-date').datepicker();
    }
  }
]);
</script>
2
goldenapples