Item Param Group (Loop Items) für WPBakery

Um ein PageBuilder Element mit n Unterobjekten anzulegen nehmen wir eine “param_group”.

In dieser Param_Group können unterschiedliche Parameter hinzugefügt werden. Diese Gruppe kann hinzugefügt, verschoben, dupliziert und bearbeitet werden.

add_action('vc_before_init', function () {
    if (!function_exists('vc_map')) { return; }
    
    vc_map(array(
        "name" => "Budi Horizontal Accordion",
        "description" => "",
        "base" => "budi_horizontal_accordion",
        "class" => "",
        "icon" => get_template_directory_uri() . '/shortcodes/bundesweit.digital.png',
        "category" => "bundesweit.digital",
        "content_element" => true,
        "holder" => "div",
        "params" => array(
            array(
                'type' => 'param_group',
                'param_name' => 'items',
                'params' => array(
                    array(
                        "type" => "attach_image",
                        "heading" => "Background Image",
                        "param_name" => "background_image",
                    ),
                    array(
                        "type" => "textarea",
                        "heading" => "Short Description",
                        "param_name" => "short_description",
                    ),
                    array(
                        "type" => "vc_link",
                        "heading" => "Link",
                        "param_name" => "link_item",
                        "description" => "Enter link",
                    ),
                    array(
                        "type" => "textfield",
                        "heading" => "Form Target",
                        "param_name" => "form_target",
                    ),
                ),
            ),
            array(
                "type" => "textfield",
                "class" => "",
                "heading" => "Custom Class",
                "param_name" => 'custom_class',
                "description" => "",
                "admin_label" => false,
            ),
            array(
                'type'       => 'css_editor',
                'heading'    => 'CSS',
                'param_name' => 'css',
                'group'      => 'Design Options',
            ),
        ),
    ));
});

Parsen im Shortcode #

Im Shortcode können die Items dann wie folgt geparsed werden:

function sc_budi_horizontal_accordion($atts, $content = null){
    $atts = shortcode_atts([
        'items' => '',
    ], $atts);

    $items = vc_param_group_parse_atts($atts['items']);

    
    foreach ($items as $index => $item) {
        echo $item['background_image'];
        echo $item['short_description'];
    }
}

Hinweise #

Ein Feld mit dem Typ “textarea_html” welches den WordPress WYSIWYG Editor einfügt, funktioniert nicht problemfrei in einer Param Group. Hierrauf sollte verzichtet werden!!