开发WordPress插件时vc_map配置后短代码未在Visual Composer显示

Hey there! Let's troubleshoot why your Visual Composer (now WPBakery Page Builder) integration isn't working for your mappy shortcode. I've run into this exact issue a few times, so here are the most common fixes to check:

First off, make sure you're registering your VC element on the right hook—vc_before_init is the only one that works reliably. Also, double-check that WPBakery Page Builder is fully activated (no expired licenses or restricted versions that block custom elements).

Here's the basic structure you should use:

add_action('vc_before_init', 'register_mappy_vc_element');
function register_mappy_vc_element() {
    // Your vc_map code goes here
}

Most of the time, small syntax mistakes break the whole setup. Your vc_map needs at least the base (matching your shortcode name exactly), name, and params array. Let's write a correct example for your mappy shortcode:

function register_mappy_vc_element() {
    vc_map(array(
        'base' => 'mappy', // Must match your shortcode name exactly (case-sensitive!)
        'name' => __('Mappy Map', 'your-plugin-text-domain'),
        'description' => __('Displays a map using its unique ID', 'your-plugin-text-domain'),
        'category' => __('Custom Elements', 'your-plugin-text-domain'),
        'params' => array(
            array(
                'type' => 'textfield',
                'heading' => __('Map ID', 'your-plugin-text-domain'),
                'param_name' => 'id', // Matches the shortcode attribute name
                'value' => '',
                'description' => __('Enter the ID of the map you want to display', 'your-plugin-text-domain'),
                'admin_label' => true, // Makes this field prominent in the editor
            )
        )
    ));
}
add_action('vc_before_init', 'register_mappy_vc_element');

If your plugin loads before WPBakery, the vc_map function won't exist yet, so your registration fails. Fix this by increasing the hook priority to run later:

add_action('vc_before_init', 'register_mappy_vc_element', 20); // Higher number = later execution

• Browser cache can prevent the VC editor from picking up new elements. Try clearing your cache, or use incognito mode to test.
• Open your browser's developer tools (F12) and check the Console tab for JS errors. If VC's scripts are failing or your element has a syntax issue, it'll block the element from appearing.

Make sure your mappy_shortcode function properly accepts the id parameter passed by VC. Here's a safe way to handle it:

function mappy_shortcode($atts) {
    // Set default values and sanitize attributes
    $atts = shortcode_atts(array(
        'id' => '',
    ), $atts, 'mappy');
    
    if(empty($atts['id'])) {
        return '<p>Please provide a valid map ID.</p>';
    }
    
    // Your map rendering logic here, using $atts['id']
    return '<div class="mappy-container" data-map-id="'.esc_attr($atts['id']).'"></div>';
}
add_shortcode('mappy', 'mappy_shortcode');

• Temporarily disable other plugins to see if one is conflicting with WPBakery.
• Switch to a default WordPress theme (like Twenty Twenty-Four) to eliminate theme-related issues.

If you've tried all this and still have trouble, share your full vc_map code snippet—I can spot any niche issues you might have missed.

内容的提问来源于stack exchange，提问作者Balázs Varga