Адаптирование шаблона для WordPress, используя Bootstrap. Часть 7
Опубликовано: 01.09.2018
Ну вот и пришел завершающий урок по созданию шаблона для 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 закончен. Все ваши вопросы задавайте в комментариях, с радостью отвечу.
[sociallocker id=”2329″]
Похожие записи
Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?
Свяжитесь со мной