Выбор темы WordPress и оптимизация под мобильные устройства

В предыдущей статье про настройку плагинов для сайта на WordPress я обещал рассказать про выбор темы для сайта, но подумал что тема получится вялой и бессмысленной. Поэтому для большего вашего интереса и своей пользы статью расширю до оптимизации темы WordPress для мобильных устройств. В современном интернете, как трезвонят наши поисковые системы, треть всех пользователей заходят на сайты с мобильных аппаратов и некорректное отображение информации отпугивает драгоценного посетителя. Конечно большинство современных тем уже оптимизированы под мобильные устройства, но что делать со старыми шаблонами? Конечно редактировать их до полной адаптации.
Я щас буду нудно рассказывать «что по чем». Зацепим и HTML и CSS, так что наберитесь терпения, объясняю как могу. Погнали по порядку:)

Сначала зайдем в раздел «Внешний вид» нашей админки WordPress, нажмем «Добавить новую», выберем что то для себя и жмем «Установить». Я выбрал для себя тему TechHosting.

Добавить новую тему

Тема простенькая: минимум активных элементов, меню «Страниц», меню «Категорий» в общем простой и понятный дизайн. Так тема выглядит изначально

Первоначальный вид темы

Вся разметка сайта построена блоками div каждый из которых имеет свой стиль записанный в файле Style.сss и screen.css. Для удобной адаптации под мобильные устройства, я буду пользоваться удобным инструментом браузера Yandex.Хром «Исследовать элемент» вызываемый комбинацией CTRL+Shift+I.

Теперь я выбираю самый верхний левый элемент «Главная» нажимаю правую кнопку мыши и выбираю «Исследовать элемент». Справа откроемся окошко с исходным кодом страницы + исходный код CSS стилей

Инструмент Yandex.Хром Исследовать элемент

Нахожу самый верхний блок outer-wrapper в котором указан параметр WIDTH и редактирую его значение из 980px в 100% и следом добавляю параметр max-width:980px. В такой способ я указал что ширина блока должна быть 100% от экрана, но не может превышать 980px

Максимальная ширина страницы

На этом фото видно что блоки сместились и теперь каждый выпирающий блок нужно изменять

Смещение блоков

Опять же перехожу к следующему блоку OUTER и параметр WIDTH из 980px меняю в 100%. Картинка тут же меняется

Масштабирование процентами

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

Перенос блоков параметром FLOAT

Блоки Поиск и правая боковая колонка под действием параметра Float перенеслись на другую строчку и варианта решения два: убрать эти блоки совсем, что собственно я и сделал в своей теме, или же брать все три блока LEFT_SIDEBAR, POSTCONTENT и RIGHT_SIDEBAR масштабировать их тем же способом в процентном отношении.
Второй способ имеет недостаток. При просмотре на мобильном устройстве малого расширения блоки будут ужасно малы по ширине и вид у страницы будет неприятен. Как сказал ранее убрал эти блоки совсем, так как все необходимые навигационные страницы я вынес в шапку, а строку поиска поместил под шапкой
Этим действием убил сразу два зайца. Второй «заяц» это то, что я сократил коды HTML и CSS, ускорив загрузку страницы

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

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

Вид на мобильном устройстве

Осталось дело за малым, строки из отредактированных файлов CSS скопировать в файлы приложенные темы.

CSS скопировать в файлы

Для этого скачиваем тему со всеми файлами на свой компьютер, открываем файлы Style.сss и screen.css и меняем их содержимое на новое

Удаления лишних блоков можно сделать с помощью редактора темы

Удаления лишних блоков

Вот так на мобильном устройстве тема выглядит до адаптации

Тема выглядит до адаптации

после адаптации

Тема выглядит после адаптации

И после адаптации на ПК с расширением 1600Px

Тема выглядит после адаптации на ПК с расширением 1600Px

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

img{max-width:100%}

А между тегами HEAD в файле header.php нужно вставить мета-тег vievport говорящий браузеру мобильного устройства, что он сам подстраивает ширину странички под свой экран

<meta name="viewport" content="width=device-width">

Ну в общем то все, как мог объяснил. Не мастер этого дела, самоучка. Если что то не указал уж извиняйте заработался
С ув. Admin-чек

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

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

Ваш адрес email не будет опубликован.