Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Theme Development
Webdesign

Интегрируем Visual Composer c темой WordPress

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by blacktreelab (you can also view the original English article)

Visual Composer, плагин для WordPress, позволяющий создавать страницы с помощью интерфейса drag-and-drop. Он дает пользователям возможность легкой разметки страниц, а девелоперам повысить привлекательность WordPress тем. В этом уроке мы рассмотрим юридические и технические вопросы интеграции Visual Composer с готовыми к продаже темами WordPress.

Visual Composer включает в себя:

  • Совемещенный фронт-энд и бэк-энд редактор WordPress.
  • 40+ элементов контента, включенных по умолчанию, а также 200+ дополнений, позволяющий вывести ваш вебсайт на новый уровень.
  • Библиотеку шаблонов, предоставляющую пользователям WordPress доступ к сотням высококачественных шаблонов.
  • Мастер создания оболочек для быстрой смены внешнего вида темы.
  • Расширенный мастер создания сеток для одиночных записей, портфолио, медиа файлов, и нестандартных типов записей.

Таковы основные особенности Visual Composer, а так же профессиональная поддержка, и все это за $34 (стандартная лицензия по состоянию на декабрь 2016).

Visual Composer для создателей тем

Задумаемся на минутку о том, зачем разработчикам тем интегрировать или расширять Visual Composer, и каковы лицензионные последствия этого.

Продажа тем WordPress может быть прибыльным бизнесом, продаете ли вы индивидуально или через такую площадку, как например ThemeForest. Как создатели тем (Ninzio Themes) мы понимаем эти преимущества, но так же знаем насколько сложно может быть создание тем, и что каждый автор ожидаем от его темы:

  • Сокращение времени и стоимости разработки.
  • Высокое качество продукта.
  • Максимальный доход от продаж.
  • Сокращение времени поддержки.
  • Больше внимания на новые функции и маркетинг.

И знаете что? Visual Composer поможет вам достичь этих целей, напрямую или косвенно. Позвольте объяснить каким образом:

Многие WordPress темы включают встроенный Мастер Создания страниц, и это стало трендом в предыдущие годы. Но сейчас, с ростом конкуренции, создание собственных решение для вашей темы стало крайне невыгодно с точки зрения затрат и времени. Вместо этого можно интегрировать Visual Composer с вашей темой, и предложить его вашим покупателем бесплатно (бесплатно для использования только с вашей темой).

Если просмотреть список самых продаваемых WordPress тем на Themeforest можно заметить, что почти каждая тема включает Visual Composer, даже те темы, которые имеют свой собственный Мастер Создания страниц. Visual Composer - известный продукт, проверенный тысячу раз более миллионом пользователей и разработчиков.

ThemeForests top WordPress themes
Самые продаваемые темы на Themeforest

Теперь совершенно ясно, почему знание Visual Composer стал (почти) необходимым для успешного разработчика WordPress, и почему вы должны рассмотреть вопрос о включении его в ваши темы.

Следующий вопрос: как интегрировать Visual Composer, и имеем ли мы на это право?

Интеграция с темой: Юрирдический Справочник

Если вы являетесь разработчиком темы и рассматриваете интеграцию Visual Composer с вашими темами, вот краткое резюме того, что необходимо:

“22 января 2013 года Envato обновили свои лицензии. И в соответствии с обновленными лицензиями, больше невозможно использовать продукты торговых площадок в ваши собственные продуктах, предназначенных для продажи на площадках Envato, без соглашения о партнерстве между двумя авторами. В данном случае между мной Michael M) и вами (автором темы).” – Michael M

Так что же, если вы хотите интегрировать Visual Composer с вашей темой, вам необходимо связаться с Майклом? К счастью, нет. Этот процесс был автоматизирован. Давайте рассмотрим, шаг за шагом, как правильно лицензировать Visual Composer.

Приобретаем расширенную лицензию

Сначала вам нужно купить расширенную лицензию Visual Composer на CodeCanyon. На момент написания данной статьи, цена расширенной лицензии была $170.

Visual Composers extended license from CodeCanyon
Расширенная лицензия Visual Composer на CodeCanyon

Что означает "Расширенная лицензия"?

Расширенная лицензия позволяет использовать плагин вам или одному вашему клиенту в одном продукте, за который будет взиматься оплата с конечного пользователя. Общая стоимость включает в себя цену товара и комиссионные.

По сути, вы покупаете лицензию разработчика для использования Visual Composer в одной из ваших тем. Клиентам, приобретающим вашу тему, нет необходимости покупать стандартную лицензию Visual Composer.

На что она не распространяется?

Вы не можете использовать одну расширенную лицензию в нескольких темах, а также не можете передавать свою расширенную лицензию. Вам не придется делить лицензионным ключом с вашими клиентами, а клиентам не нужно активировать Visual Composer (копию, которая поставляется с вашей темой).

А что насчет обновлений Visual Composer?

Один из самых распространенных вопросов, который мы слышим в Ninzio Themes: “Я не могу обновить Visual Composer”. Каждое обновление Visual Composer должно быть протестировано и включено в тему вами, автором темы, а не конечным клиентом.

Лицензия на использование - In-Stock License

Но постойте – WPBakery говорит: “больше невозможно использовать продукты торговых площадок в ваши собственные продуктах, предназначенных для продажи на площадках Envato, без соглашения о партнерстве между двумя авторами”. Так как же интегрировать Visual Composer с вашей темой для продаже на ThemeForest, если расширенная лицензия не позволяет этого? Вот где особое соглашение между Вами и Майклом М (автором Visual Composer) вступает в игру: "Лицензия на Использование" ("In-Stock License").

После того, как Вы приобрели расширенную лицензию на CodeCanyon, перейдите на портал поддержки WPBakery и авторизируйтесь под своим Envato логином.

WPBakery login
Окно входа WPBakery

Появиться всплывающее окно с сообщением "Авторизовать портал поддержки WPBakery для соединения с Вашей учетной записью?" Нажмите Подтвердить Далее, если вы уже купили расширенную лицензию, эта лицензия автоматически отобразиться на панели портала WPBakery. Выберите лицензию, добавьте название темы и нажмите Отправить. Ваша расширенная лицензия поменяется на "Лицензию на Использование". ThemeForest знает, WPbakery знает, вы знаете, что все лицензировано. И вы можете интегрировать Visual Composer со своей темой и продавать эту тему на ThemeForest.

На данный момент мы закончили рассматривать юридические аспекты интеграции Visual Composer, теперь пришло время рассмотреть техническую сторону.

Интеграция с темой: Техническое Руководство

Интеграция Visual Composer с темой не требует много. Мы объясним этот процесс на примере одной из наших тем, темы Focuson.

Focuson
Focuson

Создаем необходимую среду

Необходимо следующее:

  1. PHP-файл с пользовательскими элементами (шорткоды вашей темы). В нашем случае, это файл “shortcodes.php”, расположенный в плагине “ninzio-addons” (плагин, включающий пользовательские функции темы). Файл "shortcodes.php" несет ответственность за результат вывода шорткодов. Для справки по созданию шорткодов для WordPress, обратитесь уроку Рохана Мехта "Начало работы с шорткодами WordPress".
  2. PHP-файл для интеграции Visual Composer. Этот файл содержит пользовательские настройки элементов, которые будут отображены на панели меню Visual Composer. В нашем случае, этот "ninzio_vc.php" файл, находится в папке "include" корневой папки темы: "корневая папка > include".
  3. Папка шаблонов Visual Composer содержит PHP-файлы со стандартными элементами Visual Composer, на случай, если вам необходимо их заменить. Если вы хотите переписать некоторые шаблоны Visual Composer, создайте папку под названием “vc_templates”. Все файлы внутри этой папки должны быть названы точно так же, как в папке “vc_templates” Visual Composer. В нашем случае мы переписали четыре файла и расширили их структуру и пользовательские функции: “vc_column.php”, “vc_column_text.php”, “vc_row.php” и “vc_video.php”. Папка “vc_templates” должена быть помещена непосредственно внутри корневой папки вашей темы: "корневая папка > vc_templates".

И наконец, Visual Composer - это внешний плагин, и его необходимо включить в скачиваемый пакет темы. Здесь у нас два варианта:

  1. Включить файл "js_composer.zip" в скачиваемый пакет, и попросить покупателей установить его вручную.
  2. Воспользоваться TGM Plugin Activator (класс для активации плагинов) для автоматизации процесса.

Нам кажется второй вариант является лучшим способом рекомендации плагинов для тем WordPress. Для этого создайте папку “plugins” в корневой папке вашей темы и поместить в нее файл “js_composer.zip” (установочный файл Visual Composer, который вы скачали после покупки). Чтобы узнать больше о TGM Plugin Activator обратитесь к уроку Бариша Унвера "Используем библиотеку TGM Plugin Activation в ваших темах".

Плагин WordPress Theme Check

Плагину WordPress Theme Check не нравится, когда темы включают в себя упакованные плагины. Он будет выдавать предупреждения типа:

ТРЕБУЕТСЯ: найден zip-файл. Плагины не разрешены в темах. Найден zip-файл js_composer.zip

К сожалению, для данной ситуации нет никаких официальных инструкций. Так как добавление папки с плагинами на ваш сервер идет вразрез с лицензией Envato, нет другого способа добавления плагина в тему.

А теперь затаите дыхание

Итак, мы имеем...

  1. ...файл js_composer.zip добавлен в тему (fucoson > плагины > js_composer.zip)
  2. ...создан PHP-файл с пользовательскими элементами (ninzio-addons > shortcodes > shortcodes.php). Не забывайте, плагин ninzio-addons со всеми пользовательскими элементами включен в тему.
  3. ...создан файл для интеграции Visual Composer (focuson > includes > ninzio_vc.php)
  4. ...и создана папка “vc_templates”, содержащая стандартные элементы Visual Composer для расширения пользовательских функций.

Добавляем необходимые компоненты

Теперь давайте завершим интеграцию, добавив необходимые компоненты. Откройте файл “functions.php” содержащий TGM Plugin Activator, и добавьте Visual Composer в список требуемых плагинов:

Теперь добавьте файл "shortcodes.php". Как и в случае с темой Focuson, этот файл находится внутри плагина “ninzio-addons”, и он уже включен как только “ninzio-addons” установлен.

Далее добавьте интеграционный файл “ninzio_vc.php”. Эта часть очень важна, поскольку мы должны быть уверены, что установочный файл “js_composer.zip” Visual Composer находится внутри папки plugins и плагин Visual Composer успешно установлен и активирован:

И только после этого мы добавляем интеграционный файл “ninzio_vc.php”.

Заключение

Ну вот и все! Visual Composer успешно интегрирован с вашей темой, и у нас есть все для расширения его функции. В следующем уроке мы рассмотрим вопросы раширения Visual Composer. До встречи!

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.