wordpress - visual composer - beyond beginning

Visual Composer - Beyond Beginning

Erweiterte Anwendung und Einstellungen des Visual Composers sowie Hinzufügen eigener Contentelemente und Layouts

10.02.2015 Frank Staude <frank@staude.net>

Hallo!Frank Staude

Email: frank@staude.netTwitter: @staudeWebseite: www.staude.netGitHub: staude

Moderator im deutschen WordPress.org Supportforum

Validator für die deutsche BuddyPress Übersetzung

de.wordpress.org

WPMeetups

WP Meetup Hannover

Plugins

Visual Composer

Visual Composer

Einstellungen

Elemente/Rolle

Elemente/Rolle

Shortcodes

Shortcodes

Shortcodes

Templates

Templates

Templates

Templates

Front End Editor

Front End Editor

Grids

Grids

Grids

Grid

Eigene Vorlagen

Eigene Vorlagen

Eigene Vorlagenadd_filter( 'vc_load_default_templates', 'my_custom_template' ); function my_custom_template( $data ) { $template = array(); $template['name'] = __( 'Custom template', 'my-text-domain' ); $template['image_path'] = ‚images/custom_template_thumbnail.jpg'; // Pfad zur Grafik, Im PluginOrdner oder ThemeOrdner $template['custom_class'] = 'custom_template_for_vc; $template['content'] = <<<CONTENT [vc_row][vc_column width="1/2"][vc_single_image border_color="grey" img_link_target="_self"][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_column_text][/vc_column][vc_column width="1/2"][vc_message color="alert-info" style="rounded"]I am message box. Click edit button to change this text.[/vc_message][/vc_column][/vc_row]CONTENT; array_unshift( $data, $template ); return $data;}

Eigene Elemente

Eigene Elementeadd_shortcode( 'bartag', 'renderMyBartag' );

function renderMyBartag( $atts, $content = null ) { extract( shortcode_atts( array( 'color' => '#FF0000' ), $atts ) ); $content = wpb_js_remove_wpautop($content, true); //fix unclosed/unwanted paragraph tags in $content $output = "<div style='color:{$color};'>{$content}</div>"; return $output;}

Eigene Elementeadd_action( 'init', 'integrateWithVC' );

function integrateWithVC() { vc_map( array( "name" => __("My VC ContentElement", 'vc_extend'), "description" => __("Bar tag description text", 'vc_extend'), "base" => "bartag", "class" => "", "controls" => "full", "category" => __('Content', 'js_composer'), "params" => array( array( "type" => "colorpicker", "holder" => "div", "class" => "", "heading" => __("Text color", 'vc_extend'), "param_name" => "color", "value" => '#FF0000', //Default Red color "description" => __("Choose text color", 'vc_extend') ), array( "type" => "textarea_html", "holder" => "div", "class" => "", "heading" => __("Content", 'vc_extend'), "param_name" => "content", "value" => __("<p>Ich bin ein Textblock. Bitte bearbeite mich.</p>", 'vc_extend'), "description" => __("Enter your content.", 'vc_extend') ), ) ) );}

LinksVisual Composerhttp://vc.wpbakery.com

Bei CodeCanyon kaufenhttp://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431

Video Tutorialshttp://vc.wpbakery.com/video-academy/

VC Dokumentationhttps://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

Beispiel Erweiterung des VChttps://bitbucket.org/wpbakery/extend-visual-composer-plugin-example/src/23a71f2f485a?at=master

Danke! Fragen?