Table Of ContentМаксим Соколов
Антон Вьюков
Конвертер Webflow to Wordpress
Справочник
Конвертер Webflow to Wordpress
Справочник
Максим Соколов
Антон Вьюков
© Максим Соколов, 2018
© Антон Вьюков, 2018
ISBN 978-5-4490-9747-7
Создано в интеллектуальной издательской системе Ridero
Введение
Если эта книга у вас в руках, значит вы знакомы с сервисом Webflow и с такой
могущественной и самой популярной в мире CMS – как WordPress.
Компания Webflow сделала революцию в мире разработки сайтов, освободив дизайнеров
от верстальщиков. Теперь, нарисовав любой вариант дизайна – в таких программах как
Photoshop, Sketch или Figma – вы можете легко сверстать адаптивный сайт без знания языков
программирования и верстки.
Мы (Соколов Максим и Антон Вьюков) задумались над идеей, которая по замыслу
на первый взгляд – была просто неосуществима, но мы реализовали ее и это – «Конвертер
Webflow to WordPress» (далее Конвертер WtW).
Конвертер WtW – это технология, которая позволяет сверстать макет сайта в Webflow и
далее – в два клика мышкой превратить его в тему для CMS WordPress. При этом, идея “без
программирования” полностью реализуется. Но самое главное, что вы легко можете создать
такие сложные сайты как: Агентство недвижимости с каталогом объектов; Авторский блог;
Портфолио для фрилансера; Сайт компании с каталогом продукции и новостным разделом;
и даже интернет-магазин (используя мощнейший плагин Woocommerce).
Как мы смогли это реализовать? На самом деле, все не так сложно, как кажется на первый
взгляд. Мы разработали технологию меток, которые расставляются на блоки разного
назначения (поле ввода, текст, графика, видео) и когда сверстанный сайт в Webflow
отправляется в Конвертер WtW, то сервис по меткам переписывает весь код автоматически в
стандарты темы Wordpress, двигаясь по меткам, как по дорожной карте.
Мы создали эту книгу как справочник разработчика сайтов на базе “Конвертера Webflow to
WordPress”. Здесь вы найдете все виды меток, наиболее популярные плагины для WordPress,
интегрируя которые вы можете расширять свой сайт до любого функционала и так же,
включили дополнительную справочную информацию.
По вопросам приобретения сервиса и обучения обращайтесь на сайт академии по адресу
sokolovm.com
Наша академия визуального веб-дизайна проводит обучение по созданию сайтов с нуля до
уровня фриланс. Это означает, что вы можете научится создавать сайты, даже если вообще
никогда с этим не сталкивались и начать зарабатывать деньги, создавая сайты на заказ.
Приходите на наш бесплатный тренинг, который проходит каждый месяц.
Записаться вы можете по адресу sokolovm.com/trening/novichok
СПРАВОЧНИК МЕТОК КОНВЕРТЕРА WEBFLOW
TO WORDPRESS
Что такое метка?
Метка – это указатель, который мы ставим в Webflow на блоки сайта, чтоб обозначить,
какую информацию будет отображать каждый конкретный блок.
Например, можно указать, что данный блок будет выводить логотип сайта или название
сайта, заголовок страницы и тп.
Метки мы ставим только на те блоки, которые будет необходимо менять через админку.
Если блок статичный и не требует изменений, то метку на него не ставим.
Как поставить метку?
В Webflow переходим на вкладку с Настройками и нажимаем на плюсик.
Далее у вас открывается 2 поля: Namе и Value. В эти поля мы записываем метку.
Как подключить элемент Heading
Пример: Элемент находиться в какой либо секции например на Главной странице.
1) На этот элемент ставим метку
в поле Name пишем f_text (что значит что мы будем подключать текстовый элемент)
и в поле Value пишем Ярлык поля (например: «Заголовок на Главном экране» или «Текст
о компании»)
2) В WordPress выводим это поле через плагин Advanced Custom Fields (ACF PRO).
Переходим в «Группы полей» (Находиться в боковой панели под Настройками).
нажимаем кнопку Добавить
и в первом поле «Введите название» пишем название страницы на которой находиться наш
элемент, в нашем примере элемент находиться на Главной странице потому пишем
«Главная»), (смотрите раздел «Как подключить Главную страницу»)
Дальше нажимаем кнопку Добавить поле
В поле Ярлык поля пишем то же самое что мы писали в поле Value – Название компании.
Чтобы добавить Имя поля нужно просто кликнуть на пустое поле и Имя поля добавиться
автоматически.
Скрипт конвертера автоматически переводит все поля в латиницу, поэтому вам достаточно
указать название поля на русском.
Так как у нас текстовое поле то тип поля выбираем «Текст».
Чтобы закрыть окно нужно нажать на Название компании напротив цифры 1.
Теперь нажимаем кнопку Обновить, которая находиться в правом верхнем углу.
Переходим в раздел страницы и открываем Главную.
Теперь у нас появилось такое поле на странице «Главная» и мы можем его заполнить.
Переходим в раздел «Страницы» и открываем страницу «Главная».
Обратите внимание что содержимое поля Value и название этого поля совпадают. Это значит
что в поле Value мы указываем название поля для WordPress.
Если вы сделали все как в примере и поле не подключилось значить ошибка может быть
в названии поля Value. Поле Value не подключиться даже если хоть один символ
не совпадает.
Если вам нужен визуальный редактор вместо простого текстового поля то тип поля нужно
выбрать «Редактор WordPress».
И у Вас получиться такой Редактор как показано ниже.
Внимание: Поле текстовый редактор не нужно подключать к блоку типа «Параграф», т.к. сам
визуальный редактор создает внутри себя параграфы и в результате будет нарушена
структура документа. Потому что, по правилам HTML один параграф не может быть вложен
в другой.
Как подключить элемент Paragraph?
Пример: Элемент находиться в какой либо секции например на Главной странице
Все последующие шаги повторяем как в предыдущем примере, только тип поля выбираем
«Область текста».
