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

Сайтостроение WordSmall

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

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

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

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

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

Мобильная версия сайта.Способ№2

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

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

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-запрос.

Начало.

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

Мобильная версия сайта.Способ№2

Данную структуру можно разбить на три основные блока.

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

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

Мобильная версия сайта.Способ№2

Скачать

— Не забывайте делиться с друзьями в социальных сетях: —

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 21
  • Pawel

    Добрый вечер , такой вопрос : есть Меню когда нажимаешь идёт вертикальное меню в стиле

    меню 1 меню 2 и меню 3 они сразу развёрнуты , как сделать так чтобы при нажатии на кнопку Меню они выходили в свёрнутом виде ? (всё та же тема quadrum-theme ).

    • WordSmall

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

  • Pawel

    Что мне здесь искать для изменения меню в css :

    <div class="boxed">

    '',

    'theme_location' => 'secondary-menu',

    'items_wrap' => '%3$s',

    'depth' => 1,

    «echo» => false,

    );

    if (has_nav_menu ('secondary-menu')) {

    ?>

    <img src=".png" class="weather-icon" alt="« />

    ,

    <a href="»><img src="" alt="« />

    <a href="»>

    <form method="get" action="" name="searchform">

    <input type="text" placeholder="" value="« class=»search-box" name="s" id="s" />

    <a href=""><img src="" alt="« />

    <a href="»>

    • WordSmall

      Pawel, пользуйтесь фаербагом, очень удобный и понятный инструмент.

  • Pawel

    Хорошо, попробую ,

    в этой теме quadrum-premium много css и java.

    Всё равно Спасибо

Добавить комментарий
bold quote code