Visual Composer eigene Elemente

Shortcode generator: https://www.wp-hasty.com/tools/visual-composer-element-generator/

functions.php

[php]/* —————————————————————————
* Load VISUAL COMPOSER CUSTOM ELEMENTS
* ————————————————————————— */
add_action( ‚vc_before_init‘, ‚vc_before_init_actions‘ );

function vc_before_init_actions() {

// Require new custom Element
require_once( get_stylesheet_directory().’/vc-elements/vc-kachel-navigation-element.php‘ );

}[/php]

/vc-elements/ Datei

[php] __(‚bFlow Kachel Navigation‘, ‚text-domain‘),
‚base‘ => ‚vc_kachelnavi‘,
‚description‘ => __(‚Another simple VC box‘, ‚text-domain‘),
‚category‘ => __(‚bFlow‘, ‚text-domain‘),
‚icon‘ => get_template_directory_uri().’/assets/img/vc-icon.png‘,
‚params‘ => array(

array(
‚type‘ => ‚textfield‘,
‚holder‘ => ‚h2‘,
‚class‘ => ‚title-class‘,
‚heading‘ => __( ‚Titel‘, ‚text-domain‘ ),
‚param_name‘ => ‚title‘,
‚value‘ => __( ‚Titel eingeben…‘, ‚text-domain‘ ),
//’description‘ => __( ‚Box Title‘, ‚text-domain‘ ),
‚admin_label‘ => false,
‚weight‘ => 0,
‚group‘ => ‚Inhalt‘,
),

array(
„type“ => „colorpicker“,
„class“ => „“,
„heading“ => __( „Überschrift Textfarbe“, „text-domain“ ),
„param_name“ => „h2_color“,
„value“ => “, //Default Red color
„description“ => __( „Choose Background Color“, „text-domain“ ),
‚group‘ => ‚Style‘,
),

array(
‚type‘ => ‚textarea‘,
‚holder‘ => ‚p‘,
‚class‘ => ‚text-class‘,
‚heading‘ => __( ‚Beschreibung‘, ‚text-domain‘ ),
‚param_name‘ => ‚text‘,
‚value‘ => __( ‚Beschreibung eingeben…‘, ‚text-domain‘ ),
//’description‘ => __( ‚Box Text‘, ‚text-domain‘ ),
‚admin_label‘ => false,
‚weight‘ => 0,
‚group‘ => ‚Inhalt‘,
),

array(
‚type‘ => ‚textarea‘,
‚holder‘ => ’span‘,
‚class‘ => ‚text-class‘,
‚heading‘ => __( ‚Details Text‘, ‚text-domain‘ ),
‚param_name‘ => ‚details_link_description‘,
‚value‘ => __( ‚Details‘, ‚text-domain‘ ),
//’description‘ => __( ‚Box Text‘, ‚text-domain‘ ),
‚admin_label‘ => false,
‚weight‘ => 0,
‚group‘ => ‚Inhalt‘,
),

array(
„type“ => „colorpicker“,
„class“ => „“,
„heading“ => __( „Beschreibung Textfarbe“, „text-domain“ ),
„param_name“ => „text_color“,
„value“ => “, //Default Red color
„description“ => __( „Choose Background Color“, „text-domain“ ),
‚group‘ => ‚Style‘,
),

array(
‚type‘ => ‚textfield‘,
‚heading‘ => __( ‚URL (Link)‘, ‚text-domain‘ ),
‚param_name‘ => ‚link‘,
‚value‘ => __( ‚http://‘, ‚text-domain‘ ),
//’description‘ => __( ‚Box Title‘, ‚text-domain‘ ),
‚admin_label‘ => false,
‚weight‘ => 0,
‚group‘ => ‚Inhalt‘,
),

array(
‚type‘ => ‚attach_image‘,
‚holder‘ => ‚img‘,
‚class‘ => “,
‚heading‘ => __( ‚Hintergrundbild‘, ‚text-domain‘ ),
‚param_name‘ => ‚image_url‘,
‚value‘ => __( “, ‚text-domain‘ ),
‚description‘ => __( ‚Bitte wähle hier ein Bild aus oder lade eins hoch‘, ‚text-domain‘ ),
‚group‘ => ‚Style‘,
),

array(
„type“ => „colorpicker“,
„class“ => „“,
„heading“ => __( „Hintergrundfarbe“, „text-domain“ ),
„param_name“ => „bg_color“,
„value“ => “, //Default Red color
„description“ => __( „Choose Background Color“, „text-domain“ ),
‚group‘ => ‚Style‘,
),

array(
„type“ => „colorpicker“,
„class“ => „“,
„heading“ => __( „Hover Hintergrundfarbe“, „text-domain“ ),
„param_name“ => „bg_color_hover“,
„value“ => “, //Default Red color
„description“ => __( „Choose Background Color“, „text-domain“ ),
‚group‘ => ‚Style‘,
)

),
)
);

}

// Element HTML
public function vc_kachelnavi_html( $atts ) {

// Params extraction
extract(
shortcode_atts(
array(
‚title‘ => “,
‚text‘ => “,
‚link‘ => “,
‚box_height‘ => “,
‚image_url‘ => “,
‚bg_color‘ => “,
‚bg_color_hover‘ => “,
‚h2_color‘ => “,
‚text_color‘ => “,
‚details_link_description‘ => ‚Details‘,
),
$atts
)
);

$imageSrc = wp_get_attachment_image_src($image_url, ‚medium‘);
if( $imageSrc ) {
$image = $imageSrc[0];
}

if ( !empty( $image ) ) {
$image = ‚background-image: url(‚ . $image . ‚);‘;
}

if ( !empty( $h2_color ) ) {
$h2_color = ‚color: ‚ . $h2_color . ‚;‘;
}

if ( !empty( $text_color ) ) {
$text_color = ‚color: ‚ . $text_color . ‚;‘;
}

if ( !empty( $bg_color ) ) {
$background = ‚background-color: ‚ . $bg_color . ‚;‘;
}

if ( !empty( $bg_color_hover ) ) {
$background_hover = ‚background-color: ‚ . $bg_color_hover . ‚;‘;
}

if ( !empty( $details_link_description ) ) {
$details_link_description = $details_link_description . ‚ ‚;
}

if ( !empty( $height ) ) {
$height .= ‚height:‘. $box_height .‘;‘;
}

// Fill $html var with data
$html = ‚

‚;

return $html;

}

} // End Element Class

// Element Class Init
new vcKachelNavi();
[/php]