Tạo widget trong Elementor

Elementor

Elementor là một plugin WordPress dùng để xây dựng trang (page builder), được sinh sau đẻ muôn hơn so với các page builder khác như Visual Composer hay Site Origin nhưng biết kế thừa những đàn anh đi trước và tận dụng lợi thế đó Elementor dần trở nên phổ biến với hơn 1 triệu người dùng đứng top 30 plugin phổ biến trên WordPress

Yêu cầu:

  1. Biết lập trình PHP, HTML/CSS cơ bản.
  2. Biết cách tạo một plugin đơn giản.

Hôm nay chúng sẽ tạo 1 widget mà ở đó sẽ xuất ra đoạn text chúng ta đã nhập

Tạo Plugin.

Để tạo được widget mới trong elementor thì trước tiên chúng ta phải tạo 1 plugin, và từ đây ta sẽ xây dựng lên các widget phục vụ việc hoàn thiện website:

Bước 1: khai báo plugin.

Chúng ta sẽ khai báo, khởi tạo mới 1 plugin. Tại file này không có gì đặc biệt chỉ kiểm tra các yếu tố để chạy plugin.

Bước 2: Enqueue assets

Tiếp theo chúng ta nên tạo 1 file khác ở đây mình đặt tên là base.php nhiệm vụ của file này là sẽ enqueue các file js/css và khởi tạo các element của chúng ta vào elementor


Chi tiết

Function này sẽ hook các function của chúng ta vào các hook sẵn có của Elementor.

Method này là nơi chúng ta sẽ thêm các widgets chúng ta viết vào. Trong trường hợp này mình viết 1 widget mới và đặt tên là hello.php file này mình để trong thừ mục widgets để tiện quản lý

Method này chúng ta sẽ đăng ký 1 section mới trong elementor ( nơi sẽ hiển thị các widget ngoài front-end )

Các method chúng ta sẽ register và enqueue các script và style (dùng cho front-end). File js sẽ được hướng dẫn sự dụng nâng cao hớn ở phần sau.

Còn file style (.css) các bạn có thể viết bình thường

Bước 3

Tại bước này chúng ta sẽ tạo file hello.php. File này sẽ khai báo các control của widget, và có nhiệm vụ render ra widget ngoài front-end.


Chi Tiết

Method định nghĩa ID của widget (không được trùng lặp)

Method định nghĩa tên và icon của widget trong admin

Phần icon bạn có thể dùng FontAwesome hoặc E-icon của Elementor

Trong trường hợp bạn dùng E-icon hãy vào trang web: http://bluejamesbond.github.io/CharacterMap/

Sau đó upload font của Elementor vào (xem hình để biết thêm chi tiết : https://i.imgur.com/APbQtpX.gifv )

Method này dùng để khai báo section (category) sẽ bỏ widget vào. Và section này mình đã đang kí ở trong file base.php (hình 2.3)

Method khai báo các control của widget này, để biết các control Elementor support truy cập link này : https://developers.elementor.com/elementor-controls#Data_Controls

Bạn cần có start sectionend section và trong đó bạn có thể bỏ bao nhiêu control tùy ý.

Method sẽ đảm trách nhiệm vụ render html ra ngoài front-end, để lấy data ở control đã khai báo phía trên chúng ta sẽ dùng hàm get_settings_for_display()

Bạn có thể xem code trên github.com: https://github.com/zzfortezz/widget-elementor

Kết luận.

Mình đã giới thiệu cho các bạn các tạo widget cơ bản nhất trong Elementor , hẹn các trong bài viết sau. Mọi thắc mắc cần giải đáp hãy để lại comment ở phía dưới nhé!