Bài viết này thực hiện (hoặc lụm bài về đăng câu like từ các trang khác) bởi Việt Lâm Coder một YOUTUBER có tâm và đẹp trai siêu cấp vô địch zũ trụ.
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.
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]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
/* * 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
|
1
2
3
4
5
6
7
8
9
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
/* * 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
Bài viết này thực hiện (hoặc lụm bài về đăng câu like từ các trang khác) bởi Việt Lâm Coder một YOUTUBER có tâm và đẹp trai siêu cấp vô địch zũ trụ.
