Создание мобильной версии сайта на WordPress
Опубликовано: 01.09.2018
В начале месяца я уже писал статью о том, как можно сделать мобильную версию сайта . Делали мы это с помощью подключения отдельной таблицы CSS, но все же это был не единственный способ. Есть достаточно много плагинов, позволяющие делать мобильную версию, возможно, о них поговорим в следующей статье, а в этой будем использовать media-запросы.
Что такое media-запросы?
Медиа-запросы позволяют менять стили оформления при изменении размера экрана. Таким способом можно адаптировать сайт под любые виды устройств. Медиа-запросы имеют несколько значений (например, print, screen или all), эти значения указывают носителя для которого будет использоваться таблица при предварительном просмотре страницы с того или иного устройства.
Как сделать мобильную версию сайта wordpress
Поддержка браузеров.
В настоящее время медиа-запросы поддерживают все популярные браузеры. Поэтому можно с лёгкостью их применять в разработке сайта под мобильные устройства.
Варианты применения.
ТОП 4 СПОСОБОВ АДАПТАЦИИ САЙТА ПОД МОБИЛЬНЫЕ УСТРОЙСТВА
Медиа-запросы можно задействовать тремя способами:
1. Подключения медиа таблицы (этот способ был применен в первой статье).
2. Импортирование в таблицу CSS. 3. Так называемые медиа-запросы.Все три способа по-своему хороши. Первый применяется в случае если нужно изменить не пару свойств в основной таблицы, а к примеру, полностью ее переделать под мобильное устройство. Изменив абсолютно все, что составит очень громадный код и в таком варианте лучше создавать отдельную таблицу.
Второй способ почти аналогичный первому только что подключение будет через директив @import в основную таблицу.
Третий способ мы как раз и рассмотрим в подробностях на одной из тем, которая не адаптирована под мобильное устройство. Но хочу предупредить что гладко вряд ли все пройдет. Помимо описания или инструкции должны быть хоть какие-то знания CSS чтобы понимать зачем делаем то или иное, а иначе для вас это будет набор бессмысленных слов.
Вступление.
На роль подопытного кролика возьмем тему Clean-and-Clear, изначально она не адаптирована под мобильное устройство. В конце нашей работы эта тема будет корректно отображаться не только на мобильных устройствах, но также и на планшетах, таблетках. Если подумали, что будем делать плавающий дизайн, то вы ошибаетесь. Мы просто разобьём сайт на четыре основные таблицы.
1. Стандартный вид. Устройство-ПК.
2. Установленная ширина (min-width:769px) and (max-width:1024px). Устройство-планшет. 3. Установленная ширина (min-width:481px) and (max-width:768px). Устройство-tablet. 4. Установленная ширина (max-width:480px). Устройство-мобила.Принцип работы заключается в фиксированной ширине от и до, в зависимости от этого будут подключены определенные стили. Прописывать их будем в основной таблице заключив в media-запрос.
Начало.
Первым делом смотрим исходный код сайта, нас интересует построение блоков, а, главное, какой класс или идентификатор отвечает за них.
Данную структуру можно разбить на три основные блока.
.header -шапка сайта.
.content -главный блок в котором находятся все последующие. .footer -подвал сайта.Плюс вложенные блоки.
.searchform -поиск. .title -название сайта. .menu -навигация. .main -посты. .sidebar -сайдбар.Это крупные блоки, которые бросаются в глаза, но не следует забывать, что есть еще также топбар, метки и прочее что может выводиться. С ними лучше разбираться по ходу дела поскольку сразу будет видно, что криво стоит. И следует учесть – это только главная страница, а есть ведь еще внутренняя где находится, форма комментарий и остальное что возможно.
Приступаем к работе.
Открываем основной файл стилей CSS ( style.css ) в самом конце добавляем комментарий и делаем медиа запрос.
Первые прописываем стили для планшетных-устройств. /** Style Mobile planchette **/ @media screen and (min-width:769px) and (max-width:1024px) { .header{ width:720px; margin:0 auto; } .content{ width:720px; margin:0 auto; } .menu{ width:720px; } .main{ width:100%; } .sidebar { width:100%; } .footer{ width:720px; } p.form-submit, p.form-allowed-tags { margin-left:0px; } }Пояснение. Фиксируем ширину header’a и выравниваем по центру, то самое делаем с основным блоком в котором находятся все остальные. Последовательно указываем стили menu , main — блок с постами, sidebar , footer и последнее p.form-submit — это элемент из внутренней страницы, отменяем ему левый отступ кнопки «отправить комментарий». Это те мелочи, которые некорректно отображаются. Нужно проверять сайт после каждого внесенного изменения.
Задаем стили для таблеток.
/** Tablet **/ @media screen and (min-width:481px) and (max-width:768px) { .content{ width:460px; margin: 0 auto; } .header { width:460px; margin: 0 auto; } .main{ width:100%; } /** Menu Mobile **/ .menuwrapp_mobile{ margin:0; position:relative; display: block; } .mobilemenu_toggle { background: url("images/menuicon.png") no-repeat scroll 100% 50% #3f3f3f; color: #fff; display: block; font-weight: bold; padding: 10px 20px; text-align: left; text-transform: uppercase; margin: 10px 0 0; } .mobilemenu_toggle:hover { color: #fff; } .menu_mobile{ background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #D4D4D4; font-size: 18px; overflow: hidden; padding: 0; display:none; } .menu_mobile .sub-menu{ background:none; display:block; position: static; } .menu_mobile li { border-top: 1px solid #e3e3e3; } .menu_mobile a { background: none repeat scroll 0 0 ##E5E5E5; color: #cc0000; display: block; font: 700 12px/40px Arial,sans-serif; padding: 0 0 0 20px; text-align: left; } .menu_mobile a:hover { opacity: 0.9; text-decoration:none; background:#CB0000; color: #fff; } .menu_mobile .sub-menu a{ padding-left:30px } .menu_mobile .sub-menu .sub-menu a{ padding-left:30px } /** END Menu Mobile **/ .menu{ display:none; } .header p.title { text-align: center; width: 100%; } form.searchform{ display:block; float: none; margin:0 auto; } .sidebar { margin: 40px 0; width:100%; } #comments input { width: 348px!important; } #comments textarea { width: 348px!important; } p.form-submit, p.form-allowed-tags { margin-left:0px; } .footer{ padding:0 15px; width: 430px; } }Первых три блока вам уже знакомы, дальше идет мобильно меню. Здесь нужно проделать некие действия чтобы не запутаться написана отдельная статья как сделать мобильное меню , так будет лучше. Вам следует прочесть и сделать все необходимое что требуется, стили и классы указаны одинаково там и тут.
После стилей мобильного меню идет основное меню .menu ему задано значение display:none; таким образом, мы его прячем, затем что подключается мобильное меню если это не сделать, то будет их два. И еще один момент, такое действие нужно проделать с моб.меню только за пределами медиа-запросов задать ему значение…
.menuwrapp_mobile { display: none; }Надеюсь, с меню все ясно, идем дальше. А дальше у нас идет лого .header p.title задаем текст по центру и на всю ширину. Следующий блок form.searchform –это поиск, если ему задано обтекание, то отменяем и даем значение block чтобы выровнять по центру. Сайдбаром думаю здесь понятно, а вот #comments input – это уже внутренняя страница «форма комментариев» просто указываем нужную ширину. И последние два блока думаю тоже понятно, подвал и отмена отступа.
Для мобильных устройств.
/** Mobile **/ @media screen and (max-width:480px) { .content{ width:300px; margin: 0 auto; } .header { width:300px; } .main { width: 100%; } /** Menu Mobile **/ .menuwrapp_mobile{ margin:0; position:relative; display: block; } .mobilemenu_toggle { background: url("images/menuicon.png") no-repeat scroll 100% 50% #3f3f3f; color: #fff; display: block; font-weight: bold; padding: 10px 20px; text-align: left; text-transform: uppercase; margin: 10px 0 0; } .mobilemenu_toggle:hover { color: #fff; } .menu_mobile{ background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #D4D4D4; font-size: 18px; overflow: hidden; padding: 0; display:none; } .menu_mobile .sub-menu{ background:none; display:block; position: static; } .menu_mobile li { border-top: 1px solid #e3e3e3; } .menu_mobile a { background: none repeat scroll 0 0 ##E5E5E5; color: #cc0000; display: block; font: 700 12px/40px Arial,sans-serif; padding: 0 0 0 20px; text-align: left; } .menu_mobile a:hover { opacity: 0.9; text-decoration:none; background:#CB0000; color: #fff; } .menu_mobile .sub-menu a{ padding-left:30px } .menu_mobile .sub-menu .sub-menu a{ padding-left:30px } /** END Menu Mobile **/ .menu{ display:none; } .header p.title { text-align: center; width: 100%; } form.searchform{ display:block; float: none; margin:0 auto; } .sidebar { margin: 40px 0; width: 100%; } #comments input { width: 188px !important; } #comments textarea { width: 188px !important; } .footer { padding:0 15px; width: 270px; } p.form-submit, p.form-allowed-tags { margin-left:0px; } }Здесь имеются все те же блоки только ширина другая. В сути мы изменили минимум стилей и получили полностью адаптированный сайт. Сам шаблон можете скачать по ссылке ниже, посмотреть итоговый результат.
И последнее…
На устройствах Iphone сайт может отображаться удаленно что приходиться увеличивать для полного размера. Решение этой задачи имеется на сайте разработчиков Safari с помощь мета-тега
<meta name="viewport" content="width=device-width" />Его нужно прописать между тегами <head> после чего сайт будет отображаться в полном размере.
На самом деле это делается очень просто смысл в медиа-запросах мы прописываем в них только то, что хотим изменить при указанном размере вот и все. Я, пару раз встречал запросы в поисковой системе «скачать мобильные стили для сайта» или что-то похожее. Но нужно понимать, что нету универсальных стилей, которые подошли к любому сайту. Такого нет и быть не может, все требуется делать своими руками.
