Заметки вебмастера-любителя. Теперь и на мобильных устройствах!

Доброго времени суток! Наконец-то дошли мои руки до создания мобильной версии моего блога с целью удобного просмотра страниц на мобильных гаджетах! По крайней мере начало есть, что уже неплохо.

К сожалению, пока данная мобильная тема не очень хорошо отображается на маленьких экранах мобильных устройств, и вариант шапки блога тоже не окончательный, поэтому придется еще поработать над этим.

Создавая мобильную версию, я старался сохранить схожесть с немобильной версией, проще говоря облегчил «родную» тему.

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

Теперь расскажу о том, какой я использовал способ для создания мобильной версии блога. Если говорить кратко, то просто сделал копию файла стилей style.css, переименовал в style-mob.css, и в данном файле убрал лишнее, облегчив его, и добавил нужное.

Основные произведенные изменения — это перемещение сайдбара из левой части блога под контент над подвалом, и создание меню.

Теперь подробнее о том, как сделать мобильную версию блога.

Первым делом, что нужно сделать — найти следующую строку кода в файле темы header.php:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

и заменить на эту:

<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 нужно вставить следующий код:

<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>

Непосредственно над самим меню нужно добавить вот это:

<nav id="nav-wrap"></nav>

В файле style.css прописать следующее:

nav#nav-wrap {
		display: none;
	}

А в файле style-mob.css прописываем стили для мобильного меню (пример):

#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;
	}

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

Повторюсь, что это не окончательный вариант меню — что-то еще будет доделываться и усовершенствоваться. А как Вы сделали мобильную версию свою блога/сайта? Использовали ли плагины, или обошлись без них? Пишите в комментариях!