Ну вот и пришел завершающий урок по созданию шаблона для WordPress используя Twitter Boostrap. В данном завершающем уроке я покажу, как адаптировать шаблон под разные размеры экранов.
Принцип адаптации
Если делать все по правилам Bootstrap, то на данном этапе при изменении размера браузера, вы заметите, как изменяется структура сайта. Это все потому, что в фреймворке предусмотрена базовая адаптация, на основе которой мы и немного допилим наш шаблон.
Адаптирование шаблона на самом деле очень легкий и забавный этап. На данном примере я расскажу принцип работы медиа запросов.
|
1 2 3 4 5 6 7 8 9 |
@media (max-width: 700px) { .first-div{ background:red; } .second-div{ background:blue; } } |
Рассмотрим данный пример, в первой строке мы указываем, что медиазпрос работает с размерами браузера (экрана) до 700px, во второй и третей прописывается стандартный css. Вы можете использовать несколько условий внутри одного медиазапроса.
Приступим к работе над шаблоном
Для начала нам понадобиться создаться файл media.css внутри папки css. После чего в header.php подключаем данный файл прописав:
|
1 |
<link href="http://ВАШ-САЙТ/wp-content/themes/ВАШЕ-НАЗВАНИЕ-ТЕМЫ/css/media.css" rel="stylesheet"> |
Измените адрес вашего сайта, и название темы.
Редактирование файла media.css
Открываем файл media.css и вставляем внутри него:
|
1 2 3 4 5 |
@media (max-width: 767px) { .span4 { display:none!important; } } |
Данным кодом мы убираем сайдбар для размеров меньше 767px. Отлично скажите вы, а как же поиск, ведь поиск был в сайдбаре. Не беспокойтесь, с помощью медиа запросов мы выведем его для данных размеров.
Давайте первым делом добавим поисковую форму в код. Откроем файл header.php и после строчки «<a class=»brand» href=»#»>Имя сайта</a>» вставим «<?php get_search_form(); ?>» (без кавычек). После чего добавим пару строк в файл style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.navbar .searchform { margin: 0; padding-top: 4px; } .navbar .screen-reader-text { display:none; } .navbar input { margin:0!important; } |
Данным кодом мы отключим надпись «найти», и выровняем input в одну линию.
На данном этапе нам нужно отключит отображение поиска для больших экранов, для этого в файле media.css вставляем:
|
1 2 3 4 5 |
@media (min-width: 767px) { .navbar .searchform { display:none!important; } } |
Сейчас на больших размерах экрана поиск не буде отображаться, но вот проблема, если сильно уменьшить экран то поиск соскакивает. Данную проблему решают несколькими методами: изменением ширины текстового поля и кнопки, сдвиганием поиска под логотип, позиционированием поиска в свернутую навигацию, либо вовсе вывести его в другом месте например, между навигацией и контентом. Вот пример уменьшения размера текстового поля:
|
1 2 3 4 5 |
@media (max-width: 500px) { .navbar .searchform #s { width: 120px; } } |
Не буду доводить его до идеала я дал вам наводку, попробуйте доделать его самими.
Ну и вы наверное заметили, большой отступ контента от навигации, чтобы исправить это в первый медиа запрос вставляем код:
|
1 2 3 |
header { padding-bottom:20px!important; } |
Используя данные примеры, вы можете адаптировать сайт как вам угодно, например изменить размеры шрифтов, картинок и т.д.
Ну вот и все, наш курс уроков по верстке шаблона для WordPress закончен.
Без комментариев.