Начало
Создадим отдельную web папку на вашем хостинге (подразумевается что у вас уже есть свой сайт). После того как вы создали папку, скачиваем фреймворк нажав на кнопку Download Boostrap. И разархивируем его в ранее созданную папку web.
Создание макета
Для начала создадим файл index.php в котором и начнем строить наш макет сайта. Прописываем стандартную разметку, подключаем кодировку utf-8, и указываем русский язык для html ( Указав lang=»ru» в html теге, виджеты twiitter, facebook и вконтакте будут автоматически отображаться на русском языке ).
|
1 2 |
<meta charset="utf-8" /> Шаблон для WordPress |
Добавляем мета теги в отсек head. Добавим мета тег author который в будущем поможет нам с подтверждением авторских прав на контент. После чего прописываем meta og (Open Graph), которые помогут выводить информацию в социальные сети.
|
1 2 3 4 5 6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="author" content="Имя автора" /> <meta content="Название сайта" /> <meta content="website" /> <meta content="Ссылка на изображение логотипа" /> |
Подключаем стили, фикс html5 для IE6-8
|
1 2 3 4 5 6 7 |
<link href="./css/bootstrap.css" rel="stylesheet" /> <link href="./style.css" rel="stylesheet" /> <link href="./css/bootstrap-responsive.css" rel="stylesheet" /> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="./js/html5shiv.js"></script> <![endif]--> |
Вот такой должен быть конечный результат
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Шаблон для WordPress</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="Имя автора"> <meta content="Название сайта" /> <meta content="website" /> <meta content="Ссылка на изображение логотипа" /> <link href="./css/bootstrap.css" rel="stylesheet"> <link href="./style.css" rel="stylesheet"> <link href="./css/bootstrap-responsive.css" rel="stylesheet"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="./js/html5shiv.js"></script> <![endif]--> </head> <body> |
Создаем файл style.css для дальнейшей стилизации и подключения шаблона на wordpress. После чего скачиваем js файл фикса для html5.
В архиве заходим в папку dist и копируем оттуда файл html5shiv.js который вставляем в нашу js папку.
Разметка шаблона. Для разметки я выбрал стандартный каркас для блога.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<div id="wrap"><!-- Фиксированная респонсив навигация --> <header> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Имя сайта</a> <div class="nav-collapse collapse"> <menu></menu></div> </div> </div> </div> </header> <div class="container"> <div class="row"> <div class="span7">Тест контент</div> <div class="span3"> <aside>Тест сайдбар</aside></div> </div> </div> <!-- Прижимаем футер к низу --> <div id="push"></div> </div> <footer> <div id="footer"> <div class="container">Подвал</div> </div> </footer> <!-- Подключаем скрипты --><script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script> </body> </html> |
и в файл style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
header { padding-bottom: 70px; } /* Стили для подвала внизу страницы */ html, body { height: 100%; } #wrap { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -60px; } /* Высота футера */ #push, #footer { height: 60px; } #footer { background-color: #f5f5f5; } @media (max-width: 767px) { #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } } /* Ширна контейнера */ .container { max-width:970px; width: auto; } } .container .credit { margin: 20px 0; } |
Теперь наша разметка готова. Напомню что мы создаем responsive дизайн шаблона, и уже на данном этапе вы можете заметить как ведет себя навигация при уменьшении окна браузра.
В следующем уроке мы приступим к оформлению шаблона, созданием стиля записи, оформим сайдабр и подвал.
Без комментариев.