Мобильная версия сайта для WordPress

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

Сегодня хочу рассказать о том, как можно сделать мобильную версию сайта с помощью каскадной таблицы. Если возникнет такой вопрос, зачем нужна мобильная версия? Сегодня процент посетителей Интернета, использующие мобильные телефоны, смартфоны, перевалил за 30%. Операторы связи практически половину доходов получают от мобильного трафика, поскольку все больше людей пользуются смартфонами, планшетами, разве разумно упускать столько клиентов? Но далеко не всегда сайт, сверстанный по старым стандартам, корректно отображается на мобильных устройствах, в первую очередь из за ориентации и размера экрана.

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

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

Давайте приступим к делу.

Первым шагом мы подключим таблицу CSS для мобильных устройств. Для этого переходим к установленной теме и открываем файл header.php. Здесь находим стандартное подключение CSS, выглядит оно примерно так:

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

И меняем эти строки на следующие:

<link rel="stylesheet" type="text/css" media="screen and (min-width: 640px)" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" media="screen and (max-width: 640px)" href="<?php bloginfo( 'template_url' ); ?>/mobile-style.css" />

Принцип работы заключаться, в определении размера экрана устройства, с которого происходит просмотр сайта. В новый стандарт HTML5 добавлены специальные параметры –теги, которые позволяют без написания сложных программ — скриптов делать это. То есть, если разрешение больше 640px, то будет активна первая таблица, а ежели меньше, то будет активна вторая таблица. Таким образом, мы поделили сайт на две части, для компьютеров и мобильных устройств. Параметр в 640px – произвольный, вы должны сами определить на каких устройствах какая таблица CSS должна использоваться.

Вторым шагом мы создадим таблицы для мобильной версии. Снова переходим к нашей теме, находим основную таблицу CSS «style.css» и копируем ее в отдельную папку или на рабочий стол (куда вам удобнее) главное скопировать. Затем, переименовав ее в mobile-style (обратите внимание, что мы ранее подключали таблицу для мобильных устройств с именем mobile-style.css. Если вы будете переименовывать совсем в другое имя, то не забываем его менять и в подключении.) перемещаем обратно в нашу тему.

Третий шаг – это основной шаг. Нам предстоит полностью поменять структуру сайта, убрать лишние свойства, изменить размеры и дорабатывать походу дела различные мелочи. Открываем, таблицу созданную нами для мобильных устройств в моем случаи mobile-style.css. И в первую очередь разберемся с основным блокам, в котором находится весь наш сайт. Во многих темах его определяют классом или идентификатором под названием «wrapper», изменим данного блока стили примерно на следующие:

#wrapper {
padding: 0px;
height: auto;
width: 300px;
margin: 0px auto;}

Основным стилям является ширина блока «width», мы зафиксировали его в 300px, я считаю это оптимальный размер. Можно также задать ширину в процентах «100%», но я делаю упор именно на мобильное устройство, поэтому мне плавающая ширина не нужна. Далее мы изменим стиль блока #header приблизительно на такой:

#header {
margin: 0px;
padding: 5px;
height: auto;
width: 100%;
}

Следующим идет «logo» название сайта, выводится внутри блока header, даем такие стили:

#logo {
text-align: center;
display: block;
font-size: 100%
}

Затем навигация, тут немного посложнее, желательно переделать ее в выпадающий список, по сколько пункты меню будут на лазить друг на друга, что не очень хорошо. Есть несколько вариантов решить эту проблему, самый простой, установить специальный плагин, называется WP Mobile Menu. Если плагин — это не ваш вариант, то можно сделать мобильное меню с помощью jQuery, скриптов, но тут стоит повозиться.

Следующий у нас идет центральный блок «content», ему также нужно изменить стили, примерно на такие:

#content {
padding: 10px;
float:none;
height: auto;
width: 100%;
}

Обратите внимание, что мы изменили свойства float: left; или возможно float: right; на float: none;. Таким образом, отменяем обтекание блоков и структура построения сайта теперь будет строиться в один ряд, один за другим.

Последнее, что нам осталось, это доработать мелочи, задать ширину footer’a в процентах, изменить размер шрифта (если нужно будет) и остальное, что не корректно смотрится. По большому счету трудно сказать, что конкретно нужно будет менять, это все делается походу дела. Основное мы разобрали — это главное, также стоит учесть, идентификаторы, которые я приводил в пример — условные. То есть не во всех темах они могут так называться, поэтому советую пользоваться плагином для Mozilla Firebug. Это был один из способов, как создать мобильную версию сайта для WordPress.

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

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

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

E-mail Google+ Twitter
Добавить комментарий
bold quote code