Адаптация html-шаблона под MyEngine. Административная часть.

24 March 2020

Здравствуйте, читатели канала Сам Себе Веб-Мастер.

Источник: Яндекс Картинки. Фото адаптировано автором.
Источник: Яндекс Картинки. Фото адаптировано автором.
Источник: Яндекс Картинки. Фото адаптировано автором.

Любой шаблон, да же на чистом html, нужно администрировать. Поэтому, умные люди придумали для администрирования шаблонов различные панели управления, чтобы не лезть каждый раз в код шаблона с различными дополнениями и обновлениями контента. И назвали это все Content management system (CMS) или по простому - движок. Любой движок обладает определенным набором функций и очень часто, этих функций не хватает, чтобы реализовать весь функционал шаблона. Поэтому приходится дописывать функционал движка, что не всегда возможно, или делать отдельную панель управления для шаблона, что намного проще. Вот и я решил сделать такую панель для шаблона ZeroFour.

В этой статье не будет описания того, что и как было сделано, а будет обзор настроек уже готовой панели. Начнем с того, что нужно удалить с вашего тестового сайта весь шаблон и скачать на Яндекс Диск новый, с панелью управления. Загрузка шаблона обычная, через раздел "Управление расширениями". А вот дальше все немного по другому.

После того, как загрузите шаблон, перейдите на главную страницу панели управления сайтом. Там вы увидите вот такую иконку.

Главная страница панели управления сайтом.
Главная страница панели управления сайтом.
Главная страница панели управления сайтом.

Нажимаем на эту иконку и переходим в панель управления шаблоном ZeroFour.

Панель управления шаблоном. Вкладка инициализации шаблона.
Панель управления шаблоном. Вкладка инициализации шаблона.
Панель управления шаблоном. Вкладка инициализации шаблона.

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

Панель управления сайтом, раздел "Настройки".
Панель управления сайтом, раздел "Настройки".
Панель управления сайтом, раздел "Настройки".

Необходимо подключить наш шаблон. Для этого нажимаем кнопку "Выбрать шаблон". Откроется диалоговое окно выбора шаблона.

Панель управления сайтом. Диалоговое окно выбора шаблона.
Панель управления сайтом. Диалоговое окно выбора шаблона.
Панель управления сайтом. Диалоговое окно выбора шаблона.

Выбираем шаблон ZeroFour. Диалоговое окно закрывается и система возвращается в раздел "Настройки".

Панель управления сайтом, раздел "Настройки".
Панель управления сайтом, раздел "Настройки".
Панель управления сайтом, раздел "Настройки".

Все шаблон подключен. Сохраняем настройки и переходим на главную страницу сайта.

Шапка главной страницы сайта.
Шапка главной страницы сайта.
Шапка главной страницы сайта.

Название сайта и центральный текст баннера загружаются в разделе "Настройки" панели управления сайтом, а вот текст внизу баннера и кнопка редактируются уже в панели управления шаблоном. Откроем эту панель.

Панель управления шаблоном. Основные настройки.
Панель управления шаблоном. Основные настройки.
Панель управления шаблоном. Основные настройки.

Здесь все просто. Можно поменять фон баннера, загрузив новое фото через менеджер файлов. Это стандартная функция движка, поэтому описывать ее не буду.

Далее идет настройка "Текст в шапке". Этот текст и выводится внизу баннера в шапке. Далее можно редактировать ссылку и текст в кнопке. При желании, все это можно отключить убрав чекбокс "Включить вывод текста".

Блок превью на главной странице стал вот таким.

Блок превью на главной странице.
Блок превью на главной странице.
Блок превью на главной странице.

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

В основных настройках шаблона можно отключить вывод блока новостей, если он вам не нужен. Так же можно отключить вывод меню категорий новостей, если на сайте нет таких категорий.

Блок превью новостей на  странице.
Блок превью новостей на странице.
Блок превью новостей на странице.

Далее в этой вкладке настроек шаблона идут настройки контактной информации, которая выводится в подвале страницы сайта.

Панель управления шаблоном. Настройки контактной информации.
Панель управления шаблоном. Настройки контактной информации.
Панель управления шаблоном. Настройки контактной информации.
Подвал страницы.
Подвал страницы.
Подвал страницы.

Вывод колонок в левой части подвала настраивается в разделе "Меню" панели управления сайтом. Это штатные настройки и мы из рассматривать не будем.

Переходим в "Блок превью на главной", для чего нажимаем на одноименную ссылку в горизонтальном меню панели управления шаблоном.

Панель управления шаблоном. Блок превью на главной.
Панель управления шаблоном. Блок превью на главной.
Панель управления шаблоном. Блок превью на главной.

В этой вкладке выводится список уже созданных превью и добавляются новые. Нажимаем кнопку "Добавить превью". Откроется форма для добавления превью.

Панель управления шаблоном. Блок превью на главной. Добавление нового превью.
Панель управления шаблоном. Блок превью на главной. Добавление нового превью.
Панель управления шаблоном. Блок превью на главной. Добавление нового превью.

Здесь все достаточно просто и понятно. Вводится заголовок превью, субтитр - это краткое описание превью. Загружается фото превью и ссылка на страницу сайта. А вот о настройке "Класс иконки" нужно сказать несколько слов.

В каждом превью выводится своя иконка. Эти иконки загружаются из библиотеки Font Awesome, в которой каждой из иконок присвоен свой класс стилей css. Для выбора класса иконки нажимаем кнопку, откроется диалоговое окно выбора.

Панель управления шаблоном. Таблица иконок Font Awesome.
Панель управления шаблоном. Таблица иконок Font Awesome.
Панель управления шаблоном. Таблица иконок Font Awesome.

Наводим курсор на нужную иконку и кликаем на ней левой кнопкой мыши.

Таблица иконок Font Awesome. Выбор иконки.
Таблица иконок Font Awesome. Выбор иконки.
Таблица иконок Font Awesome. Выбор иконки.

После клика, класс соответствующий выбранной иконки, записывается в буфер обмена браузера и появляется вот такое уведомление.

Таблица иконок Font Awesome. Выбор иконки. Уведомление.
Таблица иконок Font Awesome. Выбор иконки. Уведомление.
Таблица иконок Font Awesome. Выбор иконки. Уведомление.

Закрываем окно и вставляем класс иконки в соответствующее поле.

Про удаление превью из списка сказать практически нечего. Нажимаем на ссылку "Удалить" и следуем дальше за подсказками системы. При нажатии на ссылку "Редактировать" откроется вкладка редактирования превью.

Панель управления шаблоном. Блок превью на главной. Редактирование превью.
Панель управления шаблоном. Блок превью на главной. Редактирование превью.
Панель управления шаблоном. Блок превью на главной. Редактирование превью.

Здесь все просто. Вносите какие-то изменения и сохраняете их. В заключении обзора блока превью нужно сказать, что можно создать, таким образом, любое количество превью.

Возвращаемся назад в панель управления шаблоном и открываем вкладку "Боковые блоки в основном контенте".

Панель управления шаблоном. Боковые блоки в основном контенте.
Панель управления шаблоном. Боковые блоки в основном контенте.
Панель управления шаблоном. Боковые блоки в основном контенте.

Здесь создаются и настраиваются блоки, которые выводятся справа от основного контента. На странице сайта это выглядит так.

Блок основного контента на главной странице.
Блок основного контента на главной странице.
Блок основного контента на главной странице.

Во вкладка " Боковые блоки в основном контенте" выводится список созданных блоков. Управление этими блоками аналогично управлению боковыми блоками в разделе "Меню" панели управления сайтом.

Для добавления нового блока нажимаем кнопку "Добавить блок". Откроется вкладка добавления нового блока.

Панель управления шаблоном. Боковые блоки в основном контенте. Добавление блока.
Панель управления шаблоном. Боковые блоки в основном контенте. Добавление блока.
Панель управления шаблоном. Боковые блоки в основном контенте. Добавление блока.

Вводится название блока, выбирается тип блока: Блок ссылок, Html-блок или модуль. Нажимаете кнопку "Добавить блок". Редактирование уже созданных блоков в каких-то комментариях не нуждается.

Боковые блоки в основном контенте. Редактирование блока.
Боковые блоки в основном контенте. Редактирование блока.
Боковые блоки в основном контенте. Редактирование блока.

Процесс удаления блоков так же не нуждается в описании. Он стандартный. Управление боковыми блоками в новостях аналогичное.

Панель управления шаблоном. Боковые блоки в новостях.
Панель управления шаблоном. Боковые блоки в новостях.
Панель управления шаблоном. Боковые блоки в новостях.
Блок превью новостей на  странице.
Блок превью новостей на странице.
Блок превью новостей на странице.

Пожалуй, это все, что можно сказать о панели управления шаблоном ZeroFour. Если вы еще не скачали этот шаблон, то скачайте его прямо сейчас. Установите его на свой тестовый сайт и пройдитесь по панели управления шаблоном в соответствии с этим обзором. Так же вы можете посмотреть эту административную панель на демо сайте: вход в админпанель - http://o91395cu.beget.tech/admin/, пароль -123.

До свидания. Подписывайтесь на канал Сам Себе Веб-Мастер. Пишите комментарии и задавайте вопросы.

Другие публикации на эту тему:

Адаптация html-шаблона под MyEngine. Часть 1

Адаптация html-шаблона под MyEngine. Часть 2

Адаптация html-шаблона под MyEngine. Часть 3

Адаптация шаблона под MyEngine. Часть 4

Адаптация html-шаблона под MyEngine. Часть 5

Адаптация html-шаблона под MyEngine. Часть 6

Адаптация html-шаблона под MyEngine. Часть 7

Адаптация html-шаблона под MyEngine. Часть 8