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

Автор:human

Создание адаптивного шаблона для 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 : 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 ;
      }
  • Теперь наша разметка готова. Напомню что мы создаем responsive дизайн шаблона, и уже на данном этапе вы можете заметить как ведет себя навигация при уменьшении окна браузра.

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

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

Об авторе

human administrator

    Оставить ответ

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

     

    Яндекс.Метрика