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?


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 .


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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.