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

Привет всем на 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%.

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

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

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

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