От автора: приветствую вас, друзья. Из этой статьи вы узнаете, как адаптировать шаблоны для WordPress и почему сегодня очень желательно делать адаптированный шаблон WordPress.
Для начала, пожалуй, стоит остановиться на самом понятии адаптивный сайт, адаптивный шаблон и выяснить, почему сегодня важно делать адаптивные шаблоны. Здесь на самом деле все крайне просто. Мы живем в такое время, когда настольная стационарная аппаратура уверенным и стремительным шагом переходит в планшеты и смартфоны. Время, когда даже ноутбуки смещаются на второй план… А значит, растет спрос на сайты под планшетные и мобильные устройства.
Представьте, что произойдет, если ваш сайт не адаптирован для мобильных устройств и его смотрит посетитель с планшета или, даже, с мобильного телефона. Для пользователя будет крайне неудобно просматривать ваш сайт. Не буду приводить никакую дополнительную статистику (хотя такая статистика есть) отказов просмотра сайтов, которые не адаптивны, с мобильных устройств. Вместо статистики буду основываться на собственном опыте и выскажу свое мнение, как обычный рядовой пользователь. Итак, в последнее время я все чаще стал замечать за собой, что открывая тот или иной сайт в своем смартфоне, я практически всегда закрываю его, если сайт не адаптивный.
Могу ошибаться, но, как мне кажется, большинство (или по крайней мере большая часть) пользователей могут поступать аналогично. А ведь это все аудитория (или потенциальная аудитория) сайта. И эта ситуация с каждым годом будет усугубляться, поскольку количество различных мобильных гаджетов растет с каждым уже даже не годом или месяцем, а с каждым днем.
Думаю, вопрос адаптивной верстки для WordPress — вопрос вполне очевидный. При этом не только для веб-мастеров, но и для владельцев сайтов. Уже часто одним из требований при заказе темы WordPress можно услышать пожелание иметь адаптивную тему WordPress. Если речь идет о премиум шаблоне, то здесь точно без вариантов. Современная премиум тема WordPress фактически априори должна быть адаптирована для просмотра с различных типов устройств.
Как же адаптировать шаблоны для WordPress? Все очень просто — нам нужны медиа-запросы. Медиа-запросы — это основной механизм и способ сделать адаптивную верстку. Принцип их работы достаточно прост: тот или иной медиа-запрос сработает ровно для той ширины (или, точнее, диапазона ширины) экрана, для которой он написан. Ну а внутри медизапроса мы пишем необходимые нам стилевые правила, которые будут оформлять тот или иной элемент сайта для соответствующей ширины.
Простейший пример. У нас есть двухколоночный сайт, который на мобильных устройствах должен превращаться в одноколоночный. Решить задачу крайне просто. Для получения двух колонок для десктопных устройств мы, как обычно, используем свойство float, задавая обтекание колонок. Ну а на нужной нам ширине окна браузера мы просто сбросим float, используя значение none. Примерно так:
|
1 2 3 4 5 |
@media only screen and (max-width : 767px) { .sidebar{ float: none; } } |
Как видим, мы просто поместили обычное стилевое правило внутрь конструкции медиа-запроса. Теперь это правило сработает только для ширины окна браузера меньше 768 пикселей.
Как вы понимаете, все медиа-запросы и правила для них помещаются в файл стилей темы или в отдельный файл стилей, который необходимо подключить к шаблону WordPress. Да, и самое главное. Чтобы медиа-запросы работали и шаблон получился адаптивным, нужно не забыть поместить в шапку сайта (как правило, это шаблон header.php темы) следующую строку кода:
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
Вот, собственно, и все в общих чертах. Есть, конечно, много разных нюансов, которые сложно осветить в рамках небольшой статьи, но здесь я могу предложить вам познакомиться с нашим курсом, в котором на примере уже существующей темы WordPress показано, как адаптировать шаблон WordPress.
На этом у меня все. Удачи!
