Как загрузить файлы javascript + css виджета только в том случае, если они используются?


Я хотел бы сохранить стили javascript и css, используемые моим виджетом, в их собственных файлах (и не добавлять их в тему).

Но я, похоже, не могу заставить wordpress добавлять их, когда виджет фактически используется на боковой панели.

Я пробовал это:

Внутри объявления класса я добавил 2 функции

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

}

И внутри функции виджета():

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

Но это ничего не дает...

Author: pixeline, 2011-10-03

2 answers

wp_print_scripts и wp_print_styles крючки запускаются задолго до вашей функции виджета, так что это не работает.

Решением этой проблемы было бы включить сценарии в нижний колонтитул с помощью крючка wp_print_footer_scripts, взгляните на ответ Яна на аналогичный вопрос

Или гораздо более приятное решение взгляните на ответ Сорича на другой аналогичный вопрос

 6
Author: Bainternet, 2017-04-13 12:37:42

Лучшее решение - сначала зарегистрировать свои активы, а затем поставить в очередь CSS и JS внутри функции widget() вашего WP_Widget (напрямую ставить в очередь, а не добавлять новые крючки).

Я протестировал это решение, и оно действительно работает в текущей версии WordPress (4.5.3) - как JS, так и CSS добавлены в нижний колонтитул страницы.

<?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
Author: Philipp, 2016-09-15 17:01:16