web-dev-qa-db-fra.com

Modernisez d'abord la vérification, puis passez à wp_register_script ()/wp_enqueue_script

Je joue avec Modernizr dans WordPress dernièrement et voici quelque chose que j'essaie de réaliser.

J'ajoute un champ de saisie HTML5 dans une page d'options personnalisées, plus précisément:

<input type="number" />

Maintenant, avec Modernizr, je peux tester si le navigateur le supporte comme ceci:

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 
}]);

Serait-il possible au lieu de charger manuellement mes bibliothèques personnalisées dans la méthode "nope", d'appeler les fonctions wp_register_script ()/wp_enqueue_script?

Je veux dire que je pourrais simplement enregistrer/mettre en file d'attente mes bibliothèques personnalisées, mais j'aimerais le faire uniquement si cela est nécessaire (si le navigateur n'a pas de support natif pour ce type de type d'entrée.

Des idées?

wp-enqueue-scriptwp-register-script
1
tsiger

S'il vous plaît vérifier l'exemple de Alex Hempton-Smith , peut-être que cela vous aidera.

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

Je le ferais de cette façon (certes, ce n'est pas idéal, mais je pense que c'est probablement le plus facile à lire).

Créez un tableau de tous les scripts conditionnels dont vous pourriez avoir besoin et transmettez-les à javascript à l'aide de wp_localize_script (dans la version 3.3, vous pourrez utiliser l'alias beaucoup plus logique wp_add_script_data comme discuté ici ).

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

Ensuite, accédez simplement à ces variables dans vos tests Modernizr:

<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