Как сделать ваш шаблон WordPress адаптивным? Или адаптивная вёрстка своими руками для любого сайта за 1 день.

Опубликовано: 01.09.2018

Интернет всё больше становиться мобильным. Уже сейчас на некоторых моих сайтах доля мобильного трафика превышает 40%. К тому же Гугл и даже Яндекс заявляли, что в мобильной выдаче предпочтение отдают тем сайтам, которые правильно отображаются на мобильных устройствах. Так что если кто этого ещё не сделал самое время задуматься над удобством пользования вашим сайтом для данной аудитории. Именно поэтому я решил сделать адаптивный шаблон для данного блога — whiteprofit.ru, но при этом не менять его совсем, а просто максимально быстро и просто переделать уже существующий. Заодно и проверим даст ли это рост трафика. Как оказалось это сделать совсем не сложно, достаточно внести мелкие изменения в код и всё доступно прямо из админки WordPress.

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

Приступим…

Секреты адаптивной вёрстки

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

WooCommerce 3.0 и новый шаблон - быстрая настройка премиум темы Woostroid

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

Это прописываем в шапке сайта, в нашем случае это файл header.php, найти который мы можем в админке, пункты меню Внешний вид => Редактор.

Натяжка шаблона на WordPress | #1

Дальше практически все основные элементы сайта с конкретно заданной шириной делаем резиновыми, то есть ширину лучше задавать процентах. Хотя, конечно, можно прописывать конкретную ширину блока для конкретной ширины экрана. В этом нам поможет правило @media . Оно позволяет прописывать в css-файле отдельные стили одному и тому же элементу при разной ширине экрана. Я решил совместить: полностью десктопную версию не менять, а для конкретных экранов задать ширину блоков в процентах.

Например, ширина сайта у меня по умолчанию 1180 пикселей. И я в конце css-файла стилей (редактировать который можно также через админку, как и предыдущий) я дописал правило:

1 2 3 4 5 6

@media only screen and ( max-width : 1200px ) { #page { margin : 10px auto ; width : 98% ; } }

@media only screen and (max-width: 1200px){ #page { margin: 10px auto; width: 98%; } }

Которое делает, при ширине экрана меньше 1200 пикселей, ширину блога 98%.

Дальше у меня есть две колонки: слева с основным текстом ширина которой 660 пикселей и правая – сайтбар, ширина которого 300 пикселей. Поэтому я тоже добавил правило, которое также делает их резиновыми, но только при ширине монитора меньше 1030 пикселей.

1 2 3 4 5 6 7 8 9

@media only screen and ( max-width : 1030px ) { #primary { width : 65% ; } #secondary { width : 32% ; } }

@media only screen and (max-width: 1030px){ #primary { width: 65%; } #secondary { width: 32%; } }

Ну, а для ещё более мелких мониторов я добавил правило, которое убирает свойства float, что ставит эти колонки не рядом слева и справа, а одну под другой.

1 2 3 4 5 6 7

@media only screen and ( max-width : 760px ) { #primary , #secondary { width : 95% ; float : none ; margin : 10px auto ; } }

@media only screen and (max-width: 760px){ #primary, #secondary { width: 95%; float: none; margin: 10px auto; } }

А для ширины 480 пикселей и меньше пришлось картинки в лентах новостей сместить в центр и также задать их ширину в процентах.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@media only screen and ( max-width : 480px ) { .blog .entry-image , .search .entry-image , .archive .entry-image { float : none ; margin : 0px auto ; width : 90% ; } .entry-image img { height : auto ; width : 100% ; } }

@media only screen and (max-width: 480px){ .blog .entry-image, .search .entry-image, .archive .entry-image { float: none; margin: 0px auto; width: 90%; } .entry-image img { height: auto; width: 100%; } }

Вот уже практически и всё – мы имеем адаптивный шаблон WordPress, который корректно отображается на всех устройствах, можно, конечно, ещё поиграться со шрифтами и отступами – где-то увеличить, где-то уменьшить. Также у вас могут быть и другие блоки сайта, ширину которых вам нужно изменить. Проверить всё можно просто сидя у себя за компьютером сделав меньше ширину вашего браузера. Также мне в подобной работе очень помогает дополнение к Firefox – Firebug , рекомендую обязательно его освоить, если планируете работать с кодом сайта.

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

Адаптивное меню сайта

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

Часть скрывать, а часть показывать; Делать выпадающий список; Ничего не делать.

Скрыть – это не проблема, просто при данной ширине, для данного блока пишем display: none и всё, но вот чтобы потом показать придётся дописать небольшой скрипт. Таких скриптов в Интернете можно найти море и на javascript и на jquery, я покажу тот, который поставил себе. И вставил так же в header.php:

1 2 3 4 5 6 7 8

< script language = "JavaScript" type = "text/JavaScript" > function showmobmenu ( ) { if ( document. getElementById ( 'mobmenu2' ) .style .display == "block" ) { document. getElementById ( 'mobmenu2' ) .style .display = "none" } else { document. getElementById ( 'mobmenu2' ) .style .display = "block" } } </ script >

То есть мне пришлось в код сайта, перед меню, ещё вставить ссылку с картинкой, которая по умолчанию скрыта, а при ширине 480 и меньше показывается, ну и при клике по ней раскрывается всё меню.

1	< div id = "mobmenu" >< a href = "javascript:void(0)" onclick = "showmobmenu()" >< img width = "160" height = "36" src = "https://whiteprofit.ru/wp-content/themes/delighted/img/mob-menu.png" alt = "Мобильное меню" > < / a> < / div >

А также изменить свойство float для пунктов меню:

1 2 3 4 5 6 7 8 9 10

@media only screen and ( max-width : 480px ) { #mobmenu2 { display : none ; } #mobmenu { display : block ; } .main-navigation li { float : none ; } }

@media only screen and (max-width: 480px){ #mobmenu2{ display: none; } #mobmenu { display: block; } .main-navigation li { float: none; } }

Здесь есть ещё один нюанс, который я заметил уже в процессе: если меню скрывается скриптом, то есть с помощью кнопки в мобильной версии, то при увеличении ширины (например, если вы повернули смартфон с вертикального положения в горизонтальное) главное меню уже не отображается. Именно поэтому пришлось добавить ещё одно правило для мониторов 481 пиксель и больше.

1 2 3 4

@media only screen and ( min-width : 481px ) { #mobmenu2 { display : block !important ; } }

@media only screen and (min-width: 481px){ #mobmenu2{ display: block !important; } }

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

Ну, вот и всё, теперь уже точно имеем удобный адаптивный дизайн WordPress. Конечно же, эти же правила подойдут для адаптации практически любого сайта на любом движке. Гугл теперь говорит, что данный блог имеет 99 из 100 по удобству пользования для мобильных устройств.

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

Если у вас уже был подобный опыт, то делитесь им в комментариях. Ну, и все вопросы также можно задать там…