Ранее я уже писал о том, что можно достаточно легко и эффективно связать Adobe Muse с движком WordPress. Вот уже более полугода я практикую данную схему и получаю положительные результаты. Не скрою, есть и серьезные недочеты, которые никогда не возникли бы при классическом подходе к верстке шаблонов.
Минусы данного подхода:
- Нет единых файлов header.php и footer.php, а также sidebar.php. Все это жестко закреплено в мастер-шаблоне в самом Muse, а WordPress получит дублирование хедера, футера и сайдбара для каждого файла шаблона
- Adobe Muse предоставляет потрясающую возможность простого создания адаптивных сайтов. С февраля 2016 года (статья пишется в сентябре 2016 года) адаптивность сделана прилично и нет прежних заморочен с тремя различными версиями сайта. Однако, адаптив реализован не без помощи JavaScript. Поэтому данный момент нужно как-то обходить, иначе контент будет отображаться на станице только после полной загрузки страницы.
- Adobe Muse выдает валидный, но не читабельный для человека код. Если Вы создаете шаблон в Muse, то вся его последующая обработка должна быть автоматически: либо через проект Muse, либо регулярными выражениями PHP (позже поясню, что здесь имеется в виду). Никаких ручных правок HTML или CSS. Забудьте об этом.
- Нужно все время учитывать специфику верстки в данной программе. Нельзя просто взять и накидать элементов в проект. Это приведет лишь к том, что у Вас все «сползет» сразу, как только Вы вставите динамичный контент в шаблон.
- Еще один минус данного подхода — лишний код CSS и HTML. Но мой опыт говорит мне, что если верстку делает человек, то это совсем не гарантирует оптимизированный код и в поисковой выдаче на первых строчках часто бывают сайты с грязным кодом, а иногда и с нарушением валидности (последнего никогда не будет по вине Adobe Muse).
Минусов много и они могут показаться серьезными. Но не все так плохо и я убежден, что со временем эти минусы можно будет решить или нивелировать, а за визуальной версткой будущее. Теперь поговорим о хорошем.
Плюсы данного подхода:
- Снижение на порядок времени верстки дизайна сайта. Некоторые (особо сложные) страницы удавалось верстать за сущие мгновенья по сравнению с «версткой кодом». Следствие: снижение времени и расходов на верстку.
- Совмещение труда дизайнера и верстальщика. Дизайнеры итак часто делают прототипы в Adobe Muse, а теперь их прототипы можно достаточно легко адаптировать и экспортировать как основу для верстки.
- Легкость при создании нестандартных страниц, высокохудожественных лэндингов и т.д. Вы когда-нибудь пробовали воплотить в жизнь задумку дизайнера, который никогда не слышал о этих Ваших модульных сетках, бутстрапах и так далее? А ругаться с такими дизайнерами и трепать себе нервы приходилось? Теперь вопрос отпал. Вы можете без проблем верстать самые сложные дизайнерские макеты и получить от этого удовольствие 🙂
- Полный контроль адаптивности. Вы наглядно будете видеть какие элементы куда будут перемещаться при смене разрешения. И видеть Вы это будете не только в браузере, но и при проектировании шаблона. Снижение времени на отладку.
- Виджеты и шаблоны. Для 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
Привет! Вторая часть когда выйдет?
Т.е. шаг 🙂
Продолжение есть: http://sdelaisdl.ru/articles/82-adobe-muse-i-wordpress-shag-2/
Продолжение будет?
Тема-то актуальна!
Сделал продолжение. Прошу в шаг 2: http://sdelaisdl.ru/articles/82-adobe-muse-i-wordpress-shag-2/
Извините за нубский вопрос, впервые это делаю.
А где создавать эти папки?
Эти папки создаются в корне сайта. Их можно создать при помощи FTP-клиента (например, Filezilla) или через файловый менеджер на Вашем хостинге.
Рассмотрим пример папки /tpl/html/, которую нужно создать. Вы идете на свой сайт через FTP. Заходите в папку с сайтом, которая обычно называется public_html (бывают разные варианты). Там создаете сначала папку «tpl», а внутри нее папку «html».
Сразу хочу оговорить, что сам процесс создания такой полуавтоматической штуки, которую я описал в трех частях, требует хотя бы минимальных знаний HTML, PHP, а также WordPress с точки зрения программирования тем. Имейте это в виду.
Спасибо большое за ответ!)
html знаю хорошо, wordpress только начал осваивать, а вот с php вообще не дружу. Буду пробовать.
А как потом добавлять новые записи и фотографии, через adobe muse или в самом wordpress?
В самом WordPress. Adobe Muse тут используется только как средства для создания шаблона. Если в классическом варианте Вы делаете макет в Photoshop, затем нарезаете и верстаете его в HTML, то тут эти операции автоматизируются при помощи Мьюза.
Конечно спасибо автору за труды! Все просто и работает! Ну не без правки конечно! Ну не совсем 100% как в музьке, но это надо было еще править, я думаю можно добиться полного сходства.
Но дело не в этом — это не вставка в базу wp, это показ импортируемых страниц html через файл темы, ну как бы это показ темы. В базу ничего не попадает!
Хотя, я понимаю, может кому-то и этого будет достаточно.
Знаю что вы скажите — … расскатал губы — ну да, согласен, идея висит в воздухе, кто-нибудь ее обязательно реализует.
Еще раз спасибо за статью!