Делаем адаптивный дизайн в темах вордпресс своими руками

Дата: / Автор поста:

адаптивный дизайн делаем
Привет всем на wpsovet.ru. Без раскачки и теории начинаем к практике. Статья будет просто огромная, пройдем весь путь, про то как сделать адаптивный дизайн сайта самому, все распишу очень подробно, так что вникайте и применяйте.

Содержание.

  1. Задаем браузеру команду.
  2. Изменяем значения на максимальные.
  3. Настраиваем сайтбар и контент.
  4. Определения порога включения.
  5. Вводим медиа запросы.

Задаем браузеру команду.

Для начала нам надо сказать браузеру, чтобы он подстраивался под разные разрешения экранов. Нам не достаточно просто задать стили, браузер должен быть уверен в своих действиях. И чтобы это осуществить нам надо ввести в раздел header небольшой код. Заходим в административную панель ->внешний вид ->редактор ->находим header.php. И перед тегом </ header>, вводим вот этот код.

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

Если нужна подсказка, куда вставить код, то смотрим скриншот.

интеграция под разные разрешения

На этом пункт закончен, только не обольщайтесь, остальные раз в десять будут больше.

Изменяем значения на максимальные.

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

width:960px;

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

max-width:960px;

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

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

  1. Нажимаем на экране правой кнопкой мыши и выбираем «Просмотр кода элемента», находим нужный нам блок, удобно все тем, что область подсвечивается синим цветом, я просто навожу мышкой и смотрю на выделения, где мне надо там останавливаюсь, в данном случае меня интересует все отображение.
  2. Это сам HTML код, где все это располагается.
  3. В моей теме за вывод дизайна всей области просмотра отвечает стиль main.
  4. А вот тут можете видеть, что самая большая величина 960 px.

Теперь мы знаем стиль, который нам и нужен. Переходим в административную панель ->внешний вид ->редактор ->файл style.css. Ищите тот стиль который мы определили, и задаем ему max-width.
шириан макета
И так со всем остальным на блоге поступаем так же.

Настраиваем сайтбар и контент.

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

Для успешного адаптивного дизайна, нам надо разделить эти два пункта на проценты. Предположим у нас ширина всего сайта 1000px, контент 750 px, а сайтбар, логично, 250 px, значит первый занимает 100%, второй 75%, а третий 25px, вот и вся простая арифметика.
проценты контента и сайтбара
Так вот нам надо вставить эти проценты в файл стилей, у меня за вывод отвечают два класса sidebar и content (у вас скорее всего другие), так же идем в style.css, и меняем всё. До изменений у меня было так.

.content{width:720px;float:left;}
.sidebar{width:240px;float:right;}

После правки кода.

.content{width:70%;float:left;}
.sidebar{width:30%;float:right;}

Данное действие нам поможет в будущем, смотрите и читайте ниже, пока что вы никаких изменений не увидите.

Определение размеров откуда будем начинать.

Теперь идет визуальная работа, нам надо определить с какого предела сайт начинает «плыть», в смысле изменяться, и плохо отображаться на экране. Вообще чтобы определить есть ли на блоге мобильная версия с адаптивным дизайном, надо просто сжать окно браузера, и если все красиво, то он присутствует. Видите у меня, шапка заменяется на фон, область контента, на весь экран, а сайт бар выводиться снизу.
проверям как ведет себя браузер
Это так для информации, для нас же сейчас важно узнать предел разрешения. Для этого нам поможет специальный инструмент, жмем в области контента (да вообще в любом месте) на правую кнопку и выбираем "Просмотр кода элемента", и начинаем сжимать окошко, чтобы найти тот самый момент где все становиться не красиво.

Я сделал на примере ресурса по проверке орфографии text.ru. Когда вы включите режим просмотра кода, то у вас появиться линейка сверху и с боку, нас интересует только верхняя, потому как именно по ширине и будет настраиваться весь адаптивный дизайн. Так вот в данном моменте предел составляет 1050 px (именно в пикселях  идет измерение).
пример неправильности
Вот мы и нашли точку изменения, от которой и будем дальше плясать, переходим к следующему разделу.

Понятие медиа запроса.

Вот и дошли почти до финала, сразу напишу определение.

Медиа запрос-это такой запрос, который меняет какой-либо параметр исходного элемента, на свой при определенных условиях.

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

@media screen and (max-width: "ваш предел изменения сайта"px) and (min-width: 949px){
}
@media screen and (max-width:950px) and (min-width: 799px) {
}
@media screen and (max-width:800px) and (min-width: 500px) {
}
@media screen and (max-width: 499px) and (min-width: 341px){
}
@media screen and (max-width: 340px) and (min-width: 240px){
}

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

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

@media screen and (max-width: 1000px) and (min-width: 949px){
.content {
 width: 100%;
float: none;
}
.sidebar {
width: 97%;
float: none;
}
}
@media screen and (max-width:950px) and (min-width: 799px) {
.content {
 width: 100%;
float: none;
}
.sidebar {
width: 97%;
float: none;
}
}
@media screen and (max-width:800px) and (min-width: 500px) {
.content {
 width: 100%;
float: none;
}
.sidebar {
width: 97%;
float: none;
}
}
@media screen and (max-width: 499px) and (min-width: 341px){
.content {
 width: 100%;
float: none;
}
.sidebar {
width: 97%;
float: none;
}
}
@media screen and (max-width: 340px) and (min-width: 240px){
.content {
 width: 100%;
float: none;
}
.sidebar {
width: 97%;
float: none;
}
}

Как можете видеть, медиа запросы к этим двум объектам надо прописывать в каждом интервале, потому как нам нужно чтобы этот эффект оставался неизменны. Если же мы пропустим хоть один, то на каком-то промежутке, области контента и сайтбара, будут в оригинале занимать 75% и 25%.

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

Надеюсь вы поняли, принцип прост:

  • Выбираете промежуток.
  • Сужаете окно браузера, параллельно включив «Просмотр кода элемента», чтобы видеть линейку.
  • Смотрите какие компоненты начинают вести себя плохо.
  • Прописываете медиа запросы к ним, чтобы все встало на свои мета.

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(4 голоса, в среднем: 5 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Петр

    То что сделано своими руками — намного лучше. Так можно проявить свою оригинальность и фантазию.

    • Валентин Лифанов

      Это точно.

  • Игорь

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

    • Лифанов Валентин

      Конечно, плагины.

  • Таня

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

  • Оксана

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

  • Андрей

    Долго искал подобную информацию. Спасибо Валентин. Блог в закладках для дальнейшего ознакомления.

    • Лифанов Валентин

      Андрей,если нужна помощь,то пожалуйста обращайтесь,помогу,мне только нужна ваша тема и картинки.

      • Андрей

        Спасибо Валентин. На праздники займусь адаптивным шаблоном. Сейчас нет времени совсем. Я думаю вопросы будут.Как связаться с тобой мобильно?

        • Лифанов Валентин

          Не за что, вопросы будут по любому, тебе нужен номер моего мобильного?

  • Андрей

    Нет, мобилка не нужна, В Контакте или скайп, на твое усмотрение.

  • Валерий

    Валентин, а как выполнить рекомендации PageSpeed Insights у вас по всем 3 параметрам 100 из 100!

    • Лифанов Валентин

      А для этого у меня есть рубрика оптиускорение, там по всем пунктам все разобрано, смотрите.

  • Светлана

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

    • Лифанов Валентин

      Светлан (прямо как к своей жене,ее тоже зовут Светлана), что-то будет не понятно то обращайтесь помогу бесплатно, только давайте в личных сообщаниях. У меня стоит другой плагин, он отправялет сообщения только тогда когда ответ поступил на текущий комментарий. По мне так удобнее, вот я сейчас ответил на ваш комментарий вам пришло письмо?

  • Светлана

    Да, я поняла, что у вас по умолчанию плагин настоен

  • Лифанов Валентин

    Плагин называется Comment Email Reply, он вообще автоматом работает его даже в админке не найдешь.

  • Dima

    Приветствую.

    У меня сайтина на ВП. Прошу уточнить, действительно ли с помощью вашей инструкции можно сделать так сказать адаптацию?

    • Лифанов Валентин

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

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

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

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.