Верстка в bootstrap 3 новой темы для WordPress
Здравствуйте, уважаемые посетители моего сайта “Блог Валерия Бородина”! Сегодня мы с вами продолжим нашу верстку в в bootstrap новой темы для сайта на движке вордпресс.
И я рад Вас приветствовать на следующем занятии по версте в bootstrap, где мы с вами рассмотрим адаптацию нашей уже готовой темы для WordPress. И так начинаем наш …
Урок седьмой заключительный: адаптивная верстка в bootstrap 3 для WordPress!
Сегодня мы адаптируем нашу получившуюся тему для экранов с различным разрешением, то есть оптимизируем под мобильные устройства, другими словами.
Что нам для этого нужно сделать?
Сначала нужно понять сам принцип адаптации темы по разные размеры экранов. Давайте посмотрим небольшой пример:
@media (max-width: 700px) {
.first-div{
background:red;
}
.second-div{
background:blue;
}
} Это медиазапрос работающий с размерами экранов до 700 px. В других строчках ставятся значения стандартные для css. Таким образом Вы можете внутри одного медиазапроса несколько условий. Ну да ладно!
Конкретно по нашей теме, что будем дальше делать …
Давайте в папке css создадим файл media.css и подключим его прописав в файле header.php вот такой код:
<link href="http://ваш сайт/wp-content/themes/ваша тема/css/media.css" rel="stylesheet">
Не забудьте заменить строки “ваш сайт” и “ваша тема” на название вашего домена и название вашей темы!
Верстка в bootstrap продолжается!
Теперь в созданный нами файл media.css вставляем вот такой код:
@media (max-width: 767px) {
.span4 {
display:none!important;
}
} Этот код убирает сайдбар, если размеры экрана меньше 767 px.
Дальше нам нужно форму поиска добавить в 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;
} Пользуясь такими вот примерами, Вы можете адаптировать свой сайт под любые устройства и любое место вашего ресурса (картинки, шрифты, контент и т. д.).
На этом позвольте закончить наш курс обучения.
Если Вам понравился мой курс “Верстка в bootstrap адаптивной темы для WordPress”. Прошу Вас тогда написать свой отзыв в разделе комментарии.
Спасибо за внимание! Смотрите весь мой материал здесь.
Не забывайте подписываться на обновления сайта, чтобы получать все самое свежее и лучшее первым!
Ваш Валерий Бородин
Все уроки по верстке в bootstrap адаптивной, уникальной темы для WordPress
