Доброго времени суток! Наконец-то дошли мои руки до создания мобильной версии моего блога с целью удобного просмотра страниц на мобильных гаджетах! По крайней мере начало есть, что уже неплохо.
К сожалению, пока данная мобильная тема не очень хорошо отображается на маленьких экранах мобильных устройств, и вариант шапки блога тоже не окончательный, поэтому придется еще поработать над этим.
Создавая мобильную версию, я старался сохранить схожесть с немобильной версией, проще говоря облегчил «родную» тему.
При создании мобильной версии блога особых трудностей не возникло, кроме мобильного меню — на него ушло несколько дней!
Теперь расскажу о том, какой я использовал способ для создания мобильной версии блога. Если говорить кратко, то просто сделал копию файла стилей style.css, переименовал в style-mob.css, и в данном файле убрал лишнее, облегчив его, и добавил нужное.
Основные произведенные изменения — это перемещение сайдбара из левой части блога под контент над подвалом, и создание меню.
Теперь подробнее о том, как сделать мобильную версию блога.
Первым делом, что нужно сделать — найти следующую строку кода в файле темы header.php:
1 | <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> |
и заменить на эту:
1 2 | <link rel="stylesheet" type="text/css" media="screen and (min-width: 600px)" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="stylesheet" media="screen and (max-width: 601px)" href="<?php bloginfo( 'template_url' ); ?>/style-mob.css" /> |
Данный код определяет, какое у посетителя устройство — если устройство с шириной экрана меньше 600 пикселей, то подключается файл для мобильной версии style-mob.css, если больше, то загружается обычный файл style.css.
Как Вы могли заметить, в мобильной версии блога отображаются не все элементы, например рекламный баннер в шапке блога, а также иконка Твиттера и RSS.
Так вот, для того, чтобы скрыть ненужные для мобильной версии элементы, добавляем в файл style-mob.css к «ненужному» элементу display:none; Если же наоборот, Вы добавили какой-то элемент в мобильную версию, и не хотите показывать в обычной, то добавьте в «родной» файл style.css элемент и для него также правило display:none;
Теперь затронем самую сложную часть мобильной темы — меню.
Во-первых, пришлось все пункты меню расположить списком по вертикали, а во-вторых — сделать его выпадающим в виде спойлера. Задача непростая, но все же выполнимая.
Очень здорово в создании мобильного меню мне помог урок на сайте Ruseller. Также меню имеет красивый эффект появления JQuery.
Итак, для добавления выпадающего мобильного меню в файл header.php нужно вставить следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ /* Подготавливаем иконку меню */ $('#nav-wrap').prepend('<div id="menu-icon">Меню блога</div>'); /* Переключаем навигацию */ $("#menu-icon").on("click", function(){ $("#nav").slideToggle(); $(this).toggleClass("active"); }); }); </script> |
Непосредственно над самим меню нужно добавить вот это:
1 | <nav id="nav-wrap"></nav> |
В файле style.css прописать следующее:
1 2 3 | nav#nav-wrap { display: none; } |
А в файле style-mob.css прописываем стили для мобильного меню (пример):
1 2 3 4 5 6 7 8 9 10 11 12 | #menu-icon { color: #000; width: auto; height: 30px; background: #4575b4 url(images/icons/menu-icon.png) no-repeat 10px center; padding: 8px 10px 0 42px; cursor: pointer; font-size:18px; font-weight:bold; color: #fff; display: block; } |
Таким образом мы добавляем строчку, которая скрывает под собой остальные пункты мобильного меню:
Повторюсь, что это не окончательный вариант меню — что-то еще будет доделываться и усовершенствоваться. А как Вы сделали мобильную версию свою блога/сайта? Использовали ли плагины, или обошлись без них? Пишите в комментариях!
Очень интересно!
Я так понимаю, нужно еще создать HTML и CSS мобильной версии? А потом прописать что где и когда должно подключаться?
Тема пока для меня актуальная
В моем случае всего лишь мобильный CSS, а в header.php прописать код для подключения (см. пост)
Чет для меня сложно все это
А я пытаюсь осуществить это через Инструменты для веб-мастеров от google. Только не очень получается. Не всё пока что понятно.