Adobe Muse и WordPress. Шаг 2

Продолжаем тему, начатую в посте «Adobe Muse и WordPress. Шаг 1».

После успешной подготовки структуры папок, описанной в первом шаге, нужно набросать шаблон и написать сборщик шаблонов на PHP.

Для удобства первую страницу сайта в проекте Adobe Muse нужно сделать пустой со ссылкой на сборщик. Это будет очень удобно при экспорте. Происходит примерно следующее:

  • делаешь дизайн в Adobe Muse
  • экспортируешь его по FTP
  • браузер после экспорта сразу же открывает индексный файл проекта, на котором расположена ссылка на сборщик
  • кликаешь ссылку и сборщик пересобирает твой шаблон

Итак, приступаем к созданию шаблона в проекта Adobe Muse.

Делаем на индексной странице шаблона ссылку на сборщик. Ссылка должна быть следующей: http://yoursite.ru/tpl/php/tmp.php

2017-02-03_11-11-25

 

Создаем вторую страницу и вставляем туда HTML-блоки с PHP-функциями. В данном случае я пишу только одну функцию my_content();

Это не функция WP, а лично моя функция, которая будет описана в файле functions.php. Я специально вставляю сюда свою кастомную функцию, чтобы я мог ее легко менять через файл функций и при изменении формата вывода контента мне не пришлось бы пересобирать шаблон Muse.

2017-02-03_11-12-46

 

Повторяю эту же процедуру для заголовка и получаю примерно вот такую, на первый взгляд неприглядную картину:

2017-02-03_11-13-09

 

 

Эти блоки с сообщением о невозможности отображения будут заменены Вордпрессом при подключении к теме. Muse экспортирует свои проекты так, что блоки растягиваются по высоте и при определенной сноровке можно сделать такой шаблон, что ничего никуда не будет съезжать при большом контенте. Это придет с опытом через 2-3 сделанные страницы.

Естественно, на рисунках я показал схематично что и как выглядеть. Тут нет никакого дизайна. Только описание принципа работы.

Настоятельно рекомендую все блоки заполнять либо своими кастомными функциями, либо выводом переменных. Это избавит от головной боли при программировании формата вывода.

Шаблон готов, экспорт по FTP на сайт сделан (думаю, процесс экспорта ты сможешь сделать без моей помощи). Далее идем к написанию сборщика в шаге 3.

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

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

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

  • Добрый день!
    У меня есть пару вопросов, если позволите:
    1) «Ссылка ведущая на сборщик шаблона» — куда именно она ведет, уточните пожалуйста.
    2) Вы делаете «вставку html…» в Adobe Muse — мне не понятен момент как вы связываете «вставку html» с графикой — шапку и контентом (можете подробнее уточнить и этот момент).
    Спасибо!

    • Добрый день, Антон!
      Отвечаю на Ваши вопросы.
      1) Ссылка, ведущая на сборщик имеет следующий абсолютный адрес: «http://yoursite.ru/tpl/php/tmp.php». Об этом пишу в третьей части. Согласен, что это нужно было написать в этой части. Исправил.
      2) Не понял Вашего вопроса. HTML-вставки содержат в себе PHP-функции, которые выводят контент. Графику, которую Вы используете в дизайне страниц, Вы прям так и вставляете в проект. Шапку, подвал и контент принято в WP разделять на три файла. Но тут совсем другая история. У нас в файле макета все вместе. HTML-вставки нужны только для вставки динамических кусков, таких как, например, контент. Остальное жестко забиваете в макете в самом Muse.

  • Уважаемый автор!
    Если вам не затруднит, возможно ли выложить подробную видеоинструкцию к описанной статье, у многих ваших читателей сразу отпадут лишние вопросы.
    Спасибо!

  • Да, видео было бы очень полезно. Автор, что без знания языков вообще никак не справится? вроде бы все четко описано, но есть вопрос, я создаю в адобе изначально под какую то тему? или создаю так как мне нужно и вставляю в абсолютно любую тему и в итоге будет так как мне надо?

    • Здравствуйте, Кирилл!
      Без знания языка PHP никак не справиться, так как сборщик шаблона, возможно, нужно будет немного адаптировать под Ваш конкретный случай. То, что я описал — это идея, а не готовый продукт, который подобно плагину можно просто взять и подключить.
      В рамках какой темы Вы будете делать шаблон в Мьюзе не имеет значения, так как он будет самодостаточен. Это будет отдельный шаблон с отдельными файлами стилей (если только Вы не решите иначе и не добавите туда файлы темы). Допустим, у Вас установлена тема. Все страницы стилизованы. И тут Вам надо сделать из одной страницы лендинг. Вы создаете шаблон в Мьюзе и назначаете его только для этой конкретной страницы.

      • Большое спасибо вам! Да мне именно это и надо, я хочу сделать первую страницу магазина вукомерс, вы не могли бы немного помочь своим советом? Как мне правильней сделать чтобы соединить тему и адоб? пожалуйста

        • Создаете товары в WooCommerce. Каждый товар имеет свой адрес. Создаете красивую страницу с товарами в Muse. Допустим, Вы сделаете на этой странице квадраты с товарами и кнопкой «Купить». Для каждой такой кнопки назначьте ссылку с адресом товара. Вот, собственно, и всё.

  • […] материалы про то, как привязать Adobe Muse к WordPress (шаг №1, шаг №2, шаг […]

  • functions.php что туда писать?

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

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