Vorlage für neues Visual Composer Element mit Shortcode

<?php
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}

function budi_default($atts, $content = null){
    // Attribute einlesen, auf default setzen falls nicht angegeben
    $atts = shortcode_atts([
         'heading' => '',
         'color' => '#ff00ff',
         'button' => '',
         'layout' => 'design-1',

         'css' => '',
         'extra_css' => '',
    ], $atts);

    // Genutzt CSS Datei nur einbauen, wenn Element auch wirklich vorhanden ist. Bitte statt wp_enqueue_style verwenden
    // Unbedingt eigenen namen vergeben!!!!!
    // budi_add_style( 'budi-tiles', this_dir_url(__FILE__) . 'style.css' );
    // budi_add_script( 'budi-tiles-script', this_dir_url(__FILE__) . 'script.js' );

    // CSS Klassen für Abstände, Rahmen, Padding, Margin aus WPBakery übernehmen
    $css_class = sc_merge_css( $atts['css'], $atts['extra_css'] );

    ob_start();
    ?>

    <section class="<?php echo $css_class; ?>">
        <h2 class="text-center" style="color: <?php echo $atts['color']; ?>"><?php echo $atts["heading"]; ?></h2>

        <div class="content">
            <?php echo nl2br( $content ); ?>
        </div>

        <?php if( $atts["button"] ) { ?>
            <?php
            $link = vc_build_link( $atts["button"] );
            ?>
            <a href="<?php echo $link['url']; ?>" class="button white" target="<?php echo $link['target']; ?>"><?php echo $link['title']; ?></a>
        <?php } ?>
    </section>

    <?php
    // HTML Output in Variable packen und zurück geben
    $output = ob_get_contents();
    ob_end_clean();

    return $output;
}
// Shortcode hinzufügen
add_shortcode('shortcodebase', 'budi_default'); // [shortcode-name heading="Titel" text="lorem ipsum dolor sit amet" ...]



/*
    WPBakery den Shortcode beibringen und Datenfelder beschreiben für das Konfig-Feld

    REFERENZ: https://kb.wpbakery.com/docs/inner-api/vc_map/
*/

add_action( 'vc_before_init', function(){

    if( !function_exists('vc_map') ){ return; }
    
    vc_map( array(
        "name" => "Shortcode Vorlage",                               // Titel in WPBakery
        "description" => "Beschreibung des Shortcodes",              // Beschreibung des Shortcodes in der Elemente-Übersicht
        "base" => "shortcodebase",                                  // Shortcode Base aus Zeile 57
        "class" => "",
        "icon" => this_dir_url(__FILE__) . 'bundesweit.digital.png', // URL zum Element-Icon
        "category" => "bundesweit.digital",                          // Kategorie Tab in die das Element eingeordnet wird, Standardmäßig bundesweit.digital
        "content_element" => true,
        "holder" => "div",
        "params" => array(
            array(
                "type" => "description",
                "param_name" => "_not_used",
                "heading" => "Shortcode Vorlage",                      // Titel des Shortcodes beim "Einstellen/Konfigurieren"
                "image" => WIKI_BASE_URL . '/wp-content/uploads/2021/07/vorlage.png',  // Optional URL zum Bild (WIKI_BASE_URL Konstante zeigt auf Wiki, also Link nur ab /wp-content/... notwendig)
                "read_more_link" => WIKI_BASE_URL . '/docs/%%SLUG%%/',  // URL zum Wiki Eintrag
                "description" => "Langer Beschreibungstext",           // Langer Beschreibungstext zum Element beim "Einstellen/Konfigurieren"
            ),
            // Optionsfelder / Datenfelder die benötigt werden
            array(
                "type" => "textfield",     // [textfield, checkbox, textarea_html (wysiwig), attach_image, dropdown, textarea, loop]
                "class" => "",
                "heading" => "Überschrift",
                "param_name" => "heading", // Parameter Name soll übereinstimmen mit ab Zeile 15 definierten Feldern
                "value" => "Überschrift",
                "description" => "",
                "admin_label" => true          // Admin Label bedeutet, dass diese Einstellung auf der "Seite Bearbeiten" Ansicht beim Element angezeigt wird
            ),
            array(
                "type" => "autocomplete",     // [textfield, checkbox, textarea_html (wysiwig), attach_image, attach_images, dropdown, textarea, loop]
                "class" => "",
                "heading" => "Mitarbeiter",
                "param_name" => 'param_mitarbeiter', // Parameter Name soll übereinstimmen mit ab Zeile 15 definierten Feldern
                'settings'    => array(
                    'multiple' => true,			// Können mehrere Mitarbeiter ausgewählt werden?
                    'sortable' => true,			// Per Drag and Drop sortierbar
                    'display_inline' => true,			//
                    'values' => get_posts_for_autocomplete('mitarbeiter'),
                ),
                "description" => "",
                "admin_label" => false,          // Admin Label bedeutet, dass diese Einstellung auf der "Seite Bearbeiten" Ansicht beim Element angezeigt wird
            ),
            /*
            array(
                "type" => "colorpicker",     // [textfield, checkbox, textarea_html (wysiwig), attach_image, dropdown, textarea, loop]
                "class" => "",
                "heading" => "Überschrift Farbe",
                "param_name" => "color", // Parameter Name soll übereinstimmen mit ab Zeile 12 definierten Feldern
                "value" => "",
                "description" => "",
                "admin_label" => false
            ),
            array(
                "type" => "textarea_html",     // Standard WP HTML Editor, nur einer sollte pro Shortcode verwendet werden
                "class" => "",
                "heading" => "Text",
                "param_name" => "content", // Beim type textarea_html sollte content als param_name gewählt werden, dies wird in den Shortcode als zweiter Paramter übergeben
                "value" => "",
                "description" => "",
                "admin_label" => true
            ),
            array(
                "type" => "vc_link",               // vc_link ist der standard WP Link-Picker der auch bei ACF verwendet wurde.
                "class" => "",
                "heading" => "Optionaler Button",
                "param_name" => "button",
                "value" => "",
                "description" => "",
                "admin_label" => false
            ),*/
            array(
                "type" => "textfield",
                "class" => "",
                "heading" => "Extra CSS Class",
                "param_name" => "extra_css",
                "value" => "",
                "description" => "",
            ),
            array(
              'type' => 'css_editor',
              'heading' => 'CSS',
              'param_name' => 'css',
              'group' => 'Design Options',
            ),
        ),
    ) );
} );


?>