Tìm theo từ khóa

Code một block của riêng mình trong UX Builder theme Flatsome – phần 1



Hệ thống các block trong UX Builder trong theme Flatsome rất tiện dụng để nhà nhà làm được web. Sau một thời gian kéo thả, nếu các bạn có nhu cầu code riêng cho mình một block thì tham khảo các kiến thức mà mình đã ngâm cứu trong quá trình làm bên dưới nhé.

CẤU TRÚC CỦA 1 BLOCK TRONG UX BUILDER THEME FLATSOME 

Trước khi code một block riêng chúng ta cần nghiên cứu qua cấu trúc các hàm mà Flatsome khai báo nhé. Sau khi xem hết các thư mục trong theme Flatsome chúng ta có thể thấy một UX Builder cấu trúc gồm có 2 file như sau trong Flatsome:

File 1 : File khai báo block UX Builder trong theme Flatsome

File 2: File chứa shortcode ứng với UX Builder trên

Vào xem file 1 chúng ta có thể thấy hàm khai báo 1 block UX Builder trong theme Flatsome có cấu trúc như sau
Các bạn có thể xem các ghi chú trong code để hiểu rõ công dụng từng dòng nhé, mình sẽ không giải thích thêm nhiều trong phần lý thuyết này.

 

Vào File 2 chúng ta sẽ thấy cấu trúc 1 shortcode ứng với UX Builder vừa khai báo trên như sau

Thêm 2 hàm bên trên vào function.php là các bạn đã tạo nên 1 block trong ux builder thành công tuy nhiên chưa có chức năng gì.

code ux builder flatsome
code ux builder flatsome

CÁC KIỂU DỮ LIỆU KHAI BÁO TRONG UX BUILDER

Mình hệ thống lại các kiểu dữ liệu dùng khai báo trong UX builder của Flatsome để tiện tra cứu

Group: nhóm các giá trị

Select : chọn trong danh sách

Slider: thanh kéo như trong chọn chiều dài dòng text hiển thị

Textfield

Conditions

Chú ý: trong ví dụ về Textfield trên chúng ta có dòng ‘conditions’ => ‘ids == “”‘,  là mệnh đề if – điều kiện, nghĩa là nếu thỏa ids == “”  tức nếu ids không có gì (rỗng)  thì sẽ hiển thị tùy chọn này trên giao diện ux builder.

Radio button

Colorpicker : Chọn màu cho đối tượng

 

Các bạn có thể view thêm các file khác cùng thư mục với 2 file nêu trong phần đầu bài trong theme gốc flatsome để tìm thêm các kiểu dữ liệu cần dùng và cách dùng nhé!

Chúc các bạn thành công và hẹn gặp lại trong phần 2 bài viết này, chúng ta sẽ thực hành tạo 1 ux builder riêng cho mình.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x