Cách tạo một element mới trong visual composer



Các bạn làm website với wordpress thì không còn lạ gì với plugin visual composer nữa. Đây là một plugin hỗ trợ mạnh mẽ trong việc custom page trong wordpress. Và hầu như trong số những người tìm hiểu về lập trình theme wordpress đều phải biết đến cách sử dụng plugin này.

Trong bài viết này mình sẽ hướng dẫn các bạn cách tạo ra một element mới trong visual composer một cách đơn giản nhất. Nếu bạn muốn hiểu được nội dung bài viết này thì bạn nên tìm hiểu qua một số bài viết về lập trình theme wordpress cơ bản để có thể hiểu rõ cách hoạt động của các hàm, các hook, filter cơ bản trong wordpress.

Bước 1: Cấu trúc thư mục và các file để code

Trong thư mục của theme mà bạn đang sử dụng, tạo một thư mục mới có tên vc-composer (bạn có thể đặt tên khác tùy ý). Bên trong thư mục vc-composer tạo một file .php mới có tên my-element.php (bạn có thể đặt tên theo ý thích).

Để file my-element.php làm việc, bạn cần sử dụng action tới hook vc_before_init. Để làm điều này, trong file functions.php bạn thêm đoạn code sau

Bước 2: Tạo cấu trúc các hàm file my-element.php

Tạo một class mới có tên vcNews trong file my-element.php kế thừa từ class WPBakeryShortCode để có thể sử dụng được những hàm mà visual composer đã viết sẵn cho chúng ta.

Trong class vcNews thiết lập 3 hàm như sau

  • function __construct để khởi tạo cho element. Trong này sử dụng một action để khởi tạo chức năng cho element sẽ được thực hiện trong hàm vc_news_mapping().
  • function vc_news_mapping() sẽ khởi tạo những chức năng cho element (sẽ được nói rõ bên dưới)
  • function vc_news() sẽ có nhiệm vụ hiển thị những gì element có bằng hàm add_shortcode() được khởi tạo trong function __construct

Bước 3: Viết chức năng cho function vc_news_mapping()

Khởi tạo các giá trị cho element. Trong đó có phần category là tab khi mà element nằm trong đó. Nếu bạn ko khai báo trường này thì element mặc định nằm trong tab  All, icon là hình đại diện cho element.

Phần params là danh sách cách array(). Mỗi array là một chức năng cho element. Ví dụ như params trên có 2 array(), array thứ nhất sẽ hiển thị một textfield cho bạn nhập dữ liệu, array thứ hai hiển thị 1 textarea cho bạn nhập liệu.

Cách tạo một element mới trong visual composer

Bước 4: Viết code cho function vc_news()

Để những chức năng trong function vc_news_mapping() ở trên hiển thị ra page khi bạn sử dụng visual composer thì bạn cần hoàn thiện function vc_news() này.

Với bài viết này hi vọng sẽ giúp bạn có thể tự tạo cho mình những element  theo ý thích. Nếu có bất kì thắc mắc hay phản hồi gì, bạn vui lòng để lại bình luận bên dưới.

Bình luận

Bài viết cùng chuyên mục