Как сделать адаптивный дизайн сайта wordpress
Как сделать адаптивный дизайн сайта wordpressСкачать файл - Как сделать адаптивный дизайн сайта wordpress
Интернет всё больше становиться мобильным. К тому же Гугл и даже Яндекс заявляли, что в мобильной выдаче предпочтение отдают тем сайтам, которые правильно отображаются на мобильных устройствах. Так что если кто этого ещё не сделал самое время задуматься над удобством пользования вашим сайтом для данной аудитории. Именно поэтому я решил сделать адаптивный шаблон для данного блога — whiteprofit. Заодно и проверим даст ли это рост трафика. Как оказалось это сделать совсем не сложно, достаточно внести мелкие изменения в код и всё доступно прямо из админки WordPress. И так, имеем обычный старый дизайн, который совсем криво работает на смартфонах, планшетах и т. Это прописываем в шапке сайта, в нашем случае это файл header. Дальше практически все основные элементы сайта с конкретно заданной шириной делаем резиновыми, то есть ширину лучше задавать процентах. Хотя, конечно, можно прописывать конкретную ширину блока для конкретной ширины экрана. В этом нам поможет правило media. Оно позволяет прописывать в css-файле отдельные стили одному и тому же элементу при разной ширине экрана. Например, ширина сайта у меня по умолчанию пикселей. И я в конце css-файла стилей редактировать который можно также через админку, как и предыдущий я дописал правило:. Дальше у меня есть две колонки: Поэтому я тоже добавил правило, которое также делает их резиновыми, но только при ширине монитора меньше пикселей. Ну, а для ещё более мелких мониторов я добавил правило, которое убирает свойства float, что ставит эти колонки не рядом слева и справа, а одну под другой. А для ширины пикселей и меньше пришлось картинки в лентах новостей сместить в центр и также задать их ширину в процентах. Вот уже практически и всё — мы имеем адаптивный шаблон WordPress, который корректно отображается на всех устройствах, можно, конечно, ещё поиграться со шрифтами и отступами — где-то увеличить, где-то уменьшить. Также у вас могут быть и другие блоки сайта, ширину которых вам нужно изменить. Проверить всё можно просто сидя у себя за компьютером сделав меньше ширину вашего браузера. Также мне в подобной работе очень помогает дополнение к Firefox — Firebug , рекомендую обязательно его освоить, если планируете работать с кодом сайта. Правда осталась ещё одна недоработка — это меню. В некоторых случаях — оно и не будет требовать ещё каких-то телодвижений, если, например, оно состоит из пары пунктов, но мне всё-таки пришлось его немного переделать. Так как пунктов меню блога не мало, то показав из всех сразу можно занять ими весь первый экран, что не всегда хорошо. Именно поэтому я решил скрывать его для экранов меньше пикселей и разворачивать в таких случаях уже по клику. Конечно, есть и другие варианты:. Скрыть — это не проблема, просто при данной ширине, для данного блока пишем display: Таких скриптов в Интернете можно найти море и на javascript и на jquery, я покажу тот, который поставил себе. И вставил так же в header. То есть мне пришлось в код сайта, перед меню, ещё вставить ссылку с картинкой, которая по умолчанию скрыта, а при ширине и меньше показывается, ну и при клике по ней раскрывается всё меню. Здесь есть ещё один нюанс, который я заметил уже в процессе: Именно поэтому пришлось добавить ещё одно правило для мониторов пиксель и больше. Ну, вот и всё, теперь уже точно имеем удобный адаптивный дизайн WordPress. Конечно же, эти же правила подойдут для адаптации практически любого сайта на любом движке. Гугл теперь говорит, что данный блог имеет 99 из по удобству пользования для мобильных устройств. Теперь будем смотреть, как это отразиться на пользователях со смартфонов или планшетов, будет ли рост трафика из этих устройств. О чем я напишу уже в одной из следующих статьях. Если у вас уже был подобный опыт, то делитесь им в комментариях. Ну, и все вопросы также можно задать там…. Я, конечно, все плагины не пробовал, но с тех, что видел, то просто в них есть свои стандартные шаблоны, которые они подключают для мобильных устройств. Поэтому, две причины, что мне плагины не подошли: Есть у меня сайт из неплохими позициями, но на простом HTML, без движка. Можно вашим способом сделать его адаптивным, или нужно все-таки перевести на WordPress? Можно, конечно, просто надо смотреть код сайта и учитывать, что вы хотите отображать в мобильной версии. Например, флеш на мобильной версии лучше не отображать, может ещё что-то. Всё зависит от сложности самой структуры вашего дизайна и функционала. Здесь вопрос не в движке, а в самом дизайне, может быть вариант, что там буквально пару строк кода надо дописать, а возможно, что там нужно половину дизайна переделать. Главная Кейсы Инвестиции SEO Эксперименты Заметки WordPress Новости Интервью Партнерки. Как сделать адаптивным шаблон блога на WordPress за 1 день? Приступим… Секреты адаптивной вёрстки Вначале надо прописать мета-тег, который четко будет вычислять ширину экрана. Как исключить записи и рубрики из RSS и главной в Wordpress Коварный replytocom: Получай свежие статьи первым по e-mail. Все плагины а-ля адаптивность за 1 клик работают также? На чем вы зарабатываете в интернете? Лайки, комментарии и т. Услуги Контакты Полезные сервисы Реклама на сайте Эксклюзив.
Как сделать адаптивным шаблон блога на WordPress за 1 день?
Как сделать адаптивную верстку на WordPress? Часть 1
Делаем адаптивный дизайн в темах вордпресс своими руками
Сколько носить медицинские гвоздики
Сонник миллера найти бижутерию с крупными камнями
Как делают эпиляцию в зоне бикини