text 自定义WP Bakery元素

Posted 2021-05-02

Add the following to your `functions.php`

```php
function vc_before_init_actions() {
	require_once( get_template_directory().'/functions/shortcodes/vc-text-image.php' );
}
add_action( 'vc_before_init', 'vc_before_init_actions' );
```

And now create a file in the location specified above with the following (customise accordingly):
```php
<?php
/*
 * Custom element for Visual Composer
 *
 * Displays an image and some text side by side. See homepage for example usage
 */

class vcTextImage extends WPBakeryShortCode {

	// Element Init
	function __construct() {
		add_action( 'init', array( $this, 'vc_textimage_mapping' ) );
		add_shortcode( 'vc_textimage', array( $this, 'vc_textimage_html' ) );
	}

	// Element Mapping
	public function vc_textimage_mapping() {

		// Stop all if VC is not enabled
		if ( !defined( 'WPB_VC_VERSION' ) ) {
			return;
		}

		// Map the block with vc_map()
		vc_map(
			array(
				'name' => __('Text and Image', 'lanmaster'),
				'base' => 'vc_textimage',
				'description' => __('Text with image side by side', 'lanmaster'),
				'category' => __('Wallmander', 'lanmaster'),
				'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',
				'params' => array(

					array(
						'type' => 'textfield',
						'heading' => __( 'Title', 'lanmaster' ),
						'param_name' => 'title',
						'description' => __( 'Box Title', 'lanmaster' ),
						'admin_label' => false,
					),

					array(
						'type' => 'textarea_html',
						'heading' => __( 'Content', 'lanmaster' ),
						'param_name' => 'content',
						'value' => __( '' ),
						'description' => __( 'Text', 'lanmaster' ),
						'admin_label' => false,
						'weight' => 2,
					),

					array(
						'type' => 'attach_image',
						'heading' => __( 'Image', 'js_composer' ),
						'param_name' => 'image',
						'value' => '',
						'description' => __( 'Select image from media library.', 'js_composer' ),
						'dependency' => array(
							'element' => 'source',
							'value' => 'media_library',
						),
						'admin_label' => true,
					),

					array(
						'type' => 'textfield',
						'heading' => __( 'Button text', 'lanmaster' ),
						'param_name' => 'buttontext',
						'description' => __( 'Button text', 'lanmaster' ),
						'admin_label' => false,
					),

					array(
						'type' => 'textfield',
						'heading' => __( 'Button link', 'lanmaster' ),
						'param_name' => 'buttonlink',
						'description' => __( 'Button text', 'lanmaster' ),
						'admin_label' => false,
					),

					array(
						'type' => 'checkbox',
						'heading' => __( 'Reverse direction?', 'lanmaster' ),
						'param_name' => 'reverse',
						'description' => __( 'Text on left, image on right', 'lanmaster' ),
						'admin_label' => false,
					),

				),
			)
		);

	}


	// Element HTML
	public function vc_textimage_html( $atts, $content = null ) {

		// Params extraction
		extract(
			shortcode_atts(
				array(
					'title'   		=> '',
					'buttontext' 	=> '',
					'buttonlink'	=> '',
					'reverse'		=> '',
					'image'			=> '',
				),
				$atts
			)
		);

		$content = wpb_js_remove_wpautop($content, true); // fix unclosed/unwanted paragraph tags in $content
		
		$reverseClass 	= ($reverse ? 'lm-image-text--reverse' : false);
		
		$imageArr 		= wp_get_attachment_image_src($image,'large');
		$imageUrl 		= $imageArr[0];
		$imageWidth		= $imageArr[1];
		$imageHeight 	= $imageArr[2];

		$buttonHtml 	= ($buttonlink) ? '<a href="'.$buttonlink.'" class="lm-button lm-image-text__button">'.$buttontext.'</a>': '' ;

		// Fill $html var with data
		$html = '
			<div class="lm-container">
				<div class="lm-image-text '.$reverseClass.'">
					<div class="lm-image-text__image">
						<img src="'.$imageUrl.'" width="'.$imageWidth.'" height="'.$imageHeight.'">
					</div>
					<div class="lm-image-text__content">
						'.wpb_js_remove_wpautop($content, true).'
						'.$buttonHtml.'
					</div>
				</div>
			</div>';

		return $html;
	}

} // End Element Class

// Element Class Init
new vcTextImage();
```
Your new element can now be found under *My Custom Elements* within WP Bakery