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 комментариев к “Adobe Muse и WordPress. Шаг 1”

  1. Уведомление: Как Adobe Muse и связать с Wordpress | Авторский блог вебмастера
  2. Уведомление: Adobe Muse и WordPress. Шаг 2 | Авторский блог вебмастера
    • Эти папки создаются в корне сайта. Их можно создать при помощи FTP-клиента (например, Filezilla) или через файловый менеджер на Вашем хостинге.
      Рассмотрим пример папки /tpl/html/, которую нужно создать. Вы идете на свой сайт через FTP. Заходите в папку с сайтом, которая обычно называется public_html (бывают разные варианты). Там создаете сначала папку «tpl», а внутри нее папку «html».
      Сразу хочу оговорить, что сам процесс создания такой полуавтоматической штуки, которую я описал в трех частях, требует хотя бы минимальных знаний HTML, PHP, а также WordPress с точки зрения программирования тем. Имейте это в виду.

      Ответить
      • Спасибо большое за ответ!)
        html знаю хорошо, wordpress только начал осваивать, а вот с php вообще не дружу. Буду пробовать.

        Ответить
  3. А как потом добавлять новые записи и фотографии, через adobe muse или в самом wordpress?

    Ответить
    • В самом WordPress. Adobe Muse тут используется только как средства для создания шаблона. Если в классическом варианте Вы делаете макет в Photoshop, затем нарезаете и верстаете его в HTML, то тут эти операции автоматизируются при помощи Мьюза.

      Ответить
  4. Уведомление: Что следует учитывать при создании СДЛ | Авторский блог вебмастера
  5. Конечно спасибо автору за труды! Все просто и работает! Ну не без правки конечно! Ну не совсем 100% как в музьке, но это надо было еще править, я думаю можно добиться полного сходства.
    Но дело не в этом — это не вставка в базу wp, это показ импортируемых страниц html через файл темы, ну как бы это показ темы. В базу ничего не попадает!
    Хотя, я понимаю, может кому-то и этого будет достаточно.
    Знаю что вы скажите — … расскатал губы — ну да, согласен, идея висит в воздухе, кто-нибудь ее обязательно реализует.
    Еще раз спасибо за статью!

    Ответить
  6. Уведомление: Скринкаст о связке Adobe Muse и Wordpress | Авторский блог вебмастера

Добавить комментарий для Владимир Отменить ответ