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 - Установка иконки веб-сайта
- Введение
- Анализ существующих программных решений и выбор инструментальных средств разработки.
- Глава 1. Анализ существующих программных решений и выбор инструментальных средств разработки
- 1.1 Анализ существующих программных решений
- 1.2 Выбор инструментальных средств разработки веб-сайта
- 1.2.1 Хостинг
- 1.2.2 Язык PHP
- 1.2.3 СУБД MySQL
- 1.2.4 CMS Wordpress
- 1.2.5 Шаблон веб-сайта
- Глава 2. Разработка архитектуры сайта
- 2.1 Древо страниц
- 2.2 Веб-дизайн
- Глава 3. Разработка структур данных
- 3.1 Таблица wp_commentmeta
- 3.2 Таблица wp_comments
- 3.3 Таблица wp_links
- 3.4 Таблица wp_options
- 3.5 Таблица wp_postmeta
- 3.6 Таблица wp_posts
- 3.7 Таблица wp_terms
- 3.8 Таблица wp_term_relationships
- 3.9 Таблица wp_term_taxonomy
- 3.10 Таблица wp_usermeta
- 3.11 Таблица wp_users
- Глава 4. Разработка и реализация программных модулей
- 4.1 Установка CMS WordPress
- 4.2 Выбор и установка шаблона веб-сайта
- 4.3 Редактирование структуры веб-страниц и подключение элементов дизайна
- 4.4 Разработка и оформление категорий проектов
- 4.5 Разработка отображения проектов категорий
- 4.6 Дополнительные шаблоны темы "MH Magazine"
- 4.7 Дополнительные программные модули