Создание адаптивного шаблона для WordPress. ч 1

Наша задача, сделать  шаблон для wordpress на html5 с адаптивной версткой. За основу  будущей темы мы возьмем фреймворк Twitter Bootstrap. Данный курс будет своеобразными уроками bootstrap, а так же наглядным примером как строятся шаблоны на bootstrap.

1. Приступим


Создадим отдельную web папку на вашем хостинге (подразумевается что у вас уже есть свой сайт), если вы еще только хотите купить дешевый хостинг, могу посоветовать friendhosting.net, сам размещаю сайт у них, очень доволен качеством, советую. После того как вы создали папку, скачиваем фреймворк нажав на кнопку Download Boostrap. И разархивируем его в ранее созданную папку web.

bootstrap

2. Создаем макет


  • Для начала создадим файл 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
8
    <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
<!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>

Создаем файл style.css для дальнейшей стилизации и подключения шаблона на wordpress. После чего скачиваем js файл фикса для html5.

В архиве заходим в папку dist и копируем оттуда файл html5shiv.js который вставляем в нашу js папку.

      • Разметка шаблона. Для разметки я выбрал стандартный каркас для блога.

 

<body>
<div id="wrap"><!-- Фиксированная респонсив навигация -->
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"><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="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</body>
</html>

и в файл style.css

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 дизайн шаблона, и уже на данном этапе вы можете заметить как ведет себя навигация при уменьшении окна браузра.

Создаем шаблон на twitter bootstrap

В следующем уроке как создать шаблон для wordpress мы приступим к оформлению шаблона, созданием стиля записи, оформим сайдабр и подвал. Думаю после того как мы закончим уроки, вы перестанете задавать себе вопрос как создать дизайн сайта? Я буду рад если моя статья поможет кому нибудь создать шаблон сайта для wordpress. Если возникли вопросы, задавайте в комментарии.

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *