УРОК 4. СОЗДАНИЕ ТЕМЫ В WORDPRESS
Перед версткой темы создадим базу данных (имя базы iee) (см. урок 3)
Создадим папку с именем сайта по траектории:
C:\WebServers\home\localhost\www\iee
где – iee имя папки для сайта
Установим WordPressв папку iee, запустим Denwerи далее запустим сайт через браузер
http://localhost/iee
Перед разработкой шаблона темы создадим несколько страниц: Об институте, Студенту, Расписание, Учебные материалы, Трудосутройство, Практика и стажировка, Наука, Контакты (скопируем информацию с сайта www.iee.unn.ru)
В консоль wordpress можно зайти по ссылке http://localhost/iee/wp-admin
Рис. 4.1. Создание страницы через консоль WordPress
Также добавим три записи
Рис. 4.2. Создание записей через консоль WordPress
Создадим тему
Создадим папку с темой по траектории: C:\WebServers\home\localhost\www\iee\wp-content\themes\mytheme
mytheme— папка с темой
Создадим 2 файла: index.php и style.css в папке темы
Файл style.css обязательно должен начинаться с информации о создаваемой Вами теме в виде комментариев и далее содержать код с описанием внешнего вида темы.
Подключим тему через Консоль wordpress (нажмите Активировать и перейдите на сайт)
В файле index.php пропишем структуру сайта
Используем макет, который обернем в блоки main и main-2
Блоки search и aside обернем в блок sidebar
При создании темы используем следующий шаблон
Сайт состоит из следующих блоков:
- main, main-2 (высота 1000px)
- header – шапка сайта (высота 130px)
- menu – блок горизонтальной навигации (высота 50px)
- content – блок контента (ширина 700px, высота 500px).
- sidebar – боковая панель (ширина 300px, высота 500px). Размеры блоков search и aside (50 и 450px)
- footer – футер (высота 100px)
Параметр высота для блоков content, sidebarи aside задаем временно (для наглядности)
Все блоки, временно, залейте разными цветами (также временно)
Еще раз отметим, что все блоки «обернуты» в блок main (id=»main»), который задает общие параметры для всех блоков сайта
В файле index.php пропишем
В <head> мы используем 2 функции Wordress
- <?php bloginfo(‘name’); ?> — выводит заголовок сайта, задаваемый в Консоли
- <?php the_title();?> — динамически выводит заголовок текущей страницы
Пропишем код в теле сайта
В файле style.ccs укажем параметры для универсального селектора и для body
В коде сайта используется 2 обертки
mainзадает общие параметры сайта (ширина, выравнивание)
main-2 задает общие параметры для всех вложенных блоков сайта (float: left)
Для задания фона шапки скачайте картинку по ссылке http://www.iee.unn.ru/files/2015/10/header.jpg в папку images темы, и задайте:
background:url(images/header.jpg);
Далее: создание меню в wordpress