Bedingte (browserspezifische) Javascript-Dateien registrieren und in die Warteschlange stellen?

8

Die WP.SE-Community hat immer empfohlen , Skripte in einem Thema / einer Vorlage (und ebenso sowie für Stylesheets) zu verwenden wp_register_scriptund wp_enqueue_scripthinzuzufügen .wp_register_stylewp_enqueue_style


So registriere ich meine Skripte und stelle sie in die Warteschlange ...

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

Rufen Sie es dann in einer Vorlagendatei (z. B. header.php) wie folgt auf

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

Wie kann ich nun "bedingte JavaScript-Dateien" registrieren und in die Warteschlange stellen, die von bestimmten Browsern erkannt werden sollen? Zum Beispiel:

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

Wie registriere ich mich und stelle ihn richtig in die Warteschlange?

PS: Ich verwende das Reddle-Thema , das von den Theme Wranglern bei Automattic entwickelt wurde. Und die header.php des Themas verwendet direkt den oben genannten Code - dh er befindet sich nicht in der Warteschlange. Heißt das, es ist der einzige Weg, dies zu tun?

da ich bin
quelle
Obwohl fast ein Jahr alt, wurde dieselbe Frage schon einmal gestellt . Ich bin nicht darauf gestoßen, als ich früher gesucht habe.
its_me

Antworten:

13

WP_Scriptsund WP_StylesKlassen sind hinter wp_enqueue_scriptund wp_enqueue_styleFunktionen. Wenn Sie sich die Klassenimplementierung ( Skripte und Stile ) ansehen, werden Sie feststellen, dass die WP_ScriptsKlasse keine bedingten Skripte unterstützt, aber! Sie können sehen, dass das WP_Stylestut! Das Problem ist, wp_enqueue_styledass Sie die Bedingung nicht 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 möglich geworden, weil alle registrierten Stile in gespeichert sind registeredFeld WP_StylesKlasse. Jeder registrierte Stil ist ein Objekt der _WP_DependencyKlasse, 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 Campbells Essence Theme durchgesehen und festgestellt, dass er sowohl ein browserbedingtes Skript als auch einen Stil aufruft.

/**
 * @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 einen Patch, aber es ist noch nicht im Kern . Natürlich funktioniert das bedingte Skript ohne den Patch nicht. Beachten Sie jedoch, dass Sie die Methode add_data direkt in Ihrer Funktion verwenden können, die an die wp_enqueue_scriptsAktion angehängt ist .

Eugene Manuilov
quelle
1
Unfortunately this hack is not working for scripts.Oh ... das ist scheiße! Sieht so aus, als wäre der einzige Weg so, wie er ist. :( Danke übrigens für den Hack. :)
its_me
Es sieht so aus, als hätten wir bedingte Skripte ab 4.2 core.trac.wordpress.org/changeset/31223
lkraav