Конвертер Webflow to Wordpress. Справочник. Максим Соколов

туальной издательской системе 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 – Название компании.

      Чтобы добавить Имя поля нужно просто кликнуть на пустое поле и Имя поля добавиться автоматически.

      Скрипт конвертера автоматически переводит все поля в латиницу, поэтому вам достаточно указать название поля на русском.

      Так