Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Theme Development

Cách mở rộng Visual Composer với các phần tử nội dung tuỳ biến

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong bài hướng dẫn trước chúng ta đã tìm hiểu Visual Composer cho những nhà phát triển theme; giấy phép và thiết lập kỹ thuật. Trong hướng dẫn này chúng ta sẽ tiến thêm bước nữa, mở rộng Visual Composer và thiết lập nó để xây dựng các trang.

Tính năng mặc định của Visual Composer

Trước khi chúng ta xem xét xây dựng một trang thật sự, hãy xem qua một số tính năng mặc định.

Các phần tử nội dung

Visual Composer tích hợp sẵn một dãy các phần tử nội dung. Bên cạnh điều này, Visual Composer còn cung cấp trên 200 add-on, cả miễn phí và trả phí.

Mặc định Visual Composer chỉ kích hoạt cho các trang (page), nhưng bạn cũng có thể kích hoạt nó cho các bài viết và cả các kiểu bài viết tuỳ biến (custom post type). Những điều này và thêm các tuỳ chọn có thể được quản trị từ bên trong Role Manger của Visual Composer. Ở đó bạn cũng có thể kiểm soát những người có thể sử dụng Visual Composer trong phần quản trị của bạn

Shortcode Manager cho phép bạn thêm các thành phần tùy biến với các thông số. Theo một số cách tương tự như tập trung-người dùng (user-centric) của phương pháp ánh xạ các phần tử mới của nhà phát triển.

Grid Builder nâng cao

Một trong những công cụ hấp dẫn nhất cho người dùng là grid builder. Với nó, người dùng có thể tạo bất kỳ bố cục ô lưới nào, với hình ảnh, văn bản, các nút, bài viết và vân vân, mà không cần chạm vào code. Ô lưới kiểu Masonry cũng sẵn có.

Mmm grids
Ô lưới

Thư viện Template

Thư viện template cho phép người dùng truy cập vào các template chuyên nghiệp cho cấu trúc trang. Các ví dụ điển hình gồm bố cục bài viết, bố cục trang mục tiêu (landing page), trang parallax, danh mục, tên trang của bạn. Là một nhà phát triển, bạn còn có thể tạo riêng cho bạn, và bao gồm chúng với nội dung demo của theme bạn.

Nổi trống lên nào...

Và, cuối cùng, chúng ta đã đến phần quan trọng nhất của Visual Composer: trình soạn thảo. Đây là một trình soạn thảo back-end front-end và với nó người dùng có thể xây dựng các trang mà không cần có kiến thức về code.

Visual Composers back end editor
Trình soạn thảo back-end của Visual Composer
Visual Composers front-end editor
Trình soạn thảo front-end của Visual Composer

Với trình soạn thảo front-end bạn hiệu chỉnh một cách chính xác những gì bạn thấy. Nó chắc chắn nhiều hơn What You See Is What You Get trình soạn thảo WYSIWYG mặc định của WordPress!

Page builder làm việc với một hệ hống dòng và cột. Mỗi phần tử thêm vào trang được bao bên trong một dòng. Nhiều phần tử có thể được thêm vào cùng một dòng, trong các cột hoặc các dòng được lồng bên trong. Ảnh chụp màn hình dưới đây nhấn mạnh cách các phần tử, dòng, cột, có thể được thêm, chỉnh sửa, và gỡ bỏ.

Ban đã biết được các tính năng cơ bản sẵn có, hãy chuyển sự chú ý đến một số triển khai. Chúng ta sẽ mở rộng chức năng mặc định của Visual Composer và thêm mới các phần tử tùy biến.

Mở rộng Visual Composer

Để mở rộng bất kỳ phần tử nào trong Visual Composer đầu tiên bạn cần sao chép tập tin template từ thư mục plugin Visual Composer (js_composer) > include > templates vào theme của bạn > vc_templates. Từ hướng dẫn trước, hãy nhớ lại rằng trong theme Focuson của chúng ta có bốn tập tin:

  1. vc_column.php
  2. vc_column_text.php
  3. vc_row.php
  4. vc_video.php

Và như chúng ta đã thảo luận, tên gọi là rất quan trọng ở đây. Những template này nên được đặt tên giống hoàn toàn như ở trong thư mục mặc định của Visual Composer.

Hãy nhân đôi tập tin template mà bạn đã sẵn sàng để thay thế nó. Ví dụ, hãy xem những gì có trong tập tin vc_columns.php đầu tiên. Nếu bạn đã quen với việc tạo shortcode sẽ không có gì mới đối với bạn ở đây.

Cấu trúc tập tin có thể được chia thành ba phần:

  1. Trích xuất các thuộc tính của shortcode
  2. Chuẩn bị các thiết lập để xuất ra
  3. Xuất ra cấu trúc của shortcode

Nhưng nếu bạn muốn thêm hoặc xoá các thuộc tính shortcode sẵn có thì sao, làm cách nào bạn tương tác với điều đó? Hãy xem ba hàm mới:

vc_remove_param();

Hàm này xoá các tham số shortcode từ một phần tử sẵn có hoặc tuỳ biến. Để xoá thuộc tính, xác định shortcode cụ thể với tên, ví dụ vc_column và tên thuộc tính, ví dụ el_class.

vc_add_param();

Hàm này thêm các tham số mới vào một phần tử sẵn có hoặc tuỳ biến. Với hàm vc_remove_param(), xác định shortcode cụ thể với tên của nó, ví dụ vc_column và thêm mảng các tham số:

vc_add_params();

Hàm này tương tự như hàm vc_add_param(), nhưng nó cho phép bạn thêm nhiều tham số vào một phần tử. Bạn có thể tìm thấy một danh sách các kiểu tham số ở đây.

Để thêm hoặc xoá các tham số mới, cũng như thêm các phần tử mới, bạn cần chỉnh sửa tập tin tích hợp, trong trường hợp của chúng ta là ninzio_vc.php.

  1. Chúng ta bắt đầu bằng cách vô hiệu hoá trình soạn thảo front-end. Trình soạn thảo front-end là một tính năng tuyệt vời, nhưng các phần tử tuỳ biến của chúng ta không hỗ trợ nó. Tuỳ thuộc vào bạn, là một nhà phát triển theme, bạn có thể muốn hỗ trợ các trình soạn thảo front-end và/hoặc back-end.
  2. Xoá tất cả các tham số không cần thiết hoặc không hỗ trợ từ phần tử đã xác định với vc_remove_param();.
  3. Thêm các tham số vào các phần tử sẵn có với hàm vc_add_param(); hoặc vc_add_params();.
  4. Sau đó thêm các phần tử mới..

Cách thêm các phần tử tuỳ biến

Thêm các phần tử nội dung tuỳ biến mới vào Visual Composer xảy ra khi một tập tin shortcode hiện diện trong theme hoặc theme add-on của bạn, giống như trong trường hợp của chúng tôi, vì vậy đầu tiên chúng ta cần kiểm tra với hàm là plugin ninzio-addons được cài đặt và kích hoạt hay chưa.

Làm thế nào Visual Composer hiểu rằng các phần tử mới đó đã được thêm vào? Với add_action();.

Chúng ta sẽ sử dụng action init, để có được điều này:

Bây giờ chúng ta đã sẵn sàng thêm các phần tử mới của chúng ta, đối với điều đó chúng ta cần một hàm mới:

vc_map();

Hàm này yêu cầu một tham số: một mảng của các thuộc tính đặc biệt mô tả shortcode của bạn. Ví dụ chúng ta sẽ thêm một phần tử phân chia tuỳ biến:

Có quá nhiều thuộc tính! Hãy tập trung vào những cái quan trọng nhất:

  • name đặt một tên mô tả duy nhất cho phần tử tuỳ biến của bạn. Người dùng sẽ thấy nó trong tab Visual Composer.
  • base, không kém quan trọng so với name, là tên thẻ shortcode. Nếu bạn quen với việc tạo shortcode tuỳ biến, bạn sẽ biết rằng tất cả các shortcode đều có các thẻ (tag). Ví dụ, phần tử phân chia của chúng ra có một tag nz_sep. Phần tử base nên là duy nhất và nó nên được đặt tên giống hoàn toàn với tên shortcode trong tập tin shortcodes.php (giống như chúng tôi có trong theme Focuson của chúng tôi):
  • class thì không bắt buộc, nhưng cũng là một tuỳ chọn quan trọng, đóng vai trò như là một thuộc tính nhận dạng không duy nhất. Việc đặt tên nên rõ ràng và không có khoảng trắng, sử dụng dấu gạch ngang hoặc gạch dưới.
  • show_settings_on_create là một tham số boolean và tự nó đã mô tả chính nó.
  • category là cực kỳ quan trọng. Nếu bạn muốn nhóm các phần tử tuỳ biến của bạn bên trong một tab menu tuỳ biến bên trong menu các phần tử của Visual Composer, bạn nên thêm một category tuỳ biến. Nếu bạn muốn thêm các phần tử trong một category đã có hãy sử dụng tên của tab menu đã có đó:
  • icon tương tự như class. Chúng ta thêm tên icon để chúng ta có thể trang trí shortcode trong menu Visual Composer. Ví dụ:
  • description thêm một mô tả nhỏ vào phần tử tuỳ biến của bạn. Người dùng sẽ nhìn thấy nó.
  • js_view là một tham số quan trọng. Khi bạn có các phần tử mà bao gồm các thành phần cha và con (ví dụ hộp nội dung, có một container cha và các phần tử con, nơi mà phần tử cha và con có các thuộc tính riêng) thuộc tính này nên có giá trị VcColumnView. Chúng ta sẽ xem xét chi tiết hơn trong chốc lát nữa.
  • params là mảng của các tham số được thêm vào phần tử tuỳ biến của bạn. Nó hoạt động tương tự như hàm vc_add_params(), nhưng lồng bên trong hàm vc_map().

Các phần tử cha và con

Các phần tử kho chứa (container) với các phần tử con yêu cầu một số cấu hình cụ thể trước khi thêm. Trong hàm vc_map() chúng ta cần thêm một số tham số để làm cho các phần tử của chúng ta đóng vai trò là một kho chứa (container) hoặc là con của một phần tử khác.

Ví dụ, chúng ta muốn thêm một phần tử mới "Các Content box". Phần tử content box của chúng ta bao gồm hai phần:

  1. phần tử cha với các thuộc tính của nó
  2. thêm các phần tử con, mỗi cái với các thuộc tính của nó.

Một content box có thể có không giới hạn các phần tử con. Vì vậy chúng ta có hai vấn đề phải giải quyết:

  1. Bằng cách này hay cách khác chúng ta cần nói cho Visual Composer biết rằng content box là một phần tử cha/con,
  2. sau đó một box chỉ có thể là phần tử cha hoặc con, và rằng một phần tử content box chỉ có thể là cha của các phần tử con box.

Code cho phần tử cha

Để tránh tối đa sự rắc rối, hãy xem một phần tử sẵn có. Trong theme Focuson của chúng ta chúng ta có một phần tử "Content box", với hai tham số phụ được quan tâm đặc biệt:

Còn nhớ tham số base của hàm vc_map()? Ở đây, với as_parent, chúng ta đang đăng ký phần tử nz_content_box như là một phần tử cha chỉ cho một phần tử con nz_box.

Khi js_view được thiết lập thành VcColumnView của Visual Composer thêm tính năng UI (Giao diện người dùng) phụ vào phần tử trong trình soạn thảo, vì thế chúng ta có thể thêm một phần tử con mới.

Code cho phần tử con

Tương tự, code cho phần tử nz_box của chúng ta có một tham số phụ:

Với as_child chúng ta đang đăng ký phần tử nz_box như là con, nhưng chỉ cho một phần tử cha nz_content_box.

Mở rộng lớp

Bây giờ nếu bạn vào menu Visual Composer và nhấp lên phần tử Content box vừa thêm vào, bạn sẽ thấy... nó không hoạt động. Không có tính năng nào của cha/con được thêm, bởi vì vẫn còn một thứ mà chúng ta cần làm — chúng ta cần mở rộng các lớp:

  • WPBakeryShortCodesContainer
  • WPBakeryShortCode

Lớp đầu tiên chịu trách nhiệm cho các phần tử cha, cái thứ hai cho các phần tử con. Vậy, ngay sau hàm action ta thêm:

Hãy nhớ lại, tham số base của phần tử cha content box là nz_content_box, tên này cũng nên hiện diện ở trong tên lớp dùng để mở rộng lớp WPBakeryShortCodesContainer. Trong trường hợp của chúng ta tên lớp mới là WPBakeryShortCode_nz_Content_Box.

Tương tự với phần tử con. Tham số base là nz_box và tên lớp mới sẽ là WPBakeryShortCode_nz_Box.

Bất kể bạn đặt tên gì cho thuộc tính base của phần tử của bạn thì nó nên hiện diện trong tên lớp mới.

Bây giờ, nếu bạn nhìn vào trang editor một lần nữa, bạn sẽ thấy rằng phần tử content box mới có tính năng cha/con.


Xây dựng các trang với Visual Composer

Sau công việc vất vả chúng ta có thể gặt hái thành quả của chúng ta. Hãy nhìn vào trang chủ của theme Focuson. Hãy xây dựng trang đó với Visual Composer.

Cấu trúc có thể được chia thành nhiều phần:

  • Trình trình chiếu
  • Các content box
  • Featured projects
  • Bộ đếm
  • Thông tin phụ, giống như "Why choose us", bao gồm các cột.
  • Banner
  • Team members (Các thành viên trong nhóm)
  • Thêm một khối thông tin phụ với hai cột
  • Clients testimonials
  • Các logo quảng cáo của hãng

Tạo lại cái này chỉ là công việc nhất thời với Visual Composer.

Chúng ta sẽ bao quanh mỗi khối bên trong phần tử "Row" riêng biệt với ít nhất một phần tử "Column". Như chúng ta đã đề cập, điều này là bắt buộc và là cấu trúc tối thiểu của các trang Visual Composer.

Trình trình chiếu

Theme Focuson đã tích hợp Revolution Slider. Tuy nhiên, slider này không được thêm với Visual Composer, một khi bạn cài đặt Revolution Slider và Visual Composer, bạn sẽ thấy một phần tử "Revolution Slider". Đây là một add-on miễn phí từ Revolution Slider, và với phần tử đó bạn có thể đặt một slider vào trong trang, ngay cả nếu theme của bạn không tích hợp với Visual Composer.

Các content box

Còn nhớ ví dụ về phần tử "Các Content box" chứ? Chúng ta có thể xây dựng các content box với phần tử tuỳ biến của chúng ta:

Featured Projects (Các dự án đại diện)

Trong phần này chúng ta sử dụng

  1. một text_column
  2. một phần tử Gap (cách khoảng), để thêm khoảng trống
  3. một Single Image canh giữa (đóng vai trò như là một đường phân chia đẹp mắt)
  4. một Gap khác
  5. và phần tử "Recent projects"

Hầu hết các phần tử ở đây được thêm tuỳ ý.

Bộ đếm

Đối với bộ đếm chúng ta sử dụng các tuỳ chọn row background (hình ảnh, và màu sắc) để có tính thẩm mỹ. Tất cả những tuỳ chọn này được thêm từ Ninzio. Chúng ta đặt phần tử đếm tuỳ biến bên trong dòng phong cách đó.

Khối thông tin "Why choose us"

Với các cột của Visual Composer chúng ta có thể thêm cặp cột nội dung:

Hầu hết những phần tử này được thêm vào tuỳ ý, chỉ có phần tử "Custom Heading" là mặc định trong Visual Composer. Trong trình soạn thảo back-end nó xuất hiện bất đối xứng, nhưng trên front-end bạn sẽ thấy một cấu trúc trông rất đẹp. Trình quản lý nội dung không chỉ tạo trang, nó còn là một tiến trình logic và sáng tạo. Bạn phải tính toán kích thước của hình ảnh và văn bản, và cân nhắc chúng hiển thị như thế nào trên các thiết bị khác nhau. Đôi khi tính đáp ứng cũng cần thiết. Rất may, Visual Composer có các công cụ cần thiết. Trong các cột tuỳ chọn chỉnh sửa bạn có thể thấy tab Responsive Options nơi mà bạn có thể tinh chỉnh kích thước của cột tuỳ thuộc vào nhóm thiết bị.

Banner

Cái này không có gì hơn là một Row với một hình nền và hiệu ứng parallax, một mẩu nhỏ nội dung trong đó với một tooltip, tiêu đề, và các nút.

Team Members

Đây là một thành phần phụ từ Ninzio; một carousel các thành viên của nhóm.

Khối thông tin "Creative Solutions"

Một lần nữa không có gì khác thường ở đây; một phần tử Row thông thường với hai Column, mỗi cái chứng nội dung.

Nhưng có một thủ thuật đó là hình ảnh ở bên phải không đặt bên trong Column thứ hai, nó thật sự thiết lập như là hình nền của Row, vì vậy Column bên phải ở đây là rỗng.

Client Testimonials

Chúng ta cũng đã tạo một phần tử tuỳ biến để thêm các đánh giá. Một lần nữa không có gì bất thường ở đây cả.

Các logo quảng cáo

Phần cuối cùng là các logo quảng cáo. Nó là một carousel chứa các logo bên trong một Row với một nền màu xám. Phần tử này cũng được thêm tuỳ ý.

Kết luận

Tất cả chỉ có thế! Bây giờ bạn đã biết mọi thứ cần thiết để tích hợp Visual Composer với theme của bạn và tạo các trang một cách nhanh chóng và dễ dàng. Một nguồn tài liệu để bạn học thêm, tôi đề nghị rằng bạn nên xem trang official wiki page for Visual Composer. Nếu bạn có bất kỳ câu hỏi nào, xin đừng ngại để lại ý kiến trong phần bên dưới!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.