УРОК 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

Создание страниц через консоль WordPress

Рис. 4.1. Создание страницы через консоль WordPress

 

Также добавим три записи

Создание записей через консоль WordPress

Рис. 4.2. Создание записей через консоль WordPress

Создадим тему

Создадим папку с темой по траектории:  C:\WebServers\home\localhost\www\iee\wp-content\themes\mytheme

mytheme— папка с темой

Создадим 2 файла: index.php и style.css в папке темы

Файл style.css обязательно должен начинаться с информации о создаваемой Вами теме в виде комментариев и далее содержать код с описанием внешнего вида темы.

параметры темы в style

Подключим тему через Консоль wordpress (нажмите Активировать и перейдите на сайт)

активация темы 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 в wordpress

В <head> мы используем 2 функции Wordress

  • <?php bloginfo(‘name’); ?> —  выводит заголовок сайта, задаваемый в Консоли
  • <?php the_title();?> —  динамически выводит заголовок текущей страницы

Пропишем код в теле сайта

структура тела документа

В файле style.ccs укажем параметры для универсального селектора и для body

параметры для универсального селектора и для body

В коде сайта используется 2 обертки

mainзадает общие параметры сайта (ширина, выравнивание)

main-2 задает общие параметры для всех вложенных блоков сайта (float: left)

основные блоки сайта

Для задания фона шапки скачайте картинку по ссылке http://www.iee.unn.ru/files/2015/10/header.jpg в папку images темы, и задайте:

background:url(images/header.jpg);

верстка сайта в файле stylecss

описание блоков content и footer

Далее: создание меню в wordpress

 

Добавить комментарий

Войти с помощью: