Как загружать javascript и css файлы виджета только при их использовании?

Question

Как загружать javascript и css файлы виджета только при их использовании?

3 окт. 2011 г., 16:54:51

Просмотры: 16.3K

Голосов: 15

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

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

Я пробовал следующее:

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

class EssentielleRubriquesPosts extends WP_Widget {

function addFrontendCss(){
    // Подключаем CSS для фронтенда
    wp_enqueue_style('erw-frontend-css', ESSENTIELLE_RUBRIQUE_WIDGET_PLUGIN_PATH . 'css/EssentielleRubriqueWidget-frontend.css');
}
function addFrontendJavascript(){
    // Регистрируем и подключаем JavaScript для фронтенда
    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);

}

и внутри функции widget():

function widget($args, $instance) {
        // Добавляем действия для загрузки скриптов и стилей
        add_action( 'wp_print_scripts', 'addFrontendJavascript' );
        add_action( 'wp_print_styles', 'addFrontendCss' );
}

Но это не работает...

pixeline

2.88K

виджеты wp enqueue script wp enqueue style

Комментарии

что насчет этой документации https://developers.elementor.com/add-custom-functionality/

Juan Solano

13 дек. 2018 г. 00:41:23

Все ответы на вопрос

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

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

<?php
// Регистрируем ресурсы во время хука `wp_enqueue_scripts`.
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', ...);
}
// Используем хук wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'custom_register_scripts');


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

    public function widget( $args, $instance ) {
        // Подключаем необходимые ресурсы внутри функции `widget`.
        wp_enqueue_style('erw-frontend-css');
        wp_enqueue_script('jq-hoverintent');
        wp_enqueue_script('jq-tools');

        // Выводим содержимое виджета.
    }

    public function form( $instance ) {
    }

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

Philipp

1.24K

4 авг. 2016 г. 14:55:46

Bainternet 67.7K · Accepted Answer · 2011-10-03T17:27:52Z

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

Решением может быть подключение скриптов в подвале сайта с использованием хука wp_print_footer_scripts, ознакомьтесь с ответом Яна на похожий вопрос

Или более элегантное решение — посмотрите ответ Сорича на другой похожий вопрос

Bainternet

67.7K

3 окт. 2011 г. 17:27:52