Как сделать оптимизацию сайта под мобильные устройства в WordPress

Приветствую друзья, на днях я наконец сделал то, что ленился сделать последние 2 года — адаптировал этот сайт для мобильных устройств.Поисковики вот уже как пару лет активно намекают вебмастерам о необходимости перехода на адаптивную верстку. И это понятно — доля мобильного трафика с каждым годом растет как на дрожжах. Более того, теперь адаптивность сайта к мобильным разрешениям экрана и на ранжирование влияет — об этом официально заявили представители Гугла.

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

Как же быть тем, у кого старые сайты с фиксированной статичной версткой?

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

Но у такого решения есть несколько серьезных недостатков:

• Вы потеряете все изменения, которые вносили в старый шаблон — верстку и дизайн, счетчики и метрики, хуки и всевозможные правки в коде.  По сути после смены шаблона будет новый, совсем сырой сайт, со старым текстом и картинками.
• Есть риск потерять позиции в поисковых система. Неоднократно замечено, что у некоторых вебмастеров после смены шаблона серьезно и надолго проседал трафик.

Если это вас не напугало, то вперед) Однако, как по мне, после смены шаблона работы будет куда больше, чем если просто адаптировать старый шаблон под мобильные системы.

Кроме того, существуют спец. плагины, которые должны помочь вебмастеру оптимизировать сайт под мобильные устройства. Но на деле все обстоит не так красиво, как в теории.

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

Теперь же блог ruskweb.ru может похвастаться собственной адаптивной версткой, удобной для чтения с мобильников, без всяких плагинов и велосипедов на костылях. Понадобился всего лишь фреймворк Bootstrap 3.  А так же пару бессонных ночей, и конечно знание структуры wordpress и CSS.

Скачать Bootstrap 3 можно бесплатно по этому адресу http://getbootstrap.com/getting-started/#download

Проверить насколько удобен ваш сайт для мобильных экранов и планшетов вы можете на сервисе от гугла  https://www.google.ru/webmasters/tools/mobile-friendly/

У моего сайта теперь с адаптивностью порядок

Как происходит замена старой верстки сайта на адаптивную

Сразу хочу предупредить — если у вас нет хотя бы среднего уровня знаний CSS и вы плохо ориентируетесь во внутренностях Вордпресса, то  не советую лезть в такие дебри. Скорей всего вы только изуродуете верстку своего сайта.

Лучше потратить пару тысяч, заплатив фрилансеру, чем потерять кучу нервов и времени, а в результате положить  сайт.

Кстати можете обращаться ко мне — могу помочь сделать ваш сайт адаптивным за скромное вознаграждение =) Писать на почту mail@ruskweb.ru или через форму обратной связи в контактах.

Редактировать нужно не только шаблон главной, но и  шаблоны страниц записей single.php, страницы вида page.php, sidebar.php, страницы результатов поиска, страницы с архивами (рубрики, метки),  и прочую таксономию. В зависимости от вашей темы оформления вордпресса набор может меняться.  Однако во многих файлах блоки будут повторяться, поэтому достаточно просто скопировать их.

Как работать с Bootstrap

В первую очередь нужно понять логику верстки на Bootstrap. Разметка страницы идет по так называемой  сеточной модели — это 12 равных столбцов, на которые можно условно поделить рабочую область сайта.

Все содержимое сайта внутри body должно оборачиваться в специальный блок div с классом .container (либо .container-fluid для резиновой верстки). Далее внутри этого контейнера весь контент оборачивается в колонки div с классом .col- , размер которых варьируется для 4-х диапазонов разрешений устройств и обозначаются префиксами .col-lg-  .col-md-  .col-sm-  .col-xs-:

После префикса мы добавляем цифру от 1 до 12, в зависимости от того, сколько «колонок» должен занимать наш элемент по размерам. Меняя префиксы у класса col мы задаем размеры и позиционируем элемент для разных разрешений без какого-либо вмешательства в CSS.

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

Когда вы видите такой код, то класс col-md-4 расшифровывается следующим образом: блок для отображения на средних устройствах с разрешением экрана ≥992px занимающий 4/12 части  родительского элемента.

Для примера покажу на своем сайте. Редактирую страницу index.php для главной, добавляю блок <div class=»col-md-8 blog-main»>  сразу после обертки

Таким образом я выделяю под контент 8/12 части рабочей области сайта. Остальные же 4/12 приходятся на сайдбар

В результате я имею следующее — мой контент и сайдбар будут выстраиваться в 2 колонки на разрешениях для больших и средних устройств, а как только размер окна перейдет отметку в 768 пикселей, то сайдбар уплывет вниз под основной контент. Это делается для того, что бы на небольших экранах все смотрелось красиво и гармонично без горизонтальной прокрутки. Иначе бы блок сайдбара сжимался до малюсеньких размеров и стал неудобным для чтения.

При этом между колонками идет стандартный padding, так что блоки не «слипаются». И да, не забудем поставить закрывающие тэги для наших div’ов. Причем хочу сразу заметить, в некоторых шаблонах открытие дива и закрытие может находится в разных php файлах.

При желании можно скрыть ненужные блоки на выбранном вами разрешении, добавив класс .hidden-   с префиксом нужного вам разрешения, на котором нужно скрыть блок.

Там на самом деле хватает своих нюансов и моментов. Подробнее вы можете почитать о бутстрапе тут http://bootstrap-3.ru/css.php  или же найти в сети обучающие видео уроки и статьи, коих предостаточно. Для изучения, конечно, придется потратить время. И не забудьте предварительно сделать полный бэкап сайта, прежде чем перейти к практическим занятиям 🙂

Важно! Могут возникать конфликты старых CSS-стилей сайта и стилей bootstrap. Что бы исправить их возможны следующие действия:

1. Убирать фиксированные размеры (в основном width) у элементов сайта в таблицах стилей
2. Некоторые id и class’ы придется заменить бутстраповскими, или удалять мешающие стили вручную
3. Менять позиционирование или графические элементы на сайте, которые хорошо смотрелись на статичной верстке, но не подходят для адаптивной
4. Если на сайте есть большие таблицы, то придется повозиться с ними
5. Проверить каждую страницу сайта, обязательно изменяя размеры окна браузера, что бы найти косяки в верстке и исправить их

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

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