Adobe Muse и WordPress. Шаг 1

Ранее я уже писал о том, что можно достаточно легко и эффективно связать Adobe Muse с движком WordPress. Вот уже более полугода я практикую данную схему и получаю положительные результаты. Не скрою, есть и серьезные недочеты, которые никогда не возникли бы при классическом подходе к верстке шаблонов.

Минусы данного подхода:

  1. Нет единых файлов header.php и footer.php, а также sidebar.php. Все это жестко закреплено в мастер-шаблоне в самом Muse, а WordPress получит дублирование хедера, футера и сайдбара для каждого файла шаблона
  2. Adobe Muse предоставляет потрясающую возможность простого создания адаптивных сайтов. С февраля 2016 года (статья пишется в сентябре 2016 года) адаптивность сделана прилично и нет прежних заморочен с тремя различными версиями сайта. Однако, адаптив реализован не без помощи JavaScript. Поэтому данный момент нужно как-то обходить, иначе контент будет отображаться на станице только после полной загрузки страницы.
  3. Adobe Muse выдает валидный, но не читабельный для человека код. Если Вы создаете шаблон в Muse, то вся его последующая обработка должна быть автоматически: либо через проект Muse, либо регулярными выражениями PHP (позже поясню, что здесь имеется в виду). Никаких ручных правок HTML или CSS. Забудьте об этом. 
  4. Нужно все время учитывать специфику верстки в данной программе. Нельзя просто взять и накидать элементов в проект. Это приведет лишь к том, что у Вас все «сползет» сразу, как только Вы вставите динамичный контент в шаблон. 
  5. Еще один минус данного подхода — лишний код CSS и HTML. Но мой опыт говорит мне, что если верстку делает человек, то это совсем не гарантирует оптимизированный код и в поисковой выдаче на первых строчках часто бывают сайты с грязным кодом, а иногда и с нарушением валидности (последнего никогда не будет по вине Adobe Muse).

Минусов много и они могут показаться серьезными. Но не все так плохо и я убежден, что со временем эти минусы можно будет решить или нивелировать, а за визуальной версткой будущее. Теперь поговорим о хорошем.

Плюсы данного подхода:

  1. Снижение на порядок времени верстки дизайна сайта. Некоторые (особо сложные) страницы удавалось верстать за сущие мгновенья по сравнению с «версткой кодом». Следствие: снижение времени и расходов на верстку.
  2. Совмещение труда дизайнера и верстальщика. Дизайнеры итак часто делают прототипы в Adobe Muse, а теперь их прототипы можно достаточно легко адаптировать и экспортировать как основу для верстки.
  3. Легкость при создании нестандартных страниц, высокохудожественных лэндингов и т.д. Вы когда-нибудь пробовали воплотить в жизнь задумку дизайнера, который никогда не слышал о этих Ваших модульных сетках, бутстрапах и так далее? А ругаться с такими дизайнерами и трепать себе нервы приходилось? Теперь вопрос отпал. Вы можете без проблем верстать самые сложные дизайнерские макеты и получить от этого удовольствие 🙂
  4. Полный контроль адаптивности. Вы наглядно будете видеть какие элементы куда будут перемещаться при смене разрешения. И видеть Вы это будете не только в браузере, но и при проектировании шаблона. Снижение времени на отладку.
  5. Виджеты и шаблоны. Для Adobe Muse существует масса виджетов и уйма шаблонов лендингов. Вы можете съкономить на дизайнере, используя лэндинг-шаблоны, которые затем с легкостью встроите в свой сайт с ЧПУ, динамическим контентом и другими плюшками. Далее Вы сможете включить и настроить в визуальном режиме виджеты, которые гарантированно  будут там, где Вы их расположите на всех разрешения экрана.

Если для Вас плюсы превысили минусы, то читайте далее — первый (подготовительный) шаг.

Итак, сначала нам нужно сформировать структуру нашей будущей темы и экспорта шаблона.

Предлагаю вот такую структуру:

/tpl/tmp_1/ — папка, куда следует настроить экспорт из Adobe Muse через FTP

/tpl/tmp_1/css/ — папка со стилями (создается автоматически самим Muse)

/tpl/tmp_1/fonts/ — папка с картинками (создается автоматически самим Muse)

/tpl/tmp_1/images/ — папка со скриптами (создается автоматически самим Muse)

/tpl/tmp_1/scripts/ — папка со шрифтами (создается автоматически самим Muse)
ВНИМАНИЕ! Ничего не меняем в файлах и папках, указанных выше! При следующем экспорте Muse Вам просто все затрет и запишет заново. 

/tpl/html/ — папка со скомпилированными файлами шаблона, который будем подключать из темы WordPress

/tpl/css/ — папка со стилями, которые будем подключать, чтобы кастомизировать шаблоны Muse.

/tpl/img/ — папка с изображениями темы на тот случай, если нужно вставить картинку, которой нет в экспортированном шаблоне Muse

/tpl/js/ — папка с кастомными скриптами на языке JavaScript

/tpl/php/ — папка с PHP-скриптами, которыми будет обрабатывать HTML-файлы, полученные из Muse.

/wp-content/themes/your_theme/ — Ваша тема

На этом первый шаг окончен. Продолжение следует в шаге 2.

ОБНОВЛЕНИЕ от 22.06.2017: записан скринкаст связки Adobe Muse и CMS WordPress

Комментарии 15

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

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