Получайте секретные материалы проекта на свой E-Mail:

Как сделать адаптивную верстку на WordPress? Часть 1

Добрый день. Скорее всего Вы уже не один раз слышали о том, что поисковик Google стал обращать внимание на то, как сайт смотрится на мобильных устройствах. И если дизайн не адаптирован, то такой сайт ранжируется хуже. А это не есть хорошо. Поэтому, сегодня я хочу рассказать Вам о том, что такое адаптивная верстка и как её реализовать на WordPress сайте. Как сделать адаптивную верстку на WordPress? Часть 1

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

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

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

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

Помимо плагинов и сервисов, ещё имеется следующие виды создания мобильной версии:

  • Отдельный сайт/версия
  • Технология RESS
  • Адаптивная верстка

Разбирать каждый способ мы не будем, т.к. в этом нет никакой необходимости. Лично для себя я выбрал 4 способ, то есть адаптивную верстку, поэтому именно о ней и пойдет речь в данной статье. Сразу хочется предупредить что для адаптации сайта Вам понадобятся хотя бы минимальные знания html, css и веб-дизайна.

Хотя, в любом случае Вы можете обратиться за помощью к специалистам, в том числе ко мне.

Адаптивная верстка своими руками

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

В чем же вся прелесть адаптивного дизайна?

  1. Нет необходимости создавать новый/отдельный дизайн.
  2. Нет необходимости создавать отдельный сайт.
  3. Относительно простое внедрение.
  4. Google любит адаптивные сайты 🙂

Для адаптации мы будем использовать спецификацию для CSS3 под названием Media queries. С помощью этого правила мы сможем создавать различные варианты отображения одного элемента сайта под разные разрешения или устройства. Это очень удобно!

Но перед тем, как мы пойдем «ковыряться» в стилях, необходимо зайти в файл header.php и в тег <head> вписать следующий важный мета-тег, позволяющий устройству подстроить ширину сайта под размеры экрана:

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

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

Так вот, в первую очередь нам нужно сделать анализ шаблона и собрать некоторые данные, а именно определить идентификатор нужного блока и его первоначальную ширину. Для этого я рекомендую использовать функцию «Просмотр кода элемента» в Chrome или «Панель разработчика» в FireFox — очень удобно. Я буду использовать первый вариант и возьму тестовый шаблон, который ещё не адаптирован и буду показывать всё на нем.

Контейнер с размером 960px

Как мы видим из изображения выше, в моем случае контейнер так и называется «#container» и имеет ширину 960px.

Но что нам это дает? А все очень просто. Ширина нашего главного контейнера, это и есть первая точка, в которой нам необходимо прописать медиа-запрос. А для этого нужно зайти в файл со стилями, обычно это Style.css и в самом конце прописать следующий кусочек кода:

@media screen and (max-width:960px) {
содержание запроса
}

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

После этого нам нужно вписать новые показатели блоков, чтобы они подстраивались под разрешения шириной менее 960px. Все очень просто! Для начала вместо текста «содержание запроса» впишите следующее:

img {max-width: 100%; height: auto;} /*адаптация изображений*/
#container {width: 100%; height: auto;} /*адаптация контейнера*/

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

Так вот, сохраняем файл Style.css, обновляем сайт и видим следующее:

Адаптивный дизайн

То есть, как мы видим из скриншота выше, сайт автоматически сжался до нужной ширины экрана, в моем случае 662px. Здорово, не так ли? А если ничего не произошло, то рекомендую прописать правило !important для ширины контейнера, то есть получится:

#container {width: 100%!important; height: auto;} /*адаптация контейнера*/

Для проверки адаптация я использую функцию той же панелью «Просмотр кода элемента».

Мобильная адаптация в Google Chrome

Так же, после адаптация контейнера Ваш сайт может начать отображаться неправильно. Может съехать шапка, сайдбар, подвал и т.д. — это нормально! Потому что необходимо проводить данную операцию практически со всеми элементами сайта.

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

Но об этом мы будем говорить с Вами в следующих статьях из цикла «Адаптивная верстка сайта на WordPress». А сейчас в файле со стилями у Вас должно получится:

@media screen and (max-width:960px) {
img {max-width: 100%; height: auto;} /*адаптация изображений*/
#container {width: 100%; height: auto;} /*адаптация контейнера*/
}

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

Поэтому, знакомство с теоретической частью и начальной адаптацией сайта мы закончили. А об остальном мы будем говорить в следующих статьях. Чтобы не пропустить их, настоятельно рекомендую подписаться на обновления сайта по этой ссылке.

Всем большое спасибо что дочитали статью до конца.

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

Желаю удачи и до встречи в следующей статье.

С уважением, Константин Белан

Белан Константин Сергеевич

С уважением, Константин Белан.

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17
Добавить пост в избранныеПерейти к списку →
Сделайте мне приятно - нажмите на любую из кнопок:
Подпишитесь на рассылку блога и получайте новые статьи на свою почту
Количество комментариев к данной статье: 11
  1. Ответить

    Хочу полноценный пост про адаптивную верстку!!!=)

    • Не всё сразу 🙂

      Но я все же постараюсь уложиться в 3 частях, поэтому до конца месяца ты узнаешь о адаптивной верстке всё, что необходимо знать! 🙂

      • Ответить

        Добрый день. Ты обращал внимание, как изменилась посещаемость сайта, после адаптации для мобильных приложений?

        • Добрый день. Адаптировал проект под мобильные устройства совсем недавно, поэтому пока рано говорить об изменении посещаемости.

        • Ответить

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

          У меня на Search Console показывает, что сайт НЕ адаптирован, а на //www.google.com/webmasters/tools/mobile-friendly/ показывает, что адаптирован.

      • Ответить

        Когда же будет продолжение??? У меня до сих пор нет мобильной версии, плагины работать отказываются((

  2. Ответить

    Здравствуй, извини конечно, пишешь по адаптивную верстку, а у самого этот сайт не адаптирован полностью. Какие-то элементы вылазиют за экран, появляется прокрутка. Надо посмотреть что советует адаптировать Google и исправить.

  3. Костя, мне нравится, что при верстке остался все тот же шаблон, который на веб-версии)

    Твою статью бы чуть раньше) Но я установил другой, уже адаптированный шаблон!)

  4. Ответить

    Был бы не против статейки про оформление твиттера)

  5. Ответить

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

  6. Ответить

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