带有短代码的插件，在小部件区域中使用时缺少 .js 和 .css 文件

Question

我正在开发一个 WordPress 插件，如果我在页面或文章中插入简码，它可以完美运行，但如果我在小部件区域中插入简码，.js 和 .css 文件将无法正常工作已加载。

//CUSTOM JS FUNCTIONS
add_action( 'wp_enqueue_scripts', 'my_functions' );
function my_functions() {
    wp_register_script( 'my-script-1', plugin_dir_url( __FILE__ ) . 'js/functions.js', array( 'jquery' ), '1.0', true );
} 

//CUSTOM CSS
add_action( 'wp_enqueue_scripts', 'my_css' );
function my_css() {
    wp_register_style('my-css', plugin_dir_url( __FILE__ ) . 'css/style.css' );
}

//INCLUDE JS IF SHORTCODE EXIST
add_action( 'wp_print_styles', 'form_my_include' );
function form_my_include() {

    global $post;

    if (strstr($post->post_content, 'my_form_shortcode')) {
        wp_enqueue_script('my-script-1');
        wp_enqueue_style('my-css');
    }
}

//SHORTCODE
function my_shortcode_add(){
    ob_start();
    include("include/my_function.php");
    return ob_get_clean();
}
add_shortcode('my_shortcode', 'my_shortcode_add');

// Enable shortcodes in text widgets
add_filter('widget_text', 'do_shortcode');

Answer 1

将此代码添加到您的插件中。

// Enable shortcodes in text widgets
add_filter('widget_text','do_shortcode');

这段代码只是添加了一个新的过滤器，允许短代码到运行小部件内。

Answer 2

您需要将脚本和样式表直接放入短代码中。您还可以在同一个 wp_enqueue_scripts() 挂钩中加载脚本和样式表。

//CUSTOM JS FUNCTIONS
add_action( 'wp_enqueue_scripts', 'my_scripts_and_stylesheets' );
function my_scripts_and_stylesheets() {
    wp_register_script( 'my-script-1', plugin_dir_url( __FILE__ ) . 'js/functions.js', array( 'jquery' ), '1.0', true );
    wp_register_style('my-css', plugin_dir_url( __FILE__ ) . 'css/style.css' );
} 

//SHORTCODE
function my_shortcode_add(){
    wp_enqueue_script('my-script-1'); //loaded here
    wp_enqueue_style('my-css'); //loaded here
    ob_start();
    include("include/my_function.php");
    return ob_get_clean();
}
add_shortcode('my_shortcode', 'my_shortcode_add');

// Enable shortcodes in text widgets
add_filter('widget_text', 'do_shortcode');

您当前的代码抓取 post 中的内容，并检查其中的简码。根据调用短代码的位置，它可能实际上不存在于 post 内容中，尽管存在于页面上。

通过将 wp_enqueue_script() 和 wp_enqueue_style() 添加到您的简码函数中，只要您的简码出现在页面上，无论它在页面的哪个位置，它都会将您排入队列。

带有短代码的插件，在小部件区域中使用时缺少 .js 和 .css 文件

Plugin with shortcode, missing .js and .css files when used in widget areas

wordpress

plugins

widget

shortcode