it-swarm.com.de

Wie lade ich Widget Javascript + CSS-Dateien nur, wenn sie verwendet werden?

Ich möchte die von meinem Widget verwendeten Javascript- und CSS-Stile in ihren eigenen Dateien behalten (und sie nicht zum Thema hinzufügen).

Aber ich kann nicht scheinen, WordPress zu bekommen, um sie hinzuzufügen, wenn das Widget tatsächlich in einer Seitenleiste verwendet wird.

Ich habe es versucht:

innerhalb der Klassendeklaration habe ich 2 Funktionen hinzugefügt

class EssentielleRubriquesPosts extends WP_Widget {

function addFrontendCss(){
    wp_enqueue_style('erw-frontend-css', ESSENTIELLE_RUBRIQUE_WIDGET_PLUGIN_PATH . 'css/EssentielleRubriqueWidget-frontend.css');
}
function addFrontendJavascript(){
    wp_register_script('jq-hoverintent', PLUGIN_PATH . 'js/jquery.hoverintent.js', array('jquery'), '1.0',true);
    wp_enqueue_script('jq-hoverintent');
    wp_enqueue_script('jq-tools', PLUGIN_PATH . 'js/jquery.tools.js', array('jquery'),'1.0',true);
    wp_enqueue_script('erw-frontend-js', PLUGIN_PATH . 'js/widget-frontend.js', array('jquery', 'jq-hoverintent', 'jq-tools'),'1.0',true);

}

und innerhalb der widget () Funktion:

function widget($args, $instance) {
        add_action( 'wp_print_scripts', 'addFrontendJavascript' );
        add_action( 'wp_print_styles', 'addFrontendCss' );
}

Aber das macht nichts ...

12
pixeline

wp_print_scripts- und wp_print_styles-Hooks werden weit vor Ihrer Widget-Funktion ausgelöst, so dass sie nicht funktionieren.

Eine Lösung dafür wäre, die Skripte mit wp_print_footer_scripts hook in die Fußzeile aufzunehmen. Schauen Sie sich Jan's Antwort auf eine ähnliche Frage an.

Oder eine viel schönere Lösung werfen Sie einen Blick auf Sorichs Antwort auf eine andere ähnliche Frage

6
Bainternet

Die beste Lösung ist, zuerst Ihre Assets zu registrieren und dann CSS und JS in der Funktion widget() Ihres WP_Widget in eine Warteschlange zu stellen (direkt in eine Warteschlange stellen, nicht durch Hinzufügen neuer Hooks).

Ich habe diese Lösung getestet und sie funktioniert in der aktuellen WordPress-Version (4.5.3) - sowohl JS als auch CSS werden in der Fußzeile der Seite hinzugefügt.

<?php
// Register your assets during `wp_enqueue_scripts` hook.
function custom_register_scripts() {
    wp_register_style('erw-frontend-css', '...frontend.css');
    wp_register_script('jq-hoverintent', '...hoverintent.js', ...);
    wp_register_script('jq-tools', '...tools.js', ...);
}
// Use wp_enqueue_scripts hook
add_action('wp_enqueue_scripts', 'custom_register_scripts');


class YourWidget extends WP_Widget {
    public function __construct() {
    }

    public function widget( $args, $instance ) {
        // Enqueue needed assets inside the `widget` function.
        wp_enqueue_style('erw-frontend-css');
        wp_enqueue_script('jq-hoverintent');
        wp_enqueue_script('jq-tools');

        // Output widget contents.
    }

    public function form( $instance ) {
    }

    public function update( $new_instance, $old_instance ) {
    }
}
5
Philipp