Загрузка...

Конструктор страниц Yootheme builder

Как расширить Yootheme builder своими элементами?
Yootheme builder

Yootheme builder – html конструктор на базе Uikit framework.

Это удобный качественный, но платный page builder (html конструктор), основанный на UIkit framework. Доступен для CMS WordPress и Joomla.

Особенности конструктора

  • Редактирование осуществляется в стандартном режиме просмотра изменений тем wordpress
  • Код конструктора генерируется в статичный html и хранится в БД WordPress в данных контента поста. Так же редактор генерирует JSON в виде html комментария, который так же хранится в данных поста. На основе этого json редактор восстанавливает свою структуру.
  • Работает только с UIkit темой, но можно расширить своими элементами с любой версткой
  • Хорошая документация
  • Встроенные функции оптимизации (JS, CSS, Webp image)

Элементы редактора

Пример элемента доступен на github.

DownloadView on Github

Базовые элементы

Базовые, предустановленные элементы находятся в папке modules в vendor/yootheme/builder/elements в YOOtheme Pro.

Папка Элементы
builder/elements accordion, alert, button, code, column, countdown, description_list, divider, gallery, grid, headline, html, icon, image, layout, list, map, overlay, panel, popover, quotation, row, section, slider, slideshow, social, subnav, switcher, table, text, totop, video

Создать элемент можно через создание файла конфигурации element.json

Дочерняя тема

Для добавления своих элементов нужно создать дочернюю тему. Для этого создаем стандартным способом дочернюю тему. В style.css пишем

/*
 Theme Name:   YOOtheme MyTheme
 Template:     yootheme
 Author:       Alex T
 Description:  YOOtheme Child Theme
 Version:      1.0.0
 Text Domain:  yootheme-child
*/

Создаем папку modules, functions.php, config.php
в functions.php пишем:

/**
* Boostrap theme.
*
* @link https://developer.wordpress.org/themes/basics/theme-functions
*/
$app = require get_template_directory() . '/bootstrap.php';
$app->load(__DIR__ . '/{vendor/yootheme/{platform-wordpress,theme{,-analytics,-cookie,-highlight,-settings,-wordpress*},styler,builder{,-source*,-templates,-newsletter,-wordpress*}}/bootstrap.php,config.php}');

в config.php :
$app->load(__DIR__ . '/modules/*/bootstrap.php');
return [];

в mudules копируем example с https://github.com/yootheme/example-element

Должна получиться такая структура (css, js, cache не нужны).

7OgmPAz

Готово, теперь новый элемент добавлен в билдер.

9MbvKQy

При внесении изменений в элемент, необходимо очистить кеш в папке основной теме.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *