web-dev-qa-db-ger.com

Registrieren und Einreihen bedingter (browserspezifischer) Javascript-Dateien?

Die WP.SE-Community hat immer die Verwendung von wp_register_script und wp_enqueue_script zum Hinzufügen von Skripten in einem Thema/einer Vorlage empfohlen (und ebenso wp_register_style und wp_enqueue_style für Stylesheets).

So registriere und reihe ich meine Skripte ein ...

Zuerst füge ich so etwas in functions.php hinzu 

add_action('init','wpse54189_register_script');
function wpse54189_register_script(){

    //Register scripts
    wp_enqueue_script( 'jquery' );
    wp_register_script( 'aahan_bootstrap_transition', get_template_directory_uri().'/js/bootstrap-transition.js');
    wp_register_script( 'aahan_bootstrap_carousel', get_template_directory_uri().'/js/bootstrap-carousel.js', array('aahan_bootstrap_transition'));    
    wp_register_script( 'wpse54189_ajax_comment', get_template_directory_uri().'/js/no-reload-comments.js');
}

dann in einer Template-Datei (zB header.php) wie folgt aufrufen 

<?php wp_enqueue_script( 'aahan_bootstrap_carousel' ); ?>
<?php wp_enqueue_script( 'wpse54189_ajax_comment' ); ?>

Wie registriere ich "bedingte JavaScript-Dateien", die von bestimmten Browsern erkannt werden sollen, und reihe sie in die Warteschlange ein? Zum Beispiel:

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

Wie registriere und reihe ich das richtig ein?

PS: Ich verwende das Reddle-Theme , das von den Theme-Wranglern von Automattic entwickelt wurde. Und die header.php des Themas verwendet direkt den gerade erwähnten Code - d. H., Sie steht nicht in der Warteschlange. Heißt das, es ist der einzige Weg, dies zu tun?

javascriptwp-enqueue-scriptwp-register-script
8
its_me

Die Klassen WP_Scripts und WP_Styles stehen hinter den Funktionen wp_enqueue_script und wp_enqueue_style. Wenn Sie sich die Implementierung von Klassen ( Skripte und Stile ) ansehen, werden Sie feststellen, dass die Klasse WP_Scripts keine bedingten Skripte unterstützt, aber! Sie können sehen, dass WP_Styles es tut! Das Problem ist, dass Sie mit wp_enqueue_style keine Bedingung einrichten können.

Also müssen wir einen kleinen Hack machen:

add_filter( 'wp_enqueue_scripts', 'wpse2345_enqueue_scripts' );
function wpse2345_enqueue_scripts() {
    wp_enqueue_style( 'mystyle', 'url/of/my/style.css', array(), '1.0.0' );

    global $wp_styles;
    $wp_styles->registered['mystyle']->add_data( 'conditional', 'lt IE 9' );
}

Ein solcher Hack wird möglich, weil alle registrierten Stile im Feld registered der Klasse WP_Styles gespeichert sind. Jeder registrierte Stil ist ein Objekt der Klasse _WP_Dependency, mit dem Sie zusätzliche Daten hinzufügen können.

Leider funktioniert dieser Hack nicht für Skripte.

Zusätzliche Informationen:
Ich habe gestern Abend den Code in Aaron Campbell's Essence Theme durchgesehen und festgestellt, dass er sowohl ein Browser-bedingtes Skript als auch einen Stil aufrief.

/**
 * @var WP_Scripts
 */
global $wp_scripts;
// Conditionally load this only for IE < 9
$wp_scripts->add_data( 'html5', 'conditional', 'lt IE 9' );

/**
 * @var WP_Styles
 */
global $wp_styles;
// Conditionally load this only for IE < 8
$wp_styles->add_data( 'blueprint-ie', 'conditional', 'lt IE 8' );

Es gibt auch ein Ticket und Patch, aber es ist noch nicht im Kern . Natürlich wird das bedingte Skript ohne den Patch nicht funktionieren. Beachten Sie jedoch, dass Sie die Methode add_data direkt in Ihrer Funktion verwenden können, die an die Aktion wp_enqueue_scripts angehängt ist.

13
Eugene Manuilov