4.3 Редактирование структуры веб-страниц и подключение элементов дизайна

Для этого будем продолжать работу в разделе панели управления "Внешний вид".

1. Редактирование раздела "Header".

Для подключения основного баннера переходим в подменю "Настроить" и в пункте "Изображение заголовка" выбираем добавить изображение, где через стандартный загрузчик закачиваем нужное изображение. За вывод баннера в разделе "Header" отвечает файл шаблона этого раздела header. php, который, в свою очередь, загружает основной шаблон отображения категорий веб-сайта index. php. По умолчанию это происходит при помощи кода: <? php get_header ()? > Но у нас имеется специальный баннер для категории "Бани" и поэтому общий шаблон header. php не подойдёт, так как он предусматривает отображение одного и того же изображения в разделе "Header" на все страницы сайта. К тому же, в будующем, каждой категории будет соответствовать свой баннер. Для решения этого вопроса создаём альтернативный, для категории "Бани", шаблон отображения "Header" - header-bani. php, в котором содержится ссылка на соответствующее изображение (см. рис.29). В файле header. php ставим ссылку на основное изображение "Header" (см. рис.30). В итоге в шаблоне категорий index. php задаём условие подключения шаблонов "шапки" (см. рис. 8).

Рисунок 8 - Создание шаблона header-bani. Php

Рисунок 9 - Редактирование шаблона header. Php

Рисунок 10 - Редактирование шаблона index. Php

2. Редактирование раздела "Footer".

За вывод "подвала" отвечает файл-шаблон footer. php. Введём традиционные функцию вывода копирайта и нынешнего года, а также название сайта и его краткое описание (см. рис. 11).

Рисунок 11 - Редактирование шаблона footer. Php

Далее зададим созданный фон для класса. fll-copyright и стили вывода информации "подвала" (см. рис. 12).

Рисунок 12 - Стили шаблона footer. Php

3. Редактирование раздела "Content".

За вывод содержимого контента веб-страниц в шаблоне отвечает файл content-page. php, который, в свою очередь, так же загружает основной шаблон отображения страниц веб-сайта page. php (см. рис. 13).

Рисунок 13 - Шаблон отображения контента

В соответствии с макетом задаём размеры данного раздела в процентах. Таким образом, контент будет одинаково отображаться при просмотре веб-сайта на разных разрешениях экрана (см. рис. 14).

Рисунок 14 - Редактирование стиля раздела "Content"

4. Редактирование раздела "Saidbar".

Отображением данного раздела занимается файл шаблона sidebar. php (см. рис. 15).

Рисунок 15 - Шаблон отображения раздела "Saidbar"

По макету на ширину сайдбара приходится 18%. Следует отметить, что размер раздела "сontent" составляет 78%, что в сумме даёт 96%, где оставшиеся 4% ширины экрана занимают отступы от краёв. Зададим необходимые значения стиля (см. рис. 16).

Рисунок 16 - Редактирование стиля раздела "Saidbar"

В данном разделе предполагается расположение меню. Для его оформления будем использовать плагин-виджет (независимо компилируемый программный модуль, динамически подключаемый к CMS и предназначенный для расширения и/или использования её возможностей) "jQuery Vertical Mega Menu". Это бесплатный плагин, предназначенный для создания вертикального выпадающего меню в сайдбаре. За основу пунктов меню можно выбирать рубрики, страницы, записи и ссылки. В разделе "Внешний вид/Меню" создаём новое меню и выбираем заранее созданные рубрики и страницы (см. рис. 17).

Рисунок 17 - Создание меню

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

Рисунок 18 - Добавление и настройка виджета "jQuery Vertical Mega Menu"

Для подключения своего фона и стиля меню, воспользуемся вкладкой Плагины/Редактор, выберем плагин и отредактируем стили отображения меню и подменю действующей темы "Green" (см. рис. 19).

Рисунок 19 - Редактирование стилей меню и подменю

5. Редактирование фона страниц веб-сайта.

По умолчанию в теме "MH Magazine" задан белый цвет фона страниц. За стили разделов меню "Content" и "Saidbar" отвечает класс "mh-rapper", внесём в него изменения через таблицу стилей (см. рис. 20).

Рисунок 20 - Редактирование фона

6. Установка иконки веб-сайта.

Иконка (Favicon) является дополнительным элементом дизайна, который отражает индивидуальность и суть веб-сайта. В качестве иконки было выбрано и уменьшено до размера 16х16 пикселей изображение бани с главного баннера. Устанавливается фавикон через вкладку "Внешний вид/Настроить/Свойства сайта" на панели управления (см. рис. 21).

Рисунок 21 - Установка иконки веб-сайта