如何为自定义Visual Composer组件添加下拉选择框？

Hey there! Let's get that dropdown select box working for your custom VC component. Right now, you're using an input type for your showcase-type parameter—we'll swap that out for a proper dropdown, then handle showing different content based on the selected value.

Step 1: Update the VC Mapping for the Dropdown #

First, modify your vc_showcase_mapping() function to replace the input with a dropdown type. Here's the adjusted params array section:

'params' => array(
    array(
        'type' => 'dropdown', // Changed from 'input' to 'dropdown'
        'holder' => '',
        'class' => '',
        'heading' => __( 'Showcase type', 'filmview' ),
        'param_name' => 'showcase_type', // Renamed to use underscores (better for PHP variables)
        'value' => array(
            // Key = Label shown in VC editor, Value = the actual parameter value
            __( 'Showcase 1', 'filmview' ) => 'showcase-1',
            __( 'Showcase 2', 'filmview' ) => 'showcase-2',
            __( 'Showcase 3', 'filmview' ) => 'showcase-3',
            // Add more options here if needed
        ),
        'std' => 'showcase-1', // Set default selected value
        'description' => __( 'Select the type of showcase to display', 'filmview' ),
        'admin_label' => true, // Optional: Makes this parameter visible in VC's list view
        'weight' => 0,
        'group' => 'settings',
    ),
),

This will create a dropdown menu in the Visual Composer editor with your showcase type options.

Step 2: Render Different Content Based on the Selected Value #

Next, you need to handle the frontend output. You probably have a render function for your shortcode—if not, create one. Here's how to use the selected showcase_type parameter to show different content:

public function vc_showcase_render( $atts ) {
    // Extract shortcode attributes with default values
    extract( shortcode_atts( array(
        'showcase_type' => 'showcase-1', // Match the default from your mapping
    ), $atts ) );

    ob_start(); // Start output buffering

    // Use a switch case to render content based on the selected type
    switch ( $showcase_type ) {
        case 'showcase-1':
            // HTML for Showcase Type 1
            ?>
            <div class="showcase showcase--type-1">
                <h3>Showcase 1: Featured Content</h3>
                <p>This is the unique content for your first showcase style.</p>
                <!-- Add more elements here as needed -->
            </div>
            <?php
            break;

        case 'showcase-2':
            // HTML for Showcase Type 2
            ?>
            <div class="showcase showcase--type-2">
                <h3>Showcase 2: Grid Layout</h3>
                <div class="showcase-grid">
                    <!-- Grid items go here -->
                </div>
            </div>
            <?php
            break;

        case 'showcase-3':
            // HTML for Showcase Type 3
            ?>
            <div class="showcase showcase--type-3">
                <h3>Showcase 3: Slider Style</h3>
                <div class="showcase-slider">
                    <!-- Slider slides go here -->
                </div>
            </div>
            <?php
            break;

        default:
            // Fallback content if an unknown type is selected
            ?>
            <div class="showcase showcase--default">
                <h3>Default Showcase</h3>
                <p>This is the default showcase content.</p>
            </div>
            <?php
            break;
    }

    return ob_get_clean(); // Return the buffered content
}

Don't forget to register this render function with your shortcode (usually added in your class initialization):

add_shortcode( 'vc_showcase', array( $this, 'vc_showcase_render' ) );

Quick Notes #

• I changed showcase-type to showcase_type in the param name—PHP doesn't handle hyphens in variables well, so underscores are a safer bet.
• You can add as many options to the dropdown's value array as you need, just follow the Label => Value format.
• The std parameter sets the default selected option when the component is first added to a page.

That's it! Now your VC component will have a dropdown menu, and it'll display different content based on the user's selection.

内容的提问来源于stack exchange，提问作者Elyas Behroozizade