Вселенная полезных советов 
Привет всем читателям и посетителям. В данной статье разберу одну маленькую, но очень важную проблему. Ко мне обращаются множество людей, в основном это три вида просьб, ускорениt, мобильная версия и микроразметка. Видно сейчас такой тренд, все с ума посходили, гугл всех запугал до чертиков. Но сейчас не об этом, а о мобильной версии сайта, точнее сказать дополнение к вот этой статье.
Содержание.
Введение.
Итак, в самой главной статье я рассказал план действий при адаптации, но там все расписано очень легко потому что, мой шаблон полностью сделан мной, и в нем все очень просто, и понятно. Я пока делаю всем обратившимся бесплатно, тренируюсь, но бывает такие шаблоны присылают, атас, что я с ними сижу по 3-4 часа, а новички проведут 3-4 дня, я то знаю.
Далее будут рассмотрены два момента, которые я не учел, это скрытие не нужного контента из мобильной версии, и нахождение необходимых элементов, мешающие отображению страницы. Все подробности читайте ниже.
Первая проблема- мне не нужно и надо скрыть.
Предположим у меня в мобильной версии нет сайт бара и подвала, я их просто убрал оттуда. Они мне не нужны, конечно можно оставить подписку, но я ее пока тоже снес, но дело не в этом. Сейчас научу вас, как избавиться от ненужных элементов из мобильной версии. Этот способ будет действовать везде, не только на вордпрессе, поехали.
Рассмотрю так же на сайт баре, предположим я хочу чтобы с отметки в 900 пикселей и до конца у меня убирался полностью вся боковая колонка и остался только сам контент, меню и шапка. А теперь смотрите сам процесс он очень легкий, находим тот элемент который хотите скрыть, далее опускаем глаза на и смотрим.
Для начала надо вывести самый классный инструмент в гугл хроме, это “посмотреть код”. Жмем на том элементе который хотим убрать в адаптивке правой кнопкой мыши и выбираем нужную строку. И у нас появится снизу окошко мастера, далее смотрим на скриншот и к нему описание.
- Необходимое место нужно искать вам, что хорошо, есть подсветка, как видите на снимке, я выбрал всю область сайтбара, и она стала синенькой.
- Блок в котором и находятся все элементы боковой колонки.
- Вот он то нам и нужен, это класс всего элемента, с помощью его и будем все делать.
Теперь мы идем в медиастили, как их встраивать вы должны уже знать из статьи про адаптацию, я приведу лишь пример записи. Для удаления объекта из визуальной части просмотра используется вот такой стиль с параметром none.
А теперь встроим это стиль в медиазапросы для моего класса sidebar, как уже говорилось промежуток будет от 900 до 240, это самый маленький экран, смотрите запись и вникайте.
И после всех манипуляций, при достижении разрешения по ширине в 900 пикселей и меньше, сайт бар будет полностью удален.
Минус этого способа, что объект все равно будет грузиться, просто не будет отображаться, как невидимка. Что конечно маленько повлияет на скорость загрузки, но если сделать все рекомендации что я говорю, это можно свести к минимуму.
Ладно переходим ко второму пункту, как узнать что мешает.
Вторая проблема- узнать что мешает.
Суть вся в том, когда сжимается окно браузера внизу появляется полоса прокрутки, это грубейшее нарушение, гугл просто откажется принимать ваш адаптивный дизайн. Вот пример ошибок (привел на блоге моего хорошего знакомого Андрея).
Адаптация у него есть, и причем она валидная. Я пользуюсь своим методом простого исключения. Давайте посмотрим на начинку через “просмотреть код” (это уже умеем, правой кнопкой мыши и вперед). Нажимать можете на любом месте, это не столь важно. Приступаем к самому сложному, главное вникните в саму суть.
- Сама полоса прокрутки в процессе она будет уменьшаться и вообще исчезать.
- Все что выводится на странице находится в разделе body, поэтому открываем это раздел и начинаем. Выбираем первый же подэлемент этого тега.
- Нажимаем правой кнопкой мыши и выбираем “delete element”.
В результате полоса прокрутки либо уменьшится, либо останется на своем месте. Если осталась как есть заначит переходим к следующему, и повторяем операцию.
Главное при каждом таком цикле, наблюдайте за полосой, она может увеличится, но не полностью исчезнуть (но все равно это место запомните), значит еще что-то мешает, и идете дальше.
И вот таким перебором и вычисляем, в нашем случае одной из причин является пагинация страниц, вот смотрите. Именно при ее удалении все становится хорошо. На что делаем вывод, что надо править и настраивать постраничную навигацию. Дальше уже по старой схеме настраиваем отображение в медиазапросах, либо другими способами.
P.S. На этом у меня все, статья направлена уже на середнячков, но принцип всех операций прост. В следующей статье цикла будем адаптировать видео ютуба и картинки, потому что так же есть проблема. Всем пока.
