Блочная тема WordPress для разработчиков на основе theme.json
Canvas — это тема WordPress и дополняющий её плагин, и во всём она построена на блоках. Шаблоны — блочные, стили берутся из theme.json, а то, что редактор сохраняет в базе данных, — это та же блочная разметка, которую читает любая другая блочная тема. Ничто здесь не зависит от конструктора страниц.
Обновлено
Блочная тема, редактируемая там, где WordPress её хранит
Тема содержит шаблоны, части шаблонов и вариации стилей; плагин содержит библиотеку блоков, конструкторы, формы, слои SEO и производительности, а также импортёр демо. Шаблоны и глобальные стили остаются в Редакторе сайта, поэтому ничто на сайте не спрятано в настройках нашего плагина.
- 173 блочных шаблона и 5 частей шаблона, все можно редактировать в Редакторе сайта
- 4 варианта стиля, включая тёмный и полуночный, с переключением в Редакторе сайта
- Цвета и типографика задаются через theme.json, поэтому редактор показывает ту же типографику, что и на фронтенде
- 183 паттерна блока, вставляемых как однократная копия разметки
- Страница открывается целиком, со всем шаблоном вокруг содержимого, которое вы редактируете.
В базе данных сохраняется разметка блоков
Причина выбрать блочную тему — не список функций. Это то, что останется у вас на руках через пять лет.
Без закрытого формата
Canvas редактирует стандартные блоки WordPress и не имеет собственного формата, поэтому записи и страницы сохраняют содержимое, даже если тема когда-либо сменится. Не нужно запоминать шорткоды и открывать режим кода.
Настройки, а не сниппеты
Всё, что видит посетитель, доступно из панели настроек блока. Если демо требовалось то, что блок не мог выразить, блок получал новую настройку, а страница никогда не получала сырой HTML.
Панель «Дополнительно» в каждом блоке
В редактор ко всем блокам добавляются анимация, условия отображения, пользовательские классы, пользовательские атрибуты и CSS для отдельного блока, включая базовые блоки WordPress и блоки сторонних разработчиков.
Ресурсы подключаются вместе со страницей
Страница подключает только CSS и JavaScript блоков, которые на ней есть, поэтому страница тарифов никогда не загружает скрипт слайдера. Ещё 35 оптимизаций включаются переключателями, без установки плагина.
Переходите с другой темы? Elementor и Divi создают страницы в собственных редакторах, поэтому макет не переносится вместе с конструктором: см. что сохраняет сайт на Elementor при переносе и как Divi Builder выглядит в сравнении. Kadence и GeneratePress тоже работают в редакторе блоков, а их блоки доступны в бесплатных плагинах (Canvas против Kadence, Canvas против GeneratePress), а Blocksy хранит конструктор шапки в Настройщике.
Конструкторы шапки и подвала выводятся в виде частей шаблона
Шапки, подвалы, верхние панели, мега-меню, боковые панели и заголовки страниц — это записи, собранные из блоков. Они попадают на сайт через собственные части шаблона темы: часть Header выводит ту шапку, которая назначена странице, а часть Footer выводит назначенный подвал. Благодаря этому Редактор сайта видит их, а настройки блоков остаются такими же, как везде.
- 22 блока шапки и 94 параметра шапки в основе конструктора
- Назначайте шапку глобально или переопределяйте её для отдельной страницы, так же работают подвалы, верхние панели, мега-меню, боковые панели и заголовки страниц
- Блоки Hero и слайдеры тоже являются записями, которые размещает блок-слот, находящийся в шаблоне.
- Оба блока-слота выводятся в области редактирования, поэтому страница открывается с тем разделом, который видит посетитель
24 блока для магазина и 18 шаблонов для магазина
WooCommerce необязателен. Если он установлен, его выводят блоки и шаблоны, без переопределений шаблонов, которые нужно держать в синхронизации.
Блоки для магазина
Блоки для страницы товара, сетки магазина, корзины и оформления заказа, а также образцы цвета и добавление в корзину без перезагрузки страницы.
Шаблоны магазина
Шаблоны для экранов магазина, товара, корзины, оформления заказа и аккаунта редактируются в Редакторе сайта так же, как любые другие шаблоны.
Демо-магазины
21 из 88 демо-сайтов импортируются как полноценные магазины с товарами, категориями, атрибутами и оформлением заказа.
Два из 21 демо-магазина, которые работают на блоках и шаблонах для магазинов.
Мастер настройки создаёт дочернюю тему, если вам она нужна
Создавайте дочернюю тему, только если планируете напрямую редактировать файлы шаблонов Canvas, потому что именно она сохраняет такие правки при обновлении. Мастер настройки предлагает её на отдельном шаге перед импортом демо, записывает в папку тем и активирует. После этого сайт выглядит так же. Большинству сайтов она не нужна: типичные причины теперь решаются настройками.
- Пользовательский CSS для всего сайта, а также пользовательский JavaScript для head и для footer в разделе «Разное» в «Настройках темы».
- Произвольный CSS для каждого блока в виде пар «свойство: значение» без селектора
- Пользовательские атрибуты для каждого блока, по одному на строку: ключ и значение. Поддерживаются атрибуты data и aria.
- Собственные правила типографики для любого селектора, который вы укажете, в разделе «Типографика»
- Зарегистрируйте собственный набор иконок через тот же интерфейс, что и 4 встроенных набора
- Экспорт всей конфигурации «Настройки темы» в файл и её импорт на следующий сайт
Что нужно Canvas и что он делает при установке
Минимальные требования действительно обязательны, а не условные. Canvas сам проверяет их на вашем хостинге, поэтому о проблеме с импортом вы узнаете заранее, а не тогда, когда импорт уже не удался.
- Canvas Core никогда не скачивается отдельно: он устанавливается из WordPress после активации лицензии, поэтому подбирать версии не нужно
- Обновления приходят на экран обновлений WordPress, с режимом обслуживания, временной резервной копией и откатом прямо из WordPress
- Автоматические обновления касаются только патч-релизов, включены по умолчанию, их можно отключить переключателем, а релиз, который меняет настроенный вами шаблон, об этом сообщает.
- Экран Health Check сверяет требования сервера с вашим реальным хостингом и сообщает, что требует внимания, а те же проверки появляются в разделе «Состояние сайта» WordPress
- Каждую строку можно перевести: шаблоны перевода для темы и плагина обновляются с каждым релизом, а в плагине есть файл конфигурации WPML
- Технический SEO, XML-карта сайта и 16 типов schema формируются из вашего контента во время отрисовки
Ответы на технические вопросы
Пять вещей, которые разработчик проверяет перед тем, как взяться за проект, включая одну, которую Canvas не делает.
Является ли Canvas блочной темой или темой с конструктором страниц?
Canvas — тема для WordPress, полностью построенная на блоках, то есть то, что WordPress называет блочной темой. Шаблоны — это блочные шаблоны WordPress, части шаблонов — это части шаблонов, цвета и типографика задаются через theme.json, а всё редактируется в редакторе блоков и Редакторе сайта, которые входят в WordPress. Не нужно устанавливать отдельный конструктор, изучать второй редактор или продлевать подписку на конструктор.
Что произойдёт с разметкой, если сайт позже сменит тему?
Контент остаётся стандартной разметкой блоков WordPress, поскольку именно в таком виде его сохраняет Canvas. Блок Canvas, который другая тема не распознаёт, перестаёт выводить своё оформление, но заголовки, абзацы, изображения и списки — это базовые блоки, которые читаются нормально в любом месте. Ничего не сохраняется в виде шорткода или собственного формата макетов.
Где на самом деле отображаются шапка и подвал?
Через части шаблона, которые регистрирует Canvas (всего их 5 частей): Header, Footer, Page Title, Sidebar и Sidebar Alt. Часть Header выводит ту запись шапки, которая назначена странице, часть Footer выводит назначенную запись подвала, а часть Page Title выводит то, что получается из настроек заголовка страницы. Сами части — это инфраструктура, а дизайн — это запись, которую вы создаёте из 22 блоков шапки.
Нужна ли мне дочерняя тема?
Только если вы собираетесь редактировать файлы шаблонов Canvas напрямую, что как раз защищает дочерняя тема от обновлений. Мастер настройки создаёт её на необязательном шаге Child Theme и переключает сайт на неё, или вы можете самостоятельно скопировать папку дочерней темы, которая входит в состав Canvas, в папку themes. Большинству сайтов она не нужна: Настройки темы хранят общие параметры сайта, Custom CSS и Custom Attributes для каждого блока задаются на уровне блока, а поля общего Custom CSS и JavaScript находятся в разделе Misc в Настройках темы.
Является ли Canvas темой для языков с написанием справа налево?
Да, у каждой таблицы стилей Canvas есть зеркальная версия для письма справа налево, и WordPress загружает её автоматически, когда сайт работает на арабском, иврите, фарси или любом другом языке с письмом справа налево. Проверены 88 из 88 демо в режиме письма справа налево перед выпуском, поэтому меню, сетки и формы стоят на правильной стороне. Что касается перевода, он тоже полностью готов: обе части продукта поставляются с шаблонами перевода, а вместе с плагином идёт файл конфигурации WPML.
Блочная тема, которую можно передать кому угодно
Canvas опирается на редактор, который входит в WordPress, сохраняет стандартную разметку блоков и хранит шаблоны в Редакторе сайта. Создаёте сайты для клиентов? Прочитайте страницы для агентств и фрилансеров.