Dưới đây là những Editor Control phổ biến và thường được sử dụng nhất để tạo Addon (hoặc Widget) trong quá trình thiết kế trang web WordPress bằng plugin Elementor kéo và thả.
Elementor là gì?
Đến thời điểm hiện tại, Elementor đã trở thành plugin phổ biến nhất trong thế giới WordPress. Ngay cả với bản miễn phí, bạn có thể dễ dàng thiết kế một trang Landing Page hoặc trang Bán hàng đơn giản. Tuy nhiên, với bản Elementor Pro, bạn mở ra một thế giới mới với nhiều Addon hữu ích, giúp bạn tạo ra các trang web đầy đủ tính năng cao cấp.
Để sử dụng bản Pro, bạn cần trả phí theo giấy phép được tính theo số lượng Domain trong mỗi năm. Nếu ngân sách của bạn chưa đủ để sở hữu nó, đừng lo lắng. Một phương án khác là tự viết AddOn của riêng bạn và sử dụng chúng thông qua các Action mà Elementor cung cấp. Bài viết này sẽ hướng dẫn bạn từng bước để xây dựng một AddOn hoàn chỉnh, vì vậy hãy thảnh thơi theo dõi video ở cuối bài viết.
Sau khi xem video, hãy quay lại để khám phá các Control mà Elementor cung cấp để hỗ trợ việc tạo ra những Widget chuyên nghiệp.
Rê chuột vào vùng code, rồi nhấp copy về sử dụng nhé !
1. Data Controls
1.1. Text Control
$this->add_control(
‘widget_title’,
[
‘label’ => esc_html__( ‘Tiêu đề’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::TEXT,
‘default’ => esc_html__( ‘Học Học WordPress tại wpshare247.com’, ‘wpshare247’ ),
‘placeholder’ => esc_html__( ‘Nhập tiêu đề vào đây’, ‘wpshare247’ ),
]
);
1.2. Number Control
$this->add_control(
‘column’,
[
‘label’ => esc_html__( ‘Số cột’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::NUMBER,
‘min’ => 1,
‘max’ => 12,
‘step’ => 1,
‘default’ => 4,
]
);
1.3. Textarea Control
$this->add_control(
‘description’,
[
‘label’ => esc_html__( ‘Mô tả’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::TEXTAREA,
‘rows’ => 10,
‘default’ => esc_html__( ‘Học WordPress tại wpshare247.com’, ‘wpshare247’ ),
‘placeholder’ => esc_html__( ‘Nhập mô tả vào đây’, ‘wpshare247’ ),
]
);
1.4. WYSIWYG Control
$this->add_control(
‘content’,
[
‘label’ => esc_html__( ‘Nội dung’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::WYSIWYG,
‘default’ => esc_html__( ‘Học WordPress tại wpshare247.com’, ‘wpshare247’ ),
‘placeholder’ => esc_html__( ‘Nhập nội dung vào đây’, ‘wpshare247’ ),
]
);
1.5. Switcher Control
$this->add_control(
‘title_hide’,
[
‘label’ => esc_html__( ‘Hiện tiêu đề’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::SWITCHER,
‘label_on’ => esc_html__( ‘Hiện’, ‘wpshare247’ ),
‘label_off’ => esc_html__( ‘Ẩn’, ‘wpshare247’ ),
‘return_value’ => ‘yes’,
‘default’ => ‘yes’,
]
);
1.6. Select Control
$this->add_control(
‘border_div’,
[
‘label’ => esc_html__( ‘Border’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::SELECT,
‘default’ => ‘solid’,
‘options’ => [
” => esc_html__( ‘Mặc định’, ‘wpshare247’ ),
‘none’ => esc_html__( ‘None’, ‘wpshare247’ ),
‘solid’ => esc_html__( ‘Solid’, ‘wpshare247’ ),
‘dashed’ => esc_html__( ‘Dashed’, ‘wpshare247’ ),
‘dotted’ => esc_html__( ‘Dotted’, ‘wpshare247’ ),
‘double’ => esc_html__( ‘Double’, ‘wpshare247’ ),
],
‘selectors’ => [
‘{{WRAPPER}} .your-class’ => ‘border-style: {{VALUE}};’,
],
]
);
1.7. Select2 Control
$this->add_control(
‘category’,
[
‘label’ => esc_html__( ‘Danh mục’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::SELECT2,
‘label_block’ => true,
‘multiple’ => true,
‘options’ => [
‘shirt’ => esc_html__( ‘Áo sơ mi’, ‘wpshare247’ ),
‘music’ => esc_html__( ‘Âm nhạc’, ‘wpshare247’ ),
‘food’ => esc_html__( ‘Thực phẩm’, ‘wpshare247’ ),
],
‘default’ => [ ‘music’, ‘food’ ],
]
);
1.8. Choose Control
$this->add_control(
‘text_align’,
[
‘label’ => esc_html__( ‘Căn lề’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::CHOOSE,
‘options’ => [
‘left’ => [
‘title’ => esc_html__( ‘Trái’, ‘wpshare247’ ),
‘icon’ => ‘eicon-text-align-left’,
],
‘center’ => [
‘title’ => esc_html__( ‘Giữa’, ‘wpshare247’ ),
‘icon’ => ‘eicon-text-align-center’,
],
‘right’ => [
‘title’ => esc_html__( ‘Phải’, ‘wpshare247’ ),
‘icon’ => ‘eicon-text-align-right’,
],
],
‘default’ => ‘center’,
‘toggle’ => true,
‘selectors’ => [
‘{{WRAPPER}} .your-class’ => ‘text-align: {{VALUE}};’,
],
]
);
1.9. Color Control
$this->add_control(
‘text_color’,
[
‘label’ => esc_html__( ‘Màu chữ’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::COLOR,
‘selectors’ => [
‘{{WRAPPER}} .your-class’ => ‘color: {{VALUE}}’,
],
]
);
1.10. Font Control
$this->add_control(
‘font_family’,
[
‘label’ => esc_html__( ‘Font Family’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::FONT,
‘default’ => “‘Open Sans’, sans-serif”,
‘selectors’ => [
‘{{WRAPPER}} .your-class’ => ‘font-family: {{VALUE}}’,
],
]
);
1.11. Date Time Control
$this->add_control(
‘due_date’,
[
‘label’ => esc_html__( ‘Ngày’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::DATE_TIME,
]
);
1.12. Gallery Control
$this->add_control(
‘gallery’,
[
‘label’ => esc_html__( ‘Thêm ảnh’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::GALLERY,
‘show_label’ => false,
‘default’ => [],
]
);
1.13. Repeater Control
$this->add_control(
‘list’,
[
‘label’ => esc_html__( ‘Lặp lại danh sách’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::REPEATER,
‘fields’ => [
[
‘name’ => ‘list_title’,
‘label’ => esc_html__( ‘Tiêu đề’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::TEXT,
‘default’ => esc_html__( ‘Mặc định’ , ‘wpshare247’ ),
‘label_block’ => true,
],
[
‘name’ => ‘list_content’,
‘label’ => esc_html__( ‘Nội dung’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::WYSIWYG,
‘default’ => esc_html__( ‘Mặc định’ , ‘wpshare247’ ),
‘show_label’ => false,
],
[
‘name’ => ‘list_color’,
‘label’ => esc_html__( ‘Màu’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::COLOR,
‘selectors’ => [
‘{{WRAPPER}} {{CURRENT_ITEM}}’ => ‘color: {{VALUE}}’
],
]
],
‘default’ => [
[
‘list_title’ => esc_html__( ‘Tiêu đề #1’, ‘wpshare247’ ),
‘list_content’ => esc_html__( ‘Nhấp vào đây để thay đổi nội dung.’, ‘wpshare247’ ),
],
[
‘list_title’ => esc_html__( ‘Tiêu đề #2’, ‘textdomain’ ),
‘list_content’ => esc_html__( ‘Nhấp vào đây để thay đổi nội dung.’, ‘wpshare247’ ),
],
],
‘title_field’ => ‘{{{ list_title }}}’,
]
);
1.14. Entrance Animation Control
$this->add_control(
‘entrance_animation’,
[
‘label’ => esc_html__( ‘Hiệu ứng’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::ANIMATION,
‘prefix_class’ => ‘animated ‘,
]
);
1.15. Exit Animation Control
$this->add_control(
‘exit_animation’,
[
‘label’ => esc_html__( ‘Thoát hiệu ứng’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::EXIT_ANIMATION,
‘prefix_class’ => ‘animated ‘,
]
);
1.16. Hover Animation Control
$this->add_control(
‘hover_animation’,
[
‘label’ => esc_html__( ‘Hover Animation’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::HOVER_ANIMATION,
]
);
2. MultiValue Controls
2.1 Media Control
$this->add_control(
‘image’,
[
‘label’ => esc_html__( ‘Chọn hình’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::MEDIA,
‘default’ => [
‘url’ => \Elementor\Utils::get_placeholder_image_src(),
],
]
);
2.2 Image Dimensions Control
$this->add_control(
‘custom_dimension’,
[
‘label’ => esc_html__( ‘Kích thước hình’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::IMAGE_DIMENSIONS,
‘description’ => esc_html__( ‘Ảnh sẽ tự động cắt theo tỉ lệ.’, ‘wpshare247’ ),
‘default’ => [
‘width’ => ”,
‘height’ => ”,
],
]
);
2.3 Icons Control
$this->add_control(
‘icon’,
[
‘label’ => esc_html__( ‘Icon’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::ICONS,
‘default’ => [
‘value’ => ‘fas fa-circle’,
‘library’ => ‘fa-solid’,
],
‘recommended’ => [
‘fa-solid’ => [
‘circle’,
‘dot-circle’,
‘square-full’,
],
‘fa-regular’ => [
‘circle’,
‘dot-circle’,
‘square-full’,
],
],
]
);
2.4 Text Shadow Control
$this->add_control(
‘custom_text_shadow’
[
‘label’ => esc_html__( ‘Đỗ bóng cho chữ’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::TEXT_SHADOW,
‘selectors’ => [
‘{{SELECTOR}}’ => ‘text-shadow: {{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{COLOR}};’,
],
]
);
2.5 Box Shadow Control
$this->add_control(
‘custom_box_shadow’,
[
‘label’ => esc_html__( ‘Đỗ bóng cho thẻ’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::BOX_SHADOW,
‘selectors’ => [
‘{{SELECTOR}}’ => ‘box-shadow: {{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{SPREAD}}px {{COLOR}};’,
],
]
);
3. Unit Controls
3.1 Slider Control
$this->add_control(
‘width’,
[
‘label’ => esc_html__( ‘Width’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::SLIDER,
‘size_units’ => [ ‘px’, ‘%’, ‘custom’ ],
‘range’ => [
‘px’ => [
‘min’ => 0,
‘max’ => 1000,
‘step’ => 5,
],
‘%’ => [
‘min’ => 0,
‘max’ => 100,
],
],
‘default’ => [
‘unit’ => ‘%’,
‘size’ => 50,
],
‘selectors’ => [
‘{{WRAPPER}} .your-class’ => ‘width: {{SIZE}}{{UNIT}};’,
],
]
);
3.2 Dimensions Control
$this->add_control(
‘margin’,
[
‘label’ => esc_html__( ‘Margin’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::DIMENSIONS,
‘size_units’ => [ ‘px’, ‘%’, ’em’, ‘custom’ ],
‘selectors’ => [
‘{{WRAPPER}} .your-class’ => ‘margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};’,
],
]
);
4. UI Controls
4.1 Heading Control
$this->add_control(
‘more_options’,
[
‘label’ => esc_html__( ‘Tiêu đề nhóm’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::HEADING,
‘separator’ => ‘before’,
]
);
4.2 Raw HTML Control
$this->add_control(
‘important_note’,
[
‘label’ => esc_html__( ‘Important Note’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::RAW_HTML,
‘raw’ => esc_html__( ‘Dùng để chú thích cho các control khác’, ‘wpshare247’ ),
‘content_classes’ => ‘your-class’,
]
);
4.3 Divider Control
$this->add_control(
‘hr’,
[
‘type’ => \Elementor\Controls_Manager::DIVIDER,
]
);
5. Group Controls
5.1 Typography Group Control
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
‘name’ => ‘content_typography’,
‘selector’ => ‘{{WRAPPER}} .your-class’,
]
);
5.2 Text Stroke Group Control
$this->add_group_control(
\Elementor\Group_Control_Text_Stroke::get_type(),
[
‘name’ => ‘text_stroke’,
‘selector’ => ‘{{WRAPPER}} .your-class’,
]
);
5.3 Text Shadow Group Control
$this->add_group_control(
\Elementor\Group_Control_Text_Shadow::get_type(),
[
‘name’ => ‘text_shadow’,
‘selector’ => ‘{{WRAPPER}} .your-class’,
]
);
5.4 Box Shadow Group Control
$this->add_group_control(
\Elementor\Group_Control_Box_Shadow::get_type(),
[
‘name’ => ‘box_shadow’,
‘selector’ => ‘{{WRAPPER}} .your-class’,
]
);
5.5 Border Group Control
$this->add_group_control(
\Elementor\Group_Control_Border::get_type(),
[
‘name’ => ‘border’,
‘selector’ => ‘{{WRAPPER}} .your-class’,
]
);
5.6 Background Group Control
$this->add_group_control(
\Elementor\Group_Control_Background::get_type(),
[
‘name’ => ‘background’,
‘types’ => [ ‘classic’, ‘gradient’, ‘video’ ],
‘selector’ => ‘{{WRAPPER}} .your-class’,
]
);
5.7 Image Size Group Control
$this->add_control(
‘image’,
[
‘label’ => esc_html__( ‘Chọn ảnh’, ‘wpshare247’ ),
‘type’ => \Elementor\Controls_Manager::MEDIA,
‘default’ => [
‘url’ => \Elementor\Utils::get_placeholder_image_src(),
],
]
);
$this->add_group_control(
\Elementor\Group_Control_Image_Size::get_type(),
[
‘name’ => ‘thumbnail’,
‘exclude’ => [ ‘custom’ ],
‘include’ => [],
‘default’ => ‘large’,
]
);
5.8 CSS Filter Group Control
$this->add_group_control(
\Elementor\Group_Control_Css_Filter::get_type(),
[
‘name’ => ‘custom_css_filters’,
‘selector’ => ‘{{WRAPPER}} .your-class’,
]
);
6. Custom Control
Ngoài 5 nhóm chính được liệt kê bên trên, Elementor cũng chỗ trợ các Dev tự tạo các Control đúng theo mục đích, yêu cầu để phục vụ cho chính mình.
Bạn có thể thao khảo thêm action:
add_action( ‘elementor/controls/register’, ‘register_new_controls’ );
7. Section Control
Section chứa một hoặc nhiều control
//Mở Section
$this->start_controls_section(
‘content_section’,
[
‘label’ => esc_html__( ‘Content’, ‘textdomain’ ),
‘tab’ => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
//Thêm các Control của bạn vào đây
//Nhớ đóng lại Section
$this->end_controls_section();
