Здравствуйте, уважаемые читатели канала Сам Себе Веб-Мастер.
Я начинаю цикл статей посвященных адаптации шаблона под движок MyEngine. В данный момент существует огромный дефицит хороших шаблонов для этого движка. Можно сказать, что их просто нет. Хотя, если взять очень простой html-шаблон, то адаптация займет не более 2-х часов. А вот, если шаблон чуть по сложнее, например на фреймворке Bootstrap, да еще слайдер, всякие фишечки, то время работы над ним увеличивается с геометрической прогрессией. Но, мы не будем брать такой шаблон, а возьмем чуть попроще. Например, вот этот, под названием ZeroFour.
ZeroFour — впечатляющий и стильный шаблон сайта на HTML5 и CSS3. Очень красивое меню, идеально прописанные формы и кнопки, красивые иконки и многое другое. Адаптивная верстка. Очень хорошее решение для сайта любой тематики. Если вам понравился этот шаблон, то вы его можете скачать на demo-странице. Подписывайтесь на канал Сам Себе Веб-Мастер, следите за процессом адаптации этого шаблона, совершайте все рекомендованные действия и в итоге, вы получите этот шаблон для своего сайта.
Очень часто, при адаптации хорошего шаблона возникает проблема. И эта проблема в том, что функционал движка не позволяет реализовать функционал, заложенный в шаблоне. Но, мы не ищем легких путей и постараемся адаптировать шаблон ZeroFour максимально близко к оригиналу.
Задача этой статьи или урока, можно и так сказать, загрузить шаблон ZeroFour в движок и вывести его на страницу тестового сайта. Но для начала разберем структуру шаблона для MyEngine. Для примера возьмем шаблон «The Template». Этот шаблон входит в дистрибутив движка и находится в папке thetpl директории modules (modules/thetpl). Откроем эту папку в FileZilla.
В шаблоне для движка MyEngine обязательно должны быть два файла: info.ini и template.php. Файл info.ini содержит информацию о шаблоне: название шаблона, наименование версии, имя производителя, ссылку на сайт производителя и краткое описание шаблона. В редакторе Notepad++ этот файл выглядит так.
Назначение параметров left_menu и right_menu в данный момент опустим, т.к. сейчас они нам не нужны. Файл template.php - это и есть сам шаблон, в редакторе Notepad++ он имеет следующий вид.
Остальные папки и файлы не обязательны. Например, папка images. В этой папке обычно хранятся изображения для оформления шаблона. Если шаблон небольшой, то эти изображения можно хранить в самой папке шаблона. Или файл style.css. Это таблица стилей шаблона, в которой находятся различные правила, отвечающие за вывод тех же изображений, форматирования текста и много ещё чего. В редакторе Notepad++ эта таблица выглядит так.
Если шаблон простой, то надобности в таком файле нет. Таблицу стилей можно разместить непосредственно в файле template.php. Еще в шаблоне есть картинка skr.png, это файл превью шаблона, который выводится в разделе «Настройки» панели управления сайтом. Этот файл так же не обязателен, если его нет, то будет выведена стандартная заглушка.
Ну что, пожалуй начнем. В любом месте вашего компьютера, где вам удобно, создайте папку zerofour. Это будет папка для нашего адаптированного шаблона. Мы не будем создавать в этой папке файлы info.ini и template.php с помощью редактора. Это слишком долго объяснять. Возможно вы уже знаете как это делается. Мы эти файлы скопируем в эту папку, а потом переделаем под наш шаблон. Скопировать их можно из любого шаблона, которые предустановленны в движке. Я взял эти файлы в шаблоне «The Template» и вот что у меня получилось.
Пока оставим эти файлы в покое и продолжим формировать шаблон. Если вы скачали исходник шаблона ZeroFour, то нужно найти в этом исходнике папки с необходимыми для работы шаблона файлами. Открываем папку с исходным шаблоном, это папка html5up-zerofour. В ней находим и открываем папку assets, из этой папки копируем css, js, и webfonts в папку с адаптируемым шаблоном. Не забываем так же загрузить папку с изображениями images, которая находится в папке исходника. Должен получиться вот такой результат.
Все, структура нашего шаблона создана. Теперь перейдём к адаптации. Для начала отредактируем файл info.ini. Открываем этот файл в редакторе и начинаем редактировать, у меня получилось так.
Теперь, открываем папку исходного шаблона html5up-zerofour, в ней находим файл index.html и открываем его в редакторе Notepad++. Затем, переходим в папку с нашим шаблоном и открываем файл template.php. После чего, выделяем и копируем все содержимое файла index.html
Далее переходим в файл template.php, выделяем его содержимое, удаляем и вставляем то, что скопировали в файле index.html.
Сохраняем изменения в файле template.php. Теперь, чтобы наш шаблон работал корректно, в нем нужно правильно прописать пути доступа для выводимых в шаблоне различных файлов, т.к. эти пути остались от исходного шаблона. На нужно их изменит. Например, файл таблицы стилей main.css в исходном шаблоне выводится так:
<link rel="stylesheet" href="assets/css/main.css" />.
В новом шаблоне этот файл должен выводиться так:
<link rel="stylesheet" href="/modules/zerofour/css/main.css" />.
Так же необходимо сделать для вывода скриптов и изображений. В редакторе Notepad++ это выглядит так.
Найдите в файле строки где прописан тег <img> и для каждого тега повторите эту процедуру.
После чего сохраняем файл template.php. Если вы все сделали как написано выше, то на этом можно считать первый этап адаптации шаблона законченным. Теперь, нужно архивировать папку zerofour с расширением zip. Чем прямо сейчас и займитесь. А потом мы ее загрузим в движок.
Надеюсь, что у вас все получилось. Приступим к загрузке шаблона. Загружать мы его будем через административную панель тестового сайта.
Заходим в панель управления тестовым сайтом и открываем раздел "Управление расширениями".
Для загрузки шаблона необходимо нажать на ссылку "Загрузить и установить расширение". Откроется диалоговое окно для загрузки архива с расширением.
Нажмите кнопку «Выберите файл». Откроется контекстное меню браузера.
Найдите папку, в которую вы сохранили файл с архивом шаблона. Откройте эту папку, выберите файл с архивом и нажмите кнопку «Открыть».
После того, как контекстное меню закроется, в диалоговом окне нажмите кнопку «Загрузить и установить».
Диалоговое окно закрывается, и система возвращается в раздел «Управление расширениями». В списке загруженных расширений появилась строчка « ZeroFour », значит наш шаблон загружен и установлен.
Открываем раздел «Настройки» в панели управления движком.
Нажмите на ссылку «Выбрать шаблон». Откроется диалоговое окно выбора шаблона.
Выбираем шаблон « ZeroFour », нажав на ссылку «Выбрать». Диалоговое окно закроется, а система вернется в раздел «Настройки».
Как видим, произошла смена шаблона, теперь сохраняем изменения, нажав кнопку «Сохранить», и переходим на главную страницу тестового сайта.
Шаблон выведен на страницу сайта. Поставленная в этой статье задача выполнена. Надеюсь, что у вас так же все получилось.
Если у вас все не так хорошо и возникла проблема с выводом шаблона, то не расстраивайтесь. Значит вы где-то ошиблись. Сейчас эту ошибку очень трудно найти. Поэтому, скачайте с Яндекс Диска работающий шаблон. Сделайте работу над ошибками, сравнивая мой шаблон с вашим, и вы обязательно найдете эту ошибку.
В следующей статье начнем выводить контент в новый шаблон. Поэтому, подписывайтесь, если еще не подписаны, на канал Сам Себе Веб-Мастер. Дальше будет еще интереснее.
До свидания!
Другие публикации на эту тему:
Адаптация html-шаблона под MyEngine. Часть 2
Адаптация html-шаблона под MyEngine. Часть 3
Адаптация шаблона под MyEngine. Часть 4
Адаптация html-шаблона под MyEngine. Часть 5
Адаптация html-шаблона под MyEngine. Часть 6
