Chào các bạn, ở bài này WolfActive tụi mình sẽ cho ra một bài viết liên quan đến WPBakery. Chắc hẳn đối với các bạn sử dụng WP dạng kéo thả, thì cũng không xa lạ gì nhiều với WPBakery nhỉ? Tuy nhiên hẳn sẽ có những Widgets mà bạn không ưng ý hoặc bạn không tìm thấy widgets mình cần. Thì bây giờ tụi mình sẽ chỉ cho các bạn qua bài Hướng dẫn tạo plugin widgets extend WPBakery.
1/ Tạo Plugin
Đầu tiên các bạn cần phải tạo một plugin của chính bạn để có thể extend widgets của WPBakery. Như ở hình dưới, mình tạo một folder Plugin tên wa-add-on-wp-bakery. Trong folder này mình có tạo một file tên plugin.php.
Trong file plugin.php các bạn ghi những dòng sau vào comment.
/**
* Plugin Name: Wa Add on WpBakery
* Plugin URI: wolfactive.dev
* Description: director by wa
* Version: 1.10.3
* Author: director by wa
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: wa-add-on-wp-bakery
* Domain Path: /languages
*/
class Wa_Add_On_WpBakery{
function __construct(){
add_action( 'admin_notices', array($this,'check_condition'));
add_action('init', array($this,'init'));
}
public function init(){
$this->include_widgets();
}
public function check_condition(){
if(!is_plugin_active('js_composer/js_composer.php') || !defined('WPB_VC_VERSION')){
$class = 'notice notice-error';
$message = __( 'Cài WPBakery', 'wa-add-on-wp-bakery' );
printf( '%2$s', esc_attr( $class ), esc_html( $message ) );
return;
}
}
private function include_widgets(){
$dir= __DIR__;
include_once($dir.'/widgets/text-box-widget.php');
}
}
new Wa_Add_On_WpBakery();

2/ Tạo widgets và render
class WaTextBoxWidgets extends WPBakeryShortCode {
//Initialize Component
function __construct() {
add_action( 'init', array( $this, 'create_shortcode' ), 999 );
add_shortcode( 'wa_text_box', array( $this, 'render_shortcode' ) );
}
//Map Component
public function create_shortcode() {
//Code in the next steps
if ( !defined( 'WPB_VC_VERSION' ) ) {
return;
}
vc_map( array(
'name' => __('Wa TextBox ', 'wa-add-on-wp-bakery'), //Tên Widgets,tên Plugin
'base' => 'wa_text_box', // tên shortcode mà bạn sẽ gọi ở add_shortcode trong construct()
'description' => __( 'Text Box wa', 'wa-add-on-wp-bakery' ),
'category' => __( 'wa module', 'wa-add-on-wp-bakery'),
'params' => array(
array(
"type" => "textfield",
"class" => "",
"heading" => __( "Heading", "wa-add-on-wp-bakery" ), //Label của textfield
"param_name" => "wa_textbox_heading", //tên param
"value" => __( "", "wa-add-on-wp-bakery" ),
"description" => __( "Enter description.", "wa-add-on-wp-bakery" )
),
array(
"type" => "vc_link",
"class" => "",
"heading" => __( "Links", 'wa-add-on-wp-bakery' ),
"param_name" => "wa_link",
"description" => __( "Add Your Url", 'wa-add-on-wp-bakery' ),
),
array(
"type" => "attach_image",
"class" => "",
"heading" => __( "Image", "wa-add-on-wp-bakery" ),
"param_name" => "wa_img",
"value" => '',
"description" => __( "Enter description.", "wa-add-on-wp-bakery" )
)
),
));
}
//Render Component
public function render_shortcode( $atts, $content, $tag ) {
//Code in the next steps
extract((shortcode_atts(
//tạo array gọi các param_name ở trên để lấy nội dung
array(
'wa_textbox_heading' => '',
'wa_link' => '',
'wa_img'=>'',
), $atts)));
//Heading
$heading = wpb_js_remove_wpautop($content, true); //Dùng để loại bỏ các thẻ breakline như br mỗi khi các bạn xuống dòng. Cái này các bạn dùng trong textarea là được.
$textbox_heading = esc_html($atts['wa_textbox_heading']); // display content nhập vào từ field
//Links
$wa_source = vc_build_link( $atts['wa_link'] ); //Chuyển post/page mình chọn về dạng link (ở đây có 2 loại phân dạng: title và url)
$wa_url = esc_url( $wa_source['url'] ); // display url của post/page
//img
$wa_image_url = wp_get_attachment_image_src($atts['wa_img']); //lấy thông tin img mình chọn
ob_start(); // bắt đầu quá trình lưu thông tin code
$directory = plugin_dir_path( __FILE__ ); // lấy path của plugin
include_once( $directory.'template/text-box-template.php' );
$output=ob_get_contents(); // lưu nội dung vào một biến
ob_end_clean(); //điểm dừng của thông tin được lưu
return $output;
}
}
new WaTextBoxWidgets();
<div class="wa-widgets-extend-wpbakery">
<div class="wa-heading">
<h1><?php echo $textbox_heading;?></h1>
</div>
<div class="wa-img">
<a href="<?php echo $wa_url?>">
<img src="<?php echo $wa_image_url[0]?>" alt="img">
</a>
</div>
</div>
Và đây là thành phẩm:
3/ Khai báo file css, js vào plugin
Bên cạnh đó mình sẽ hướng dẫn thêm các bạn về cách include file js và css vào plugin. Các bạn có thể add nó vào sau ob_start()
wp_register_style( 'wa_src', plugins_url('/wa-add-on-wp-bakery/src/css/main.css'),__FILE__ );
wp_enqueue_style('wa_src');
wp_register_script( 'wa_src', plugins_url('/wa-add-on-wp-bakery/src/js/root.js'),__FILE__);
wp_enqueue_script('wa_src');
4/ Tổng kết
Như vậy là mình đã hướng dẫn các bạn xong việc tạo plugin tạo Widgets từ extend WPBakery rồi. Chúc các bạn thành công nhé, mọi thông tin thắc mắc các bạn cứ liên hệ fb tụi mình nhé.