Адаптивный шаблон для WordPress

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

адаптивный шаблон для WordPress

Вот и мне пришлось отвлечься на блог от первостепенных задач. Причиной тому Гугл. “Порадовал” на днях меня предупреждением:

To: Веб-мастеру сайта https://seomodern.biz/

Мы проверили 56 стр. Вашего сайта и обнаружили, что 100% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих 56 стр. у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.

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

Адаптивный шаблон для WordPress – средство от понижения позиций сайта в поисковой выдаче.

После этого сообщения я сразу же обратился к тому же Гуглу с запросом “адаптивный шаблон для wordpress”. И мне, надеюсь, сразу повезло. Почему “надеюсь”? Потому что придется еще много чего доводить, но, на первый взгляд, основная часть вкраплений кода сохранилась, а сам шаблон мне понравился с первого взгляда – сочетание минимализма с черным и зеленым цветом 🙂 – такие цвета в шаблоне предустановлены по умолчанию. Цветовую гамму можно подобрать по своему вкусу и сделать другие необходимые настройки в панели управления шаблоном.

Шаблон называется Endolf и имеет русскую локализацию. Пригодится тем, кто ищет бесплатные русские шаблоны для WordPress, адаптируемые под любые типы устройств. Но будьте готовы к тому, что в бесплатных шаблонах могут присутствовать зашифрованные ссылки на другие сайты, что отрицательно скажется на увеличение посещаемости вашего интернет-ресурса и росте его пузомерок – тИЦ и PR (PR уже давно не обновлялся). Поэтому, если у вас нет опыта в обнаружении и удалении скрытых ссылок и сторонних скриптов на сайте, то скачивайте бесплатные шаблоны только с официального репозитория Вордпресс или, по-возможности, покупайте шаблоны у официальных представителей и разработчиков или закажите шаблон у специалистов. Простые шаблоны с необходимым функционалом обойдутся недорого – порядка $5.

Для самостоятельного поиска и удаления скрытых ссылок в шаблонах для WordPress можно воспользоваться плагином ТАС – ru.wordpress.org/plugins/tac. Для поиска и устранения вирусов и других вредоносных скриптов – бесплатным сканером Ai-Bolit – revisium.com/ai – или бесплатным сервисом онлайн-проверки сайтов и файлов на вирусы Virustotal.

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

Как проверить, является ли шаблон для сайта адаптивным?

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

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

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

В браузере Google Chrome так же можно проверить, как будет выглядеть ваш сайт с адаптивным дизайном на конкретной модели мобильного устройства. Нажимаем на кнопку “Настройка и управление Google Chrome” в правом верхнем углу браузера, в меню “Дополнительные инструменты” выбираем “Инструменты разработчика” или нажимаем комбинацию клавиш Ctrl+Shift+I. В открывшемся окне в левом верхнем углу выбираем нужную модель мобильного устройства.

проверка шаблона на адаптивность

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

Наряду с чисткой и реструктуризацией блога придется поменять головные картинки к статьям, чтоб они соответствовали дизайну шаблона и задать миниатюры к каждой статье, чего я раньше не делал. Еще бы и авторское видео к каждой статье добавить… Работы – не початый край 🙂

Почему необходимо в срочном порядке сменить шаблон своего сайта на адаптивный и как проверить, является ли он адаптивным в глазах поисковой системы Google, можно прочесть в статье “Как избежать понижения позиций сайта в SERP Google?

С уважением, Сергей Грицюк, автор блога seomodern.biz

Оставьте комментарий

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

восемь − 4 =