Tạo element mới cho UX Builder – Flatsome Theme

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tạo element mới cho UX Builder – Flatsome Theme

Trong bài này mình sẽ chỉ dẫn tạo element cho UX Builder trong theme Flatsome. Với phương pháp này bạn cũng đều có thể tự tạo ra các element của riêng mình. Để cũng đều có thể dùng cho nhiều dự án không trùng lặp hoặc để mở rộng thêm tính năng cho Flatsome hoặc tính năng mà khách hàng yêu cầu.

Tạo 1 shortcode mới cho UX builder

Trong tỉ dụ này chúng ta sẽ tạo thêm 1 element để hiển thị 1 số đã nhập từ Ux builder. Bạn viết đoạn code sau vào file functions.php của giao diện WordPress đang sử dụng hoặc một plugin của riêng bạn. 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 [hw_viewnumber]

 /* * Ví dụ về thêm shortcode cho UX Builder. Hiển thị 1 số tùy chỉnh */ function hw_ux_builder_element(){ add_ux_builder_shortcode('hw_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', 'hw_ux_builder_element');  

Sau khi thêm code trên thì vào Ux Builder sẽ được thêm phần tử như sau:

Giải thích:

  • name : Tên của Element
  • category : nhóm của element. Bạn có thể đặt tên tùy ý. Cứ cùng tên là nằm ở phía 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 : kể cả các phần tử (Type) của Element này. Ví dụ: textbox, number ….

Như vậy chúng ta đã thêm được Element rồi, giờ đây sẽ thêm shortcode trong WordPress mang tên hw_viewnumber .

 function hw_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('hw_viewnumber', 'hw_viewnumber_func');  

Trên này là cách tạo 1 shortcode và thêm vô element của Ux Builder. Còn biết bao kiến thức khác mình sẽ chia sẻ ở bài viết sau, chúng tôi sẽ thật vui nếu bạn muốn chia sẻ thêm kiến thức về theme Flatsome bằng cách để lại bình luận dưới bài viết này nhé.

Bài viết Tạo element mới cho UX Builder – Flatsome Theme được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang