הוספת וידגיט שורטקוד לויזואל קומפוזר

הוספת וידגיט שורטקוד לויזואל קומפוזר

 

קצת קשה למצא תיעוד טוב לפרמטרים שבאים ב type אז אספתי מלא דוגמאות שמהם אפשר ללמוד לפתח בקלות שורטקוד לויזואל קומפוזר, תעברו על הדוגמא הראשונה שמאוד פשוטה ואחר כך תמשיכי לשאר הדוגמאות אם אתם צריכים עוד מאפיינים, דבר שיכול להקל על החיים שלכם ועל החיים של הלקוח שלכם, יותר מקצועי מסתם להכניס שורטקוד קליל מאוד לא מצריך פיתוח אגרסיבי הייתי אומר אפילו יותר קל מלפתח וידגט רגיל, שדות מובנים בקלות, נפתח לכם חלון פופאפ שמאפשר להכניס בתוכו פרמטרים בקלות.

בקיצור מומלץ מאוד.

קוד

function vcas_component_title() {
    // Title
    vc_map(
        array(
            'name' => __( 'Title' ),
            'base' => 'vcas_title',
            'category' => __( 'Test Shortcodes' ),
            'params' => array(
                array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => '',
                    'heading' => __( 'Title' ),
                    'param_name' => 'title',
                    'value' => __( 'This is the custom shortcode' ),
                    'description' => __( 'Title' ),
                ),
                array(
                    'type' => 'colorpicker',
                    'holder' => 'div',
                    'class' => '',
                    'heading' => __( 'Title color' ),
                    'param_name' => 'title_color',
                    'value' => '#000000',
                    'description' => __( 'Choose color for title text' ),
                ),
              array(
                  "type" => "textarea_html",
                  "holder" => "div",
                  "class" => "",
                  "heading" => __("Content", 'vc_extend'),
                  "param_name" => "content",
                  "value" => __("<p>I am test text block. Click edit button to change this text.</p>", 'vc_extend'),
                  "description" => __("Enter your content.", 'vc_extend')
              ),				
        
            )
        )
    );
}
add_action( 'vc_before_init', 'vcas_component_title' );

/**
* Function for displaying Title functionality
*
* @param array $atts    - the attributes of shortcode
* @param string $content - the content between the shortcodes tags
*
* @return string $html - the HTML content for this shortcode.
*/
function vcas_title_function( $atts, $content ) {
    $atts = shortcode_atts(
    array(
        'title' => __( 'This is the custom shortcode' ),
        'title_color' => '#000000',
    ), $atts, 'vcas_title'
);

$html = '
    <div class="main_img_class">
      <img class="main_img" src="http://www.urban-tower.tempurl.co.il/wp-content/uploads/2016/12/hahalutz-illustration-1y-300x236.jpg" />
    </div>
    </p>
    <div class="prev_img_class">
      <a class="thickbox" href="http://www.urban-tower.tempurl.co.il/apartment/%d7%a4%d7%a0%d7%98%d7%94%d7%90%d7%95%d7%96-6-%d7%97%d7%93%d7%a8%d7%99%d7%9d/">
        <img class="prev_img" src="http://www.urban-tower.tempurl.co.il/wp-content/uploads/2017/01/image_1-3x.png" />
      </a>
    </div>
    <div class="next_img_class">
      <a class="thickbox" href="http://www.urban-tower.tempurl.co.il/apartment/%d7%a4%d7%a0%d7%98%d7%94%d7%90%d7%95%d7%96-6-%d7%97%d7%93%d7%a8%d7%99%d7%9d/">
        <img class="next_img" src="http://www.urban-tower.tempurl.co.il/wp-content/uploads/2017/01/image_1-3x.png" />
      </a>
    </div>

';
//$html = '<h1 class="component title ' . $atts['style']. '" style="color: ' . $atts['title_color'] . '">'. $atts['title'] . '</h1>';
return $html;
}
add_shortcode( 'vcas_title', 'vcas_title_function' );

 

עוד קוד שמכליל את כל האופציות שיכולות להיות ב type

 

Support » Plugins and Hacks » Visual Composer, Single Image, and in Editor Icon update.
Visual Composer, Single Image, and in Editor Icon update.

    hmortensen2907

    (@hmortensen2907)

    11 months ago

    Hi all,

    I’ve made a few simple shortcodes for Visual Composer, and everything works fine. ?

    But now I would like to get some visual feedback in the editor. ?
    When I have a shortcode containing an image. I would like to update the icon in the editor just like the “Single Image” element that comes with VC. ScreenShot

    I have been in contact with the VC support team, but the help is, to say the least, very slim. They only referred to the SingleImage element, but as a non php master, I simple can’t find any logic in the implementation :/
    I found “vc-single-image.php” in 4 different locations with very varied content, instantation of WPBakeryShortCode classes and call to singleParamHtmlHolder from classes I can’t see where is defines, and so on, extremely frustrating.
    Sorry for rambling…

    So now I turn to all of you ? With the hope that someone can help me with this small, but hard problem…

    Thanks,
    – Henning

    Current Code:

<?php
add_action( 'vc_before_init', 'vc_map_setup_hm_image' );

function vc_map_setup_hm_image() {
   vc_map( array(
   "name" => __("Image Box"),
   "base" => "hm_Image",
   "category" => __('my'),
   'icon' => 'my',
   "params" => array(
   // - Image
  array(
    "type" => "attach_image",
    "heading" => __("Image", "js_composer"),
    "holder" => "div",
    "class" => "",
    "param_name" => "imageurl",
    "description" => __("Image", "js_composer")
  ),
    // - color
    array(
        "type" => "colorpicker",
        "class" => "",
        "heading" => __( "Background color", "my" ),
        "param_name" => "backgroundcolor",
        "value" => '#FFF', //Default white color
        "description" => __( "Choose background color", "my" )
    ),
  // - Width
    array(
    "type" => "textfield",
    "holder" => "div",
    "class" => "",
    "heading" => __( "Width", "my" ),
    "param_name" => "width",
    "value" => __( "1280px" ),
    "description" => __( "Enter width.", "my" )
  ),
// - paddingleft
 array(
         "type" => "dropdown",
         "holder" => "div",
         "class" => "",
         "heading" => __( "Padding Left", "my" ),
         "param_name" => "paddingleft",
         'value' => array( '0px', '100px', '160px', '260px', '320px'),
         "description" => __( "Select Padding Left.", "my" )
     ),
// - paddingbottom
 array(
         "type" => "dropdown",
         "holder" => "div",
         "class" => "",
         "heading" => __( "Padding Bottom", "my" ),
         "param_name" => "paddingbottom",
         'value' => array( '0px', '100px', '160px', '260px', '320px'),
         "description" => __( "Select Padding Bottom.", "my" )
     ),

// - marginleft
 array(
         "type" => "dropdown",
         "holder" => "div",
         "class" => "",
         "heading" => __( "Margin Left", "my" ),
         "param_name" => "marginleft",
         'value' => array( '0px', '100px', '160px', '260px', '320px'),
         "description" => __( "Select Margin Left.", "my" )
     ),
 // - MarginBottom
 array(
         "type" => "textfield",
         "holder" => "div",
         "class" => "",
         "heading" => __( "Margin Bottom", "my" ),
         "param_name" => "marginbottom",
         "value" => __( "0px" ),
         "description" => __( "Enter Margin Bottom.", "my" )
     ),
   )
  ) );
}

add_shortcode('hm_Image', function ($atts, $content)
{
    $a = shortcode_atts(array(
      'imageurl' => '',
            'backgroundcolor' => '',
      'width' => '1280px',
      'paddingleft' => '0px',
            'paddingbottom' => '0px',
      'marginleft' => '0px',
      'marginbottom' => '0px',
        ), $atts);

        $img = wp_get_attachment_image_src($a["imageurl"], "full");
        $imgSrc = $img[0];

  if(empty($content)) $content = '';

    $s = '<div class="mydesignblock mydesignblockImage" style="display: block; position: relative; background-color: '.$a['backgroundcolor'].'; width: '.$a['width'].'; padding-left: '.$a['paddingleft'].'; margin-left: '.$a['marginleft'].' ; margin-bottom: '.$a['marginbottom'].'; overflow: hidden; ">';
    $s = $s.'<img src="' . $imgSrc . '" style="display: block; margin-left: auto; margin-right: auto;" width="'.$img[1].'" height="'.$img[2].'" alt="" />';
    $s = $s.'</div>';

    return $s;
});

?>

 

עים לינק

vc_map( array(
    "name" => __("Alert Box", 'wpcentral'),
    "description" => __("Just a simple alert box, nothing special", 'wpcentral'),
    "base" => "my_alert_box",
    "icon" => plugins_url('assets/icons/icon.png', __FILE__), 
    "category" => __('wpcentral Components', 'wpcentral'),
    'admin_enqueue_js' => array(plugins_url('admin_assets/admin.js', __FILE__)), 
    'admin_enqueue_css' => array(plugins_url('admin_assets/admin.css', __FILE__)), 
    "params" => array(

                    array(
                            "type" => "textfield",
                            "heading" => __("Title", "wpcentral"),
                            "param_name" => "title",
                            "description" => __("The Title.", "wpcentral"),
                            "value" => __("An Awesome Title", 'wpcentral'),
                            "admin_label" => true,
                    ),

                    array(
                        "type" => "attach_image",
                        "holder" => "div",
                        "class" => "",
                        "heading" => __("Side Image", 'wpcentral'),
                        "param_name" => "image",
                        "description" => __("The Image in the background", 'wpcentral')
                    ),                            

                    array(
                        "type" => "vc_link",
                        "holder" => "div",
                        "class" => "",
                        "heading" => __("Link To A Page", 'wpcentral'),
                        "param_name" => "link",
                        "description" => __("The Link To A Page.", 'wpcentral')
                    ),


            )
) );

 

בקישור נתקלים בבעיה שהקישור בא בקידוד…

עוד דוגמא של קישור ומראה איך לחלץ את הקישור מהקידוד שלה:

 

<?php
add_action( 'vc_before_init', 'zaroutski_vc_register_banner_section_shortcode' );
/**
 * Register banner section content element in Visual Composer
 */
function zaroutski_vc_register_banner_section_shortcode() {
  vc_map( array(
    // Name of the new content element
    "name" => __( "Banner section", "zaroutski" ),
    // Reference of teh new content element
    "base" => "zaroutski-banner-section",
    // Icon to be used within the Visual Composer admin interface when editing a post or a page
    "icon" => get_template_directory_uri() . "/vc-extend/zaroutski-content-elements-cta-button-section-icon.png",
    // Custom fields of the new content element
    "params" => array(
      // Text field for the heading
      array(
        "type" => "textfield",
        "holder" => "div",
        "class" => "vc_admin_label admin_label_h2",
        "heading" => __("Heading text"),
        "param_name" => "heading-text",
        "value" => __(""),
        "description" => __("Heading that will be displayed in the banner section")
      ),
      // Text field for secondary text
      array(
        "type" => "textfield",
        "class" => "",
        "heading" => __("Secondary text"),
        "param_name" => "secondary-text",
        "value" => __(""),
        "description" => __("Text that will be displayed between the heading and the button")
      ),
      // Link field for the button's URL
      array(
        "type" => "vc_link",
        "class" => "",
        "heading" => __("Button URL"),
        "param_name" => "button-url",
        "value" => __("/contact"),
        "description" => __("The button will link to this URL")
      ),
      // Drop down for button style
      array(
        "type" => "dropdown",
        "class" => "",
        "heading" => __("Button style"),
        "param_name" => "section-button-style",
        "value" => array(
          'Blue background / White text' => 'button-blue-background',
          'White background / Blue text' => 'button-white-background',
        ),
        "description" => __("Style of the button")
      ),
      // Drop down for section style
      array(
        "type" => "dropdown",
        "class" => "",
        "heading" => __("Section background colour"),
        "param_name" => "section-background-colour",
        "value" => array(
          'Corporate blue' => 'colour-corporate-blue',
          'Transparent' => 'transparent',
        ),
        "description" => __("Background colour of the section")
      ),
      // Enable the Design section in the content element settings
      array(
        'type' => 'css_editor',
        'heading' => __( 'Css', 'my-text-domain' ),
        'param_name' => 'css',
        'group' => __( 'Design options', 'my-text-domain' ),
      ),
    ),
  ) );
}
class WPBakeryShortCode_BannerSection extends WPBakeryShortCode {}
/**
 * Visual Composer banner section shortcode
 */
function vc_banner_section_shortcode( $attributes ) {
  // Get defaults of the Visual Composer new content element
  $defaults = vc_map_get_defaults('zaroutski-banner-section');
  // Use defaults if values not provided
  if ( empty( $attributes['section-button-style'] ) ) { $attributes['section-button-style'] = $defaults['section-button-style']; }
  if ( empty( $attributes['section-background-colour'] ) ) { $attributes['section-background-colour'] = $defaults['section-background-colour']; }
  // Attributes
  extract( shortcode_atts(
    array(
    ), $attributes )
  );
  // Code
  return render_cta_button_section( $attributes );
}
add_shortcode( 'zaroutski-banner-section', 'vc_banner_section_shortcode' );
/**
 * Render CTA button section
 *
 * @param array $attributes
 * @return string
 */
function render_cta_button_section( $attributes ) {
  // Prepare the URL options for the view
  $url_options_string = $attributes['button-url'];
  $url_options_array = explode( '|', $url_options_string );
  $url_options = array();
  foreach ( $url_options_array as $entry ) {
    $temp_array = explode( ':', $entry );
    $url_options[ $temp_array[0] ] = urldecode_deep( $temp_array[1] );
  }
  // Prepare the variables for the view
  $heading_text = $attributes['heading-text'];
  $secondary_text = $attributes['secondary-text'];
  $button_text = $url_options['title'];
  $url = $url_options['url'];
  $button_target = $url_options['target'];
  $button_extra_classes = $attributes['section-button-style'];
  $section_extra_classes = $attributes['section-background-colour'];
  if ( empty( $attributes['heading-text'] ) && empty( $attributes['secondary-text'] ) ) {
    $section_extra_classes = $section_extra_classes . ' remove_padding';
  }
  $output = <<<MULTI
<!-- CTA section -->
<section class="cta-button-section <?php echo $section_extra_classes; ?>">
  <div class="container">
    <div class="row">
      <div class="col-md-12 centered">
        <?php if ($heading_text) : ?>
          <h2><?php echo $heading_text; ?></h2>
        <?php endif; ?>
        <?php if ($heading_text) : ?>
          <p><?php echo $secondary_text; ?></p>
        <?php endif; ?>
        <a class="<?php echo $button_extra_classes; ?>" href="<?php echo $url; ?>" target="<?php echo $button_target; ?>"><?php echo $button_text; ?></a>
      </div>
    </div>
  </div>
</section>
<!-- END CTA button section -->
MULTI;
  return $output;
}

קוד אחרון וחביב קוד שלי :

function vcas_component_title() {
    // Title
    vc_map(
        array(
            'name' => __( 'Title' ),
            'base' => 'vcas_title',
            "category" => __('Content', 'js_composer'),
            'params' => array(
        array(
          "type" => "attach_image",
          "heading" => __("תמונה ראשית", "js_composer"),
          "holder" => "div",
          "class" => "",
          "param_name" => "main_image",
          "description" => __("Image", "js_composer")
        ),		
        array(
          "type" => "attach_image",
          "heading" => __("תמונה לקודם", "js_composer"),
          "holder" => "div",
          "class" => "",
          "param_name" => "prev_image",
          "description" => __("Image", "js_composer")
        ),				
        array(
          "type" => "attach_image",
          "heading" => __("תמונה להבא", "js_composer"),
          "holder" => "div",
          "class" => "",
          "param_name" => "next_image",
          "description" => __("Image", "js_composer")
        ),

        array(
          "type" => "vc_link",
          "holder" => "div",
          "class" => "",
          "heading" => __("לינק לפוסט הבא", 'wpcentral'),
          "param_name" => "next_url",
          "description" => __("The Link To A Page.", 'wpcentral')
        ),				
        
        array(
          "type" => "vc_link",
          "holder" => "div",
          "class" => "",
          "heading" => __("לינק לפוסט הקודם", 'wpcentral'),
          "param_name" => "prev_url",
          "description" => __("The Link To A Page.", 'wpcentral')
        ),				
        
            )
        )
    );
}
add_action( 'vc_before_init', 'vcas_component_title' );

/**
* Function for displaying Title functionality
*
* @param array $atts    - the attributes of shortcode
* @param string $content - the content between the shortcodes tags
*
* @return string $html - the HTML content for this shortcode.
*/
function vcas_title_function( $atts, $content ) {
    $atts = shortcode_atts(
    array(
        'main_image' => '',
        'prev_image' => '',
        'next_image' => '',
        'next_url' => '',
        'prev_url' => '',
    ), $atts, 'vcas_title'
);
$main_image = wp_get_attachment_image_src($atts['main_image'], "full");
$main_imageSrc = $main_image[0];

$prev_image = wp_get_attachment_image_src($atts['prev_image'], "full");
$prev_imageSrc = $prev_image[0];

$next_image = wp_get_attachment_image_src($atts['next_image'], "full");
$next_imageSrc = $next_image[0];


$url_options_string_next = $atts['next_url'];
$url_options_array_next = explode( '|', $url_options_string_next );
$url_options_next = array();
foreach ( $url_options_array_next as $entry_next ) {
  $temp_array_next = explode( ':', $entry_next );
  $url_options_next[ $temp_array_next[0] ] = urldecode_deep( $temp_array_next[1] );
}

$url_options_string_prev = $atts['prev_url'];
$url_options_array_prev = explode( '|', $url_options_string_prev );
$url_options_prev = array();
foreach ( $url_options_array_prev as $entry_prev ) {
  $temp_array_prev = explode( ':', $entry_prev );
  $url_options_prev[ $temp_array_prev[0] ] = urldecode_deep( $temp_array_prev[1] );
}

//var_dump($url_options);
$html = '
    <div class="main_img_class">
      <img class="main_img" src="'. $main_imageSrc .'" />
    </div>
    </p>
    <div class="prev_img_class">
      <a class="thickbox" href="'. $url_options_prev['url'] .'">
        <img class="prev_img" src="'. $prev_imageSrc .'" />
      </a>
    </div>
    <div class="next_img_class">
      <a class="thickbox" href="'. $url_options_next['url'] .'">
        <img class="next_img" src="'. $next_imageSrc .'" />
      </a>
    </div>

';

//$html = '<h1 class="component title ' . $atts['style']. '" style="color: ' . $atts['title_color'] . '">'. $atts['title'] . '</h1>';
return $html;
}
add_shortcode( 'vcas_title', 'vcas_title_function' );