Адаптирование шаблона для WordPress, используя Bootstrap. Часть 7

Ну вот и пришел завершающий урок по созданию шаблона для WordPress используя Twitter Boostrap. Хочу напомнить, данным уроком я хотел познакомить вас с работой фреймворка и показать на примере, как создается шаблон для WordPress, поэтому извините за некоторые ошибки. В данном завершающем уроке я покажу, как адаптировать шаблон под разные размеры экранов.

Первым делом хочу сказать, что правильной версткой считается верстка макетов по нарастающей, простыми словами от малых экранов до больших. А также, дизайнер или верстальщик перед началом работы должен продумать, как должен выглядеть макет на разных экранах, это значительно облегчит работу. Если перед версткой продумать структуру кода, то в будущем будет меньше проблем с адаптацией.

Принцип адаптации

Если делать все по правилам Bootstrap, то на данном этапе при изменении размера браузера, вы заметите, как изменяется структура сайта. Это все потому, что в фреймворке предусмотрена базовая адаптация, на основе которой мы и немного допилим наш шаблон.

Адаптирование шаблона на самом деле очень легкий и забавный этап. На данном примере я расскажу принцип работы медиа запросов.


@media (max-width: 700px) {
.first-div{
background:red;
}

.second-div{
background:blue;
}
}

Рассмотрим данный пример, в первой строке мы указываем, что медиазпрос работает с размерами браузера (экрана) до 700px, во второй и третей прописывается стандартный css. Вы можете использовать несколько условий внутри одного медиазапроса.

Приступим к работе над шаблоном

Для начала нам понадобиться создаться файл media.css внутри папки css. После чего в header.php подключаем данный файл прописав:


<link href="http://ВАШ-САЙТ/wp-content/themes/ВАШЕ-НАЗВАНИЕ-ТЕМЫ/css/media.css" rel="stylesheet">

Измените адрес вашего сайта, и название темы.

Редактирование файла media.css

Открываем файл media.css и вставляем внутри него:


@media (max-width: 767px) {
.span4 {
 display:none!important;
}
}

Данным кодом мы убираем сайдбар для размеров меньше 767px. Отлично скажите вы, а как же поиск, ведь поиск был в сайдбаре. Не беспокойтесь, с помощью медиа запросов мы выведем его для данных размеров.

Давайте первым делом добавим поисковую форму в код. Откроем файл header.php  и после строчки “<a class=”brand” href=”#”>Имя сайта</a>” вставим “<?php get_search_form(); ?>” (без кавычек). После чего добавим пару строк в файл style.css


 .navbar .searchform {
 margin: 0;
 padding-top: 4px;
 }

 .navbar .screen-reader-text {
 display:none;
 }

 .navbar input {
 margin:0!important;
 }

Данным кодом мы отключим надпись “найти”, и выровняем input в одну линию.

На данном этапе нам нужно отключит отображение поиска для больших экранов, для этого в файле media.css вставляем:


@media (min-width: 767px) {
.navbar .searchform {
 display:none!important;
}
}

Сейчас на больших размерах экрана поиск не буде отображаться, но вот проблема, если сильно уменьшить экран то поиск соскакивает. Данную проблему решают несколькими методами: изменением ширины текстового поля и кнопки, сдвиганием поиска под логотип, позиционированием поиска в свернутую навигацию, либо вовсе вывести его в другом месте например, между навигацией и контентом. Вот пример уменьшения размера текстового поля:


@media (max-width: 500px) {
.navbar .searchform #s {
width: 120px;
}
}

Не буду доводить его до идеала я дал вам наводку, попробуйте доделать его самими.

Ну и вы наверное заметили, большой отступ контента от навигации, чтобы исправить это в первый медиа запрос вставляем код:


header {
padding-bottom:20px!important;
}

Используя данные примеры, вы можете адаптировать сайт как вам угодно, например изменить размеры шрифтов, картинок и т.д.

Ну вот и все, наш курс уроков по созданию адаптивного шаблона для WordPress закончен. Все ваши вопросы задавайте в комментариях, с радостью отвечу.



Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?
Свяжитесь со мной

9 Комментария к “Адаптирование шаблона для WordPress, используя Bootstrap. Часть 7”

  • Sashka ·
    04.10.2014 в 22:22
    #

    У меня при стягивании пропадает почему то меню, не подскажите где поискать это ?

    • Admin ·
      08.11.2014 в 21:21
      #

      Меня не должно пропадать, оно сворачивается в коллапс. Может вы что то не так сделали.

    • Yuriy ·
      08.12.2014 в 22:16
      #

      Для адаптивной навигации вставьте этот код перед

  • Елена ·
    17.09.2015 в 22:24
    #

    В IE8 не работает адаптация, сайдбар не убирается для размеров меньше 767px и меню не сворачивается. Как можно исправить ситуацию?

    • Admin ·
      01.10.2015 в 19:58
      #

      Вам нужно перед строчкой
      А также нужно скачать css3-mediaqueries.js и respond.min.js к себе на сервер в папку js. После чего внутри

  • NeoGeo ·
    21.03.2016 в 08:32
    #

    В версии для скачивания нет ни wp_head ни wp_footer. А значит добрая половина плагинов для такой темы работать не будет.

    • Admin ·
      05.07.2016 в 15:56
      #

      Спасибо что обратили внимание на это, исправил инструкцию и сам архив

  • sasha ·
    07.05.2016 в 13:32
    #

    Огромное спасибо за ваш материал и потраченное ваше время на изложения материала описание материала очень простое понятное и доступное для понимания а так же учтены детали что для меня очень важно и за это отдельное СПАСИБО

    • Admin ·
      05.07.2016 в 15:32
      #

      Очень рад, что материал оказался вам полезным

  • Оставить отзыв

    (обязательно)

    (обязательно)


    Наши друзья
    - ARTtime - Блог о Photoshop и Дизайн
    - Блог о дизайне и арте
    Реклама