WordPress мобильная версия: 📗📌 Все для WordPress и WEB разработки

Leave a Comment / Разное / By /

Содержание

Создание мобильной версии сайта на WordPress

В начале месяца я уже писал статью о том, как можно сделать мобильную версию сайта. Делали мы это с помощью подключения отдельной таблицы CSS, но все же это был не единственный способ. Есть достаточно много плагинов, позволяющие делать мобильную версию, возможно, о них поговорим в следующей статье, а в этой будем использовать media-запросы.

Что такое media-запросы?

Медиа-запросы позволяют менять стили оформления при изменении размера экрана. Таким способом можно адаптировать сайт под любые виды устройств. Медиа-запросы имеют несколько значений (например, print, screen или all), эти значения указывают носителя для которого будет использоваться таблица при предварительном просмотре страницы с того или иного устройства.

Поддержка браузеров.

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

Варианты применения.

Медиа-запросы можно задействовать тремя способами:

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> после чего сайт будет отображаться в полном размере.

На самом деле это делается очень просто смысл в медиа-запросах мы прописываем в них только то, что хотим изменить при указанном размере вот и все. Я, пару раз встречал запросы в поисковой системе «скачать мобильные стили для сайта» или что-то похожее. Но нужно понимать, что нету универсальных стилей, которые подошли к любому сайту. Такого нет и быть не может, все требуется делать своими руками.

Скачать

Редактирование мобильной версии elementor

В данном видео-уроке мы научимся редактированию мобильных версий сайт.

Редактирование мобильной версии сайта

Добрый день. В этом уроке мы разберем редактирование 3-х версий сайта.

  1. Компьютерная версия сайта
  2. Планшетная версия сайта
  3. Версия сайта для мобильных устройств

Первой всегда выполняется компьютерная версия сайта.

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

Для переходов между версиями сайта следует нажать в левом нижнем углу в маленькой серой панели на значок компьютера и выбрать нужную для редактирования версию сайта (Рис.1)

Рисунок 1 — панель управления версий сайта

Планшетная версия сайта

Планшетная версия практически не отличается от компьютерной версии, за исключением редких случаев. Она выглядит немного сжатой, редактируется также отдельно и почти идентична компьютерной, (Рис.2).

Рисунок 2 — планшетная версия сайта

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

Рисунок 3 — сворачивание редактора Elementor

Также можно посмотреть планшетную и мобильную версии сайта через браузер. Для этого нужно открыть Ваш сайт, нажать на клавиатуре F12 для вызова консоли (в Google Chrome  и Atom). В других браузерах это может называться «Консоль разработчика», затем нажать в верхнем правом углу на иконку устройств (помечено на рисунке желтым кругом) (Рис.4).

Рисунок 4 — консоль разработчика в Google Chrome

Редактирование мобильной версии в Elementor

Таким же образом, чтобы просмотреть или откорректировать мобильную версию, Вам необходимо в левом нижнем углу, в маленькой серой панели нажать на значок компьютера и выбрать нужную для редактирования теперь уже мобильную версию сайта. На рисунке 5 представлено как она будет выглядеть при свернутой панели Elementor, (Рис.5).

Рисунок 5 — мобильная версия сайта

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

Для удобства переключения и отладки каждого элемента, а также, чтобы ускорить процесс исправления возникающих проблем, в каждой из версий сайта в панели Elementor есть маленькие значки переключения между версиями, (Рис.6).

Рисунок 6 — видимость элемента в разных версиях сайта

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

Нельзя изменять текст в каждой версии по отдельности, он всегда будет один и тот же для всех версий. Если Вам нужно исправить текст, допустим, в мобильной версии так, чтобы он отличался от компьютерной и планшетной, тогда Вам необходимо нажать на поле текста правой кнопкой мыши и выбрать из открывшегося списка действий «дублировать». У Вас появится копия текстового поля, которое было продублировано сразу снизу элемента. Далее, выбрав основное (дублируемое) поле, в левой панели Elementor требуется нажать на вкладку «Расширенные», далее из списка открыть вкладку «Адаптивность», затем выбрать место, где мы хотим скрыть данный элемент. В планшетной и компьютерной версии все практически одинаково, в результате чего тумблера у них всегда идут вместе в одну сторону. (Рис.7)

Рисунок 7 — настройка адаптивности элементов

Скрытые элементы в разных версиях будут отображаться едва заметными засветленными элементами. Это означает, что для данной редактируемой версии, этот элемент будет не активен и, соответственно, не будет отображаться в этой версии сайта (Рис. 8).

Рисунок 8 — просмотр мобильной версии

Так же настраивается любой элемент сайта.

Спасибо за внимание. В следующем уроке мы разберем  тему: «Основные элементы разметки сайта».

КОНТАКТЫ