Hướng dẫn tạo element mới cho UX Builder – Flatsome Theme

Tạo element cho UX Builder trong theme Flatsome

Trong bài này mình sẽ hướng dẫn tạo element cho UX Builder trong theme Flatsome. Với cách này bạn có thể tự tạo ra các element của riêng mình. Để có thể dùng cho nhiều dự án khác nhau hoặc để mở rộng thêm tính năng cho Flatsome theo phong cách riêng và để khách hàng dễ sử dụng.

Nội dung bài viết:

- Ví dụ thực tế
- Giới thiệu về các type có sẵn của UX builder

Ví dụ thực tế về tạo 1 shortcode mới cho UX builder

Trong ví dụ này chúng ta sẽ đi tạo thêm 1 Element để hiển thị 1 số đã nhập từ Ux builder. Tất cả các code sau sẽ được viết trong file functions.php của theme đang sử dụng. Ví dụ mình dùng flatsome child theme thì viết trong flatsome-child/functions.php

Đoạn code sau sẽ tạo mới 1 Element với tên “Ví dụ về Element” và có shortcode dạng [devvn_viewnumber]

    
/*
 * Ví dụ về thêm shortcode cho UX Builder
 * Hiển thị 1 số tùy chỉnh
 * Author levantoan.com
 */
function devvn_ux_builder_element(){
    add_ux_builder_shortcode('devvn_viewnumber', array(
        'name'      => __('Ví dụ về Element'),
        'category'  => __('Content'),
        'priority'  => 1,
        'options' => array(
            'number'    =>  array(
                'type' => 'scrubfield',
                'heading' => 'Numbers',
                'default' => '1',
                'step' => '1',
                'unit' => '',
                'min'   =>  1,
                //'max'   => 2
            ),
        ),
    ));
}
add_action('ux_builder_setup', 'devvn_ux_builder_element');
    

Sau khi thêm code trên thì vào Ux Builder sẽ có thêm mục như sau

Trong đó

name : Tên của Element
category: là nhóm của element. Cái này có thể đặt tên tùy ý. Cứ cùng tên là nằm trong 1 nhóm. Như hình trên là trong nhóm Content (Nội dung). Mặc định có các nhóm như Content, Layout, Elements
priority: Thứ tự của Element
options: bao gồm các phần tử (Type) của Element này. Ví dụ như textbox, number ….
Còn nhiều các thông số khác. Mình sẽ tổng hợp và giới thiệu sau. Cơ bản chỉ cần các thông số cơ bản như vậy là chạy được rồi

Sau khi thêm được Element rồi bắt đầu đi thêm shortcode  devvn_viewnumber

Dán đoạn code sau vào functions.php tiếp sau đoạn code trên. Để thêm shortcode cho WordPress và hiển thị kết quả cho Element mình vừa tạo bên trên. Các tạo shortcode thì các bạn có thể tìm hiểu thêm tại đây

    
function devvn_viewnumber_func($atts){
    extract(shortcode_atts(array(
        'number'    => '1',
    ), $atts));
    ob_start();
    echo 'Bạn nhập số '.$number;
    return ob_get_clean();
}
add_shortcode('devvn_viewnumber', 'devvn_viewnumber_func');
    

F5 và xem kết quả bạn vừa làm thôi :v

Toàn bộ code của ví dụ này. 

    
/*
 * Ví dụ về thêm shortcode cho UX Builder
 * Hiển thị 1 số tùy chỉnh
 * Author levantoan.com
 */
function devvn_ux_builder_element(){
    add_ux_builder_shortcode('devvn_viewnumber', array(
        'name'      => __('Ví dụ về Element'),
        'category'  => __('Content'),
        'priority'  => 1,
        'options' => array(
            'number'    =>  array(
                'type' => 'scrubfield',
                'heading' => 'Numbers',
                'default' => '1',
                'step' => '1',
                'unit' => '',
                'min'   =>  1,
                //'max'   => 2
            ),
        ),
    ));
}
add_action('ux_builder_setup', 'devvn_ux_builder_element');
 
function devvn_viewnumber_func($atts){
    extract(shortcode_atts(array(
        'number'    => '1',
    ), $atts));
    ob_start();
    echo 'Bạn nhập số '.$number;
    return ob_get_clean();
}
add_shortcode('devvn_viewnumber', 'devvn_viewnumber_func');
    

Giới thiệu về các type có sẵn của UX builder

Đang cập nhật …

Kết luận

Trên đây là cách tạo 1 shortcode đơn giản và thêm element cho Ux Builder. Còn phát triển thế nào là ở ý tưởng của bạn :) Ví dụ chỉ là để các bạn hiểu cơ chế hoạt động thôi. Chúc các bạn có được nhưng Element tuyệt vời