Как адаптировать шаблоны для WordPress

Как адаптировать шаблоны для WordPress

От автора: приветствую вас, друзья. Из этой статьи вы узнаете, как адаптировать шаблоны для WordPress и почему сегодня очень желательно делать адаптированный шаблон WordPress.

Для начала, пожалуй, стоит остановиться на самом понятии адаптивный сайт, адаптивный шаблон и выяснить, почему сегодня важно делать адаптивные шаблоны. Здесь на самом деле все крайне просто. Мы живем в такое время, когда настольная стационарная аппаратура уверенным и стремительным шагом переходит в планшеты и смартфоны. Время, когда даже ноутбуки смещаются на второй план… А значит, растет спрос на сайты под планшетные и мобильные устройства.

Представьте, что произойдет, если ваш сайт не адаптирован для мобильных устройств и его смотрит посетитель с планшета или, даже, с мобильного телефона. Для пользователя будет крайне неудобно просматривать ваш сайт. Не буду приводить никакую дополнительную статистику (хотя такая статистика есть) отказов просмотра сайтов, которые не адаптивны, с мобильных устройств. Вместо статистики буду основываться на собственном опыте и выскажу свое мнение, как обычный рядовой пользователь. Итак, в последнее время я все чаще стал замечать за собой, что открывая тот или иной сайт в своем смартфоне, я практически всегда закрываю его, если сайт не адаптивный.

Могу ошибаться, но, как мне кажется, большинство (или по крайней мере большая часть) пользователей могут поступать аналогично. А ведь это все аудитория (или потенциальная аудитория) сайта. И эта ситуация с каждым годом будет усугубляться, поскольку количество различных мобильных гаджетов растет с каждым уже даже не годом или месяцем, а с каждым днем.

Думаю, вопрос адаптивной верстки для WordPress — вопрос вполне очевидный. При этом не только для веб-мастеров, но и для владельцев сайтов. Уже часто одним из требований при заказе темы WordPress можно услышать пожелание иметь адаптивную тему WordPress. Если речь идет о премиум шаблоне, то здесь точно без вариантов. Современная премиум тема WordPress фактически априори должна быть адаптирована для просмотра с различных типов устройств.

Как же адаптировать шаблоны для WordPress? Все очень просто — нам нужны медиа-запросы. Медиа-запросы — это основной механизм и способ сделать адаптивную верстку. Принцип их работы достаточно прост: тот или иной медиа-запрос сработает ровно для той ширины (или, точнее, диапазона ширины) экрана, для которой он написан. Ну а внутри медизапроса мы пишем необходимые нам стилевые правила, которые будут оформлять тот или иной элемент сайта для соответствующей ширины.

Простейший пример. У нас есть двухколоночный сайт, который на мобильных устройствах должен превращаться в одноколоночный. Решить задачу крайне просто. Для получения двух колонок для десктопных устройств мы, как обычно, используем свойство float, задавая обтекание колонок. Ну а на нужной нам ширине окна браузера мы просто сбросим float, используя значение none. Примерно так:

@media only screen and (max-width : 767px) {
	.sidebar{
		float: none;
	}
}

Как видим, мы просто поместили обычное стилевое правило внутрь конструкции медиа-запроса. Теперь это правило сработает только для ширины окна браузера меньше 768 пикселей.

Как вы понимаете, все медиа-запросы и правила для них помещаются в файл стилей темы или в отдельный файл стилей, который необходимо подключить к шаблону WordPress. Да, и самое главное. Чтобы медиа-запросы работали и шаблон получился адаптивным, нужно не забыть поместить в шапку сайта (как правило, это шаблон header.php темы) следующую строку кода:

<meta name="viewport" content="width=device-width, initial-scale=1">

Вот, собственно, и все в общих чертах. Есть, конечно, много разных нюансов, которые сложно осветить в рамках небольшой статьи, но здесь я могу предложить вам познакомиться с нашим курсом, в котором на примере уже существующей темы WordPress показано, как адаптировать шаблон WordPress.

На этом у меня все. Удачи!

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree