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

Інтегруємо Visual Composer c темою WordPress

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by Andy Yur (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 не подобається, коли теми включають в себе упаковані плагіни. Він буде видавати попередження типу:

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

На жаль, для даної ситуації немає ніяких офіційних інструкцій. Так як додавання папки з плагінами на ваш сервер йде врозріз з ліцензією Envato Plugins in Themes - Theme Check Issue, немає іншого способу додавання плагіна в тему.

А тепер затамуєте дихання

Отже, ми маємо ...

  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
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.