plugins - correct way to enqueue js and css files for wordpress shortcode?

admin管理员组

文章数量:1134586

I have created a php class file. I am enqueuing the required CSS and JS files in the class's constructor.

public function __construct() {
    add_action('wp_enqueue_scripts', array($this, 'formdb_enqueue_scripts'));

}

Plugin uses a shortcode that outputs the required content. My problem is that if I create the instance of class in the shortcode then it doesn't load the CSS and JS files.

This doesn't work.

add_shortcode('render_form', array($this, 'wp_db_fb_co_form_render'));                 
public function wp_db_fb_co_form_render($atts)
{
    $this->classob = new ClassObj();//class object inside the shortcode
    $atts = shortcode_atts(array(
        'id' => 0,
    ), $atts, 'fd-form');
    $form_id = $atts["id"];

    if($form_id) {
        $form_info = $this->get_form_data_by_form_id($form_id);
        $form_data = $form_info["form_data"];            
        echo $this->output_form($form_data, "insertform");
    }


}

If I create instance of class before the shortcode, then it works.

Let me know what is correct way to do this.

I have created a php class file. I am enqueuing the required CSS and JS files in the class's constructor.

public function __construct() {
    add_action('wp_enqueue_scripts', array($this, 'formdb_enqueue_scripts'));

}

Plugin uses a shortcode that outputs the required content. My problem is that if I create the instance of class in the shortcode then it doesn't load the CSS and JS files.

This doesn't work.

add_shortcode('render_form', array($this, 'wp_db_fb_co_form_render'));                 
public function wp_db_fb_co_form_render($atts)
{
    $this->classob = new ClassObj();//class object inside the shortcode
    $atts = shortcode_atts(array(
        'id' => 0,
    ), $atts, 'fd-form');
    $form_id = $atts["id"];

    if($form_id) {
        $form_info = $this->get_form_data_by_form_id($form_id);
        $form_data = $form_info["form_data"];            
        echo $this->output_form($form_data, "insertform");
    }


}

If I create instance of class before the shortcode, then it works.

Let me know what is correct way to do this.

• plugins
• shortcode
• wp-enqueue-script

Share Improve this question asked Sep 9, 2023 at 10:44 SDeveloperjSDeveloperj 522 bronze badges 1

• There's no reliable method for directly tying scripts and styles to the use of a shortcode. The shortcode callback is not run until the shortcode is found in content, at which point it is too late to load stylesheets or scripts in the header. You will need to enqueue your styles outside of the shortcode class on every page load. Have you considered just creating a block? Shortcodes are all but obsolete, and blocks make this much easier. – Jacob Peattie Commented Sep 9, 2023 at 12:09

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

A better approach would be to only enqueue the scripts and styles when you know the shortcode is actually being used on the page. One way to do this is to use the wp_enqueue_scripts action to check if the shortcode exists in any of the posts on the current page. If it does, then you can enqueue your scripts and styles.

For example, you could do something like this outside your class, maybe in your main plugin file:

add_action('wp_enqueue_scripts', 'check_for_shortcode');

function check_for_shortcode() {
    global $post;
    if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'render_form') ) {
        wp_enqueue_script( 'my-script', plugin_dir_url( __FILE__ ) . 'js/my-script.js', array('jquery'), '1.0', true );
        wp_enqueue_style( 'my-style', plugin_dir_url( __FILE__ ) . 'css/my-style.css' );
    }
}

This way, your scripts and styles will only get loaded if the shortcode is actually present, keeping your site efficient.

本文标签： pluginscorrect way to enqueue js and css files for wordpress shortcode