Shortcode zu WPBakery hinzufügen

Mit der Funktion vc_map können Shortcodes dem WPBakery Page Builder hinzugefügt werden. Hier ist ein einfaches Beispiel:

add_action( 'vc_before_init', function(){
    if( !function_exists('vc_map') ){ return; }

    vc_map( array(
        "name" => "Checklist Item",
        "description" => "Checklist Item mit Icon",
        "base" => "check_list",
        "class" => "",
        "icon" => this_dir_url(__FILE__) . "checklist.svg",
        "category" => "bundesweit.digital",
        "content_element" => true,
        "holder" => "div",
        "params" => array(
            // Optionsfelder / Datenfelder die benötigt werden
            array(
                "type" => "attach_image",
                "class" => "",
                "heading" => "Icon",
                "param_name" => "icon",
                "value" => "",
                "description" => "",
                "admin_label" => false
            ),
            array(
                "type" => "textarea_html",
                "class" => "",
                "heading" => "Content",
                "param_name" => "content",
                "value" => "",
                "description" => "",
                "admin_label" => true
            ),
            array(
                "type" => "textfield",
                "class" => "",
                "heading" => "Icon-Breite",
                "param_name" => "icon_width",
                "value" => "40px",
                "description" => "Icon Breite mit Einheit also 40px, 10vw oder 10%",
                "admin_label" => false
            ),
            array(
              'type' => 'css_editor',
              'heading' => 'CSS',
              'param_name' => 'css',
              'group' => 'Design Options',
            ),
        ),
    ) );
} );

Zusätzlich gibt es ganz unterschiedliche param types wie attach_image, attach_images, textfield, textarea, textarea_html, loop oder param_group.

Mehr Informationen gibt es auf der offiziellen Dokumentationsseite.

Weitere Beispiele #

add_action( 'vc_before_init', function(){
    if( !function_exists('vc_map') ){ return; }

    vc_map( array(
        "name" => "Leerer Bereich (Responsive)",
        "base" => "leerer-bereich",
        "description" => "",
        "class" => "",
        "icon" => this_dir_url(__FILE__) . "leerer-bereich.png",
        "category" => "bundesweit.digital",
        "params" => array(
            array(
                "type" => "textfield",
                "holder" => "div",
                "class" => "",
                "heading" => "Höhe auf Desktopgeräten oder größer",
                "param_name" => "desktop",
                "value" => "32px",
                "description" => ""
            ),

            array(
                "type" => "loop",
                "class" => "",
                "heading" => "Сlick here to create a list of posts",
                "param_name" => "items",
                "value" => '',
                "description" => "Create posts list with Build Query button ",
            ),
            
            array(
              'type' => 'param_group',
              'param_name' => 'kategorien_items',
              'params' => array(
                  array(
                      "type" => "vc_link",
                      "class" => "",
                      "heading" => "URL",
                      "param_name" => 'kategorien_items_url',
                      "description" => "",
                      "admin_label" => true,
                  ),
                  array(
                      "type" => "textarea",
                      "heading" => __("Symbol (svg)", "p-text-domain"),
                      "param_name" => "kategorien_items_icon",
                      "value" => "",
                  ),
             )
          ),



        )
    ) );

    // Da die Param Group normalerweise eingeklappt ist und erst ausgeklappt werden muss gibt es hier die möglichkeit, neue param_groups automatisch auszuklappen
    add_filter('vc_param_group_render_filter', function($outputHTML) {
        return preg_replace("/vc_param wpb_vc_row vc_param_group-collapsed/", "vc_param wpb_vc_row", $outputHTML, 1);
    });

});

Für eine param_group kann man die Attribute mit der Funktion

$items = vc_param_group_parse_atts($atts[‚kategorien_items‘]);

auflösen. Siehe Docs