• Главная
  • Карта сайта
Не найдено

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

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

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

Мобильная версия сайта. Адаптируем сайт для мобильных устройств

В начале месяца я уже писал статью о том, как можно сделать мобильную версию сайта . Делали мы это с помощью подключения отдельной таблицы 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> после чего сайт будет отображаться в полном размере.

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

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss