Как адаптировать шаблон WordPress с 3 колонкамиОпубликовано: 01.09.2018  Здравствуйте, уважаемые друзья. Сегодня я покажу, как адаптировать шаблон WordPress с 3-мя колонками. Такую статью и видеоурок попросил меня опубликовать один из моих зрителей канала на YouTube. Как адаптировать шаблон с двумя колонками, я рассказывал и показывал в статье «Адаптивный дизайн сайта – как адаптировать шаблон WordPress» . Так, что если вы её читали, то многое вам будет уже понятно. Во многом процесс похож. Весь секрет в правильном подборе стилей css. Найти сегодня тему (шаблон), который не адаптирован (не поддерживает адаптацию под мобильные устройства), крайне, трудно. Так как все новые шаблоны поддерживают адаптацию. Shortcodes Ultimate сделать колонки сайт wordpress просто ! Но, я все, же нашёл одну тему, которая в идеале, по структуре, похожа на образец, который меня попросили использовать в качестве примера. Вот пример сайта, на который я ориентировался при подборе подходящего шаблона для демонстрации. 
Сайт для примера
А вот шаблон, который я нашёл. Дизайн отличается, но общая структура у них одинакова – 3 колонки. И именно два сайтбара, с одной стороны. 
Шаблон, который будем адаптировать
Анализ шаблона перед началом работ.Залог успешной адаптации шаблона заключается в грамотном применении медиазапросов и стилей css. Прежде чем приступить к адаптации вы должны провести анализ шаблона. Проверить наличие метатега viewport, определить основные блоки шаблона, какие они имеют классы и идентификаторы, какие размеры, отступы заданы для них, какие стили обтекания или позиционирования применены. Все это нужно будет для успешной адаптации шаблона. Проведя анализ и поняв, как устроен шаблон, его в дальнейшем легче адаптировать. Здесь важна каждая мелочь. Итак, первым делом, открываете сайт в браузере и исследуете исходный код шаблона на наличие метатега «viewport». Для адаптивных шаблонов он нужен в обязательном порядке. Для открытия исходного кода нажимаете комбинацию клавиш CTRL+U, а чтобы найти нужный фрагмент в коде используйте комбинацию CTRL+F и введите поисковый запрос «viewport». 
Поиск метатега viewport
Так как шаблон неадаптивный, то и метатега в нём нет. Следующим шагом нужно выяснить, какие основные блоки имеет шаблон, и проанализировать стили, присвоенные этим блокам. Лучше взять тетрадь, нарисовать схему шаблона и подписывая блоки выписать стили оформления. А поможет в этом панель разработчика в браузере. Для её вызова нажмите клавишу F12. Смотрим на структуру шаблона, в моём случае после тега body идёт блок ДИВ с идентификатором «page». Именно в этом блоке собраны все остальные блоки шаблона. И ширина его 1020 пикселей. 
Блок div page
Следующий важный блок – это шапка (header), но в моём шаблоне этот блок не имеет фиксированной ширины и, значит, будет подстраиваться под размеры блока «page». Впрочем, меню тоже. Идём далее и видим блок с контентом ДИВ и идентификатором id=»content», этот блок имеет ширину 540 пикселей. 
Блок div content
Общий блок для двух сайтбаров имеет идентификатор id=»sidebar» и ширине его 360 пикселей. 
Блок div sidebar
А в этом общем блоке, расположены левый и правый сайтбары меньшего размера. Левый с идентификатором id=»l_sidebar» и шириной 170 пикселей и правый id=»r_sidebar» 140 пикселей. 
Блок div l_sidebar
Надеюсь, вы обратили внимание, что размеры блоков меньше, чем могли бы поместиться в общем блоке «page». Это потому что для каждого блока есть внутренние и внешние отступы и их тоже нужно учитывать. Так как если на компьютерной версии всё смотрится гармонично, то в мобильной версии такие отступы неприемлемы. И в медиазапросах это нужно учитывать. Далее, идёт блок подвала (footer), который не имеет фиксированной ширины и будет подстраиваться под размеры родительского контейнера. В этом примере это «page». Процесс адаптации шаблона.Вот так сейчас выглядит шаблона на мобильных устройствах. То есть до адаптации. 
Неадаптированный шаблон
Сервис Page Speed Insights тоже ругается по этому поводу. 
Отсутствие адаптивности
Итак, приступаем. Первым делом добавим метатег «viewport». Открываем административную панель WordPress – «Внешний вид» — «Редактор» — «Заголовок (header.php)». В этом файле, обычно, прописывают подключение метатегов, стилей, библиотек и скриптов. Хотя, скрипты лучше перенести в подвал. В общем, в этом файле, между тегами <head>…</head>вставляем вот этот код: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Вставка метатега viewport
Сохраняем страницу и идём дальше. Теперь открываем файл «Таблица стилей (style.css)». Здесь прописаны основные стили. Мы не будем создавать отдельный файл под мобильные стили, а пропишем их в конце этого файла. Примечание: Только будьте внимательны, мобильные стили должны быть в самом конце. Если в будущем вы захотите добавить стиль оформления, то делайте это выше этих стилей. Для написания медиазапросов и стилей под них нужно определить «Точки излома» — порог, при котором дизайн должен меняться. Определение точек проходит при помощи панели разработчика в браузере. Для своего шаблона я определил три точки, когда дизайн начинает ломаться. Первая точка – 992 пикселя по ширине. 
Первая точка излома
Вторая точка – 760 пикселей по ширине. 
Вторая точка излома
И третья точка – 600 пикселей по ширине. 
Третья точка излома
Под эти точки я и буду создавать медиазапросы. Открываю таблиц стилей и в конце добавляю медиазапрос и вот эти стили: /* Адаптивный дизайн ------------------------------------- */ @media screen and (max-width: 992px) { img {max-width: 100%; height: auto;} body { background: #FFF; } body.custom-background { background-color: #FFF !important; } #page { width: 100%; border: 0; } #menu-header { margin: 0; } .narrowcolumn {width: 56%; float: left; padding: 0 0 20px 10px;} #sidebar {width: 35%; padding: 10px 10px 10px 0; } #l_sidebar { float: none; display:block; padding: 5px; margin: 5px; width: 95%; } #r_sidebar { float: none; display:block; padding: 5px; margin: 5px; width: 95%; } }
Медиазапрос для первой точки
Описать всё довольно сложно, поэтому я подробно всё покажу и расскажу в видеоуроке. Но идея такова. Когда ширина экрана становится меньше 992 пикселя, начинают работать стили из медиазапроса. То есть фиксированная ширина в пикселях пересчитывается в проценты для основных блоков по формуле: Блок с контентом (540рх) / На блок страницы (1020рх) * 100%Затем работая с панелью разработчика, выясняются стили, отвечающие за отступы и обтекание. За счёт уменьшения отступов, ширина самого блока может быть увеличена в процентах. За счёт стилей «float» – определяется, с какой стороны блоки обтекают друг друга. В общем, на первой точке я сделал так, чтобы два сайтбара преобразовались в один и гармонично адаптировались с блоком контента. 
Вид на первой точке
Следующая точка 760 пикселей. При такой ширине экрана, сайтбар и контент в одном ряду не помещаются, и поэтому я смещаю сайтбар вниз под блок с контентом, и ширину увеличиваю до 95%. Для этого я использую вот этот медиазапрос и стили: @media screen and (max-width: 760px) { .narrowcolumn { float: left; display:block; padding: 5px; margin: 5px; width: 95%; background: #fff; clear:right; } #sidebar { float: none; display:block; padding: 5px; margin: 5px; width: 95%; background: #fff; } }
Вид во второй точке
И в последней точке, 600 пикселей, поиск по сайту переношу над заголовком. В принципе этого можно было не делать, но я решил, что так будет лучше. Для этого использовал вот этот медиазапрос: @media screen and (max-width: 600px) { .header-search { float:none; display:block; } }
Вид в третьей точке
На этом адаптация шаблона почти закончена. Я не коснулся только меню. Так что сейчас можно проверить шаблон в сервисе Page Speed Insights и посмотрим, как изменилась ситуация с удобствами для пользователей мобильных устройств. 
Без адаптации меню
Как видите, почти идеально. Так как меню я не трогал, то результат 99 из 100. Адаптация меню была уже рассмотрена в статьях и видеоуроках ранее. Я сейчас быстренько сделаю адаптивное меню, и результат будет доведён до идеала. Как и хотели 100 из 100. 
Полностью адаптивный шаблон
Вот и всё, шаблон адаптирован. В качестве наглядного примера, предлагаю посмотреть видеоурок, где я показываю весь процесс в деталях. У меня на этом сегодня всё. Друзья, желаю вам успехов! До встречи в новых статьях и видеоуроках. С уважением, Максим Зайцев.
|
|
Добро пожаловать ,
Гость
!
Войти