Làm cách nào để tải tập tin javascript + css chỉ khi được sử dụng?


13

Tôi muốn giữ các kiểu javascript và css được sử dụng bởi tiện ích của tôi trong các tệp của riêng họ (và không thêm chúng vào chủ đề).

Nhưng tôi dường như không thể có được wordpress để thêm chúng khi widget thực sự được sử dụng trên một thanh bên.

Tôi đã thử điều này:

Trong khai báo Class, tôi đã thêm 2 hàm

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

}

và bên trong hàm widget ():

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

Nhưng điều đó không làm gì cả ...


Điều gì về tài liệu này developers.elementor.com/add-custom-feftality
Juan Solano

Câu trả lời:


6

wp_print_scriptswp_print_styleshook được kích hoạt trước chức năng widget của bạn vì vậy đó là cách nó không hoạt động.

Một giải pháp cho điều đó là bao gồm các tập lệnh trong phần chân trang bằng wp_print_footer_scriptshook, hãy xem câu trả lời của Jan cho một câu hỏi tương tự

Hoặc một giải pháp đẹp hơn nhiều hãy xem câu trả lời của Sorich cho một câu hỏi tương tự khác


5

Giải pháp tốt nhất là đăng ký tài sản của bạn trước rồi sau đó liệt kê CSS và JS bên trong widget()chức năng của WP_Widget (trực tiếp enqueue, không phải bằng cách thêm móc mới).

Tôi đã thử nghiệm giải pháp này và nó hoạt động trong phiên bản WordPress hiện tại (4.5.3) - cả JS và CSS đều được thêm vào phần chân trang.

<?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 ) {
    }
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.