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

Cách tích hợp Visual Composer vào trong Theme WordPress của bạn

by
Difficulty:IntermediateLength:LongLanguages:

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

Visual Composer là plugin WordPress cho phép các trang được xây dựng bằng cách sử dụng một giao diện kéo-thả. Nó cung cấp cho người dùng khả năng bố trí trang web một cách dễ dàng, và nó mang lại cho các nhà phát triển cơ hội để thêm vào các giá trị cho theme WordPress của họ. Trong hướng dẫn này chúng ta sẽ xem xét các vấn đề pháp lý và kỹ thuật của việc tích hợp Visual Composer vào các theme để bán.

Visual Composer đi kèm với:

  • Trình soạn thảo kết hợp front-end và back-end cho WordPress
  • Trên 40 phần tử nội dung sẵn có và hơn 200 add-ons (phần phụ trợ), được thiết kế để nâng trang web của bạn lên một tầm cao mới.
  • Thư viện template cho phép người dùng WordPress truy xuất hàng trăm bố cục chất lượng cao.
  • Trình xây dựng giao diện (Skin builder) cho phép thay đổi nhanh chóng giao diện trực quan của theme.
  • Grid builder (Trình xây dựng bố cục ô lưới) nâng cao cho các tập tin đa phương tiện, bài viết, portfolio và các kiểu bài viết tuỳ biến (custom post type).

Vậy đó là các tính năng chính của Visual Composer, tất cả được tổng hợp, bao gồm gói hỗ trợ trị giá 34$ (giấy phép thường tại thời điểm Tháng mười hai 2016).

Visual Composer cho các nhà phát triển theme

Hãy nghĩ một chút về lý do các nhà phát triển theme nên tích hợp hoặc mở rộng Visual Composer, và các tác động của giấy phép lên những việc làm đó.

Bán theme WordPress có thể là một nghề tạo ra lợi nhuận cao, cho dù bạn đang bán riêng hoặc thông qua thị trường mua bán như ThemeForest. Là tác giả (Ninzio Themes) chúng tôi hiểu được phần thưởng, nhưng hiểu được việc phát triển theme có thể khó như thế nào, và những gì mỗi nhà phát triển muốn có được từ sản phẩm của họ. 

  • Giảm thời gian và chi phí phát triển.
  • Một sản phẩm chất lượng cao.
  • Tăng tối đa doanh thu
  • Giảm thời gian hỗ trợ
  • Tập trung vào các tính năng mới và quảng bá

Và bạn biết sao không? Visual Composer có thể giúp bạn đạt được những mục tiêu đó trực tiếp và gián tiếp. Hãy để tôi giải thích cho bạn:

Nhiều theme WordPress tích hợp sẵn một Page Builder (Trình xây dựng trang), và việc xây dựng chúng trở thành một xu hướng trong những năm qua, nhưng ngày nay, các đối thủ cạnh tranh đang ngày một nhiều hơn, thật sự không hiệu quả về chi phí và thời gian để phát triển một giải pháp tuỳ biến cho theme của bạn. Thay vào đó, Visual Composer có thể được tích hợp vào trong theme của bạn, và cung cấp miễn phí cho khách hàng của bạn (miễn phí để sử dụng với theme của bạn thôi nhé).

Nếu bạn tìm kiếm các theme WordPress hàng đầu trên ThemeForest bạn sẽ nhận thấy rằng hầu hết mọi theme đã có tích hợp sẵn Visual Composer bên trong nó; ngay cả các theme mà bản thân nó có sẵn một page builder. Visual Composer là một sản phẩm được nhiều người biết đến, được kiểm thử hàng ngàn lần bởi hàng triệu người dùng và những nhà phát triển.

ThemeForests top WordPress themes
Các theme WordPress hàng đầu trên ThemeForest

Tại thời điểm này chúng ta đã hiểu rõ tại sao Visual Composer đã trở thành (gần như) yếu tố cần thiết cho các nhà phát triển theme WordPress thành công, và lý do tại sao bạn nên cân nhắc tích hợp nó vào trong theme của bạn.

Câu hỏi tiếp theo là: làm thế nào chúng ta tích hợp Visual Composer, và chúng ta có quyền làm điều đó không?

Tích hợp vào theme: Hướng dẫn Pháp lý

Nếu bạn là một nhà phát triển theme đang nghĩ đến việc tích hợp Visual Composer vào trong theme của bạn, thì đây là một tóm tắt ngắn về những điều cần thiết:

"Vào ngày 22 tháng một năm 2013 Envato đã cập nhật giấy phép của họ và nó không còn cho phép sử dụng các sản phẩm từ thị trường bên trong sản phẩm của bạn mà dự định được được bán trên Envato nếu không có một sự đồng ý giữa hai tác giả. Trong trường hợp này giữa tôi (Michael M) và bạn (tác giả theme)." - Michael M

Vì vậy,... nếu bạn muốn bao gồm Visual Composer trong theme của bạn, bạn phải gởi thư cho Michael? May mắn là bạn không cần. Tiến trình này đã được tự động. Hãy tìm hiểu, từng bước một, cách chúng ta có thể có giấy phép hợp lệ của Visual Composer.

Mua giấy phép mở rộng (Extended License)

Đầu tiên bạn sẽ cần mua giấy phép mở rộng của Visual Composer từ CodeCanyon. Tính đến thời điểm viết bài mức giá cho một giấy phép mở rộng là $170.

Visual Composers extended license from CodeCanyon
Giấy phép mở rộng của Visual Composer từ CodeCanyon

Một "giấy phép mở rộng" là gì?

Giấy phép mở rộng cho phép sử dụng plugin, bởi bạn hoặc một khách hàng, trong một sản phẩm đơn mà những người dùng có thể trả phí. Đơn giá bao gồm giá sản phẩm và phí người mua.

Về cơ bản, bạn mua một giấy phép cho nhà phát triển để sử dụng Visual Composer với một trong các theme của bạn. Khách hàng mua theme đó không bắt buộc phải mua giấy phép thông thường của Visual Composer.

Nó bao quát những gì?

Bạn không thể sử dụng giấy phép mở rộng cho nhiều theme, hoặc không thể chia sẻ giấy phép mở rộng của bạn với một ai khác. Bạn không được chia sẻ khoá nhận dạng giấy phép với các khách hàng của bạn, và khách hàng của bạn sẽ không cần phải kích hoạt Visual Composer (bản sao đi kèm với theme của bạn).

Những cập nhật của Visual Composer là gì?

Một trong những câu hỏi thông dụng nhất mà chúng tôi nhận được tại Ninzio Themes là "Tôi không thể cập nhật Visual Composer". Điều này không thể thực hiện từ bên khách hàng; mỗi cập nhật của Visual Composer nên được kiểm tra và thêm vào các bản cập nhật của theme.

"Giấy phép In-Stock"

Nhưng đợi chút đã — WPBakery nói rằng "không còn có thể sử dụng các sản phẩm từ thị trường bên trong các sản phẩm của bạn mà dự định bán trên Envato được nữa". Vậy làm thế nào bạn có thể thêm Visual Composer vào trong theme của bạn để được bán trên ThemeForest nếu giấy phép mở rộng của bạn không cho phép làm điều đó? Đây là nơi mà một "giao kèo" đặc biệt giữa bạn và Michael M (tác giả của plugin Visual Composer) phát huy tác dụng: Giấy phép In-Stock".

Một khi bạn đã mua giấy phép mở rộng từ CodeCanyon, hãy vào trang hỗ trợ WPBakery và đăng nhập với tài khoản đăng nhập Envato của bạn.

WPBakery login
Màn hình đăng nhập WPBakery

Một thông báo hiện lên với dòng chữ Authorize WPBakery Support Portal to connect with your account?; Nhấp vào Approve. Tiếp theo, nếu bạn đã mua giấy phép mở rộng, WPBakery tự động hiển thị giấy phép đã mua gần đây trong bảng điều khiển, vì thế hãy chọn giấy phép, nhập tên theme và nhấn Submit. Giấy phép mở rộng của bạn sẽ trở thành "Giấy phép In-Stock". ThemeForest biết, WPBakery biết, bạn biết mọi thứ là được phép, vì vậy bạn có thể thêm Visual Composer ở trong theme của bạn và bán chúng ơ trên ThemeForest.

Tại thời điểm này, chúng ta đã hoàn tất việc xem xét các yếu tố pháp lý của việc tích hợp Visual Composer, bây giờ là lúc đánh giá về mặt kỹ thuật.

Tích hợp vào theme: Hướng dẫn Kỹ thuật

Không có quá nhiều thứ liên quan đến việc tích hợp Visual Composer với theme của bạn. Chúng tôi sẽ giải thích quá trình sử dụng một trong các theme của chúng tôi, Focuson, như là một ví dụ.

Focuson
Focuson

Tạo môi trường cần thiết

Chúng ta cần một số thứ sau:

  1. Một tập tin php với các phần tử tuỳ biến (các shortcode trong theme của bạn). Trong trường hợp của chúng tôi điều này được gọi là "shortcodes.php" được đặt trong plugin "ninzio-addons" (một plugin với các tính năng tuỳ biến). "shortcodes.php" chịu trách nhiệm cho việc xuất ra các shortcode cuối cùng. Đối với hướng dẫn tạo shortcode trong WordPress, hãy xem hướng dẫn Làm quen với shortcode trong WordPress của Rohan Mehta.
  2. Một tập tin php để tích hợp với Visual Composer. Tập tin này chứa các tuỳ chọn phần tử tuỳ biến của bạn, hiển thị trong trình đơn bảng điều khiển của Visual Composer. Trong trường hợp của chúng ta điều này được gọi là "ninzio_vc.php" và được đặt trong thư mục theme > includes.
  3. Một thư mục template Visual Composer sẽ chứa các tập tin php của các phần tử mặc định trong Visual Composer, trong trường hợp bạn cần thay thế chúng. Thư mục phải được đặt tên là "vc_templates", và tất cả các tập tin được đặt bên trong thư mục đó nên được đặt tên một cách chính xác giống như những cái ở trong thư mục "vc_tempaltes" của Visual Composer. Trong trường hợp của chúng tôi chúng tôi có bốn tập tin mà được mở rộng với cấu trúc và tính năng tuỳ biến: "vc_column.php", "vc_column_text.php", "vc_row.php", và "vc_video.php". Thư mục "vc_templates" nên được đặt trực tiếp bên trong thư mục gốc của theme bạn thư mục theme > vc_templates.

Cuối cùng nhưng không kém quan trọng, vì Visual Composer là một plugin mở rộng, chúng ta cần thêm nó với gói theme có thể tải về. Ở đây chúng tôi có hai tuỳ chọn:

  1. Bao gồm tập tin "js_composer.zip" bên trong gói tải về và yêu cầu khách hàng cài đặt nó bằng tay.
  2. Sử dụng plugin TGM Plugin Activator để tự động tiến trình này.

Chúng tôi thấy tuỳ chọn thứ hai là cách tốt nhất để yêu cầu và khuyến cáo các plugin cho theme WordPress. Để làm điều này hãy tạo một thư mục "plugins" bên trong thư mục gốc của theme bạn và đặt tập tin "js_composer.zip" (tập tin cài đặt của Visual Composer mà bạn đã tải về sau khi mua) trong đó. Để tìm hiểu thêm về TGM Plugin Activator hãy xem qua bài hướng dẫn Sử dụng thư viện TGM Plugin Activator trong các theme của bạn bởi Barış Ünver.

WordPress Theme Check

WordPress Theme Check không thích thú khi một theme kèm theo một plugin. Nó sẽ đưa ra cảnh báo thế này:

REQUIRED: Zip file found. Plugins are not allowed in themes. The zip file found was js_composer.zip

Không may, đối với vấn đề này không có hướng dẫn chính thức. Vì kèm theo một thư mục plugin trong theme của bạn đi ngược lại với giấy phép Plugin trong Theme của Envato - Vấn đề kiểm tra Theme, không có cách nào tốt hơn để kèm plugin với theme.

Hãy thả lỏng thôi

Vậy, hiện giờ chúng ta có...

  1. ...tập tin js_composer.zip được kèm bên trong theme (fucoson > plugins > js_composer.zip)
  2. ...tạo các phần tử php tuỳ biến (ninzio-addons > shortcodes > shortcodes.php). Nên nhớ rằng chúng ta có plugin ninzio-addons với tất cả các tính năng tuỳ biến trong nó, và nó đi kèm với theme.
  3. ...tạo tập tin tích hợp Visual Composer (focuson > includes > ninzio_vc.php)
  4. ...và tạo thư mục "vc_templates" chứa các phần tử Visual Composer mặc định cho việc mở rộng với tính năng tuỳ biến.

Bao gồm các thành phần theo yêu cầu

Bây giờ hãy hoàn tất việc tích hợp bằng cách bao gồm các thành phần theo yêu cầu. Mở tập tin "functions.php" và với TGM Plugin Activator, thêm Visual Composer vào danh sách các plugin được yêu cầu:

Bây giờ bao gồm tập tin "shortcodes.php". Trong trường hợp theme Focuson tập tin này được đặt bên trong plugin "ninzio-addons", nó đã được bao gồm khi plugin ninzio-addons được cài đặt.

Tiếp theo, bao gồm tập tin tích hợp "ninzio_vc.php". Phần này rất quan trọng, vì chúng ta cần đảm bảo rằng tập tin cài đặt "js_composer.zip" của Visual Composer ở bên trong thư mục plugins và plugin Visual Composer được cài đặt và kích hoạt thành công.

Chỉ sau đó chúng ta yêu cầu tập tin tích hợp "ninzio_vc.php".

Kết luận

Đã xong! Visual Composer đã được tích hợp với theme của chúng ta và chúng ta có mọi thứ theo yêu cầu để mở rộng nó. Trong hướng dẫn tiếp theo, chúng ta sẽ xem xét mở rộng và xây dựng với Visual Composer. Hẹn gặp bạn ở đó!

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.