Категории: Wordpress - как сделатьУроки программирования

Делаем свой шаблон на ВордПрессе адаптивным (респонсив)

Еще несколько лет назад сайты посещались лишь через настольный компьютер или ноутбук с большим экраном. Поэтому, все сайты должны были быть разработаны только для больших размеров экрана. Но эта ситуация с каждым днем резко меняется. Теперь клиенты и посетители вашего сайта имеют устройства различных размеров – мобильный телефон, планшет или ноутбук. И все это нужно учесть при разработке своего сайта. А с другой стороны, разработка разных версий сайта для всех этих различных размеров устройств – это практически невыполнимая задача.

Как же решить эту проблему, если у вас стандартная тема WordPress, а бюджет не позволяет создавать различные версии сайта? Ответом на эту задачу может стать переформатирование своей стандартной темы в адаптивную (респонсив) – когда она должна быть в состоянии реагировать на различные размеры девайсов автоматически и динамически под них подстраиваться. Реализовать это можно с помощью сочетания гибких макетов и с помощью CSS медиазапросов.

Давайте же это сделаем!

Медиа-запросы CSS

CSS медиазапросы – это очень полезный инструментарий для изменения свойств вашего веб-сайта на основе свойств устройства, с которого его посещают.

1-й метод.

Одна из самых простых форм медиа-запроса – подготовить отдельно различные CSS-стили, например, для экрана монитора и для портативных устройств. Создаете свои стили для нужных устройств в отдельных файлах css и при подключении стилей в разделе <head> в теге <link> дополнительно указываете для них тип медиа. Например,

<!-- подключение стилей для экрана монитора -->
<link href="dlya-monitor.css" type="text/css" media="screen" rel="stylesheet"/>
<!-- подключение стилей для портативных устройств -->
<link href="dlya-portativ.css" type="text/css" media="handheld" rel="stylesheet"/>

Медиа-запросы позволяют даже добавить условное моделирование на основе других параметров устройства, таких как ширина девайса (max-device-width).

Например,

<link href="dlya-mobil.css" type="text/css" media="screen and (max-device-width: 320px)" rel="stylesheet"/>

Теперь, когда пользователи зайдут на ваш сайт с устройств, ширина которых не больше 320px (например, с iPhone 5), браузер устройства загрузит и отобразит стили именно с файла dlya-mobil.css.

2-й метод.

Вы можете пойти и по второму пути: загружать один общий файл стилей-CSS, но включить в него медиа-запросы для переопределения отображения на различных устройствах. Тут приходится выбирать: либо загружать один большой файл (что повлияет на скорость обработки устройством), либо загружать несколько файлов стилей (что повлияет на количество запросов к серверу). Любой из этих способов имеет право на жизнь, и вы должны исходить из своих условий и потребностей.

Ниже приведены несколько примеров-шаблонов медиа-запросов для стандартных размеров экрана:

/* Общие стили здесь */
/* Стили для мобильных в вертикальной ориентации (Potrait) */@media only screen
and (max-width: 320px) {
/* Здесь ваши стили для этого устройства */}
 
/* Стили для мобильных в горизонтальной ориентации (landscape) */@media only screen
and (min-width: 321px)
and (max-width: 480px) {
/* Здесь ваши стили для этого устройства */}
 
/* Планшеты */@media only screen
and (min-width: 768px)
and (max-width: 1024px) {
/* Здесь ваши стили для этого устройства */}
 
/* Настольные компьютеры и ноутбуки */@media only screen
and (min-width: 1224px) {
/* Здесь ваши стили для этого устройства */}
 
/* Для устройств с очень большим экраном */@media only screen
and (min-width: 1824px) {
/* Здесь ваши стили для этого устройства */}

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

P.S. Приведенный выше перечень не является исчерпывающим и постоянно обновляется при появлении на рынке новых устройств.

Метатег

Некоторые из мобильных браузеров, например как Safari на iPhone имеют гораздо большую ширину отображения за фактическую ширину окна просмотра устройства. Это делается для нормального отображения сайтов, которые были разработаны для настольных компьютеров также и на айфонах. Так как мы собираемся изменить стили и позаботиться о дисплеях разных размеров, мы должны сообщить браузеру, чтобы он сохранял размер экрана таким же, как и фактическая ширина устройства.

Это можно сделать с помощью следующего мета-тега:

<meta name="viewport" content="width=device-width" />

Добавить этот тег нужно в файл header.php ВордПресс-шаблона.

В современном мире очень важно знать возможные устройства, которые могут быть использованы для доступа к сайту. Ведь это не только дополнительный трафик на сайт, но и удобство для посетителей. Рекомендую в первую очередь позаботиться о тех девайсах, которые наиболее популярны у посетителей вашего сайта. Сделать это можно, например, с помощью аналитики посещений в Google Analytics. Если она у вас подключена, заходите в раздел Аудитория – Технологии – Браузер и ОС, а затем выбираете вкладку Разрешение экрана. Вы сразу увидите, с каким разрешением экранов к вам приходят посетители.

Также очень важно представлять себе, как выглядит ваш сайт на разных устройствах. Чтобы протестировать отображение шаблона WordPress на различных девайсах, вы можете воспользоваться инструментами разработчика в браузере. Например, в браузере Google Chrome инструмент вызывается клавишей F12. Затем активируете «просмотрщик» нажав в появившемся меню инструмента на иконке устройств, либо нажав сочетание клавиш Ctrl+Shift+M.

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