- 1 số code hữu dụng cho theme Flatsome
- Hướng dẫn thay đổi cách hiển thị giá và mô tả ngắn của biến thể trong Woo
- Cách sửa lỗi thư viện ảnh theo chiều dọc trong theme flatsome
- Hướng dẫn thu gọn nội dung chi tiết sản phẩm và mô tả danh mục cho Flatsome
- Thêm Ux Builder và chức năng “Insert a template” cho “Custom Post Type” 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:
Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.
Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều
- Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
- Tino hosting
- iNet
- Nước ngoài thì Vultr
- 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
- Bình luận