Адаптивный дизайн сайта – как адаптировать шаблон WordPress

Здравствуйте, уважаемые друзья. Вот уже через несколько дней Google вводит ещё один фактор ранжирования — мобильность (адаптивность) сайта. То есть те сайты, которые не адаптированы под мобильные устройства будут понижаться в поисковой выдаче мобильных запросов. Вот поэтому нужно торопиться и сделать свой сайт адаптивным.

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

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

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

Все ли шаблоны можно адаптировать

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

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

Но, вот если вы всё же хотите адаптировать свой действующий шаблон, то нужно внимательно оценить трудности, с которыми вы столкнётесь. Определить целесообразность.

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

В этом конкретном примере пришлось бы переделать всю шапку и создать новый фон для мобильных устройств. И я решил сменить шаблон. Хотя и новый шаблон я дорабатывал не меньше старого.

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

На чём основан адаптивный шаблон сайта

Создание адаптивного шаблона основано на пяти основных составляющих:

1. Резиновый (адаптируемый) макет (каркас) – если основной шаблон имеет фиксированные размеры шапки, сайтбара, блока под контент, футера, то его резиновая копия вычисляется на основе процентной доли от родительского контейнера.

Так, например, если родительский контейнер имеет размер 760рх, а в нём содержится блок контента — 495рх и сайтбар — 190рх. Определение процентной доли каждого из блоков будет вычисляться по формуле:

Блок контента: 495/760*100= 65.1315789%

Примечание: если бы в блоке с контентом был бы ещё один блок, то для него, родителем был бы блок контента.

1. Резиновые (адаптируемые) изображения – здесь принцип работы таков, что изображение подстраивается под размеры блока в котором расположено (родителя). Для создания таких резиновых изображений достаточно в стилях css, для мобильных устройств прописать вот такие стили:

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

1. Резиновые (адаптируемые) шрифты – как правило, шрифты в шаблонах указываются в пикселях (рх), а их нужно перевести в относительную величину высоты шрифта (em).

Перевод шрифта из pxв em осуществляется по формуле:

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

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

Как адаптировать шаблон WordPress

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

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

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

В качестве примера рассмотрим пример шаблона, который ещё не адаптирован. Определим блоки, их классы и идентификаторы и размеры.

Контейнер – оболочка, в котором содержатся все остальные блоки, имеет идентификатор (#page) и ширина контейнера 760рх.

Следующий блок – это блок шапки (заголовка), он имеет идентификатор (#header) и ширину 758рх.

Также в этом блоке вся красота создана при помощи фонового изображения. А по-хорошему сложной графики там нет, и лучше реализовать это при помощи css – стилей.

Идём дальше, следующий блок – блок с контентом. С этим блоком совсем всё плохо, так как стили заданы не рационально. Делая на совесть, такие косяки нужно переделывать. Но сейчас не об этом. Самое главное — это узнать идентификатор и ширину. Идентификатор этого блока имеет имя (#content) и в нём есть ещё и класс (.narrowcolumn). Ширина блока (#content) не задана, но на скриншоте можно видеть, что она составляет 495рх. А получается это за счёт заданной ширины для этого же блока с классом (.narrowcolumn) плюс внутренний отступ слева 45рх.

Всё это можно сделать гораздо проще, впоследствии при адаптации из-за такого рода мелочей возникают определённые трудности.

Следующий блок – это сайтбар. Имеет идентификатор (#sidebar) и ширина его составляет 190рх.

С этим блоком на первый взгляд всё нормально, но если посмотреть внимательно на скриншот, то возникает вопрос, а что за внешний отступ (margin-left: 545рх;)? А это так сделано выравнивание сайтбара по правому краю. Хотя это можно было сделать с помощью свойства float. Также фоновый цвет выполнен при помощи изображения, что можно легко заменить на цвет в css.

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

И завершающий блок в этом шаблоне – это подвал. Он имеет идентификатор (#footer) и ширину 760 рх.

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

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

И теперь можно переходить к созданию медиазапросов и стилей css для мобильных устройств.

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

Примечание: в этом примере, добавление мобильных стилей не так много. Поэтому эти стили вы добавляете в конце файла style.css. Если же у вас стилей будет много, то целесообразней создать отдельный файл и подключить его отдельно.

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

В моём примере, следующая переломная тачка это 480рх. При такой ширине сайтбар выглядит как-то узко и не доделано. Поэтому следующий медиазапрос будет на этой точке и выглядит он так:

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

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

А теперь давайте посмотрим, что Гугл говорит нам по поводу нашего шаблона. Проверим до и после наших работ.

Проверка адаптации шаблона в PageSpeed Insights

Итак, открываем сервис PageSpeed Insights, вводим url сайта и проверяем.

Шаблон до адаптации:

Результат налицо. Думаю, комментировать не стоит. Удобство пользователя 67 их 100.

Шаблон после адаптации:

Как видите, показатель удобства для пользователей поднялся с 67 до 94. А если ещё адаптировать меню, то этот показатель вырастет до 99-100.

Вот так вот друзья можно адаптировать шаблон WordPress. Разумеется, со своими шаблонами вам придётся потрудиться, но дело того стоит.

Также посмотрите видеоурок, в нём я кое, какие моменты разбираю более подробно.

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

Спасибо что обучили. ))

Всегда рад помочь

Неплохо описано. Как раз на неделе планировал переверстать свой сайт под Bootstrap.

А теперь вы знаете, как сделать адаптивный шаблон без сторонних сервисов и их внешних ссылок Желаю успешного внедрения!

Привет. Прям не статья, а целое руководство! Думал, что Google давно уже ввел данный фактор ранжирования, а оказалось, что они пока только эксперименты проводили! А мне еще нужно в своем подправить небольшие косяки… =)

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

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

Google как раз и светит: «Контент шире экрана + Ссылки слишком близко друг к другу». Вчера немного смотрел, а на Топ как-то внимание и не обратил — спасибо!

Пожалуйста, рад был помочь!

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

Вася, привет. Ты прав, — работа не простая, но делать её нужно. Ведь уже не только Гугл, но и Бинг выделяю сайты для мобильных устройств в результатах мобильных запросов. А следовательно и остальные поисковики сделаю тоже самое.

ДОброго времени суток! скажите пожалуйста. А сколько будет стоить адаптация моего сайта (на ВП) под моб. устройства? Если конечно вы согласитесь это делать. (Спросил на всякий случай, мало ли) Лично у меня не получается..Целый день потратил зря.

Здравствуйте, Сергей. В вашем шаблоне на первый взгляд, просматриваются определённые трудности: фоновое изображение шапки, достаточно объёмное меню, не адаптированные блоки контекстной рекламы, социальные кнопки, форма комментариев, баннеры и некоторые мелочи, которые потребуют тоже времени. Такая работа вам обойдётся в 2500 — 5000 рублей. Всё зависит от того, как вы решите реализовать меню, основные блоки сайта и контекстную рекламу. Честно говоря, за эту цену вы можете купить современный, адаптивный шаблон премиум класса.

Максим, возник вопрос. Можно ли вывести деньги с Адсенсе на ВебМонеу? Мало инфы в интернете, а то говорят там какие-то чеки с америки надо ждать.

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

Я чек не хочу, посмотрю потом, так у меня 1$ на баланде в Аденс. Я его года два назад тому ставил на сайт, чёт толку не было — ну там моя вина, не умел ничего) Сейчас чуть ума прибавилось, попробую поставить, может накоплю на бибику))

Один бакс — это начало. Способ вывода можно настроить, когда будет достигнут порог в 10$, а первый платёж будет после достижения 100$. Так что стать блоки и экспериментируй. Формат блоков лучше сразу выбирай — адаптивный.

Поставил уже, у меня посещалка 150-200, будет ли от рекламы толк? У тебя за месяц сколько с Аденса?

Ещё месяц не прошел, как я поставил рекламу, результат очень скромный — около 7$. Нужно ещё анализировать и экспериментировать с размещением блоков. У меня пока времени нет. Буду делать по мере свободного времени.

Бродил сегодня по блогам — у новичков, значит, стоят партнёрки (обычно весь видждет забит), а вот крупнячки в основном АДенс — причём ставят в начале и в конце статьи, видимо хороший заработок от него. Замечаю, что чем меньше рекламы и больше естественных внутренних ссылок, тем выше посещалка. Над ПФ, значит, нужно работать, а не о рекламе думать))

Разумеется, в первую очередь сайт нужно развивать, а доход от рекламы будет!

Максим, не могли бы вы подсказать в чем может быть быть ошибка. Не получается адаптировать фотографии внутри статьи. max-width:100%; height: auto — не помогают. Шаблон изначально адаптивный, но на предыдущей теме фото были намного шире. Теперь никак не хотят под новую тему подстраиваться.

Здравствуйте, Татьяна. Откройте свой файл style.css найдите 1202 строчку, там будут стили для блока с классом .wp-caption и изображения внутри него. Выглядит это так: .wp-caption img (в начале треугольная скобка пропущена, иначе код на моём блоге не отобразится, но в исходном коде сайта скобка присутствует). Посмотрите внимательно на свой файл index.php и обратите внимание на последовательность подключение основных блоков. В вашем случае первым подключается сайтбар, а после контент. Вам нужно код вывода сайтбара вырезать и вставить ниже контента. Только будьте аккуратны, соблюдайте все скобки и кавычки. И делайте резервные копии перед экспериментами. Таким образом вы измените порядок вывода блоков в шаблоне. Так вот, если необходимо внести изменения в основной блок шаблона (шапка, контент, подвал), то измерения вносятся в соответствующие файлы. Но, это вы и так знаете. Надеюсь, объяснил понятно. Но, в любом случае, если будут вопросы пишите.

Максим, спасибо большое, все стало ясно. С помощью Notepad++ выяснил, что в файле index где что /div-вами закрывается. После хейдера идет сразу сайдбар. Начал вызов сайдбара переставлять после контента и перед футером, но сайдбар встраивается либо в футер, либо в область контента. Вставлял после вызова контента div содержимое /div, но он встраивается в футер. Вызывается только хейдер, контент и футер. Перед футером есть три закрывающих /div. Убираю их по очереди, футер изменяется. Также вставлял перед этими /div сайдбар и убирал поодному, но сайдбар появлялся в футоре. Я имею понятие и думаю вставлял в правильные места, но видимо (шаблон) тема такая у меня, что только там сайдбар подгружается. А можно ли как-то еще сайдбар вызвать, например, вне файла index.php? Но наверное это строгое условие появления самого сайдбара на сайте… Может у меня зависимые от чего-то и не самостоятельные сами контейнера сайдбара, футера, хейдера или контента, что на них так зависимы друг от друга? Не думаю, что разработчик данного шаблона что-то не так сделал, наверное он преследовал какую-то цель или основывался на чем-то раз такое построение структуры сделал… У вас есть какие-нибудь еще предположения, может есть другой способ вывода элементов сайта? Я понимаю, возможно Вы не сталкивались с такими случаями на своей практике и мне сложно изъяснятся правильными терминами, но в любом случае большое человеческое спасибо за внимание моему вопросу!

Максим, ни какие блоки ДИВ удалять не нужно. Откройте исходный код вашего шаблона Ctrl+U, скопируйте код в Notepad++ и посмотрите на структуру. Обратите внимание на то, какой блок что содержит и что в себя включает. У вас вложенность блоков ДИВ такова: universe > wrapper > wrap > sidebar-right и content. Блок footer идёт ниже, отдельно. Кстати, обратите внимание на отсутствие переноса строки после закрытия блока с сайтбаром — лучше каждый блок начинать с новой строки, так легче разобраться. Вам нужно всё содержимое sidebar-right перенести под content, причём сделать это нужно в index.php. Главное разберитесь с блоками ДИВ, что в каком блоке содержится и где эти блоки закрываются. Как только с этим разберётесь и сразу перенесете сайтбар. Удачи!

Максим, спасибо! У меня три ДИВа висели в воздухе, то есть они видимо открываются в предыдущем файле, возможно в хейдере, а в в файле индекс закрываются. Просмотрел в Notepad++, эти три дива не подсвечиваются никак, то есть не задействованы в данном файле, а когда удалил их, то футер, который был на всю ширину экрана, стал по ширине страницы контента, а все остальное осталось прежнем. Не суть, видимо у меня такая причудливая тема. Извините, что отнял у вас время на решения моих вопросов. Благодаря вам теперь знаю ориентир — буду разбираться!

Лишних ДИВов в исходном коде, вашей темы, нет. Вы правильно подметили, что начало в хедере, а окончание в индексе. Такое тоже бывает. Продолжайте, вы на правильном пути!