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


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

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

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

To: Веб-мастеру сайта http://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


 
1 Star2 Stars3 Stars4 Stars5 Stars (17 votes, average: 5,00 out of 5)
Загрузка...

48 Комментариев

  1. Ух ты, как интересно, а я много не знала, особенно про адаптацию под мобильные устройства! Сейчас проверила свой блог, вроде у меня все адаптировано, при увеличении не появляется прокрутка

  2. А я даже не знаю, адаптивный у меня или резиновый шаблон. В принципе какая разница, если всем нравиться и удобно. Походу у меня УДОБНЫЙ дизайн.

    1. У Вас на сайте уголок «Это интересно» нужно сделать адаптивным, а так же формы комментирования от ВК и ФБ — это то что сразу заметно.

  3. Привет Сергей! Решил обрадовать тебя Наградой Любимому Блогу — подробную информацию найдешь в публикции под именем. Надеюсь, ты не постесняешься принять эстафетную палочку?

  4. Тебе еще нехватает классного ТОПа комментаторов — тебе на WP проще реализовать это. Посмотри ссылку под именем — три минуты работы — прикольнее смотреться будет.

    1. Прям заставил переделать ТОП комментаторов 🙂 Пришлось применять. 🙂 Но так как сделал Аристахов, для меня не совсем удобно оказалось, так как список комментаторов выводился под Боковой панелью, а у меня она заканчивается Статистикой. Я добавил код вывода комментаторов не в sidebar.php, а в нужное место в Виджетах.

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

      Спасибо, Юра!

      1. О, уже совсем другой вид, Сергей!

        По поводу того, чтобы выводить в виджетах — это правильно ты сделал, если что — я также бы делал (у меня на джумле это модули — и если что, то работаю с ними, а не добавляю код в сам шаблон).

        Нужно бы себе такую красоту этого блока сделать — но как вспомню, как настраивается Jcomments — желание испаряется приморачиваться 🙂

        1. Если не хочется терять посетителей, то приведите контент в соответствие — скриншот под именем. Почему там нет информативности? Там где можно кнопки сложить ряд — почему их не сложить.

          Работать еще и работать — удобство для пользователей будет, если указанные места заполните информативностью.

          1. Согласен. Спасибо за подсказку, я посмотрю что можно сделать. Хотя я в этом не ас. Указанные места, это в основном отображение виджетов. Но все равно, спасибо Юрий.

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

              Там фишка такая - что по центру нужно просто «Читать далее» перенести за 250 (или 500 - нужно посмотреть сколько влезет) знаков - тогда по центру в статьях будет информативность.

              По поводу виджетов - это вы говорите о тех блоках с баннерами? Так там идеальный вариант было бы сделать просто в виде html кода (посмотрите в гугле как сделать табы (например _http://shpargalkablog.ru/2012/03/css-tabs.html - самое интересное, что даже Java не используется, а значит будет корректно работать на любом устройстве и браузере).

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

              Аналогично с правой стороны.

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

              img style="border-radius: 50%; float: left;" src="http://0.gravatar.com/avatar/6820e5d4756d975a036be64ba04f1e27?s=200" alt="Андрей" width="200"

              — где собственно сейчас я впихнул ваш граватар, а 200 это размер граватара как в ссылке, так и в изображении.

              Фигурные скобки с тега картинки убрал, а то WP обрезал...

              Этого на первое время хватит — если реализуете по этой инструкции — зовите, посмотрим, может что-то еще доделаем... Есть вопросы — пишите, не стесняйтесь.

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

  5. Вот, теперь стало у тебя ещё круче Сергей! Отзывчивый дизайн — это тема! Но, масштаб и изменение размера окна для проверки — это совсем разные понятия, так как при верстке задаются разными медиа запросами... Хотя, не столь это важно — главное, что ты все же решился на изменение темы, за что тебе большой респект! Я уверен, что общаться на твоем блоге станет куда проще и приятнее твоим посетителям (да и мне этот дизайн больше нравится, чем предыдущий)!

    Галки подписаться на комментарии не вижу 🙁

    1. Спасибо, Юра! Мне дизайн тоже не особо нравился, но лучше до этого момента я не находил. Последний дизайн внешне меня полностью устраивает. Относительно функционала — нужно поковырять еще, но на первый взгляд вроде все очень даже неплохо.

      Место для галочки появилось, но пока текста не видно, чтоб понять, для чего галочку ставить. Получается, не все плагины корректно работают с этим шаблоном.

  6. Ух ты, как интересно, а я много не знала, особенно про адаптацию под мобильные устройства! Сейчас проверила свой блог, вроде у меня все адаптировано, при увеличении не появляется прокрутка)

    Спасибо за статью, Сергей!

    Удачи Вам в работе над новым шаблоном!

      1. Но это тоже очередная ступень вверх! Значит так было нужно.

        Это как в квартире, иногда нужно переставить мебель и немного потрудиться, выбросить старые ненужные вещи и становится уютнее и светлее в доме!

          1. Пусть Вам «ремонт», перестановка и выброс хлама принесет хорошее настроение, удачу, уют и много новых посетителей на блог!

        1. Проблема в том, что толковых учебников по решению этих проблем самостоятельно — пока нет, а те что есть просто не успевают выпускаться с скоростью добавления новых фишек.

      2. Сергей, так все что делается — делается к лучшему — я например уже смогу твой блог с планшета читать и даже с телефона комментировать.

    1. Не все, Татьяна. Смотрите скриншот под именем — у вас картинки не адаптивны (нужно дописать в стилях для рисунков img{max-width:100%;height:auto;}).

        1. Это с книги Итана Маркотта. Я ищу способ как бы просто сделать адаптивным видео с ютуба вставленное на сайт — пока без результатно.

            1. Да, она самая! Принцип книги научить верстать адаптивную верстку, рассчитывать пропорции и так далее — это будет актуально всегда. А вот если за эти два года появились какие-то новые фишки, то при необходимости можно взять их со справочников 🙂

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

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